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",
- "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": {

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,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>

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',