feat(runtime,playground): vue3使用tmagic-cli生成组件依赖入口

2025-06-10 22:19:23 +08:00 · 2022-08-04 14:26:58 +08:00 · 2022-08-04 14:26:58 +08:00 · a57fef4947
commit a57fef4947
parent abde532654
27 changed files with 276 additions and 328 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -1,4 +1,6 @@
 dist
+admin-dist
+entry-dist
 coverage
 node_modules
 dest
--- a/package.json
+++ b/package.json
@ -18,14 +18,10 @@
    "pg:react": "pnpm playground:react",
    "build": "pnpm --filter \"@tmagic/*\" build",
    "build:runtime:admin": "pnpm --filter \"runtime-*\" build:admin",
-    "build:playground": "pnpm --filter \"runtime-*\" --filter \"tmagic-playground\" build",
-    "postbuild:playground": "shx mkdir playground/dist/runtime && shx cp -r runtime/vue2/dist ./playground/dist/runtime/vue2 && shx cp -r runtime/vue3/dist ./playground/dist/runtime/vue3 && cp -r runtime/react/dist ./playground/dist/runtime/react",
+    "build:playground": "pnpm --filter \"runtime-vue3\" --filter \"tmagic-playground\" build",
+    "postbuild:playground": "shx mkdir playground/dist/runtime && shx cp -r runtime/vue3/dist ./playground/dist/runtime/vue3 && cp -r runtime/vue3/entry-dist/* ./playground/dist/runtime/vue3",
    "docs": "pnpm --filter \"docs\" dev",
    "build:docs": "pnpm --filter \"docs\" build",
-    "page": "cd page && vite",
-    "page-vue2": "cd page-vue2 && vite",
-    "page-react": "cd page-react && vite",
-    "install-vue2": "cd runtime/vue2 && npm i",
    "reinstall": "pnpm clean:all && pnpm bootstrap",
    "test": "vitest run",
    "coverage": "vitest run --coverage",
--- a/playground/src/pages/Editor.vue
+++ b/playground/src/pages/Editor.vue
@ -24,7 +24,7 @@
        v-if="previewVisible"
        width="100%"
        height="817"
-        :src="`${VITE_RUNTIME_PATH}/page.html?localPreview=1&page=${editor?.editorService.get('page').id}`"
+        :src="`${VITE_RUNTIME_PATH}/page/index.html?localPreview=1&page=${editor?.editorService.get('page').id}`"
      ></iframe>
    </el-dialog>
  </div>
@ -135,13 +135,13 @@ export default defineComponent({
      ],
    };

-    asyncLoadJs(`${VITE_RUNTIME_PATH}/assets/config.js`).then(() => {
+    asyncLoadJs(`${VITE_RUNTIME_PATH}/config-entry/index.umd.js`).then(() => {
      propsConfigs.value = (globalThis as any).magicPresetConfigs;
    });
-    asyncLoadJs(`${VITE_RUNTIME_PATH}/assets/value.js`).then(() => {
+    asyncLoadJs(`${VITE_RUNTIME_PATH}/value-entry/index.umd.js`).then(() => {
      propsValues.value = (globalThis as any).magicPresetValues;
    });
-    asyncLoadJs(`${VITE_RUNTIME_PATH}/assets/event.js`).then(() => {
+    asyncLoadJs(`${VITE_RUNTIME_PATH}/event-entry/index.umd.js`).then(() => {
      eventMethodList.value = (globalThis as any).magicPresetEvents;
    });

@ -161,7 +161,7 @@ export default defineComponent({

      previewVisible,

-      runtimeUrl: `${VITE_RUNTIME_PATH}/playground.html`,
+      runtimeUrl: `${VITE_RUNTIME_PATH}/playground/index.html`,

      componentGroupList,

--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -342,7 +342,9 @@ importers:
  packages/ui:
    specifiers:
      '@testing-library/vue': ^6.4.2
+      '@tmagic/core': 1.1.0-beta.5
      '@tmagic/schema': 1.1.0-beta.5
+      '@tmagic/utils': 1.1.0-beta.5
      '@types/qrcode': ^1.4.2
      '@vue/compiler-sfc': ^3.2.37
      '@vue/test-utils': ^2.0.0
@ -351,7 +353,9 @@ importers:
      tiny-emitter: ^2.1.0
      vue: ^3.2.37
    dependencies:
+      '@tmagic/core': link:../core
      '@tmagic/schema': link:../schema
+      '@tmagic/utils': link:../utils
      delegate: 3.2.0
      qrcode: 1.5.0
      tiny-emitter: 2.1.0
@ -364,6 +368,7 @@ importers:

  packages/ui-react:
    specifiers:
+      '@tmagic/core': 1.1.0-beta.5
      '@tmagic/schema': 1.1.0-beta.5
      '@types/react': ^17.0.37
      '@types/react-dom': ^17.0.11
@ -372,6 +377,7 @@ importers:
      react-dom: ^17.0.0
      typescript: ^4.7.4
    dependencies:
+      '@tmagic/core': link:../core
      '@tmagic/schema': link:../schema
      qrcode: 1.5.0
      react: 17.0.2
@ -383,13 +389,17 @@ importers:

  packages/ui-vue2:
    specifiers:
+      '@tmagic/core': 1.1.0-beta.5
      '@tmagic/schema': 1.1.0-beta.5
+      '@tmagic/utils': 1.1.0-beta.5
      qrcode: ^1.5.0
      vite: ^3.0.4
      vue: ^2.7.4
      vue-template-compiler: ^2.7.4
    dependencies:
+      '@tmagic/core': link:../core
      '@tmagic/schema': link:../schema
+      '@tmagic/utils': link:../utils
      qrcode: 1.5.0
      vue: 2.7.4
    devDependencies:
@ -518,10 +528,16 @@ importers:

  runtime/vue3:
    specifiers:
+      '@tmagic/cli': workspace:*
+      '@tmagic/core': 1.1.0-beta.5
      '@tmagic/schema': 1.1.0-beta.5
      '@tmagic/stage': 1.1.0-beta.5
+      '@tmagic/ui': 1.1.0-beta.5
+      '@tmagic/utils': 1.1.0-beta.5
      '@types/node': ^15.12.4
+      '@vitejs/plugin-legacy': ^2.0.0
      '@vitejs/plugin-vue': ^3.0.1
+      '@vitejs/plugin-vue-jsx': ^1.3.10
      '@vue/compiler-sfc': ^3.2.37
      '@vue/test-utils': ^2.0.0
      axios: ^0.25.0
@ -529,14 +545,22 @@ importers:
      rollup: ^2.25.0
      rollup-plugin-external-globals: ^0.6.1
      sass: ^1.35.1
+      terser: ^5.14.2
      typescript: ^4.3.4
      vite: ^3.0.4
      vue: ^3.2.37
      vue-tsc: ^0.38.2
    dependencies:
+      '@tmagic/cli': link:../../packages/cli
+      '@tmagic/core': link:../../packages/core
      '@tmagic/schema': link:../../packages/schema
      '@tmagic/stage': link:../../packages/stage
+      '@tmagic/ui': link:../../packages/ui
+      '@tmagic/utils': link:../../packages/utils
+      '@vitejs/plugin-legacy': 2.0.0_terser@5.14.2+vite@3.0.4
+      '@vitejs/plugin-vue-jsx': 1.3.10
      axios: 0.25.0
+      terser: 5.14.2
      vue: 3.2.37
    devDependencies:
      '@types/node': 15.14.9
@ -548,7 +572,7 @@ importers:
      rollup-plugin-external-globals: 0.6.1_rollup@2.75.5
      sass: 1.52.2
      typescript: 4.7.4
-      vite: 3.0.4_sass@1.52.2
+      vite: 3.0.4_sass@1.52.2+terser@5.14.2
      vue-tsc: 0.38.2_typescript@4.7.4

 packages:
@ -625,7 +649,6 @@ packages:
    engines: {node: '>=6.9.0'}
    dependencies:
      '@babel/types': 7.18.4
-    dev: true

  /@babel/helper-compilation-targets/7.18.2_@babel+core@7.18.2:
    resolution: {integrity: sha512-s1jnPotJS9uQnzFtiZVBUxe67CuBa679oWFHpxYYnTpRL/1ffhyX44R9uYiXoa/pLXcY9H2moJta0iaanlk/rQ==}
@ -655,7 +678,6 @@ packages:
      '@babel/helper-split-export-declaration': 7.16.7
    transitivePeerDependencies:
      - supports-color
-    dev: true

  /@babel/helper-environment-visitor/7.18.2:
    resolution: {integrity: sha512-14GQKWkX9oJzPiQQ7/J36FTXcD4kSp8egKjO9nINlSKiHITRA9q/R74qu8S9xlc/b/yjsJItQUeeh3xnGN0voQ==}
@ -679,7 +701,6 @@ packages:
    engines: {node: '>=6.9.0'}
    dependencies:
      '@babel/types': 7.18.4
-    dev: true

  /@babel/helper-module-imports/7.16.7:
    resolution: {integrity: sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==}
@ -707,12 +728,10 @@ packages:
    engines: {node: '>=6.9.0'}
    dependencies:
      '@babel/types': 7.18.4
-    dev: true

  /@babel/helper-plugin-utils/7.17.12:
    resolution: {integrity: sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==}
    engines: {node: '>=6.9.0'}
-    dev: true

  /@babel/helper-replace-supers/7.18.2:
    resolution: {integrity: sha512-XzAIyxx+vFnrOxiQrToSUOzUOn0e1J2Li40ntddek1Y69AXUTXoDJ40/D5RdjFu7s7qHiaeoTiempZcbuVXh2Q==}
@ -725,7 +744,6 @@ packages:
      '@babel/types': 7.18.4
    transitivePeerDependencies:
      - supports-color
-    dev: true

  /@babel/helper-simple-access/7.18.2:
    resolution: {integrity: sha512-7LIrjYzndorDY88MycupkpQLKS1AFfsVRm2k/9PtKScSy5tZq0McZTj+DiMRynboZfIqOKvo03pmhTaUgiD6fQ==}
@ -779,7 +797,6 @@ packages:
    dependencies:
      '@babel/core': 7.18.2
      '@babel/helper-plugin-utils': 7.17.12
-    dev: true

  /@babel/plugin-syntax-jsx/7.17.12_@babel+core@7.18.2:
    resolution: {integrity: sha512-spyY3E3AURfxh/RHtjx5j6hs8am5NbUBGfcZ2vB3uShSpZdQyXSf5rR5Mk76vbtlAZOelyVQ71Fg0x9SG4fsog==}
@ -789,7 +806,6 @@ packages:
    dependencies:
      '@babel/core': 7.18.2
      '@babel/helper-plugin-utils': 7.17.12
-    dev: true

  /@babel/plugin-syntax-typescript/7.17.12_@babel+core@7.18.2:
    resolution: {integrity: sha512-TYY0SXFiO31YXtNg3HtFwNJHjLsAyIIhAhNWkQ5whPPS7HWUFlg9z0Ta4qAQNjQbP1wsSt/oKkmZ/4/WWdMUpw==}
@ -799,7 +815,6 @@ packages:
    dependencies:
      '@babel/core': 7.18.2
      '@babel/helper-plugin-utils': 7.17.12
-    dev: true

  /@babel/plugin-transform-react-jsx-self/7.17.12_@babel+core@7.18.2:
    resolution: {integrity: sha512-7S9G2B44EnYOx74mue02t1uD8ckWZ/ee6Uz/qfdzc35uWHX5NgRy9i+iJSb2LFRgMd+QV9zNcStQaazzzZ3n3Q==}
@ -833,7 +848,6 @@ packages:
      '@babel/plugin-syntax-typescript': 7.17.12_@babel+core@7.18.2
    transitivePeerDependencies:
      - supports-color
-    dev: true

  /@babel/runtime/7.18.3:
    resolution: {integrity: sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==}
@ -845,7 +859,6 @@ packages:
  /@babel/standalone/7.18.10:
    resolution: {integrity: sha512-0KWHiRX9TUHiWE+dKYYEOIiRJcPwGU6u8Bq/p+ldekj7Kew9PCwl4S4FTSEPpTrn3Vc+r3iRSaN1l9AcGgLx4Q==}
    engines: {node: '>=6.9.0'}
-    dev: true

  /@babel/template/7.16.7:
    resolution: {integrity: sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==}
@ -1318,7 +1331,6 @@ packages:
    dependencies:
      estree-walker: 2.0.2
      picomatch: 2.3.1
-    dev: true

  /@scena/dragscroll/1.1.1:
    resolution: {integrity: sha512-RnoGpQC0aJ5Z+glLzQAAAf1jmRac1yRuil4zi4HQ8GhzoxTqlgplAOGkFF/IRnUMK1uc5S6R/MEEybfyDGlEcQ==}
@ -1693,7 +1705,6 @@ packages:
      systemjs: 6.12.1
      terser: 5.14.2
      vite: 3.0.4_sass@1.52.2+terser@5.14.2
-    dev: true

  /@vitejs/plugin-react-refresh/1.3.6:
    resolution: {integrity: sha512-iNR/UqhUOmFFxiezt0em9CgmiJBdWR+5jGxB2FihaoJfqGt76kiwaKoVOJVU5NYcDWMdN06LbyN2VIGIoYdsEA==}
@ -1721,7 +1732,6 @@ packages:
      hash-sum: 2.0.0
    transitivePeerDependencies:
      - supports-color
-    dev: true

  /@vitejs/plugin-vue/2.3.3_vite@2.9.14+vue@3.2.37:
    resolution: {integrity: sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==}
@ -1788,7 +1798,6 @@ packages:

  /@vue/babel-helper-vue-transform-on/1.0.2:
    resolution: {integrity: sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==}
-    dev: true

  /@vue/babel-plugin-jsx/1.1.1_@babel+core@7.18.2:
    resolution: {integrity: sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==}
@ -1805,7 +1814,6 @@ packages:
    transitivePeerDependencies:
      - '@babel/core'
      - supports-color
-    dev: true

  /@vue/compiler-core/3.2.37:
    resolution: {integrity: sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==}
@ -2611,7 +2619,6 @@ packages:
  /camelcase/6.3.0:
    resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
    engines: {node: '>=10'}
-    dev: true

  /caniuse-lite/1.0.30001349:
    resolution: {integrity: sha512-VFaWW3jeo6DLU5rwdiasosxhYSduJgSGil4cSyX3/85fbctlE58pXAkWyuRmVA0r2RxsOSVYUTZcySJ8WpbTxw==}
@ -2990,7 +2997,6 @@ packages:
  /core-js/3.24.1:
    resolution: {integrity: sha512-0QTBSYSUZ6Gq21utGzkfITDylE8jWC9Ne1D2MrhvlsZBI1x39OdDIVbzSqtgMndIy6BlHxBXpMGqzZmnztg2rg==}
    requiresBuild: true
-    dev: true

  /core-util-is/1.0.3:
    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
@ -4117,7 +4123,6 @@ packages:

  /function-bind/1.1.1:
    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
-    dev: true

  /function.prototype.name/1.1.5:
    resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==}
@ -4383,7 +4388,6 @@ packages:
    engines: {node: '>= 0.4.0'}
    dependencies:
      function-bind: 1.1.1
-    dev: true

  /hash-sum/2.0.0:
    resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
@ -4430,7 +4434,6 @@ packages:
  /html-tags/3.2.0:
    resolution: {integrity: sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==}
    engines: {node: '>=8'}
-    dev: true

  /http-proxy-agent/5.0.0:
    resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
@ -4497,7 +4500,6 @@ packages:

  /immutable/4.1.0:
    resolution: {integrity: sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==}
-    dev: true

  /import-fresh/3.3.0:
    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
@ -4601,7 +4603,6 @@ packages:
    resolution: {integrity: sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==}
    dependencies:
      has: 1.0.3
-    dev: true

  /is-date-object/1.0.5:
    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
@ -5092,7 +5093,6 @@ packages:
    engines: {node: '>=12'}
    dependencies:
      sourcemap-codec: 1.4.8
-    dev: true

  /make-dir/3.1.0:
    resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
@ -5568,7 +5568,6 @@ packages:

  /path-parse/1.0.7:
    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: true

  /path-type/3.0.0:
    resolution: {integrity: sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==}
@ -5916,7 +5915,6 @@ packages:

  /regenerator-runtime/0.13.9:
    resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==}
-    dev: true

  /regexp.prototype.flags/1.4.3:
    resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==}
@ -5986,7 +5984,6 @@ packages:
      is-core-module: 2.9.0
      path-parse: 1.0.7
      supports-preserve-symlinks-flag: 1.0.0
-    dev: true

  /restore-cursor/2.0.0:
    resolution: {integrity: sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==}
@ -6044,7 +6041,6 @@ packages:
    hasBin: true
    optionalDependencies:
      fsevents: 2.3.2
-    dev: true

  /run-async/2.4.1:
    resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
@ -6087,7 +6083,6 @@ packages:
      chokidar: 3.5.3
      immutable: 4.1.0
      source-map-js: 1.0.2
-    dev: true

  /sass/1.53.0:
    resolution: {integrity: sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==}
@ -6427,11 +6422,9 @@ packages:
  /supports-preserve-symlinks-flag/1.0.0:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
    engines: {node: '>= 0.4'}
-    dev: true

  /svg-tags/1.0.0:
    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
-    dev: true

  /symbol-tree/3.2.4:
    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
@ -6439,7 +6432,6 @@ packages:

  /systemjs/6.12.1:
    resolution: {integrity: sha512-hqTN6kW+pN6/qro6G9OZ7ceDQOcYno020zBQKpZQLsJhYTDMCMNfXi/Y8duF5iW+4WWZr42ry0MMkcRGpbwG2A==}
-    dev: true

  /table/6.8.0:
    resolution: {integrity: sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==}
@ -6874,7 +6866,6 @@ packages:
      terser: 5.14.2
    optionalDependencies:
      fsevents: 2.3.2
-    dev: true

  /vitest/0.14.1_c8@7.11.3+jsdom@19.0.0:
    resolution: {integrity: sha512-2UUm6jYgkwh7Y3VKSRR8OuaNCm+iA5LPDnal7jyITN39maZK9L+JVxqjtQ39PSFo5Fl3/BgaJvER6GGHX9JLxg==}
--- a/runtime/vue3/.env.admin
+++ b/runtime/vue3/.env.admin
@ -1,2 +0,0 @@
-BASE=/runtime
-OUT_DIR=admin-dist
--- a/runtime/vue3/.gitignore
+++ b/runtime/vue3/.gitignore
@ -1,5 +1,3 @@
-comp-entry.ts
-config-entry.ts
-value-entry.ts
-event-entry.ts
+.tmagic
 admin-dist
+entry-dist
--- a/runtime/vue3/build.vite.config.ts
+++ b/runtime/vue3/build.vite.config.ts
@ -0,0 +1,78 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import path from 'path';
+
+import { defineConfig } from 'vite';
+import legacy from '@vitejs/plugin-legacy';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+// @ts-ignore
+import externalGlobals from 'rollup-plugin-external-globals';
+
+export default defineConfig(({ mode }) => {
+  if (['value', 'config', 'event'].includes(mode)) {
+    const capitalToken = mode.charAt(0).toUpperCase() + mode.slice(1);
+    return {
+      build: {
+        cssCodeSplit: false,
+        sourcemap: true,
+        minify: false,
+        target: 'esnext',
+        outDir: `entry-dist/${mode}-entry`,
+
+        lib: {
+          entry: `.tmagic/${mode}-entry.ts`,
+          name: `magicPreset${capitalToken}s`,
+          fileName: 'index',
+          formats: ['umd'],
+        },
+      },
+    };
+  }
+
+  if (['page', 'playground', 'page:admin', 'playground:admin'].includes(mode)) {
+    const [type, isAdmin] = mode.split(':');
+    const base = isAdmin ? `/runtime/${type}/` : `/tmagic-editor/playground/runtime/vue3/${type}`;
+    const outDir = isAdmin
+      ? path.resolve(process.cwd(), `./admin-dist/${type}`)
+      : path.resolve(process.cwd(), `./dist/${type}`);
+    return {
+      plugins: [
+        vue(),
+        vueJsx(),
+        legacy({
+          targets: ['defaults', 'not IE 11'],
+        }),
+        externalGlobals({ vue: 'Vue' }, { exclude: [`./${type}/index.html`] }),
+      ],
+
+      root: `./${type}/`,
+
+      base,
+
+      build: {
+        emptyOutDir: true,
+        sourcemap: true,
+        outDir,
+      },
+    };
+  }
+
+  return {};
+});
--- a/runtime/vue3/dev.vite.config.ts
+++ b/runtime/vue3/dev.vite.config.ts
@ -0,0 +1,63 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import path from 'path';
+
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+
+export default defineConfig({
+  plugins: [vue(), vueJsx()],
+
+  resolve: {
+    alias: [
+      { find: /^vue$/, replacement: path.join(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js') },
+      { find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../packages/utils/src/index.ts') },
+      { find: /^@tmagic\/core/, replacement: path.join(__dirname, '../../packages/core/src/index.ts') },
+      { find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') },
+    ],
+  },
+
+  root: './',
+
+  base: '/tmagic-editor/playground/runtime/vue3/',
+
+  publicDir: 'entry-dist',
+
+  server: {
+    host: '0.0.0.0',
+    port: 8078,
+  },
+
+  build: {
+    sourcemap: true,
+
+    cssCodeSplit: false,
+
+    rollupOptions: {
+      input: {
+        page: './page/index.html',
+        playground: './playground/index.html',
+      },
+      output: {
+        entryFileNames: 'assets/[name].js',
+      },
+    },
+  },
+});
--- a/runtime/vue3/package.json
+++ b/runtime/vue3/package.json
@ -3,18 +3,29 @@
  "version": "1.1.0-beta.5",
  "private": true,
  "scripts": {
-    "dev": "npm run entry && npm run build:lib & npm run dev:html",
-    "build": "npm run entry && vite build",
-    "build:admin": "npm run entry && vite build --mode admin",
-    "serve": "vite preview",
-    "entry": "node scripts/build.js",
-    "build:lib": "vite build --mode lib",
-    "dev:html": "vite --port 8078"
+    "dev": "npm run build:libs && vite --config dev.vite.config.ts",
+    "build": "npm run build:libs & npm run build:page && npm run build:playground",
+    "build:admin": "npm run build:libs & npm run build:page:admin && npm run build:playground:admin",
+    "build:page": "vite build --config build.vite.config.ts --mode page",
+    "build:playground": "vite build --config build.vite.config.ts --mode playground",
+    "build:page:admin": "vite build --config build.vite.config.ts --mode page:admin",
+    "build:playground:admin": "vite build --config build.vite.config.ts --mode playground:admin",
+    "build:libs": "tmagic entry && npm run build:config & npm run build:value & npm run build:event",
+    "build:config": "vite build --config build.vite.config.ts --mode config",
+    "build:value": "vite build --config build.vite.config.ts --mode value",
+    "build:event": "vite build --config build.vite.config.ts --mode event"
  },
  "dependencies": {
+    "@tmagic/cli": "workspace:*",
+    "@tmagic/core": "1.1.0-beta.5",
+    "@tmagic/ui": "1.1.0-beta.5",
    "@tmagic/schema": "1.1.0-beta.5",
    "@tmagic/stage": "1.1.0-beta.5",
+    "@tmagic/utils": "1.1.0-beta.5",
+    "@vitejs/plugin-legacy": "^2.0.0",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
    "axios": "^0.25.0",
+    "terser": "^5.14.2",
    "vue": "^3.2.37"
  },
  "devDependencies": {
--- a/runtime/vue3/page.html
+++ b/runtime/vue3/page.html
@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vue3 Page</title>
-    <script src="https://unpkg.com/vue@next/dist/vue.runtime.global.js"></script>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/page/main.ts"></script>
-  </body>
-</html>
--- a/runtime/vue3/src/page/App.vue
+++ b/runtime/vue3/src/page/App.vue
@ -20,22 +20,3 @@ export default defineComponent({
  },
 });
 </script>
-
-<style lang="scss">
-html,
-body,
-#app {
-  width: 100%;
-  height: 100%;
-}
-
-#app {
-  position: relative;
-  overflow: auto;
-}
-
-#app::-webkit-scrollbar {
-  width: 0 !important;
-  display: none;
-}
-</style>
--- a/runtime/vue3/page/index.html
+++ b/runtime/vue3/page/index.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue3 Page</title>
+    <style>
+      html,
+      body,
+      #app {
+        width: 100%;
+        height: 100%;
+      }
+
+      #app {
+        position: relative;
+        overflow: auto;
+      }
+
+      #app::-webkit-scrollbar {
+        width: 0 !important;
+        display: none;
+      }
+    </style>
+    <script src="https://unpkg.com/vue@next/dist/vue.runtime.global.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
--- a/runtime/vue3/src/page/main.ts
+++ b/runtime/vue3/src/page/main.ts
@ -21,21 +21,22 @@ import { createApp } from 'vue';
 import Core from '@tmagic/core';
 import { getUrlParam } from '@tmagic/utils';

-import entry from '../comp-entry';
-import { getLocalConfig } from '../utils';
-import request from '../utils/request';
+import components from '../.tmagic/comp-entry';
+import plugins from '../.tmagic/plugin-entry';

+import request from './utils/request';
 import AppComponent from './App.vue';
+import { getLocalConfig } from './utils';

 const magicApp = createApp(AppComponent);

 magicApp.use(request);

-Object.values(entry.components).forEach((component: any) => {
+Object.values(components).forEach((component: any) => {
  magicApp.component(component.name, component);
 });

-Object.values(entry.plugins).forEach((plugin: any) => {
+Object.values(plugins).forEach((plugin: any) => {
  magicApp.use(plugin);
 });

--- a/runtime/vue3/page/shims-vue.d.ts
+++ b/runtime/vue3/page/shims-vue.d.ts
--- a/runtime/vue3/page/utils/index.ts
+++ b/runtime/vue3/page/utils/index.ts
--- a/runtime/vue3/page/utils/request.ts
+++ b/runtime/vue3/page/utils/request.ts
--- a/runtime/vue3/src/playground/App.vue
+++ b/runtime/vue3/src/playground/App.vue
@ -106,29 +106,3 @@ export default defineComponent({
  },
 });
 </script>
-
-<style lang="scss">
-::-webkit-scrollbar {
-  width: 0;
-}
-
-html,
-body,
-#app {
-  width: 100%;
-  height: 100%;
-}
-
-#app {
-  position: relative;
-  overflow: auto;
-}
-
-.magic-ui-container {
-  background-color: rgba(136, 136, 136, 0.5);
-}
-
-.action-area {
-  background-color: rgba(51, 153, 255, 0.5) !important;
-}
-</style>
--- a/runtime/vue3/playground/index.html
+++ b/runtime/vue3/playground/index.html
@ -6,16 +6,35 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3 Playground</title>
  <style>
-    html{-ms-overflow-style: none; overflow: -moz-scrollbars-none;}
-    html,body {height: 100%; margin: 0; padding: 0}
-    body {
-      height: fit-content;
-      min-height: 100%;
-    }
-    html::-webkit-scrollbar, .body::-webkit-scrollbar { width: 0 !important }
+    html,body {margin: 0; padding: 0}
+
    .magic-ui-page {
      overflow: hidden;
    }
+
+    ::-webkit-scrollbar {
+      width: 0;
+    }
+
+    html,
+    body,
+    #app {
+      width: 100%;
+      height: 100%;
+    }
+
+    #app {
+      position: relative;
+      overflow: auto;
+    }
+
+    .magic-ui-container {
+      background-color: rgba(136, 136, 136, 0.5);
+    }
+
+    .action-area {
+      background-color: rgba(51, 153, 255, 0.5) !important;
+    }
  </style>
 </head>
 <body style="font-size: 14px">
@ -24,6 +43,6 @@

  <script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>

-  <script type="module" src="/src/playground/main.ts"></script>
+  <script type="module" src="./main.ts"></script>
 </body>
 </html>
--- a/runtime/vue3/src/playground/main.ts
+++ b/runtime/vue3/src/playground/main.ts
@ -20,15 +20,14 @@ import { createApp } from 'vue';

 import App from './App.vue';

-import('../comp-entry').then((entry) => {
-  const { components, plugins } = entry.default;
+Promise.all([import('../.tmagic/comp-entry'), import('../.tmagic/plugin-entry')]).then(([components, plugins]) => {
  const magicApp = createApp(App);

-  Object.values(components).forEach((component: any) => {
+  Object.values(components.default).forEach((component: any) => {
    magicApp.component(component.name, component);
  });

-  Object.values(plugins).forEach((plugin: any) => {
+  Object.values(plugins.default).forEach((plugin: any) => {
    magicApp.use(plugin);
  });

--- a/runtime/vue3/playground/shims-vue.d.ts
+++ b/runtime/vue3/playground/shims-vue.d.ts
@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
--- a/runtime/vue3/scripts/build.js
+++ b/runtime/vue3/scripts/build.js
@ -1,22 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const generateEntry = require('../../scripts/generateEntry');
-const units = require('./units');
-
-generateEntry({ type: 'build', componentFileAffix: '.vue', units, workingDir: __dirname });
--- a/runtime/vue3/scripts/dev.js
+++ b/runtime/vue3/scripts/dev.js
@ -1,22 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const generateEntry = require('../../scripts/generateEntry');
-const units = require('./units');
-
-generateEntry({ type: 'dev', componentFileAffix: '.vue', units, workingDir: __dirname });
--- a/runtime/vue3/scripts/units.js
+++ b/runtime/vue3/scripts/units.js
@ -1,25 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const path = require('path');
-
-const units = {
-  ui: path.join(__dirname, '../../../packages/ui/src/index.ts'),
-};
-
-module.exports = units;
--- a/runtime/vue3/src/index.d.ts
+++ b/runtime/vue3/src/index.d.ts
@ -1,28 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { MApp } from '@tmagic/schema';
-
-declare global {
-  interface Window {
-    magicDSL: MApp[];
-    magicPresetComponents: any;
-    magicPresetConfigs: any;
-    magicPresetValues: any;
-  }
-}
--- a/runtime/vue3/src/vite-env.d.ts
+++ b/runtime/vue3/src/vite-env.d.ts
@ -1 +0,0 @@
-/// <reference types="vite/client" />
--- a/runtime/vue3/tmagic.config.ts
+++ b/runtime/vue3/tmagic.config.ts
@ -0,0 +1,8 @@
+import path from 'path';
+
+import { defineConfig } from '@tmagic/cli';
+
+export default defineConfig({
+  packages: [path.join(__dirname, '../../packages/ui')],
+  componentFileAffix: '.vue',
+});
--- a/runtime/vue3/vite.config.ts
+++ b/runtime/vue3/vite.config.ts
@ -1,97 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import path from 'path';
-
-import { defineConfig, loadEnv } from 'vite';
-import vue from '@vitejs/plugin-vue';
-// @ts-ignore
-import vueJsx from '@vitejs/plugin-vue-jsx';
-// @ts-ignore
-import externalGlobals from 'rollup-plugin-external-globals';
-
-export default defineConfig(({ command, mode }) => {
-  const { WATCH_INCLUDE = '', BASE, OUT_DIR } = loadEnv(mode, process.cwd(), '');
-  const libInput = {
-    config: './src/config-entry.ts',
-    value: './src/value-entry.ts',
-    event: './src/event-entry.ts',
-  };
-
-  const htmlInput = {
-    page: './page.html',
-    playground: './playground.html',
-  };
-
-  const devInput = mode === 'lib' ? libInput : htmlInput;
-
-  const buildConfig = {
-    outDir: OUT_DIR || 'dist',
-
-    sourcemap: true,
-
-    cssCodeSplit: false,
-
-    rollupOptions: {
-      input:
-        command === 'build' && mode !== 'lib'
-          ? {
-              ...htmlInput,
-              ...libInput,
-            }
-          : devInput,
-      output: {
-        entryFileNames: 'assets/[name].js',
-      },
-    },
-  };
-
-  if (mode === 'lib') {
-    return {
-      build: {
-        ...buildConfig,
-        watch: {
-          include: WATCH_INCLUDE.split(','),
-        },
-      },
-    };
-  }
-
-  return {
-    base: BASE || '/tmagic-editor/playground/runtime/vue3',
-
-    plugins: [vue(), vueJsx(), externalGlobals({ vue: 'Vue' }, { exclude: ['page.html', 'playground.html'] })],
-
-    resolve: {
-      alias: [
-        { find: /^vue$/, replacement: path.join(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js') },
-        { find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../packages/utils/src/index.ts') },
-        { find: /^@tmagic\/core/, replacement: path.join(__dirname, '../../packages/core/src/index.ts') },
-        { find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') },
-      ],
-    },
-
-    publicDir: command === 'serve' ? 'dist' : 'public',
-
-    server: {
-      host: '0.0.0.0',
-    },
-
-    build: buildConfig,
-  };
-});