refactor(editor): dsl更新后通知runtime更新代码优化

packages/editor/src/initService.ts

@@ -1,4 +1,4 @@
-import { onBeforeUnmount, reactive, toRaw, watch } from 'vue';
+import { nextTick, onBeforeUnmount, reactive, toRaw, watch } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type TMagicCore from '@tmagic/core';
@@ -21,9 +21,11 @@ import {
   NODE_CONDS_KEY,
   NodeType,
   Target,
+  updateNode,
 } from '@tmagic/core';
 import { ChangeRecord } from '@tmagic/form';
-import { getNodes, isPage, isValueIncludeDataSource } from '@tmagic/utils';
+import StageCore from '@tmagic/stage';
+import { getDepNodeIds, getNodes, isPage, isValueIncludeDataSource } from '@tmagic/utils';
 
 import PropsPanel from './layouts/PropsPanel.vue';
 import { isIncludeDataSource } from './utils/editor';
@@ -233,14 +235,15 @@ export const initServiceEvents = (
 ) => {
   let getTMagicAppPrimise: Promise<TMagicCore | undefined> | null = null;
 
-  const getTMagicApp = (): Promise<TMagicCore | undefined> => {
-    const renderer = editorService.get('stage')?.renderer;
+  const getTMagicApp = async (): Promise<TMagicCore | undefined> => {
+    const stage = await getStage();
+    const { renderer } = stage;
     if (!renderer) {
-      return Promise.resolve(void 0);
+      return void 0;
     }
 
     if (renderer.runtime) {
-      return Promise.resolve(renderer.runtime.getApp?.());
+      return renderer.runtime.getApp?.();
     }
 
     if (getTMagicAppPrimise) {
@@ -344,6 +347,60 @@ export const initServiceEvents = (
     },
   );
 
+  const getStage = (): Promise<StageCore> => {
+    const stage = editorService.get('stage');
+    if (stage) {
+      return Promise.resolve(stage);
+    }
+
+    return new Promise<StageCore>((resolve) => {
+      const unWatch = watch(
+        () => editorService.get('stage'),
+        (stage) => {
+          if (stage) {
+            resolve(stage);
+            nextTick(() => {
+              unWatch();
+            });
+          }
+        },
+      );
+    });
+  };
+
+  const updateStageDsl = async (value: MApp | null) => {
+    const dsl = cloneDeep(toRaw(value));
+
+    const stage = await getStage();
+
+    const runtime = await stage.renderer?.getRuntime();
+    const app = await getTMagicApp();
+
+    if (!app?.dataSourceManager) {
+      runtime?.updateRootConfig?.(dsl!);
+    }
+
+    const page = editorService.get('page');
+    const node = editorService.get('node');
+    page?.id && runtime?.updatePageId?.(page.id);
+    setTimeout(() => {
+      node && stage?.select(toRaw(node.id));
+    });
+
+    if (value) {
+      depService.clearIdleTasks();
+      await (typeof Worker === 'undefined' ? collectIdle(value.items, true) : depService.collectByWorker(value));
+
+      if (value.dataSources && value.dataSourceDeps && app?.dataSourceManager) {
+        for (const node of getNodes(getDepNodeIds(value.dataSourceDeps), value.items)) {
+          updateNode(app.dataSourceManager.compiledNode(node), value);
+        }
+      }
+
+      runtime?.updateRootConfig?.(cloneDeep(value));
+    }
+  };
+
   const initDataSourceDepTarget = (ds: DataSourceSchema) => {
     depService.addTarget(createDataSourceTarget(ds, reactive({})));
     depService.addTarget(createDataSourceMethodTarget(ds, reactive({})));
@@ -370,11 +427,7 @@ export const initServiceEvents = (
     }
 
     if (Array.isArray(value.items)) {
-      depService.clearIdleTasks();
-
-      (typeof Worker === 'undefined' ? collectIdle(value.items, true) : depService.collectByWorker(value)).then(() => {
-        updateStageNodes(value.items);
-      });
+      updateStageDsl(value);
     } else {
       depService.clear();
       delete value.dataSourceDeps;

packages/editor/src/layouts/workspace/viewer/Stage.vue

@@ -43,20 +43,9 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  computed,
-  markRaw,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  toRaw,
-  useTemplateRef,
-  watch,
-  watchEffect,
-} from 'vue';
-import { cloneDeep } from 'lodash-es';
+import { computed, markRaw, nextTick, onBeforeUnmount, onMounted, useTemplateRef, watch, watchEffect } from 'vue';
 
-import type { MApp, MContainer } from '@tmagic/core';
+import type { MContainer } from '@tmagic/core';
 import StageCore, { getOffset, Runtime } from '@tmagic/stage';
 import { calcValueByFontsize, getIdFromEl } from '@tmagic/utils';
 
@@ -130,12 +119,6 @@ watchEffect(() => {
 
   stage.on('runtime-ready', (rt) => {
     runtime = rt;
-    // toRaw返回的值是一个引用而非快照，需要cloneDeep
-    root.value && runtime?.updateRootConfig?.(cloneDeep(toRaw(root.value)));
-    page.value?.id && runtime?.updatePageId?.(page.value.id);
-    setTimeout(() => {
-      node.value && stage?.select(toRaw(node.value.id));
-    });
   });
 });
 
@@ -184,14 +167,6 @@ watch(page, (page) => {
   }
 });
 
-const rootChangeHandler = (root: MApp) => {
-  if (runtime && root) {
-    runtime.updateRootConfig?.(cloneDeep(toRaw(root)));
-  }
-};
-
-editorService.on('root-change', rootChangeHandler);
-
 const resizeObserver = new ResizeObserver((entries) => {
   for (const { contentRect } of entries) {
     uiService.set('stageContainerRect', {
@@ -210,10 +185,10 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   stage?.destroy();
+  stage = null;
   resizeObserver.disconnect();
   editorService.set('stage', null);
   keybindingService.unregisterEl('stage');
-  editorService.off('root-change', rootChangeHandler);
 });
 
 const parseDSL = getEditorConfig('parseDSL');