fix: 迭代器内的组件配置了声明周期代码块无效

packages/data-source/src/DataSourceManager.ts

@@ -20,7 +20,7 @@ import EventEmitter from 'events';
 
 import { cloneDeep } from 'lodash-es';
 
-import type { default as TMagicApp, IteratorContainer as TMagicIteratorContainer } from '@tmagic/core';
+import type { default as TMagicApp } from '@tmagic/core';
 import type { DataSourceSchema, DisplayCond, Id, MNode, NODE_CONDS_KEY } from '@tmagic/schema';
 import { compiledNode } from '@tmagic/utils';
 
@@ -227,7 +227,7 @@ class DataSourceManager extends EventEmitter {
    * @returns {boolean}是否显示
    */
   public compliedIteratorItemConds(
-    itemData: any[],
+    itemData: any,
     node: { [NODE_CONDS_KEY]?: DisplayCond[] },
     dataSourceField: string[] = [],
   ) {
@@ -239,23 +239,10 @@ class DataSourceManager extends EventEmitter {
     return compliedConditions(node, ctxData);
   }
 
-  public compliedIteratorItems(
-    nodeId: Id,
-    itemData: any,
-    nodes: MNode[],
-    dataSourceField: string[] = [],
-    dataIteratorContainerId?: Id[],
-    dataIteratorIndex?: number[],
-  ) {
-    const iteratorContainer = this.app.getNode<TMagicIteratorContainer>(
-      nodeId,
-      dataIteratorContainerId,
-      dataIteratorIndex,
-    );
-
+  public compliedIteratorItems(itemData: any, nodes: MNode[], dataSourceField: string[] = []): MNode[] {
     const [dsId, ...keys] = dataSourceField;
     const ds = this.get(dsId);
-    if (!ds || !iteratorContainer) return nodes;
+    if (!ds) return nodes;
 
     const ctxData = createIteratorContentData(itemData, ds.id, keys, this.data);
 

packages/schema/src/index.ts

@@ -206,6 +206,11 @@ export interface PastePosition {
 
 export type MNode = MComponent | MContainer | MIteratorContainer | MPage | MApp | MPageFragment;
 
+export interface MNodeInstance extends Omit<MNode, 'id'> {
+  id?: Id;
+  type?: string;
+}
+
 export enum HookType {
   /** 代码块钩子标识 */
   CODE = 'code',

packages/utils/src/index.ts

@@ -20,7 +20,7 @@ import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { cloneDeep, set as objectSet } from 'lodash-es';
 
-import type { DataSchema, DataSourceDeps, Id, MComponent, MNode } from '@tmagic/schema';
+import type { DataSchema, DataSourceDeps, Id, MComponent, MNode, MNodeInstance } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 
 export * from './dom';
@@ -449,3 +449,6 @@ export const addParamToUrl = (obj: Record<string, any>, global = globalThis, nee
 };
 
 export const dataSourceTemplateRegExp = /\$\{([\s\S]+?)\}/g;
+
+export const isDslNode = (config: MNodeInstance) =>
+  typeof config[IS_DSL_NODE_KEY] === 'undefined' || config[IS_DSL_NODE_KEY] === true;

runtime/vue-runtime-help/package.json

@@ -7,7 +7,7 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./types/index.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
     "./*": "./*"

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

@@ -19,10 +19,10 @@
 import { inject, onBeforeUnmount, onMounted } from 'vue-demi';
 
 import type TMagicApp from '@tmagic/core';
-import type { Id, MNode } from '@tmagic/schema';
-import { IS_DSL_NODE_KEY } from '@tmagic/utils';
+import type { Id, MNodeInstance } from '@tmagic/schema';
+import { isDslNode } from '@tmagic/utils';
 
-interface UseAppOptions<T extends MNode = MNode> {
+interface UseAppOptions<T extends MNodeInstance = MNodeInstance> {
   config: T;
   iteratorContainerId?: Id[];
   iteratorIndex?: number[];
@@ -31,17 +31,15 @@ interface UseAppOptions<T extends MNode = MNode> {
   };
 }
 
-const isDslNode = (config: MNode) => typeof config[IS_DSL_NODE_KEY] === 'undefined' || config[IS_DSL_NODE_KEY] === true;
-
-export default ({ methods, config, iteratorContainerId, iteratorIndex }: UseAppOptions) => {
+export const useApp = ({ methods = {}, config, iteratorContainerId, iteratorIndex }: UseAppOptions) => {
   const app: TMagicApp | undefined = inject('app');
 
   const emitData = {
     config,
     ...methods,
   };
 
-  const display = <T extends MNode>(config: T) => {
+  const display = <T extends MNodeInstance>(config: T) => {
     if (config.visible === false) return false;
     if (config.condResult === false) return false;
 
@@ -54,7 +52,7 @@ export default ({ methods, config, iteratorContainerId, iteratorIndex }: UseAppO
     return displayCfg !== false;
   };
 
-  const node = isDslNode(config) ? app?.getNode(config.id || '', iteratorContainerId, iteratorIndex) : undefined;
+  const node = isDslNode(config) && config.id ? app?.getNode(config.id, iteratorContainerId, iteratorIndex) : undefined;
 
   if (node) {
     node.emit('created', emitData);

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

@@ -1,3 +1,3 @@
 export * from './hooks/use-editor-dsl';
 export * from './hooks/use-dsl';
-export { default as useApp } from './useApp';
+export * from './hooks/use-app';

vue-components/button/src/index.vue

@@ -1,19 +1,20 @@
 <template>
-  <button class="magic-ui-button">
+  <button>
     <slot>
-      <p>{{ config?.text || '' }}</p>
+      {{ config?.text || '' }}
     </slot>
   </button>
 </template>
 
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue-demi';
 
-import type { MComponent } from '@tmagic/schema';
+import type { Id, MComponent } from '@tmagic/schema';
 import { useApp } from '@tmagic/vue-runtime-help';
 
-interface ButtonSchema extends MComponent {
-  type: 'button';
+interface ButtonSchema extends Omit<MComponent, 'id'> {
+  id?: Id;
+  type?: 'button';
   text: string;
 }
 
@@ -23,6 +24,8 @@ export default defineComponent({
       type: Object as PropType<ButtonSchema>,
       required: true,
     },
+    iteratorIndex: Array as PropType<number[]>,
+    iteratorContainerId: Array as PropType<Id[]>,
     model: {
       type: Object,
       default: () => ({}),
@@ -33,6 +36,8 @@ export default defineComponent({
     useApp({
       config: props.config,
       methods: {},
+      iteratorContainerId: props.iteratorContainerId,
+      iteratorIndex: props.iteratorIndex,
     });
   },
 });

vue-components/container/src/Container.vue

@@ -1,25 +1,21 @@
 <template>
-  <div
-    v-if="display(config)"
-    :data-tmagic-id="`${config.id}`"
-    :data-tmagic-iterator-index="iteratorIndex"
-    :data-tmagic-iterator-container-id="iteratorContainerId"
-    :class="className"
-    :style="app?.transformStyle(config.style || {})"
-  >
+  <div v-if="display(config)" :class="className" :style="style">
     <slot>
       <template v-for="(item, index) in config.items">
         <component
           v-if="display(item)"
           :key="item.id"
           :is="`magic-ui-${toLine(item.type)}`"
           :data-tmagic-id="item.id"
-          :data-tmagic-container-index="index"
           :data-tmagic-iterator-index="iteratorIndex"
           :data-tmagic-iterator-container-id="iteratorContainerId"
-          :class="`${item.className || ''}`"
+          :data-container-index="index"
+          :class="item.className ? `${item.className} magic-ui-${toLine(item.type)}` : `magic-ui-${toLine(item.type)}`"
           :style="app?.transformStyle(item.style || {})"
           :config="{ ...item, [IS_DSL_NODE_KEY]: true }"
+          :container-index="index"
+          :iterator-index="iteratorIndex"
+          :iterator-container-id="iteratorContainerId"
         ></component>
       </template>
     </slot>
@@ -33,10 +29,15 @@ import type { Id, MContainer } from '@tmagic/schema';
 import { IS_DSL_NODE_KEY, toLine } from '@tmagic/utils';
 import { useApp } from '@tmagic/vue-runtime-help';
 
+interface ContainerSchema extends Omit<MContainer, 'id'> {
+  id?: Id;
+  type?: 'container';
+}
+
 export default defineComponent({
   props: {
     config: {
-      type: Object as PropType<MContainer>,
+      type: Object as PropType<ContainerSchema>,
       required: true,
     },
     iteratorIndex: Array as PropType<number[]>,
@@ -50,6 +51,8 @@ export default defineComponent({
   setup(props) {
     const { display, app } = useApp({
       config: props.config,
+      iteratorContainerId: props.iteratorContainerId,
+      iteratorIndex: props.iteratorIndex,
       methods: {},
     });
 
@@ -64,9 +67,17 @@ export default defineComponent({
       return list.join(' ');
     });
 
+    const style = computed(() => {
+      if (props.config[IS_DSL_NODE_KEY]) {
+        return {};
+      }
+      return app?.transformStyle(props.config.style || {});
+    });
+
     return {
       app,
       className,
+      style,
       IS_DSL_NODE_KEY,
 
       display,

vue-components/img/src/index.vue

@@ -1,17 +1,18 @@
 <template>
-  <img class="magic-ui-img" :src="config.src" @click="clickHandler" />
+  <img :src="config.src" @click="clickHandler" />
 </template>
 
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue-demi';
 
-import type { MComponent } from '@tmagic/schema';
+import type { Id, MComponent } from '@tmagic/schema';
 import { useApp } from '@tmagic/vue-runtime-help';
 
-interface ImgSchema extends MComponent {
-  type: 'img';
+interface ImgSchema extends Omit<MComponent, 'id'> {
+  id?: Id;
+  type?: 'img';
   src: string;
-  url: string;
+  url?: string;
 }
 
 export default defineComponent({
@@ -20,6 +21,8 @@ export default defineComponent({
       type: Object as PropType<ImgSchema>,
       required: true,
     },
+    iteratorIndex: Array as PropType<number[]>,
+    iteratorContainerId: Array as PropType<Id[]>,
     model: {
       type: Object,
       default: () => ({}),
@@ -33,6 +36,8 @@ export default defineComponent({
 
     useApp({
       config: props.config,
+      iteratorContainerId: props.iteratorContainerId,
+      iteratorIndex: props.iteratorIndex,
       methods: {},
     });
 

vue-components/iterator-container/package.json

@@ -20,7 +20,6 @@
     "@tmagic/core": "workspace:*",
     "@tmagic/schema": "workspace:*",
     "@tmagic/utils": "workspace:*",
-    "@tmagic/vue-container": "workspace:*",
     "@tmagic/vue-runtime-help": "workspace:*",
     "@vue/composition-api": ">=1.7.2",
     "typescript": "*",