feat(core,data-source,utils,react-runtime-help,vue-runtime-help): 新增对页面片节点的管理

runtime/react-runtime-help/src/hooks/use-app.ts

@@ -32,17 +32,22 @@ export interface UseAppOptions<T extends MNodeInstance = MNodeInstance> {
   config: T;
   iteratorContainerId?: Id[];
   iteratorIndex?: number[];
+  pageFragmentContainerId?: Id;
   methods?: {
     [key: string]: (...args: any[]) => any;
   };
 }
 
 export const useNode = <T extends TMagicNode = TMagicNode>(
-  props: Pick<UseAppOptions, 'config' | 'iteratorContainerId' | 'iteratorIndex'>,
+  props: Pick<UseAppOptions, 'config' | 'iteratorContainerId' | 'iteratorIndex' | 'pageFragmentContainerId'>,
   app = useContext(AppContent),
 ): T | undefined => {
   if (isDslNode(props.config) && props.config.id) {
-    app?.getNode(props.config.id, props.iteratorContainerId, props.iteratorIndex);
+    app?.getNode(props.config.id, {
+      iteratorContainerId: props.iteratorContainerId,
+      iteratorIndex: props.iteratorIndex,
+      pageFragmentContainerId: props.pageFragmentContainerId,
+    });
   }
   return void 0;
 };

runtime/vue-runtime-help/src/hooks/use-app.ts

@@ -30,15 +30,20 @@ interface UseAppOptions<T extends MNodeInstance = MNodeInstance> {
   config: T;
   iteratorContainerId?: Id[];
   iteratorIndex?: number[];
+  pageFragmentContainerId?: Id;
   methods?: Methods;
 }
 
 export const useNode = <T extends TMagicNode = TMagicNode>(
-  props: Pick<UseAppOptions, 'config' | 'iteratorContainerId' | 'iteratorIndex'>,
+  props: Pick<UseAppOptions, 'config' | 'iteratorContainerId' | 'iteratorIndex' | 'pageFragmentContainerId'>,
   app = inject<TMagicApp>('app'),
 ): T | undefined => {
   if (isDslNode(props.config) && props.config.id) {
-    return app?.getNode(props.config.id, props.iteratorContainerId, props.iteratorIndex);
+    return app?.getNode(props.config.id, {
+      iteratorContainerId: props.iteratorContainerId,
+      iteratorIndex: props.iteratorIndex,
+      pageFragmentContainerId: props.pageFragmentContainerId,
+    });
   }
   return void 0;
 };

runtime/vue-runtime-help/src/hooks/use-dsl.ts

@@ -1,28 +1,47 @@
 import { inject, nextTick, onBeforeUnmount, reactive, ref } from 'vue-demi';
 
 import type TMagicApp from '@tmagic/core';
-import type { ChangeEvent, MNode } from '@tmagic/core';
-import { isPage, replaceChildNode } from '@tmagic/core';
+import type { ChangeEvent, Id, MNode } from '@tmagic/core';
+import { isPage, isPageFragment, replaceChildNode } from '@tmagic/core';
 
-export const useDsl = (app = inject<TMagicApp>('app')) => {
+export const useDsl = (app = inject<TMagicApp>('app'), pageFragmentConstainerId: Id) => {
   if (!app) {
     throw new Error('useDsl must be used after MagicApp is created');
   }
 
-  const pageConfig = ref<MNode | undefined>(app.page?.data);
+  const pageFragment = pageFragmentConstainerId ? app.pageFragments.get(pageFragmentConstainerId) : null;
 
-  app.on('page-change', () => {
-    pageConfig.value = app.page?.data;
-  });
+  const pageConfig = ref<MNode | undefined>(pageFragmentConstainerId ? pageFragment?.data : app.page?.data);
 
-  const updateDataHandler = (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => {
-    nodes.forEach((node) => {
-      if (isPage(node)) {
+  if (pageFragmentConstainerId) {
+    app.on('dsl-change', () => {
+      pageConfig.value = pageFragment?.data;
+    });
+  } else {
+    app.on('page-change', () => {
+      pageConfig.value = app.page?.data;
+    });
+  }
+
+  const updateDataHandler = (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent, pageId: Id) => {
+    if (
+      !nodes.length ||
+      (pageFragmentConstainerId && pageFragment?.data.id !== pageId) ||
+      (!pageFragmentConstainerId && app.page?.data.id !== pageId)
+    ) {
+      return;
+    }
+
+    for (const node of nodes) {
+      if (
+        (isPage(node) && !pageFragmentConstainerId && node.id === pageId) ||
+        (isPageFragment(node) && pageFragmentConstainerId)
+      ) {
         pageConfig.value = node;
       } else {
         replaceChildNode(reactive(node), [pageConfig.value as MNode]);
       }
-    });
+    }
 
     nextTick(() => {
       app.emit('replaced-node', { nodes, sourceId, ...changeEvent });

runtime/vue-runtime-help/src/index.ts

@@ -33,6 +33,7 @@ export interface ComponentProps<T extends Omit<MComponent, 'id'> = MComponent> {
   iteratorIndex?: number[];
   iteratorContainerId?: Id[];
   containerIndex?: number;
+  pageFragmentContainerId?: Id;
   model?: any;
   disabled?: boolean;
 }