fix(editor,runtime): 编辑器中，依赖收集改成异步以后，可能出现配置更新了，但是依赖信息还未更新，导致渲染出来的组件不对

packages/editor/src/initService.ts

@@ -11,11 +11,12 @@ import {
   Target,
 } from '@tmagic/dep';
 import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/schema';
-import { getNodes, isPage } from '@tmagic/utils';
+import { isPage } from '@tmagic/utils';
 
 import PropsPanel from './layouts/PropsPanel.vue';
 import { EditorProps } from './editorProps';
 import { Services } from './type';
+import { traverseNode } from './utils';
 
 export declare type LooseRequired<T> = {
   [P in string & keyof T]: T[P];
@@ -204,38 +205,6 @@ export const initServiceEvents = (
     }
   };
 
-  const updateNodeWhenDataSourceChange = (nodes: MNode[]) => {
-    const root = editorService.get('root');
-    const stage = editorService.get('stage');
-
-    if (!root || !stage) return;
-
-    const app = getApp();
-
-    if (!app) return;
-
-    if (app.dsl) {
-      app.dsl.dataSourceDeps = root.dataSourceDeps;
-      app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
-      app.dsl.dataSources = root.dataSources;
-    }
-
-    updateDataSourceSchema();
-
-    nodes.forEach((node) => {
-      const deps = Object.values(root.dataSourceDeps || {});
-      deps.forEach((dep) => {
-        if (dep[node.id]) {
-          stage.update({
-            config: cloneDeep(node),
-            parentId: editorService.getParentById(node.id)?.id,
-            root: cloneDeep(root),
-          });
-        }
-      });
-    });
-  };
-
   const targetAddHandler = (target: Target) => {
     const root = editorService.get('root');
     if (!root) return;
@@ -267,8 +236,50 @@ export const initServiceEvents = (
     }
   };
 
-  const collectedHandler = (nodes: MNode[]) => {
+  const collectedHandler = (nodes: MNode[], deep: boolean) => {
-    updateNodeWhenDataSourceChange(nodes);
+    const root = editorService.get('root');
+    const stage = editorService.get('stage');
+
+    if (!root || !stage) return;
+
+    const app = getApp();
+
+    if (!app) return;
+
+    if (app.dsl) {
+      app.dsl.dataSourceDeps = root.dataSourceDeps;
+      app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
+      app.dsl.dataSources = root.dataSources;
+    }
+
+    updateDataSourceSchema();
+
+    const allNodes: MNode[] = [];
+
+    if (deep) {
+      nodes.forEach((node) => {
+        traverseNode<MNode>(node, (node) => {
+          if (!allNodes.includes(node)) {
+            allNodes.push(node);
+          }
+        });
+      });
+    } else {
+      allNodes.push(...nodes);
+    }
+
+    const deps = Object.values(root.dataSourceDeps || {});
+    deps.forEach((dep) => {
+      Object.keys(dep).forEach((id) => {
+        const node = allNodes.find((node) => node.id === id);
+        node &&
+          stage.update({
+            config: cloneDeep(node),
+            parentId: editorService.getParentById(node.id)?.id,
+            root: cloneDeep(root),
+          });
+      });
+    });
   };
 
   depService.on('add-target', targetAddHandler);
@@ -399,12 +410,6 @@ export const initServiceEvents = (
     (root?.items || []).forEach((page) => {
       depService.collectIdle([page], { pageId: page.id }, true);
     });
-
-    const targets = depService.getTargets(DepTargetType.DATA_SOURCE);
-
-    const nodes = getNodes(Object.keys(targets[config.id].deps), root?.items);
-
-    updateNodeWhenDataSourceChange(nodes);
   };
 
   const removeDataSourceTarget = (id: string) => {

packages/editor/src/utils/editor.ts

@@ -285,7 +285,7 @@ export const traverseNode = <T extends NodeItem = NodeItem>(
 ) => {
   cb(node, parents);
 
-  if (node.items?.length) {
+  if (Array.isArray(node.items) && node.items.length) {
     parents.push(node);
     node.items.forEach((item) => {
       traverseNode(item as T, cb, [...parents]);

runtime/vue2/build.vite.config.ts

@@ -73,6 +73,13 @@ export default defineConfig(({ mode }) => {
         sourcemap: true,
         outDir: path.resolve(process.cwd(), `../../playground/public/runtime/vue2/${mode}`),
       },
+
+      resolve: {
+        alias: [
+          { find: /^vue$/, replacement: path.join(__dirname, 'node_modules/vue/dist/vue.esm.js') },
+          { find: /^vue-demi$/, replacement: path.join(__dirname, 'node_modules/vue/dist/vue.esm.js') },
+        ],
+      },
     };
   }
 

runtime/vue2/page/index.html

@@ -11,6 +11,8 @@
       #app {
         width: 100%;
         height: 100%;
+        margin: 0;
+        padding: 0
       }
 
       #app {
@@ -23,10 +25,10 @@
         display: none;
       }
     </style>
-    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
   </head>
   <body style="font-size: 14px">
     <div id="app"></div>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
     <script type="module" src="./main.ts"></script>
   </body>
 </html>

runtime/vue2/playground/index.html

@@ -7,8 +7,6 @@
   <link rel="icon" href="/favicon.png" type="image/png">
   <title>Vue2 Playground</title>
   <style>
-   html,body {margin: 0; padding: 0}
-
     .magic-ui-page {
       overflow: hidden;
     }
@@ -22,6 +20,8 @@
     #app {
       width: 100%;
       height: 100%;
+      margin: 0;
+      padding: 0
     }
 
     #app {

runtime/vue3/build.vite.config.ts

@@ -75,6 +75,13 @@ export default defineConfig(({ mode }) => {
         sourcemap: true,
         outDir: path.resolve(process.cwd(), `../../playground/public/runtime/vue3/${mode}`),
       },
+
+      resolve: {
+        alias: [
+          { find: /^vue$/, replacement: path.join(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js') },
+          { find: /^vue-demi$/, replacement: path.join(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js') },
+        ],
+      },
     };
   }
 

runtime/vue3/page/index.html

@@ -11,6 +11,8 @@
       #app {
         width: 100%;
         height: 100%;
+        margin: 0;
+        padding: 0;
       }
 
       #app {
@@ -23,10 +25,11 @@
         display: none;
       }
     </style>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.21/vue.global.prod.min.js"></script>
   </head>
   <body style="font-size: 14px">
     <div id="app"></div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.21/vue.global.prod.min.js"></script>
     <script type="module" src="./main.ts"></script>
   </body>
 </html>

runtime/vue3/playground/index.html

@@ -7,8 +7,6 @@
   <link rel="icon" href="/favicon.png" type="image/png">
   <title>Vue3 Playground</title>
   <style>
-    html,body {margin: 0; padding: 0}
-
     .magic-ui-page {
       overflow: hidden;
     }
@@ -22,6 +20,8 @@
     #app {
       width: 100%;
       height: 100%;
+      margin: 0;
+      padding: 0;
     }
 
     #app {
@@ -39,11 +39,9 @@
   </style>
 </head>
 <body style="font-size: 14px">
-  
   <div id="app" class="in-editor"></div>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.21/vue.global.prod.min.js"></script>
-
   <script type="module" src="./main.ts"></script>
 </body>
 </html>