From d84037e421181b4f0866054e3dd08a569627c1c2 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 25 May 2022 17:03:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81playground:vue2/playg?=
 =?UTF-8?q?round:react=E5=91=BD=E4=BB=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

fix #82 fix #68
---
 package.json                          |   2 +
 playground/.env.react                 |   1 +
 playground/.env.vue2                  |   1 +
 playground/.env.vue3                  |   1 +
 playground/package.json               |   6 +-
 playground/src/pages/Editor.vue       |  14 +-
 runtime/react/package.json            |   2 +-
 runtime/react/src/playground/main.tsx |  10 +-
 runtime/vue2/package.json             |   2 +-
 runtime/vue2/src/playground/App.vue   | 205 ++++++++++++--------------
 runtime/vue2/src/playground/main.ts   |   2 +-
 runtime/vue2/vite.config.ts           |   2 +
 12 files changed, 118 insertions(+), 130 deletions(-)
 create mode 100644 playground/.env.react
 create mode 100644 playground/.env.vue2
 create mode 100644 playground/.env.vue3

diff --git a/package.json b/package.json
index 4874d269e..13ee83d22 100644
--- a/package.json
+++ b/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",
diff --git a/playground/.env.react b/playground/.env.react
new file mode 100644
index 000000000..f6885129c
--- /dev/null
+++ b/playground/.env.react
@@ -0,0 +1 @@
+VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/react
\ No newline at end of file
diff --git a/playground/.env.vue2 b/playground/.env.vue2
new file mode 100644
index 000000000..73679984f
--- /dev/null
+++ b/playground/.env.vue2
@@ -0,0 +1 @@
+VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue2
\ No newline at end of file
diff --git a/playground/.env.vue3 b/playground/.env.vue3
new file mode 100644
index 000000000..780acb192
--- /dev/null
+++ b/playground/.env.vue3
@@ -0,0 +1 @@
+VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue3
\ No newline at end of file
diff --git a/playground/package.json b/playground/package.json
index 32898fed2..29e60c89d 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -3,8 +3,10 @@
   "version": "1.0.0-rc.3",
   "private": true,
   "scripts": {
-    "dev": "vite",
-    "build": "node --max_old_space_size=8192 node_modules/.bin/vite build",
+    "dev": "vite --mode vue3",
+    "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": {
diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue
index 7c94d95fa..046f8e9fa 100644
--- a/playground/src/pages/Editor.vue
+++ b/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([
         {
diff --git a/runtime/react/package.json b/runtime/react/package.json
index 8a7f6056a..986f19c79 100644
--- a/runtime/react/package.json
+++ b/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"
diff --git a/runtime/react/src/playground/main.tsx b/runtime/react/src/playground/main.tsx
index 36bba4424..3d0aa4056 100644
--- a/runtime/react/src/playground/main.tsx
+++ b/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 = {
diff --git a/runtime/vue2/package.json b/runtime/vue2/package.json
index 06c281835..83a102b7b 100644
--- a/runtime/vue2/package.json
+++ b/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"
diff --git a/runtime/vue2/src/playground/App.vue b/runtime/vue2/src/playground/App.vue
index bbd0acf5f..7ee48608e 100644
--- a/runtime/vue2/src/playground/App.vue
+++ b/runtime/vue2/src/playground/App.vue
@@ -3,131 +3,108 @@
 </template>
 
 <script lang="ts">
-/* eslint-disable no-param-reassign */
-import Vue from 'vue';
-import { reactive } from '@vue/composition-api';
+import { computed, defineComponent, nextTick, onMounted, provide, reactive, ref, watch } from '@vue/composition-api';
 
 import Core from '@tmagic/core';
-import { MApp, MNode, MPage } from '@tmagic/schema';
-import { RemoveData, SortEventData, UpdateData } from '@tmagic/stage';
+import { Id, MApp, MNode } from '@tmagic/schema';
+import { Magic, RemoveData, UpdateData } from '@tmagic/stage';
 import { getNodePath } from '@tmagic/utils';
 
-// @ts-ignore
-export default Vue.extend({
-  data(): {
-    app: Core | null;
-    config?: MApp;
-    curPageId: string;
-    selectedId: string;
-  } {
-    return {
-      app: null,
-      config: undefined,
-      curPageId: '',
-      selectedId: '',
-    };
-  },
+declare global {
+  interface Window {
+    magic: Magic;
+  }
+}
 
-  computed: {
-    pageConfig(): MPage | undefined {
-      return this.config?.items?.find((item: MNode) => item.id === this.curPageId) || this.config?.items?.[0];
-    },
-  },
+export default defineComponent({
+  setup() {
+    const root = ref<MApp>();
+    const curPageId = ref<Id>();
+    const selectedId = ref<Id>();
+
+    const pageConfig = computed(
+      () => root.value?.items?.find((item: MNode) => item.id === curPageId.value) || root.value?.items?.[0],
+    );
 
-  provide() {
-    this.app = new Core({
-      config: this.config,
+    const app = new Core({
+      config: root.value,
       platform: 'editor',
     });
-    return {
-      app: this.app,
-    };
-  },
 
-  mounted() {
-    // @ts-ignore
-    globalThis.magic?.onRuntimeReady(this);
-  },
+    provide('app', app);
 
-  watch: {
-    async pageConfig() {
-      await this.$nextTick();
-      // @ts-ignore
-      globalThis.magic.onPageElUpdate(document.querySelector('.magic-ui-page'));
-    },
-  },
+    watch(pageConfig, async () => {
+      await nextTick();
+      const page = document.querySelector<HTMLElement>('.magic-ui-page');
+      page && window.magic.onPageElUpdate(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);
-    },
+    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 {
+      pageConfig,
+    };
   },
 });
 </script>
diff --git a/runtime/vue2/src/playground/main.ts b/runtime/vue2/src/playground/main.ts
index 40a81a0c0..fd2fb628e 100644
--- a/runtime/vue2/src/playground/main.ts
+++ b/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;
diff --git a/runtime/vue2/vite.config.ts b/runtime/vue2/vite.config.ts
index 6acd6d3fe..d5459019e 100644
--- a/runtime/vue2/vite.config.ts
+++ b/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',