add demo

README.md

@@ -0,0 +1,4 @@
+# app-template
+
+
+`/system/lib/app.js` 包函的模块是 `QueryRouterServer` 和 `Page` 和 `useConfigKey`

package.json

@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
+    "prepub": "envision switchOrg user",
     "pub": "envision deploy ./dist -k app-template -v 0.0.1"
   },
   "keywords": [],
@@ -14,11 +15,17 @@
   "license": "MIT",
   "type": "module",
   "dependencies": {
+    "@kevisual/query": "0.0.7-alpha.3",
     "dayjs": "^1.11.13",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
+    "@kevisual/router": "0.0.6-alpha-4",
+    "@kevisual/store": "0.0.1-alpha.9",
+    "@kevisual/types": "^0.0.5",
+    "@types/react": "^19.0.2",
     "@vitejs/plugin-basic-ssl": "^1.2.0",
+    "react": "^19.0.0",
     "vite": "^6.0.6"
   }
 }

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@kevisual/query':
+        specifier: 0.0.7-alpha.3
+        version: 0.0.7-alpha.3
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
@@ -15,12 +18,27 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
     devDependencies:
+      '@kevisual/router':
+        specifier: 0.0.6-alpha-4
+        version: 0.0.6-alpha-4
+      '@kevisual/store':
+        specifier: 0.0.1-alpha.9
+        version: 0.0.1-alpha.9(rollup@4.29.1)
+      '@kevisual/types':
+        specifier: ^0.0.5
+        version: 0.0.5
+      '@types/react':
+        specifier: ^19.0.2
+        version: 19.0.2
       '@vitejs/plugin-basic-ssl':
         specifier: ^1.2.0
-        version: 1.2.0(vite@6.0.6)
+        version: 1.2.0(vite@6.0.6(@types/node@22.10.3)(terser@5.37.0))
+      react:
+        specifier: ^19.0.0
+        version: 19.0.0
       vite:
         specifier: ^6.0.6
-        version: 6.0.6
+        version: 6.0.6(@types/node@22.10.3)(terser@5.37.0)
 
 packages:
 
@@ -174,6 +192,48 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@jridgewell/gen-mapping@0.3.8':
+    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/set-array@1.2.1':
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/source-map@0.3.6':
+    resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==}
+
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+
+  '@kevisual/query@0.0.7-alpha.3':
+    resolution: {integrity: sha512-zNTIbyU87dlp8ZeLvPoc1ou7cZCL60to4xptyMD3VKsldL/dDSAMf7JWwUivNiq9lRxk9KVEZA7YX558mzeQcw==}
+
+  '@kevisual/router@0.0.6-alpha-4':
+    resolution: {integrity: sha512-vY56aUr+H/6mgAuIQ6j1TiPOAaXKXCbuBYvzgVvC8ix9yDfAE+trqfVvKIUJwynyW0ZDbZdEcNDPP2rzVu+i1Q==}
+
+  '@kevisual/store@0.0.1-alpha.9':
+    resolution: {integrity: sha512-gREExawynydcfw0UVfLdNnLgGL7G4JgzHSUnzhHihtRHxSKJjzzy2tRaLEEUyKuOSbZ40KL09EaWd7IeHY9sVw==}
+
+  '@kevisual/types@0.0.5':
+    resolution: {integrity: sha512-YjYZ+iYXay1Ncrae1gWBcmTTDaKMBiAoo5ih2x4EDNIdvnrVVEbksGaW/plTXrhmsqDfXarBmVMbpvUqYiATyg==}
+
+  '@rollup/plugin-terser@0.4.4':
+    resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/rollup-android-arm-eabi@4.29.1':
     resolution: {integrity: sha512-ssKhA8RNltTZLpG6/QNkCSge+7mBQGUqJRisZ2MDQcEGaK93QESEgWK2iOpIDZ7k9zPVkG5AS3ksvD5ZWxmItw==}
     cpu: [arm]
@@ -282,12 +342,35 @@ packages:
   '@types/estree@1.0.6':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
+  '@types/node-forge@1.3.11':
+    resolution: {integrity: sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==}
+
+  '@types/node@22.10.3':
+    resolution: {integrity: sha512-DifAyw4BkrufCILvD3ucnuN8eydUfc/C1GlyrnI+LK6543w5/L3VeVgf05o3B4fqSXP1dKYLOZsKfutpxPzZrw==}
+
+  '@types/react@19.0.2':
+    resolution: {integrity: sha512-USU8ZI/xyKJwFTpjSVIrSeHBVAGagkHQKPNbxeWwql/vDmnTIBgx+TJnhFnj1NXgz8XfprU0egV2dROLGpsBEg==}
+
   '@vitejs/plugin-basic-ssl@1.2.0':
     resolution: {integrity: sha512-mkQnxTkcldAzIsomk1UuLfAu9n+kpQ3JbHcpCp7d2Oo6ITtji8pHS3QToOWjhPFvNQSnhlkAjmGbhv2QvwO/7Q==}
     engines: {node: '>=14.21.3'}
     peerDependencies:
       vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
 
+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
+  commander@2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
   dayjs@1.11.13:
     resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
 
@@ -296,6 +379,9 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  eventemitter3@5.0.1:
+    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -309,6 +395,14 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  node-forge@1.3.1:
+    resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==}
+    engines: {node: '>= 6.13.0'}
+
+  path-to-regexp@8.2.0:
+    resolution: {integrity: sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==}
+    engines: {node: '>=16'}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -316,15 +410,50 @@ packages:
     resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
     engines: {node: ^10 || ^12 || >=14}
 
+  randombytes@2.1.0:
+    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
+
+  react@19.0.0:
+    resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==}
+    engines: {node: '>=0.10.0'}
+
   rollup@4.29.1:
     resolution: {integrity: sha512-RaJ45M/kmJUzSWDs1Nnd5DdV4eerC98idtUOVr6FfKcgxqvjwHmxc5upLF9qZU9EpsVzzhleFahrT3shLuJzIw==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  selfsigned@2.4.1:
+    resolution: {integrity: sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==}
+    engines: {node: '>=10'}
+
+  serialize-javascript@6.0.2:
+    resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
+
+  smob@1.5.0:
+    resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  terser@5.37.0:
+    resolution: {integrity: sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  undici-types@6.20.0:
+    resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
+
   vite@6.0.6:
     resolution: {integrity: sha512-NSjmUuckPmDU18bHz7QZ+bTYhRR0iA72cs2QAxCqDpafJ0S6qetco0LB3WW2OxlMHS0JmAv+yZ/R3uPmMyGTjQ==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -365,6 +494,18 @@ packages:
       yaml:
         optional: true
 
+  ws@8.18.0:
+    resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
 snapshots:
 
   '@esbuild/aix-ppc64@0.24.2':
@@ -442,6 +583,60 @@ snapshots:
   '@esbuild/win32-x64@0.24.2':
     optional: true
 
+  '@jridgewell/gen-mapping@0.3.8':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/set-array@1.2.1': {}
+
+  '@jridgewell/source-map@0.3.6':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  '@kevisual/query@0.0.7-alpha.3': {}
+
+  '@kevisual/router@0.0.6-alpha-4':
+    dependencies:
+      path-to-regexp: 8.2.0
+      selfsigned: 2.4.1
+      ws: 8.18.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@kevisual/store@0.0.1-alpha.9(rollup@4.29.1)':
+    dependencies:
+      '@kevisual/router': 0.0.6-alpha-4
+      '@rollup/plugin-terser': 0.4.4(rollup@4.29.1)
+      eventemitter3: 5.0.1
+      path-to-regexp: 8.2.0
+    transitivePeerDependencies:
+      - bufferutil
+      - rollup
+      - utf-8-validate
+
+  '@kevisual/types@0.0.5': {}
+
+  '@rollup/plugin-terser@0.4.4(rollup@4.29.1)':
+    dependencies:
+      serialize-javascript: 6.0.2
+      smob: 1.5.0
+      terser: 5.37.0
+    optionalDependencies:
+      rollup: 4.29.1
+
   '@rollup/rollup-android-arm-eabi@4.29.1':
     optional: true
 
@@ -501,9 +696,29 @@ snapshots:
 
   '@types/estree@1.0.6': {}
 
-  '@vitejs/plugin-basic-ssl@1.2.0(vite@6.0.6)':
+  '@types/node-forge@1.3.11':
     dependencies:
-      vite: 6.0.6
+      '@types/node': 22.10.3
+
+  '@types/node@22.10.3':
+    dependencies:
+      undici-types: 6.20.0
+
+  '@types/react@19.0.2':
+    dependencies:
+      csstype: 3.1.3
+
+  '@vitejs/plugin-basic-ssl@1.2.0(vite@6.0.6(@types/node@22.10.3)(terser@5.37.0))':
+    dependencies:
+      vite: 6.0.6(@types/node@22.10.3)(terser@5.37.0)
+
+  acorn@8.14.0: {}
+
+  buffer-from@1.1.2: {}
+
+  commander@2.20.3: {}
+
+  csstype@3.1.3: {}
 
   dayjs@1.11.13: {}
 
@@ -535,6 +750,8 @@ snapshots:
       '@esbuild/win32-ia32': 0.24.2
       '@esbuild/win32-x64': 0.24.2
 
+  eventemitter3@5.0.1: {}
+
   fsevents@2.3.3:
     optional: true
 
@@ -542,6 +759,10 @@ snapshots:
 
   nanoid@3.3.8: {}
 
+  node-forge@1.3.1: {}
+
+  path-to-regexp@8.2.0: {}
+
   picocolors@1.1.1: {}
 
   postcss@8.4.49:
@@ -550,6 +771,12 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  randombytes@2.1.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  react@19.0.0: {}
+
   rollup@4.29.1:
     dependencies:
       '@types/estree': 1.0.6
@@ -575,12 +802,45 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.29.1
       fsevents: 2.3.3
 
+  safe-buffer@5.2.1: {}
+
+  selfsigned@2.4.1:
+    dependencies:
+      '@types/node-forge': 1.3.11
+      node-forge: 1.3.1
+
+  serialize-javascript@6.0.2:
+    dependencies:
+      randombytes: 2.1.0
+
+  smob@1.5.0: {}
+
   source-map-js@1.2.1: {}
 
-  vite@6.0.6:
+  source-map-support@0.5.21:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
+  source-map@0.6.1: {}
+
+  terser@5.37.0:
+    dependencies:
+      '@jridgewell/source-map': 0.3.6
+      acorn: 8.14.0
+      commander: 2.20.3
+      source-map-support: 0.5.21
+
+  undici-types@6.20.0: {}
+
+  vite@6.0.6(@types/node@22.10.3)(terser@5.37.0):
     dependencies:
       esbuild: 0.24.2
       postcss: 8.4.49
       rollup: 4.29.1
     optionalDependencies:
+      '@types/node': 22.10.3
       fsevents: 2.3.3
+      terser: 5.37.0
+
+  ws@8.18.0: {}

src/h.ts

@@ -0,0 +1,94 @@
+// import { nanoid } from 'nanoid';
+import { RefObject, SyntheticEvent } from 'react';
+const randomId = () => {
+  return crypto.getRandomValues(new Uint32Array(1))[0].toString(16);
+};
+const loadChidren = (element: any, children: any[]) => {
+  children.forEach((child) => {
+    if (typeof child === 'boolean') {
+      return;
+    }
+    if (typeof child === 'function') {
+      // console.log('child', child);
+      return;
+    }
+    if (typeof child === 'undefined') {
+      return;
+    }
+    // console.log('child', child);
+    element.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
+  });
+};
+// 在项目中定义 h 函数
+export function h(type: string | Function, props: any, ...children: any[]): HTMLElement {
+  if (typeof type === 'function') {
+    const element = type(props);
+    loadChidren(element, children);
+    return element;
+  }
+  const element = document.createElement(type);
+  const filterKeys = ['onLoad', 'onUnload', 'key'];
+  const key = props?.key || randomId();
+  Object.entries(props || {}).forEach(([key, value]) => {
+    if (filterKeys.includes(key)) {
+      return;
+    }
+    if (key === 'className') {
+      element.setAttribute('class', value as string);
+      return;
+    }
+    if (key.startsWith('on')) {
+      element.addEventListener(key.slice(2).toLowerCase(), value as EventListener);
+      return;
+    }
+    if (key === 'ref' && value) {
+      (value as any).current = element;
+      return;
+    }
+    if (typeof value === 'object') {
+      console.log('error', element, type, value);
+    } else {
+      element.setAttribute(key, value as string);
+    }
+  });
+  const onLoad = props?.onLoad;
+  const checkConnect = () => {
+    if (element.isConnected) {
+      onLoad?.({ el: element, key, _props: props });
+      // console.log('onLoad', element, key);
+      return true;
+    }
+    return false;
+  };
+  setTimeout(() => {
+    const res = checkConnect();
+    if (!res) {
+      setTimeout(() => {}, 1000);
+    }
+  }, 20);
+
+  loadChidren(element, children);
+  return element;
+}
+
+declare global {
+  namespace JSX {
+    // type Element = HTMLElement; // 将 JSX.Element 设置为 HTMLElement
+    interface Element extends HTMLElement {
+      class?: string;
+    }
+  }
+  namespace React {
+    interface FormEvent<T = Element> extends SyntheticEvent<T> {
+      target: EventTarget & (T extends HTMLInputElement ? HTMLInputElement : T);
+    }
+  }
+}
+
+export const useRef = <T = HTMLDivElement>(initialValue: T | null = null): RefObject<T | null> => {
+  return { current: initialValue };
+};
+
+export const useEffect = (callback: () => void) => {
+  setTimeout(callback, 0);
+};

src/main.ts

@@ -1,9 +1,50 @@
+import { useContextKey } from '@kevisual/store/config';
+import { Page } from '@kevisual/store/page';
+import { QueryRouterServer } from '@kevisual/router';
 export const render = ({ renderRoot }) => {
   renderRoot.innerHTML = `
     <h1>Hello, World!</h1>
   `;
 };
 
-render({
+const page = useContextKey('page', () => {
-  renderRoot: document.getElementById('ai-root'),
+  return new Page({
+    basename: '',
+  });
 });
+
+if (page) {
+  page.addPage('/app-template', 'home');
+  page.subscribe('home', () => {
+    render({
+      renderRoot: document.getElementById('ai-root'),
+    });
+  });
+}
+
+const app = useContextKey('app', () => {
+  console.error('app not found');
+  return null as unknown as QueryRouterServer;
+});
+if (app) {
+  app
+    .route({
+      path: 'app-template',
+      key: 'render',
+    })
+    .define(async (ctx) => {
+      let { renderRoot } = ctx.query;
+      if (!renderRoot) {
+        ctx.throw(404, 'renderRoot is required');
+      }
+      if (typeof renderRoot === 'string') {
+        renderRoot = document.querySelector(renderRoot);
+      }
+      if (!renderRoot) {
+        ctx.throw(404, 'renderRoot not found');
+      }
+      render({
+        renderRoot,
+      });
+    }).addTo(app);
+}

src/modules/query.ts

@@ -0,0 +1,3 @@
+import { QueryClient } from '@kevisual/query';
+
+export const query = new QueryClient();

tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsxFragmentFactory": "Fragment",
+    "jsxFactory": "h",
+    "baseUrl": "./",
+    "typeRoots": [
+      "node_modules/@types",
+      "node_modules/@kevisual/types",
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    /* Linting */
+    "strict": true,
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src",
+    "typings.d.ts"
+  ]
+}

vite.config.mjs

@@ -17,6 +17,13 @@ export default defineConfig({
     DEV_SERVER: JSON.stringify(isDev),
     BUILD_TIME: JSON.stringify(BUILD_TIME),
   },
+  optimizeDeps: {
+    exclude: ['react'], // 排除 react 和 react-dom 以避免打包
+  },
+  // esbuild: {
+  //   jsxFactory: 'h',
+  //   jsxFragment: 'Fragment',
+  // },
   server: {
     port: 6025,
     host: '0.0.0.0',