feat(runtime): vue2/react使用tamgic-cli生成组件依赖入口

package.json

@@ -5,7 +5,7 @@
   "packageManager": "pnpm@7.1.9",
   "scripts": {
     "bootstrap": "pnpm i && pnpm build",
-    "clean:top": "rimraf */**/dist */dist coverage dwt*",
+    "clean:top": "rimraf */**/dist */**/admin-dist */**/entry-dist */dist coverage dwt*",
     "clean:modules": "rimraf node_modules **/node_modules **/**/node_modules",
     "clean:all": "pnpm clean:top && pnpm clean:modules",
     "lint": "eslint . --ext .js,.vue,.ts,.tsx",

packages/ui-vue2/src/button/Button.vue

@@ -6,7 +6,7 @@
   </button>
 </template>
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, PropType, reactive } from 'vue';
+import { computed, defineComponent, getCurrentInstance, PropType, ref } from 'vue';
 
 import type { MComponent } from '@tmagic/schema';
 
@@ -28,14 +28,14 @@ export default defineComponent({
   setup(props) {
     useApp(props);
     const vm = getCurrentInstance()?.proxy;
-    const actions = reactive<Function[]>([]);
+    const actions = ref<Function[]>([]);
     const actualActions = computed(() => [
       typeof props.config.preAction === 'function' ? props.config.preAction : () => true,
-      ...actions,
+      ...actions.value,
       typeof props.config.postAction === 'function' ? props.config.postAction : () => true,
     ]);
     function pushAction(action: Function): void {
-      actions.push(action);
+      actions.value.push(action);
     }
     async function clickHandler(): Promise<void> {
       for (const fn of actualActions.value) {

pnpm-lock.yaml

@@ -474,56 +474,82 @@ importers:
 
   runtime/react:
     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-react': 1.1.0-beta.5
+      '@tmagic/utils': 1.1.0-beta.5
       '@types/react': ^17.0.37
       '@types/react-dom': ^17.0.11
+      '@vitejs/plugin-legacy': ^2.0.0
       '@vitejs/plugin-react-refresh': ^1.3.1
+      axios: ^0.25.0
       react: ^17.0.2
       react-dom: ^17.0.2
       recast: ^0.20.4
+      terser: ^5.14.2
       typescript: ^4.7.4
       vite: ^3.0.4
     dependencies:
+      '@tmagic/cli': link:../../packages/cli
+      '@tmagic/core': link:../../packages/core
       '@tmagic/schema': link:../../packages/schema
       '@tmagic/stage': link:../../packages/stage
+      '@tmagic/ui-react': link:../../packages/ui-react
+      '@tmagic/utils': link:../../packages/utils
+      axios: 0.25.0
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
+      terser: 5.14.2
     devDependencies:
       '@types/react': 17.0.45
       '@types/react-dom': 17.0.17
+      '@vitejs/plugin-legacy': 2.0.0_terser@5.14.2+vite@3.0.4
       '@vitejs/plugin-react-refresh': 1.3.6
       recast: 0.20.5
       typescript: 4.7.4
-      vite: 3.0.4
+      vite: 3.0.4_terser@5.14.2
 
   runtime/vue2:
     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-vue2': 1.1.0-beta.5
+      '@tmagic/utils': 1.1.0-beta.5
       '@types/events': ^3.0.0
+      '@vitejs/plugin-legacy': ^2.0.0
       '@vitejs/plugin-vue2': ^1.1.2
-      axios: ^0.27.2
+      axios: ^0.25.0
       recast: ^0.20.4
       rollup: ^2.25.0
       rollup-plugin-external-globals: ^0.6.1
       sass: ^1.35.1
+      terser: ^5.14.2
       vite: ^3.0.4
       vue: ^2.7.4
       vue-template-compiler: ^2.7.4
     dependencies:
+      '@tmagic/cli': link:../../packages/cli
+      '@tmagic/core': link:../../packages/core
       '@tmagic/schema': link:../../packages/schema
       '@tmagic/stage': link:../../packages/stage
+      '@tmagic/ui-vue2': link:../../packages/ui-vue2
+      '@tmagic/utils': link:../../packages/utils
+      axios: 0.25.0
+      terser: 5.14.2
       vue: 2.7.4
     devDependencies:
       '@types/events': 3.0.0
+      '@vitejs/plugin-legacy': 2.0.0_terser@5.14.2+vite@3.0.4
       '@vitejs/plugin-vue2': 1.1.2_vite@3.0.4+vue@2.7.4
-      axios: 0.27.2
       recast: 0.20.5
       rollup: 2.75.5
       rollup-plugin-external-globals: 0.6.1_rollup@2.75.5
       sass: 1.52.2
-      vite: 3.0.4_sass@1.52.2
+      vite: 3.0.4_sass@1.52.2+terser@5.14.2
       vue-template-compiler: 2.7.4
 
   runtime/vue3:
@@ -1704,7 +1730,7 @@ packages:
       regenerator-runtime: 0.13.9
       systemjs: 6.12.1
       terser: 5.14.2
-      vite: 3.0.4_sass@1.52.2+terser@5.14.2
+      vite: 3.0.4_terser@5.14.2
 
   /@vitejs/plugin-react-refresh/1.3.6:
     resolution: {integrity: sha512-iNR/UqhUOmFFxiezt0em9CgmiJBdWR+5jGxB2FihaoJfqGt76kiwaKoVOJVU5NYcDWMdN06LbyN2VIGIoYdsEA==}
@@ -1762,7 +1788,7 @@ packages:
       vite: '>=2.5.10'
       vue: ^2.7.0-0
     dependencies:
-      vite: 3.0.4_sass@1.52.2
+      vite: 3.0.4_sass@1.52.2+terser@5.14.2
       vue: 2.7.4
     dev: true
 
@@ -2492,15 +2518,6 @@ packages:
       - debug
     dev: false
 
-  /axios/0.27.2:
-    resolution: {integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==}
-    dependencies:
-      follow-redirects: 1.15.1
-      form-data: 4.0.0
-    transitivePeerDependencies:
-      - debug
-    dev: true
-
   /balanced-match/1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
@@ -4067,6 +4084,7 @@ packages:
     peerDependenciesMeta:
       debug:
         optional: true
+    dev: false
 
   /foreground-child/2.0.0:
     resolution: {integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==}
@@ -4500,6 +4518,7 @@ 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==}
@@ -6083,6 +6102,7 @@ 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==}
@@ -6866,6 +6886,34 @@ packages:
       terser: 5.14.2
     optionalDependencies:
       fsevents: 2.3.2
+    dev: true
+
+  /vite/3.0.4_terser@5.14.2:
+    resolution: {integrity: sha512-NU304nqnBeOx2MkQnskBQxVsa0pRAH5FphokTGmyy8M3oxbvw7qAXts2GORxs+h/2vKsD+osMhZ7An6yK6F1dA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.14.49
+      postcss: 8.4.14
+      resolve: 1.22.1
+      rollup: 2.77.0
+      terser: 5.14.2
+    optionalDependencies:
+      fsevents: 2.3.2
 
   /vitest/0.14.1_c8@7.11.3+jsdom@19.0.0:
     resolution: {integrity: sha512-2UUm6jYgkwh7Y3VKSRR8OuaNCm+iA5LPDnal7jyITN39maZK9L+JVxqjtQ39PSFo5Fl3/BgaJvER6GGHX9JLxg==}

runtime/react/.env.admin

@@ -1,2 +0,0 @@
-BASE=/runtime
-OUT_DIR=admin-dist

runtime/react/.gitignore

@@ -1,5 +1,3 @@
-comp-entry.ts
-config-entry.ts
-value-entry.ts
-event-entry.ts
+.tmagic
 admin-dist
+entry-dist

runtime/react/build.vite.config.ts

@@ -0,0 +1,73 @@
+/*
+ * 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 reactRefresh from '@vitejs/plugin-react-refresh';
+
+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/react/${type}`;
+    const outDir = isAdmin
+      ? path.resolve(process.cwd(), `./admin-dist/${type}`)
+      : path.resolve(process.cwd(), `./dist/${type}`);
+    return {
+      plugins: [
+        reactRefresh(),
+        legacy({
+          targets: ['defaults', 'not IE 11'],
+        }),
+      ],
+
+      root: `./${type}/`,
+
+      base,
+
+      build: {
+        emptyOutDir: true,
+        sourcemap: true,
+        outDir,
+      },
+    };
+  }
+
+  return {};
+});

runtime/react/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 reactRefresh from '@vitejs/plugin-react-refresh';
+
+export default defineConfig({
+  plugins: [reactRefresh()],
+
+  resolve: {
+    alias: [
+      { find: /^react$/, replacement: path.join(__dirname, 'node_modules/react/index.js') },
+      { find: /^react-dom$/, replacement: path.join(__dirname, 'node_modules/react-dom/index.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/react/',
+
+  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',
+      },
+    },
+  },
+});

runtime/react/package.json

@@ -3,17 +3,27 @@
   "version": "1.1.0-beta.5",
   "private": true,
   "scripts": {
-    "dev:react": "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:react": "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-react": "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",
+    "axios": "^0.25.0",
+    "terser": "^5.14.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
@@ -24,6 +34,7 @@
   "devDependencies": {
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
+    "@vitejs/plugin-legacy": "^2.0.0",
     "@vitejs/plugin-react-refresh": "^1.3.1",
     "recast": "^0.20.4",
     "typescript": "^4.7.4",

runtime/react/page.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Page</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/page/main.tsx"></script>
-  </body>
-</html>

runtime/react/page/App.tsx

@@ -22,8 +22,6 @@ import Core from '@tmagic/core';
 import type { Page } from '@tmagic/schema';
 import { AppContent } from '@tmagic/ui-react';
 
-import './App.css';
-
 function App() {
   const app = useContext<Core | undefined>(AppContent);
 

runtime/react/page/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Page</title>
+    <style>
+      html,
+      body,
+      #app {
+        width: 100%;
+        height: 100%;
+      }
+
+      #app {
+        position: relative;
+        overflow: auto;
+      }
+
+      #app::-webkit-scrollbar {
+        width: 0 !important;
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

runtime/react/page/main.tsx

@@ -24,7 +24,8 @@ import type { MApp } from '@tmagic/schema';
 import { AppContent } from '@tmagic/ui-react';
 import { getUrlParam } from '@tmagic/utils';
 
-import entry from '../comp-entry';
+import components from '../.tmagic/comp-entry';
+import plugins from '../.tmagic/plugin-entry';
 
 import App from './App';
 declare global {
@@ -54,7 +55,10 @@ const app = new Core({
   curPage: getUrlParam('page'),
 });
 
-Object.keys(entry.components).forEach((type: string) => app.registerComponent(type, entry.components[type]));
+Object.keys(components).forEach((type: string) => app.registerComponent(type, components[type]));
+Object.values(plugins).forEach((plugin: any) => {
+  plugin.install(app);
+});
 
 ReactDOM.render(
   <React.StrictMode>

runtime/react/playground.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" style="font-size: 100px">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>React 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 }
-    .magic-ui-page {
-      overflow: hidden;
-    }
-  </style>
-</head>
-<body style="font-size: 14px">
-  
-  <div id="root"></div>
-
-  <script type="module" src="/src/playground/main.tsx"></script>
-</body>
-</html>

runtime/react/playground/App.tsx

@@ -19,11 +19,9 @@
 import React, { useContext } from 'react';
 
 import Core from '@tmagic/core';
-import type { Page } from '@tmagic/schema';
+import type { MPage } from '@tmagic/schema';
 import { AppContent } from '@tmagic/ui-react';
 
-import './App.css';
-
 function App() {
   const app = useContext<Core | undefined>(AppContent);
 
@@ -33,7 +31,7 @@ function App() {
 
   const MagicUiPage = app.resolveComponent('page');
 
-  return <MagicUiPage config={app?.page?.data as Page}></MagicUiPage>;
+  return <MagicUiPage config={app?.page?.data as MPage}></MagicUiPage>;
 }
 
 export default App;

runtime/react/playground/index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" style="font-size: 100px">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>React Playground</title>
+  <style>
+     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">
+  
+  <div id="root"></div>
+
+  <script type="module" src="./main.tsx"></script>
+</body>
+</html>

runtime/react/playground/main.tsx

@@ -0,0 +1,121 @@
+/*
+ * 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 React from 'react';
+import ReactDOM from 'react-dom';
+
+import Core from '@tmagic/core';
+import type { MApp } from '@tmagic/schema';
+import type { RemoveData, SortEventData, UpdateData } from '@tmagic/stage';
+import { AppContent } from '@tmagic/ui-react';
+
+import components from '../.tmagic/comp-entry';
+import plugins from '../.tmagic/plugin-entry';
+
+import App from './App';
+
+const app = new Core({
+  config: {},
+  platform: 'editor',
+});
+
+let curPageId = '';
+
+const updateConfig = (root: MApp) => {
+  app?.setConfig(root);
+  renderDom();
+};
+
+const renderDom = () => {
+  ReactDOM.render(
+    <React.StrictMode>
+      <AppContent.Provider value={app}>
+        <App />
+      </AppContent.Provider>
+    </React.StrictMode>,
+    document.getElementById('root'),
+  );
+
+  setTimeout(() => {
+    // @ts-ignore
+    window.magic.onPageElUpdate(document.querySelector('.magic-ui-page'));
+  });
+};
+
+const operations = {
+  getApp() {
+    return app;
+  },
+
+  updateRootConfig(root: MApp) {
+    console.log('update root config', root);
+    app?.setConfig(root);
+  },
+
+  updatePageId(id: string) {
+    console.log('update page id', id);
+    curPageId = id;
+    app?.setPage(curPageId);
+    renderDom();
+  },
+
+  getSnapElementQuerySelector() {
+    return '[class*=magic-ui][id]';
+  },
+
+  select(id: string) {
+    console.log('select config', id);
+    const el = document.getElementById(id);
+    if (el) return el;
+    // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(document.getElementById(id));
+      }, 0);
+    });
+  },
+
+  add({ root }: UpdateData) {
+    console.log('add config', root);
+    updateConfig(root);
+  },
+
+  update({ root }: UpdateData) {
+    console.log('update config', root);
+    updateConfig(root);
+  },
+
+  sortNode({ root }: SortEventData) {
+    console.log('sort config', root);
+    updateConfig(root);
+  },
+
+  remove({ root }: RemoveData) {
+    console.log('remove config', root);
+    updateConfig(root);
+  },
+};
+
+Object.keys(components).forEach((type: string) => app.registerComponent(type, components[type]));
+
+Object.values(plugins).forEach((plugin: any) => {
+  plugin.install(app);
+});
+
+// @ts-ignore
+window.magic?.onRuntimeReady(operations);

runtime/react/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: '.tsx', units, workingDir: __dirname });

runtime/react/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: '.tsx', units, workingDir: __dirname });

runtime/react/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-react/src/index.ts'),
-};
-
-module.exports = units;

runtime/react/src/page/App.css

@@ -1,16 +0,0 @@
-html,
-body,
-#root {
-  width: 100%;
-  height: 100%;
-}
-
-#root {
-  position: relative;
-  overflow: auto;
-}
-
-#root::-webkit-scrollbar {
-  width: 0 !important;
-  display: none;
-}

runtime/react/src/playground/App.css

@@ -1,23 +0,0 @@
-html,
-body,
-#app {
-  width: 100%;
-  height: 100%;
-}
-
-#app {
-  position: relative;
-  overflow: auto;
-}
-
-::-webkit-scrollbar {
-  width: 0;
-}
-
-.magic-ui-container {
-  background-color: rgba(136, 136, 136, 0.5);
-}
-
-.action-area {
-  background-color: rgba(51, 153, 255, 0.5) !important;
-}

runtime/react/src/playground/main.tsx

@@ -1,119 +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 React from 'react';
-import ReactDOM from 'react-dom';
-
-import Core from '@tmagic/core';
-import type { MApp } from '@tmagic/schema';
-import type { RemoveData, SortEventData, UpdateData } from '@tmagic/stage';
-import { AppContent } from '@tmagic/ui-react';
-import { getUrlParam } from '@tmagic/utils';
-
-import App from './App';
-
-import('../comp-entry').then(() => {
-  const { components } = window.magicPresetComponents;
-
-  const app = new Core({
-    config: {},
-    curPage: getUrlParam('page'),
-  });
-
-  let curPageId = '';
-
-  const updateConfig = (root: MApp) => {
-    app?.setConfig(root);
-    renderDom();
-  };
-
-  const renderDom = () => {
-    ReactDOM.render(
-      <React.StrictMode>
-        <AppContent.Provider value={app}>
-          <App />
-        </AppContent.Provider>
-      </React.StrictMode>,
-      document.getElementById('root'),
-    );
-
-    setTimeout(() => {
-      // @ts-ignore
-      window.magic.onPageElUpdate(document.querySelector('.magic-ui-page'));
-    });
-  };
-
-  const operations = {
-    getApp() {
-      return app;
-    },
-
-    updateRootConfig(root: MApp) {
-      console.log('update root config', root);
-      app?.setConfig(root);
-    },
-
-    updatePageId(id: string) {
-      console.log('update page id', id);
-      curPageId = id;
-      app?.setPage(curPageId);
-      renderDom();
-    },
-
-    getSnapElementQuerySelector() {
-      return '[class*=magic-ui][id]';
-    },
-
-    select(id: string) {
-      console.log('select config', id);
-      const el = document.getElementById(id);
-      if (el) return el;
-      // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve(document.getElementById(id));
-        }, 0);
-      });
-    },
-
-    add({ root }: UpdateData) {
-      console.log('add config', root);
-      updateConfig(root);
-    },
-
-    update({ root }: UpdateData) {
-      console.log('update config', root);
-      updateConfig(root);
-    },
-
-    sortNode({ root }: SortEventData) {
-      console.log('sort config', root);
-      updateConfig(root);
-    },
-
-    remove({ root }: RemoveData) {
-      console.log('remove config', root);
-      updateConfig(root);
-    },
-  };
-
-  Object.keys(components).forEach((type: string) => app.registerComponent(type, components[type]));
-
-  // @ts-ignore
-  window.magic?.onRuntimeReady(operations);
-});

runtime/react/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

runtime/react/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-react')],
+  componentFileAffix: '.tsx',
+});

runtime/react/tsconfig.json

@@ -20,5 +20,5 @@
       "@tmagic/*": ["../packages/*"],
     },
   },
-  "include": ["./src"]
+  "include": ["./page", "./playground"]
 }

runtime/react/vite.config.ts

@@ -1,95 +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 reactRefresh from '@vitejs/plugin-react-refresh';
-
-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/react',
-
-    plugins: [reactRefresh()],
-
-    resolve: {
-      alias: [
-        { find: /^react$/, replacement: path.join(__dirname, 'node_modules/react/index.js') },
-        { find: /^react-dom$/, replacement: path.join(__dirname, 'node_modules/react-dom/index.js') },
-        { find: /^@tmagic\/ui-react/, replacement: path.join(__dirname, '../../packages/ui-react/src/index.ts') },
-        { 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,
-  };
-});

runtime/scripts/generateEntry.js

@@ -1,430 +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 { execSync } = require('child_process');
-const { exit } = require('process');
-const fs = require('fs');
-const path = require('path');
-
-const { parse, prettyPrint, types } = require('recast');
-const n = types.namedTypes;
-
-const pluginList = {};
-let cwd = __dirname;
-const pageRoot = () => path.resolve(cwd, '..');
-const entryPath = () => path.resolve(pageRoot(), './src');
-const defineTypes = {
-  component: 'component',
-  config: 'config',
-  value: 'value',
-  event: 'event',
-};
-
-const makeCamelCase = function (name) {
-  if (typeof name !== 'string') {
-    return '';
-  }
-  return name.replace(/-(\w)/g, ($0, $1) => $1.toUpperCase());
-};
-
-const parseEntry = function ({ ast, package, indexPath }) {
-  if (!ast.program) {
-    console.log(`${package} 入口文件不合法`);
-    return exit(1);
-  }
-
-  const tokens = getASTTokenByTraverse({ ast, indexPath });
-  let { config, value, event } = tokens;
-  const { importComponentSource, importComponentToken } = tokens;
-
-  if (!config) {
-    console.log(`${package} ${defineTypes.config} 文件声明不合法`);
-    return exit(1);
-  }
-  if (!value) {
-    console.log(`${package} ${defineTypes.value} 文件声明不合法`);
-    return exit(1);
-  }
-  if (!event) {
-    // event 非必须，不需要 exit
-    console.log(`${package} ${defineTypes.event} 文件声明缺失`);
-  }
-
-  const findIndex = importComponentToken.indexOf(exportDefaultToken);
-  let component = '';
-  if (findIndex > -1) {
-    component = path.resolve(path.dirname(indexPath), importComponentSource[findIndex]);
-  }
-
-  if (!component) {
-    console.log(`${package} ${defineTypes.component} 文件声明不合法`);
-    return exit(1);
-  }
-
-  const reg = /^.*[/\\]node_modules[/\\](.*)/;
-  [, config] = config.match(reg) || [, config];
-  [, value] = value.match(reg) || [, value];
-  [, component] = component.match(reg) || [, component];
-  [, event] = event.match(reg) || [, event];
-
-  return {
-    config,
-    value,
-    component,
-    event,
-  };
-};
-
-const getASTTokenByTraverse = ({ ast, indexPath }) => {
-  let config = '';
-  let value = '';
-  let event = '';
-  const importComponentToken = [];
-  const importComponentSource = [];
-
-  types.visit(ast, {
-    visitImportDeclaration(p) {
-      const { node } = p;
-      const { specifiers, source } = node;
-
-      importComponentToken.push(specifiers[0].local.name);
-      importComponentSource.push(source.value);
-
-      this.traverse(p);
-    },
-    visitExportNamedDeclaration(p) {
-      const { node } = p;
-      const { specifiers, source } = node;
-      const name = specifiers[0].exported.name.toLowerCase();
-
-      if (name === defineTypes.value) {
-        value = path.resolve(path.dirname(indexPath), source.value);
-      } else if (name === defineTypes.config) {
-        config = path.resolve(path.dirname(indexPath), source.value);
-      } else if (name === defineTypes.event) {
-        event = path.resolve(path.dirname(indexPath), source.value);
-      }
-
-      this.traverse(p);
-    },
-    visitExportDefaultDeclaration(p) {
-      const { node } = p;
-      const { declaration } = node;
-      exportDefaultToken = declaration.name;
-      this.traverse(p);
-    },
-  });
-
-  return {
-    config,
-    value,
-    event,
-    importComponentToken,
-    importComponentSource,
-  };
-};
-
-const generateEntry = function ({ entries, type = 'build', componentFileAffix }) {
-  const commonArgs = { entries, componentFileAffix };
-
-  generateEntryFile({ entryFile: 'comp-entry.ts', type: defineTypes.component, ...commonArgs });
-  if (type === 'build') {
-    generateEntryFile({ entryFile: 'config-entry.ts', type: defineTypes.config, ...commonArgs });
-    generateEntryFile({ entryFile: 'value-entry.ts', type: defineTypes.value, ...commonArgs });
-    generateEntryFile({ entryFile: 'event-entry.ts', type: defineTypes.event, ...commonArgs });
-  }
-};
-
-const generateEntryFile = function ({ entries, entryFile, type, componentFileAffix }) {
-  const list = [];
-  const importDeclarations = [];
-
-  entries.forEach((entry) => {
-    if (!entry.entry[type]) return;
-
-    const name = makeCamelCase(entry.type);
-    importDeclarations.push(
-      `import ${name} from '${entry.entry[type]}${
-        type === defineTypes.component && !entry.entry[type].includes(componentFileAffix) ? componentFileAffix : ''
-      }'`,
-    );
-    list.push(`'${entry.type}': ${name}`);
-  });
-
-  const exportToken = `${type}s`;
-  const capitalToken = exportToken.charAt(0).toUpperCase() + exportToken.slice(1);
-  let jsString = '';
-  let exportData = `window.magicPreset${capitalToken} = ${exportToken};`;
-
-  if (type === defineTypes.component) {
-    const pList = [];
-
-    Object.keys(pluginList).forEach((pluginType) => {
-      const name = makeCamelCase(pluginType);
-      importDeclarations.push(`import ${name} from '${pluginList[pluginType]}'`);
-      pList.push(`'${pluginType}': ${name}`);
-    });
-
-    exportData = `const plugins = {${pList.join(',')}};
-      const entry = {${exportToken}, plugins};
-      window.magicPreset${capitalToken} = entry;
-      export default entry;`;
-
-    jsString += `${importDeclarations.join(';')}
-      const ${exportToken}: Record<string, any> = {
-        ${list.join(',')}
-      }
-      ${exportData}`;
-  } else {
-    jsString += `${importDeclarations.join(';')}
-      (function(){
-        const ${exportToken}: Record<string, any> = {
-          ${list.join(',')}
-        }
-        ${exportData}
-      })()`;
-  }
-
-  fs.writeFileSync(
-    path.resolve(entryPath(), entryFile),
-    // window下需要将路径中\转换成/
-    prettyPrint(parse(jsString.replace(/\\/g, '/'), { parser: require('recast/parsers/typescript') }), {
-      tabWidth: 2,
-      trailingComma: true,
-      quote: 'single',
-    }).code,
-    { encoding: 'utf-8' },
-  );
-};
-
-const installPackage = function (package) {
-  try {
-    // window下需要将路径中\转换成/
-    execSync(`node -e "require.resolve('${package.replace(/\\/g, '/')}')"`, { stdio: 'ignore' });
-  } catch (e) {
-    execSync(`npm install ${package}`, {
-      stdio: 'inherit',
-      cwd: pageRoot(),
-    });
-  }
-};
-
-const getIndexPath = function (entry) {
-  if (fs.lstatSync(entry).isFile()) {
-    return entry;
-  }
-
-  if (fs.lstatSync(entry).isDirectory()) {
-    const files = fs.readdirSync(entry);
-    const [index] = files.filter((file) => file.split('.')[0] === 'index');
-
-    return path.resolve(entry, index);
-  }
-
-  return entry;
-};
-
-const typeComponent = 1;
-const typePlugin = 2;
-const typeComponentPackage = 3;
-
-const getComponentPackageImports = function ({ result, properties, indexPath, importDeclarations }) {
-  result.type = typeComponentPackage;
-  result.imports = [];
-
-  properties.forEach((property) => {
-    const [propertyMatch] = importDeclarations.filter((i) => {
-      const [specifier] = i.specifiers;
-
-      if (n.ImportDefaultSpecifier.check(specifier) && specifier.local.name === property.value.name) {
-        return true;
-      }
-
-      return false;
-    });
-
-    if (propertyMatch) {
-      result.imports.push({
-        type: property.key.name,
-        name: propertyMatch.specifiers[0].local.name,
-        indexPath: getIndexPath(path.resolve(path.dirname(indexPath), propertyMatch.source.value)),
-      });
-    }
-  });
-
-  return result;
-};
-
-const isPlugin = function (properties) {
-  const [match] = properties.filter((property) => property.key.name === 'install');
-
-  return !!match;
-};
-
-/**
- *  1 判断是否组件&插件包
- *  2 判断是组件还是插件
- *  3 组件插件分开写入 comp-entry.ts
- * @param {*} ast
- * @param {String} indexPath
- * @return {Object} { type: '', imports: [] } 返回传入组件的类型。如果是组件包，imports 中包含所有子组件的入口文件路径
- */
-const typeAssertion = function ({ ast, indexPath }) {
-  const result = {
-    type: '',
-    imports: [],
-  };
-  const { importDeclarations, variableDeclarations, exportDefaultName, exportDefaultNode } =
-    getAssertionTokenByTraverse(ast);
-
-  if (exportDefaultName) {
-    importDeclarations.every((node) => {
-      const [specifier] = node.specifiers;
-
-      // 从 import 语句中找到 export default 的变量，认为是组件
-      if (n.ImportDefaultSpecifier.check(specifier) && specifier.local.name === exportDefaultName) {
-        result.type = typeComponent;
-        return false;
-      }
-
-      return true;
-    });
-
-    if (result.type) return result;
-
-    variableDeclarations.every((node) => {
-      const [variable] = node.declarations;
-
-      // 从声明变量语句中找到 export default 的变量，认为是组件包
-      if (
-        n.Identifier.check(variable.id) &&
-        variable.id.name === exportDefaultName &&
-        n.ObjectExpression.check(variable.init)
-      ) {
-        if (isPlugin(variable.init.properties)) {
-          result.type = typePlugin;
-          return false;
-        }
-
-        // 从组件包声明中找到对应子组件入口文件
-        getComponentPackageImports({ result, properties: variable.init.properties, indexPath, importDeclarations });
-      }
-
-      return true;
-    });
-  }
-
-  if (exportDefaultNode) {
-    if (isPlugin(exportDefaultNode.properties)) {
-      result.type = typePlugin;
-    } else {
-      getComponentPackageImports({ result, properties: variable.init.properties, indexPath, importDeclarations });
-    }
-  }
-
-  return result;
-};
-
-const getAssertionTokenByTraverse = (ast) => {
-  const importDeclarations = [];
-  const variableDeclarations = [];
-  let exportDefaultName = '';
-  let exportDefaultNode = undefined;
-
-  types.visit(ast, {
-    visitImportDeclaration(p) {
-      importDeclarations.push(p.node);
-      this.traverse(p);
-    },
-    visitVariableDeclaration(p) {
-      variableDeclarations.push(p.node);
-      this.traverse(p);
-    },
-    visitExportDefaultDeclaration(p) {
-      const { node } = p;
-      const { declaration } = node;
-
-      // 导出的是变量名
-      if (n.Identifier.check(declaration)) {
-        exportDefaultName = declaration.name;
-      }
-
-      // 导出的是对象的字面量
-      if (n.ObjectExpression.check(declaration)) {
-        exportDefaultNode = declaration;
-      }
-
-      this.traverse(p);
-    },
-  });
-
-  return {
-    importDeclarations,
-    variableDeclarations,
-    exportDefaultName,
-    exportDefaultNode,
-  };
-};
-
-const start = function ({ type, componentFileAffix, units, workingDir }) {
-  cwd = workingDir;
-  const entries = [];
-
-  Object.keys(units).forEach((componentType) => {
-    const package = units[componentType];
-
-    installPackage(package);
-
-    const indexPath = require.resolve(package);
-    const indexCode = fs.readFileSync(indexPath, { encoding: 'utf-8', flag: 'r' });
-    const ast = parse(indexCode, { parser: require('recast/parsers/typescript') });
-    const result = typeAssertion({ ast, indexPath });
-
-    if (result.type === typeComponent) {
-      // 组件
-      const entry = parseEntry({ ast, package, indexPath });
-      entries.push({ type: componentType, entry });
-    } else if (result.type === typePlugin) {
-      // 插件
-      pluginList[componentType] = package;
-    } else if (result.type === typeComponentPackage) {
-      // 组件&插件包
-      result.imports.forEach((i) => {
-        const affixReg = new RegExp(`${componentFileAffix}$`);
-        if (affixReg.test(i.indexPath)) {
-          entries.push({ type: i.type, entry: { component: i.indexPath } });
-          return;
-        }
-        const indexCode = fs.readFileSync(i.indexPath, { encoding: 'utf-8', flag: 'r' });
-        const ast = parse(indexCode);
-        if (typeAssertion({ ast, indexPath }).type === typePlugin) {
-          // 插件
-          pluginList[i.type] = i.indexPath;
-        } else {
-          // 组件
-          const entry = parseEntry({ ast, package: `${package} | ${i.name}`, indexPath: i.indexPath });
-          entries.push({ type: i.type, entry });
-        }
-      });
-    }
-  });
-
-  generateEntry({ entries, type, componentFileAffix });
-};
-
-module.exports = start;

runtime/vue2/.env.admin

@@ -1,2 +0,0 @@
-BASE=/runtime
-OUT_DIR=admin-dist

runtime/vue2/.gitignore

@@ -1,5 +1,3 @@
-comp-entry.ts
-config-entry.ts
-value-entry.ts
-event-entry.ts
+.tmagic
 admin-dist
+entry-dist

runtime/vue2/build.vite.config.ts

@@ -0,0 +1,76 @@
+/*
+ * 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-vue2';
+// @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/vue2/${type}`;
+    const outDir = isAdmin
+      ? path.resolve(process.cwd(), `./admin-dist/${type}`)
+      : path.resolve(process.cwd(), `./dist/${type}`);
+    return {
+      plugins: [
+        vue(),
+        legacy({
+          targets: ['defaults', 'not IE 11'],
+        }),
+        externalGlobals({ vue: 'Vue' }, { exclude: [`./${type}/index.html`] }),
+      ],
+
+      root: `./${type}/`,
+
+      base,
+
+      build: {
+        emptyOutDir: true,
+        sourcemap: true,
+        outDir,
+      },
+    };
+  }
+
+  return {};
+});

runtime/vue2/dev.vite.config.ts

@@ -0,0 +1,62 @@
+/*
+ * 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-vue2';
+
+export default defineConfig({
+  plugins: [vue()],
+
+  resolve: {
+    alias: [
+      { find: /^vue$/, replacement: path.join(__dirname, 'node_modules/vue/dist/vue.esm.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/vue2/',
+
+  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',
+      },
+    },
+  },
+});

runtime/vue2/package.json

@@ -3,17 +3,27 @@
   "version": "1.1.0-beta.5",
   "private": true,
   "scripts": {
-    "dev:vue2": "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:vue2": "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-vue2": "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",
+    "axios": "^0.25.0",
+    "terser": "^5.14.2",
     "vue": "^2.7.4"
   },
   "devDependencies": {
@@ -24,6 +34,7 @@
     "rollup-plugin-external-globals": "^0.6.1",
     "sass": "^1.35.1",
     "vite": "^3.0.4",
+    "@vitejs/plugin-legacy": "^2.0.0",
     "@vitejs/plugin-vue2": "^1.1.2",
     "vue-template-compiler": "^2.7.4"
   }

runtime/vue2/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>Vue2 Page</title>
-    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/page/main.ts"></script>
-  </body>
-</html>

runtime/vue2/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>

runtime/vue2/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>Vue2 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://cdn.jsdelivr.net/npm/vue@2"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

runtime/vue2/page/main.ts

@@ -21,11 +21,12 @@ import Vue 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';
 
 Vue.use(request);
 
@@ -34,13 +35,13 @@ const app = new Core({
   curPage: getUrlParam('page'),
 });
 
-Object.keys(entry.components).forEach((type: string) => {
-  const component = entry.components[type];
+Object.keys(components).forEach((type: string) => {
+  const component = components[type];
   Vue.component(component.name, component);
   app.registerComponent(type, component);
 });
 
-Object.values(entry.plugins).forEach((plugin: any) => {
+Object.values(plugins).forEach((plugin: any) => {
   Vue.use(plugin);
 });
 

runtime/vue2/playground.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" style="font-size: 100px">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Vue2 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 }
-    .magic-ui-page {
-      overflow: hidden;
-    }
-  </style>
-</head>
-<body style="font-size: 14px">
-  
-  <div id="app"></div>
-
-  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
-  <script type="module" src="/src/playground/main.ts"></script>
-</body>
-</html>

runtime/vue2/playground/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en" style="font-size: 100px">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vue2 Playground</title>
+  <style>
+   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">
+  
+  <div id="app"></div>
+
+  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+
+  <script type="module" src="./main.ts"></script>
+</body>
+</html>

runtime/vue2/playground/main.ts

@@ -20,14 +20,12 @@ import Vue from 'vue';
 
 import App from './App.vue';
 
-import('../comp-entry').then(() => {
-  const { components, plugins } = window.magicPresetComponents;
-
-  Object.values(components).forEach((component: any) => {
+Promise.all([import('../.tmagic/comp-entry'), import('../.tmagic/plugin-entry')]).then(([components, plugins]) => {
+  Object.values(components.default).forEach((component: any) => {
     Vue.component(component.name, component);
   });
 
-  Object.values(plugins).forEach((plugin: any) => {
+  Object.values(plugins.default).forEach((plugin: any) => {
     Vue.use(plugin);
   });
 

runtime/vue2/playground/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

runtime/vue2/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 });

runtime/vue2/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 });

runtime/vue2/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-vue2/src/index.ts'),
-};
-
-module.exports = units;

runtime/vue2/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;
-  }
-}

runtime/vue2/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

runtime/vue2/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-vue2')],
+  componentFileAffix: '.vue',
+});

runtime/vue2/vite.config.ts

@@ -1,96 +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-vue2';
-// @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/vue2',
-
-    plugins: [vue(), externalGlobals({ vue: 'Vue' }, { exclude: ['page.html', 'playground.html'] })],
-
-    resolve: {
-      alias: [
-        { find: /^vue$/, replacement: path.join(__dirname, 'node_modules/vue/dist/vue.esm.js') },
-        { find: /^@tmagic\/ui-vue2/, replacement: path.join(__dirname, '../../packages/ui-vue2/src/index.ts') },
-        { 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,
-  };
-});

runtime/vue3/package.json

@@ -4,8 +4,8 @@
   "private": true,
   "scripts": {
     "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": "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",