feat: 支持playground:vue2/playground:react命令

vue2 react runtime path 出错导致vue2 react playground运行出错；vue2中存在多个composition-api导致出错

fix #82 fix #68

package.json

@@ -11,6 +11,8 @@
     "lint": "eslint . --ext .js,.vue,.ts,.tsx",
     "lint-fix": "eslint . --fix --ext .vue,.js,.ts,.tsx",
     "playground": "lerna run dev --scope tmagic-playground --scope runtime-vue3 --parallel",
+    "playground:vue2": "lerna run dev:vue2 --scope tmagic-playground --scope runtime-vue2 --parallel",
+    "playground:react": "lerna run dev:react --scope tmagic-playground --scope runtime-react --parallel",
     "build": "lerna run build --scope tmagic-playground --scope runtime-vue3 --scope runtime-vue2 --scope runtime-react --scope @tmagic/* --parallel",
     "postbuild": "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",
     "docs": "cd docs && npm run doc:dev",

playground/.env.react

@@ -0,0 +1 @@
+VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/react

playground/.env.vue2

@@ -0,0 +1 @@
+VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue2

playground/.env.vue3

@@ -0,0 +1 @@
+VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue3

playground/package.json

@@ -3,8 +3,10 @@
   "version": "1.0.0-rc.3",
   "private": true,
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --mode vue3",
-    "build": "node --max_old_space_size=8192 node_modules/.bin/vite build",
+    "dev:vue2": "vite --mode vue2",
+    "dev:react": "vite --mode react",
+    "build": "node --max_old_space_size=8192 node_modules/.bin/vite build --mode vue3",
     "serve": "vite preview"
   },
   "dependencies": {

playground/src/pages/Editor.vue

@@ -19,7 +19,7 @@
         v-if="previewVisible"
         width="100%"
         height="817"
-        :src="`${RUNTIME_PATH}/page.html?localPreview=1&page=${editor?.editorService.get('page').id}`"
+        :src="`${VITE_RUNTIME_PATH}/page.html?localPreview=1&page=${editor?.editorService.get('page').id}`"
       ></iframe>
     </el-dialog>
   </div>
@@ -47,7 +47,7 @@ import { asyncLoadJs } from '@tmagic/utils';
 
 import config from '../config';
 
-const RUNTIME_PATH = '/tmagic-editor/playground/runtime/vue3';
+const { VITE_RUNTIME_PATH } = import.meta.env;
 
 export default defineComponent({
   name: 'EditorApp',
@@ -121,20 +121,20 @@ export default defineComponent({
       ],
     };
 
-    asyncLoadJs(`${RUNTIME_PATH}/assets/config.js`).then(() => {
+    asyncLoadJs(`${VITE_RUNTIME_PATH}/assets/config.js`).then(() => {
       propsConfigs.value = (globalThis as any).magicPresetConfigs;
     });
-    asyncLoadJs(`${RUNTIME_PATH}/assets/value.js`).then(() => {
+    asyncLoadJs(`${VITE_RUNTIME_PATH}/assets/value.js`).then(() => {
       propsValues.value = (globalThis as any).magicPresetValues;
     });
-    asyncLoadJs(`${RUNTIME_PATH}/assets/event.js`).then(() => {
+    asyncLoadJs(`${VITE_RUNTIME_PATH}/assets/event.js`).then(() => {
       eventMethodList.value = (globalThis as any).magicPresetEvents;
     });
 
     save();
 
     return {
-      RUNTIME_PATH,
+      VITE_RUNTIME_PATH,
 
       editor,
       menu,
@@ -146,7 +146,7 @@ export default defineComponent({
 
       previewVisible,
 
-      runtimeUrl: `${RUNTIME_PATH}/playground.html`,
+      runtimeUrl: `${VITE_RUNTIME_PATH}/playground.html`,
 
       componentGroupList: ref([
         {

runtime/react/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0-rc.3",
   "private": true,
   "scripts": {
-    "dev": "npm run build && npm run serve",
+    "dev:react": "npm run build && npm run serve",
     "start": "node scripts/dev.js && vite",
     "build": "node scripts/build.js && vite build",
     "serve": "vite preview --port 8076"

runtime/react/src/playground/main.tsx

@@ -27,7 +27,7 @@ import { getUrlParam } from '@tmagic/utils';
 
 import App from './App';
 
-const componentUrl = '/tamgic-editor/playground/runtime/react/assets/components.js';
+const componentUrl = '/tmagic-editor/playground/runtime/react/assets/components.js';
 
 import(componentUrl).then(() => {
   const { components } = window.magicPresetComponents;
@@ -42,9 +42,6 @@ import(componentUrl).then(() => {
   const updateConfig = (root: MApp) => {
     app?.setConfig(root);
     renderDom();
-
-    // @ts-ignore
-    window.magic.onPageElUpdate(document.querySelector('.magic-ui-page'));
   };
 
   const renderDom = () => {
@@ -56,6 +53,11 @@ import(componentUrl).then(() => {
       </React.StrictMode>,
       document.getElementById('root'),
     );
+
+    setTimeout(() => {
+      // @ts-ignore
+      window.magic.onPageElUpdate(document.querySelector('.magic-ui-page'));
+    });
   };
 
   const operations = {

runtime/vue2/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0-rc.3",
   "private": true,
   "scripts": {
-    "dev": "npm run build && npm run serve",
+    "dev:vue2": "npm run build && npm run serve",
     "start": "node scripts/dev.js && vite",
     "build": "node scripts/build.js && vite build",
     "serve": "vite preview --port 8077"

runtime/vue2/src/playground/App.vue

@@ -3,132 +3,109 @@
 </template>
 
 <script lang="ts">
-/* eslint-disable no-param-reassign */
+import { computed, defineComponent, nextTick, onMounted, provide, reactive, ref, watch } from '@vue/composition-api';
-import Vue from 'vue';
-import { reactive } from '@vue/composition-api';
 
 import Core from '@tmagic/core';
-import { MApp, MNode, MPage } from '@tmagic/schema';
+import { Id, MApp, MNode } from '@tmagic/schema';
-import { RemoveData, SortEventData, UpdateData } from '@tmagic/stage';
+import { Magic, RemoveData, UpdateData } from '@tmagic/stage';
 import { getNodePath } from '@tmagic/utils';
 
-// @ts-ignore
+declare global {
-export default Vue.extend({
+  interface Window {
-  data(): {
+    magic: Magic;
-    app: Core | null;
+  }
-    config?: MApp;
+}
-    curPageId: string;
-    selectedId: string;
-  } {
-    return {
-      app: null,
-      config: undefined,
-      curPageId: '',
-      selectedId: '',
-    };
-  },
 
-  computed: {
+export default defineComponent({
-    pageConfig(): MPage | undefined {
+  setup() {
-      return this.config?.items?.find((item: MNode) => item.id === this.curPageId) || this.config?.items?.[0];
+    const root = ref<MApp>();
-    },
+    const curPageId = ref<Id>();
-  },
+    const selectedId = ref<Id>();
 
-  provide() {
+    const pageConfig = computed(
-    this.app = new Core({
+      () => root.value?.items?.find((item: MNode) => item.id === curPageId.value) || root.value?.items?.[0],
-      config: this.config,
+    );
+
+    const app = new Core({
+      config: root.value,
       platform: 'editor',
     });
+
+    provide('app', app);
+
+    watch(pageConfig, async () => {
+      await nextTick();
+      const page = document.querySelector<HTMLElement>('.magic-ui-page');
+      page && window.magic.onPageElUpdate(page);
+    });
+
+    onMounted(() => {
+      window.magic?.onRuntimeReady({
+        updateRootConfig(config: MApp) {
+          console.log('update config', config);
+          root.value = config;
+          app?.setConfig(config, curPageId.value);
+        },
+
+        updatePageId(id: Id) {
+          console.log('update page id', id);
+          curPageId.value = id;
+          app?.setPage(id);
+        },
+
+        getSnapElements() {
+          return Array.from(document.querySelectorAll<HTMLElement>('[class*=magic-ui][id]'));
+        },
+
+        select(id: Id) {
+          console.log('select config', id);
+          selectedId.value = id;
+          const el = document.getElementById(`${id}`);
+          if (el) return el;
+          // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
+          return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
+        },
+
+        add({ config }: UpdateData) {
+          console.log('add config', config);
+          if (!root.value) throw new Error('error');
+          if (!selectedId.value) throw new Error('error');
+          const path = getNodePath(selectedId.value, [root.value]);
+          const node = path.pop();
+          const parent = node?.items ? node : path.pop();
+          if (!parent) throw new Error('未找到父节点');
+          parent.items?.push(config);
+        },
+
+        update({ config }: UpdateData) {
+          console.log('update config', config);
+          if (!root.value) throw new Error('error');
+          const path = getNodePath(config.id, [root.value]);
+          const node = path.pop();
+          const parent = path.pop();
+          if (!node) throw new Error('未找到目标节点');
+          if (!parent) throw new Error('未找到父节点');
+          const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
+          parent.items.splice(index, 1, reactive(config));
+        },
+
+        remove({ id }: RemoveData) {
+          if (!root.value) throw new Error('error');
+          const path = getNodePath(id, [root.value]);
+          const node = path.pop();
+          if (!node) throw new Error('未找到目标元素');
+          const parent = path.pop();
+          if (!parent) throw new Error('未找到父元素');
+          const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
+          parent.items.splice(index, 1);
+        },
+      });
+    });
+
     return {
-      app: this.app,
+      pageConfig,
     };
   },
-
-  mounted() {
-    // @ts-ignore
-    globalThis.magic?.onRuntimeReady(this);
-  },
-
-  watch: {
-    async pageConfig() {
-      await this.$nextTick();
-      // @ts-ignore
-      globalThis.magic.onPageElUpdate(document.querySelector('.magic-ui-page'));
-    },
-  },
-
-  methods: {
-    updateRootConfig(config: MApp) {
-      console.log('update config', config);
-      this.config = config;
-      this.app?.setConfig(config, this.curPageId);
-    },
-
-    updatePageId(id: string) {
-      console.log('update page id', id);
-      this.curPageId = id;
-      this.app?.setPage(id);
-    },
-
-    getSnapElementQuerySelector() {
-      return '[class*=magic-ui][id]';
-    },
-
-    select(id: string) {
-      console.log('select config', id);
-      this.selectedId = id;
-      const el = document.getElementById(id);
-      if (el) return el;
-      // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
-      return this.$nextTick().then(() => document.getElementById(id));
-    },
-
-    add({ config }: UpdateData) {
-      console.log('add config', config);
-      if (!this.config) throw new Error('error');
-      const path = getNodePath(this.selectedId, [this.config]);
-      const node = path.pop();
-      const parent = node?.items ? node : path.pop();
-      if (!parent) throw new Error('未找到父节点');
-      parent.items?.push(config);
-    },
-
-    update({ config }: UpdateData) {
-      console.log('update config', config);
-      if (!this.config) throw new Error('error');
-      const path = getNodePath(config.id, [this.config]);
-      const node = path.pop();
-      const parent = path.pop();
-      if (!node) throw new Error('未找到目标节点');
-      if (!parent) throw new Error('未找到父节点');
-      const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
-      parent.items.splice(index, 1, reactive(config));
-    },
-
-    sortNode({ src, dist }: SortEventData) {
-      if (!this.config) throw new Error('error');
-      const path = getNodePath(this.selectedId, [this.config]);
-      path.pop();
-      const parent = path.pop();
-      if (!parent) return;
-      // 在 id1 的兄弟组件中若无 id2 则直接 return
-      const index2 = parent.items.findIndex((node: MNode) => node.id === dist);
-      if (index2 < 0) return;
-      const index1 = parent.items.findIndex((node: MNode) => node.id === src);
-      parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
-    },
-
-    remove({ id }: RemoveData) {
-      if (!this.config) throw new Error('error');
-      const path = getNodePath(id, [this.config]);
-      const node = path.pop();
-      if (!node) throw new Error('未找到目标元素');
-      const parent = path.pop();
-      if (!parent) throw new Error('未找到父元素');
-      const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
-      parent.items.splice(index, 1);
-    },
-  },
 });
 </script>
 

runtime/vue2/src/playground/main.ts

@@ -20,7 +20,7 @@ import Vue from 'vue';
 
 import App from './App.vue';
 
-const componentUrl = '/tamgic-editor/playground/runtime/vue2/assets/components.js';
+const componentUrl = '/tmagic-editor/playground/runtime/vue2/assets/components.js';
 
 import(componentUrl).then(() => {
   const { components, plugins } = window.magicPresetComponents;

runtime/vue2/vite.config.ts

@@ -30,6 +30,7 @@ export default defineConfig({
   resolve: {
     alias: [
       { find: /^vue$/, replacement: path.join(__dirname, 'node_modules/vue/dist/vue.esm.js') },
+      { find: /^@vue\/composition-api$/, replacement: path.join(__dirname, 'node_modules/@vue/composition-api') },
       { 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') },
@@ -49,6 +50,7 @@ export default defineConfig({
         components: './src/comp-entry.ts',
         config: './src/config-entry.ts',
         value: './src/value-entry.ts',
+        event: './src/event-entry.ts',
       },
       output: {
         entryFileNames: 'assets/[name].js',