feat(core,runtime): 删除App中pages，只留下当前page

packages/core/src/App.ts

@@ -18,7 +18,7 @@
 
 import { EventEmitter } from 'events';
 
-import type { CodeBlockDSL, EventItemConfig, Id, MApp, MPage } from '@tmagic/schema';
+import type { CodeBlockDSL, EventItemConfig, Id, MApp } from '@tmagic/schema';
 
 import Env from './Env';
 import { bindCommonEventListener, isCommonMethod, triggerCommonMethod } from './events';
@@ -44,10 +44,10 @@ interface EventCache {
 
 class App extends EventEmitter {
   public env;
-  public codeDsl: CodeBlockDSL | undefined;
-  public pages = new Map<Id, Page>();
+  public dsl?: MApp;
+  public codeDsl?: CodeBlockDSL;
 
-  public page: Page | undefined;
+  public page?: Page;
 
   public platform = 'mobile';
   public jsEngine = 'browser';
@@ -86,13 +86,15 @@ class App extends EventEmitter {
       this.transformStyle = options.transformStyle;
     }
 
-    options.config && this.setConfig(options.config, options.curPage);
+    if (options.config) {
+      this.setConfig(options.config, options.curPage);
+    }
 
     bindCommonEventListener(this);
   }
 
   /**
-   * 将dsl中的style配置转换成css，主要是将数子转成rem为单位的样式值，例如100将被转换成1rem
+   * 将dsl中的style配置转换成css，主要是将数值转成rem为单位的样式值，例如100将被转换成1rem
    * @param style Object
    * @returns Object
    */
@@ -141,52 +143,60 @@ class App extends EventEmitter {
    * @param curPage 当前页面id
    */
   public setConfig(config: MApp, curPage?: Id) {
+    this.dsl = config;
     this.codeDsl = config.codeBlocks;
-    this.pages = new Map();
-    config.items?.forEach((page) => {
-      this.addPage(page);
-    });
-
     this.setPage(curPage || this.page?.data?.id);
   }
 
-  public addPage(config: MPage) {
-    this.pages.set(
-      config.id,
-      new Page({
-        config,
-        app: this,
-      }),
-    );
+  /**
+   * 留着为了兼容，不让报错
+   * @deprecated
+   */
+  public addPage() {
+    console.info('addPage 已经弃用');
   }
 
   public setPage(id?: Id) {
-    let page;
+    const pageConfig = this.dsl?.items.find((page) => page.id === id);
 
-    if (id) {
-      page = this.pages.get(id);
+    if (!pageConfig) {
+      if (this.page) {
+        this.page.destroy();
+        this.page = undefined;
+      }
+      return;
     }
 
-    if (!page) {
-      page = this.pages.get(this.pages.keys().next().value);
+    if (pageConfig === this.page?.data) return;
+
+    if (this.page) {
+      this.page.destroy();
     }
 
-    this.page = page;
+    this.page = new Page({
+      config: pageConfig,
+      app: this,
+    });
 
     if (this.platform !== 'magic') {
       this.bindEvents();
     }
   }
 
-  public deletePage(id: Id) {
-    this.pages.delete(id);
-    if (!this.pages.size) {
-      this.page = undefined;
-    }
+  public deletePage() {
+    this.page = undefined;
   }
 
-  public getPage(id: Id) {
-    return this.pages.get(id);
+  /**
+   * 兼容id参数
+   * @param id 节点id
+   * @returns Page | void
+   */
+  public getPage(id?: Id) {
+    if (!id) return this.page;
+    if (this.page?.data.id === id) {
+      return this.page;
+    }
   }
 
   public registerComponent(type: string, Component: any) {
@@ -252,7 +262,7 @@ class App extends EventEmitter {
 
   public destroy() {
     this.removeAllListeners();
-    this.pages.clear();
+    this.page = undefined;
   }
 
   private addEventToMap(event: EventCache) {

packages/core/src/Node.ts

@@ -70,6 +70,10 @@ class Node extends EventEmitter {
     this.emit('updata-data');
   }
 
+  public destroy() {
+    this.removeAllListeners();
+  }
+
   private listenLifeSafe() {
     this.once('created', async (instance: any) => {
       this.instance = instance;

packages/core/src/Page.ts

@@ -61,6 +61,12 @@ class Page extends Node {
   public deleteNode(id: Id) {
     this.nodes.delete(id);
   }
+
+  public destroy(): void {
+    super.destroy();
+
+    this.nodes.clear();
+  }
 }
 
 export default Page;

packages/editor/src/services/editor.ts

@@ -228,7 +228,7 @@ class Editor extends BaseService {
     if (node?.id) {
       this.get('stage')
         ?.renderer.runtime?.getApp?.()
-        .page?.emit(
+        ?.page?.emit(
           'editor:select',
           {
             node,

packages/stage/src/types.ts

@@ -219,7 +219,7 @@ export interface RemoveData {
 }
 
 export interface Runtime {
-  getApp?: () => Core;
+  getApp?: () => Core | undefined;
   beforeSelect?: (el: HTMLElement) => Promise<boolean> | boolean;
   updateRootConfig?: (config: MApp) => void;
   updatePageId?: (id: Id) => void;

runtime/react/playground/main.tsx

@@ -39,7 +39,6 @@ const designWidth = document.documentElement.getBoundingClientRect().width;
 
 const app = new Core({
   designWidth,
-  config: {},
   platform: 'editor',
 });
 

runtime/vue2/playground/App.vue

@@ -1,12 +1,12 @@
 <template>
-  <magic-ui-page v-if="pageConfig" :config="pageConfig"></magic-ui-page>
+  <magic-ui-page v-if="pageConfig" :config="pageConfig" :key="pageConfig.id"></magic-ui-page>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, nextTick, provide, reactive, ref, watch } from 'vue';
+import { computed, defineComponent, inject, nextTick, reactive, ref, watch } from 'vue';
 
 import Core from '@tmagic/core';
-import type { Id, MApp, MNode, MPage } from '@tmagic/schema';
+import type { Id, MApp, MNode } from '@tmagic/schema';
 import { Magic, RemoveData, UpdateData } from '@tmagic/stage';
 import { getNodePath } from '@tmagic/utils';
 
@@ -19,6 +19,8 @@ declare global {
 
 export default defineComponent({
   setup() {
+    const app = inject<Core | undefined>('app');
+
     const root = ref<MApp>();
     const curPageId = ref<Id>();
     const selectedId = ref<Id>();
@@ -27,18 +29,6 @@ export default defineComponent({
       () => root.value?.items?.find((item: MNode) => item.id === curPageId.value) || root.value?.items?.[0],
     );
 
-    const designWidth = document.documentElement.getBoundingClientRect().width;
-
-    const app = new Core({
-      designWidth,
-      config: root.value,
-      platform: 'editor',
-    });
-
-    window.appInstance = app;
-
-    provide('app', app);
-
     watch(pageConfig, async () => {
       await nextTick();
       const page = document.querySelector<HTMLElement>('.magic-ui-page');
@@ -66,7 +56,7 @@ export default defineComponent({
         console.log('select config', id);
         selectedId.value = id;
 
-        if (app.getPage(id)) {
+        if (app?.getPage(id)) {
           this.updatePageId?.(id);
         }
 
@@ -86,9 +76,7 @@ export default defineComponent({
         const parent = getNodePath(parentId, [root.value]).pop();
         if (!parent) throw new Error('未找到父节点');
 
-        if (config.type === 'page') {
-          app?.addPage(config as MPage);
-        } else {
+        if (config.type !== 'page') {
           const parentNode = app?.page?.getNode(parent.id);
           parentNode && app?.page?.initNode(config, parentNode);
         }
@@ -114,7 +102,7 @@ export default defineComponent({
         const parent = getNodePath(parentId, [root.value]).pop();
         if (!parent) throw new Error('未找到父节点');
 
-        const nodeInstance = app.page?.getNode(config.id);
+        const nodeInstance = app?.page?.getNode(config.id);
         if (nodeInstance) {
           nodeInstance.setData(config);
         }
@@ -133,9 +121,9 @@ export default defineComponent({
         if (!parent) throw new Error('未找到父元素');
 
         if (node.type === 'page') {
-          app?.deletePage(node.id);
+          app?.deletePage();
         } else {
-          app.page?.deleteNode(node.id);
+          app?.page?.deleteNode(node.id);
         }
 
         const index = parent.items?.findIndex((child: MNode) => child.id === node.id);

runtime/vue2/playground/main.ts

@@ -18,6 +18,8 @@
 
 import Vue from 'vue';
 
+import Core from '@tmagic/core';
+
 import App from './App.vue';
 
 Promise.all([import('../.tmagic/comp-entry'), import('../.tmagic/plugin-entry')]).then(([components, plugins]) => {
@@ -29,9 +31,21 @@ Promise.all([import('../.tmagic/comp-entry'), import('../.tmagic/plugin-entry')]
     Vue.use(plugin);
   });
 
+  const designWidth = document.documentElement.getBoundingClientRect().width;
+
+  const app = new Core({
+    designWidth,
+    platform: 'editor',
+  });
+
+  Vue.prototype.app = app;
+
   new Vue({
     // @ts-ignore
     render: (h) => h(App),
+    provide: {
+      app,
+    },
     el: '#app',
   });
 });

runtime/vue3/playground/App.vue

@@ -1,12 +1,12 @@
 <template>
-  <magic-ui-page v-if="pageConfig" :config="pageConfig"></magic-ui-page>
+  <magic-ui-page v-if="pageConfig" :key="pageConfig.id" :config="pageConfig"></magic-ui-page>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, nextTick, provide, reactive, ref, watch } from 'vue';
+import { computed, defineComponent, inject, nextTick, reactive, ref, watch } from 'vue';
 
 import Core from '@tmagic/core';
-import type { Id, MApp, MNode, MPage } from '@tmagic/schema';
+import type { Id, MApp, MNode } from '@tmagic/schema';
 import { Magic, RemoveData, UpdateData } from '@tmagic/stage';
 import { getNodePath } from '@tmagic/utils';
 
@@ -18,6 +18,8 @@ declare global {
 
 export default defineComponent({
   setup() {
+    const app = inject<Core | undefined>('app');
+
     const root = ref<MApp>();
     const curPageId = ref<Id>();
     const selectedId = ref<Id>();
@@ -26,17 +28,6 @@ export default defineComponent({
       () => root.value?.items?.find((item: MNode) => item.id === curPageId.value) || root.value?.items?.[0],
     );
 
-    const designWidth = document.documentElement.getBoundingClientRect().width;
-    const app = new Core({
-      designWidth,
-      config: root.value,
-      platform: 'editor',
-    });
-
-    window.appInstance = app;
-
-    provide('app', app);
-
     watch(pageConfig, async () => {
       await nextTick();
       const page = document.querySelector<HTMLElement>('.magic-ui-page');
@@ -64,7 +55,7 @@ export default defineComponent({
         console.log('select config', id);
         selectedId.value = id;
 
-        if (app.getPage(id)) {
+        if (app?.getPage(id)) {
           this.updatePageId?.(id);
         }
 
@@ -84,9 +75,7 @@ export default defineComponent({
         const parent = getNodePath(parentId, [root.value]).pop();
         if (!parent) throw new Error('未找到父节点');
 
-        if (config.type === 'page') {
-          app?.addPage(config as MPage);
-        } else {
+        if (config.type !== 'page') {
           const parentNode = app?.page?.getNode(parent.id);
           parentNode && app?.page?.initNode(config, parentNode);
         }
@@ -112,7 +101,7 @@ export default defineComponent({
         if (!node) throw new Error('未找到目标节点');
         if (!parent) throw new Error('未找到父节点');
 
-        const nodeInstance = app.page?.getNode(config.id);
+        const nodeInstance = app?.page?.getNode(config.id);
         if (nodeInstance) {
           nodeInstance.setData(config);
         }
@@ -131,9 +120,9 @@ export default defineComponent({
         if (!parent) throw new Error('未找到父元素');
 
         if (node.type === 'page') {
-          app?.deletePage(node.id);
+          app?.deletePage();
         } else {
-          app.page?.deleteNode(node.id);
+          app?.page?.deleteNode(node.id);
         }
 
         const index = parent.items?.findIndex((child: MNode) => child.id === node.id);

runtime/vue3/playground/main.ts

@@ -18,6 +18,8 @@
 
 import { createApp } from 'vue';
 
+import Core from '@tmagic/core';
+
 import App from './App.vue';
 
 Promise.all([import('../.tmagic/comp-entry'), import('../.tmagic/plugin-entry')]).then(([components, plugins]) => {
@@ -31,5 +33,14 @@ Promise.all([import('../.tmagic/comp-entry'), import('../.tmagic/plugin-entry')]
     magicApp.use(plugin);
   });
 
+  const designWidth = document.documentElement.getBoundingClientRect().width;
+  const app = new Core({
+    designWidth,
+    platform: 'editor',
+  });
+
+  magicApp.config.globalProperties.app = app;
+  magicApp.provide('app', app);
+
   magicApp.mount('#app');
 });