@tmagic/editor 1.5.15 → 1.5.17

package/src/fields/DataSourceMethods.vue

@@ -26,7 +26,7 @@ import { cloneDeep } from 'lodash-es';
 
 import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
-import type { ContainerChangeEventData, FieldProps } from '@tmagic/form';
+import type { ContainerChangeEventData, DataSourceMethodsConfig, FieldProps } from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
@@ -37,16 +37,9 @@ defineOptions({
   name: 'MFieldsDataSourceMethods',
 });
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<{
-      type: 'data-source-methods';
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<DataSourceMethodsConfig>>(), {
+  disabled: false,
+});
 
 const emit = defineEmits(['change']);
 

package/src/fields/DataSourceMocks.vue

@@ -32,7 +32,7 @@ import { inject, Ref, ref } from 'vue';
 
 import type { MockSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design';
-import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
+import { type DataSourceMocksConfig, type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 
@@ -47,16 +47,9 @@ defineOptions({
   name: 'MFieldsDataSourceMocks',
 });
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<{
-      type: 'data-source-mocks';
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<DataSourceMocksConfig>>(), {
+  disabled: false,
+});
 
 const emit = defineEmits(['change']);
 

package/src/fields/DataSourceSelect.vue

@@ -24,11 +24,18 @@ import { computed, inject } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
-import { type FieldProps, filterFunction, type FormState, MSelect, type SelectConfig } from '@tmagic/form';
+import {
+  type DataSourceSelect,
+  type FieldProps,
+  filterFunction,
+  type FormState,
+  MSelect,
+  type SelectConfig,
+} from '@tmagic/form';
 
 import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
-import type { DataSourceSelect, EventBus } from '@editor/type';
+import type { EventBus } from '@editor/type';
 import { SideItemKey } from '@editor/type';
 
 defineOptions({

package/src/fields/DisplayConds.vue

@@ -18,8 +18,8 @@ import { computed, inject } from 'vue';
 import type { DisplayCond } from '@tmagic/core';
 import {
   type ContainerChangeEventData,
+  type DisplayCondsConfig,
   type FieldProps,
-  type FilterFunction,
   filterFunction,
   type FormState,
   type GroupListConfig,
@@ -37,17 +37,9 @@ const emit = defineEmits<{
   change: [value: DisplayCond[], eventData?: ContainerChangeEventData];
 }>();
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<{
-      titlePrefix?: string;
-      parentFields?: string[] | FilterFunction<string[]>;
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<DisplayCondsConfig>>(), {
+  disabled: false,
+});
 
 const { dataSourceService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');

package/src/fields/EventSelect.vue

@@ -60,7 +60,10 @@ import { TMagicButton } from '@tmagic/design';
 import type {
   CascaderOption,
   ChildConfig,
+  CodeSelectColConfig,
   ContainerChangeEventData,
+  DataSourceMethodSelectConfig,
+  EventSelectConfig,
   FieldProps,
   FormState,
   OnChangeHandlerData,
@@ -70,7 +73,6 @@ import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
 import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
 
 import { useServices } from '@editor/hooks/use-services';
-import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig } from '@editor/type';
 import { getCascaderOptionsFromFields } from '@editor/utils';
 
 defineOptions({

package/src/fields/KeyValue.vue

@@ -63,7 +63,7 @@ import { ref, watchEffect } from 'vue';
 import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
-import type { FieldProps, FormItem } from '@tmagic/form';
+import type { FieldProps, KeyValueConfig } from '@tmagic/form';
 
 import CodeIcon from '@editor/icons/CodeIcon.vue';
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
@@ -72,19 +72,9 @@ defineOptions({
   name: 'MFieldsKeyValue',
 });
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<
-      {
-        type: 'key-value';
-        advanced?: boolean;
-      } & FormItem
-    >
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<KeyValueConfig>>(), {
+  disabled: false,
+});
 
 const emit = defineEmits<{
   change: [value: Record<string, any>];

package/src/fields/PageFragmentSelect.vue

@@ -20,11 +20,10 @@ import { computed } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
 
 import { Id, NodeType } from '@tmagic/core';
-import { FieldProps } from '@tmagic/form';
+import { FieldProps, type PageFragmentSelectConfig } from '@tmagic/form';
 
 import Icon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
-import type { PageFragmentSelectConfig } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsPageFragmentSelect',

package/src/fields/UISelect.vue

@@ -47,7 +47,7 @@ import { throttle } from 'lodash-es';
 
 import type { Id, MNode } from '@tmagic/core';
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
-import type { FieldProps, FormItem, FormState } from '@tmagic/form';
+import type { FieldProps, FormState, UISelectConfig } from '@tmagic/form';
 import { getIdFromEl } from '@tmagic/utils';
 
 import { useServices } from '@editor/hooks/use-services';
@@ -57,7 +57,7 @@ defineOptions({
   name: 'MFieldsUISelect',
 });
 
-const props = defineProps<FieldProps<{ type: 'ui-select' } & FormItem>>();
+const props = defineProps<FieldProps<UISelectConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/initService.ts

@@ -278,20 +278,21 @@ export const initServiceEvents = (
     });
   };
 
+  const getPageIdByNode = (node: MComponent) => {
+    let pageId: Id | undefined;
+
+    if (isPage(node)) {
+      pageId = node.id;
+    } else {
+      const info = editorService.getNodeInfo(node.id);
+      pageId = info.page?.id;
+    }
+
+    return pageId;
+  };
+
   const collectIdle = (nodes: MComponent[], deep: boolean, type?: DepTargetType) =>
-    Promise.all(
-      nodes.map((node) => {
-        let pageId: Id | undefined;
-
-        if (isPage(node)) {
-          pageId = node.id;
-        } else {
-          const info = editorService.getNodeInfo(node.id);
-          pageId = info.page?.id;
-        }
-        return depService.collectIdle([node], { pageId }, deep, type);
-      }),
-    );
+    Promise.all(nodes.map((node) => depService.collectIdle([node], { pageId: getPageIdByNode(node) }, deep, type)));
 
   watch(
     () => editorService.get('stage'),
@@ -338,7 +339,8 @@ export const initServiceEvents = (
 
     if (Array.isArray(value.items)) {
       depService.clearIdleTasks();
-      collectIdle(value.items, true).then(() => {
+
+      (typeof Worker === 'undefined' ? collectIdle(value.items, true) : depService.collectByWorker(value)).then(() => {
         updateStageNodes(value.items);
       });
     } else {
@@ -629,16 +631,12 @@ export const initServiceEvents = (
         root.dataSourceDeps = {};
       }
       root.dataSourceDeps[target.id] = target.deps;
-    }
-
-    if (target.type === DepTargetType.DATA_SOURCE_COND) {
+    } else if (target.type === DepTargetType.DATA_SOURCE_COND) {
       if (!root.dataSourceCondDeps) {
         root.dataSourceCondDeps = {};
       }
       root.dataSourceCondDeps[target.id] = target.deps;
-    }
-
-    if (target.type === DepTargetType.DATA_SOURCE_METHOD) {
+    } else if (target.type === DepTargetType.DATA_SOURCE_METHOD) {
       if (!root.dataSourceMethodDeps) {
         root.dataSourceMethodDeps = {};
       }

package/src/services/dep.ts

@@ -17,12 +17,14 @@
  */
 import { reactive, shallowReactive } from 'vue';
 import { throttle } from 'lodash-es';
+import serialize from 'serialize-javascript';
 
-import type { DepExtendedData, Id, MNode, Target, TargetNode } from '@tmagic/core';
-import { DepTargetType, Watcher } from '@tmagic/core';
+import type { DepData, DepExtendedData, Id, MApp, MNode, Target, TargetNode } from '@tmagic/core';
+import { DepTargetType, traverseTarget, Watcher } from '@tmagic/core';
 import { isPage } from '@tmagic/utils';
 
-import { IdleTask } from '@editor/utils/idle-task';
+import { IdleTask } from '@editor/utils/dep/idle-task';
+import Work from '@editor/utils/dep/worker.ts?worker&inline';
 
 import BaseService from './BaseService';
 
@@ -50,6 +52,8 @@ class Dep extends BaseService {
 
   private watcher = new Watcher({ initialTargets: reactive({}) });
 
+  private waitingWorker?: Promise<void>;
+
   constructor() {
     super();
 
@@ -114,7 +118,11 @@ class Dep extends BaseService {
     this.emit('ds-collected', nodes, deep);
   }
 
-  public collectIdle(nodes: MNode[], depExtendedData: DepExtendedData = {}, deep = false, type?: DepTargetType) {
+  public async collectIdle(nodes: MNode[], depExtendedData: DepExtendedData = {}, deep = false, type?: DepTargetType) {
+    if (this.waitingWorker) {
+      await this.waitingWorker;
+    }
+
     this.set('collecting', true);
     let startTask = false;
     this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
@@ -141,6 +149,48 @@ class Dep extends BaseService {
     });
   }
 
+  public collectByWorker(dsl: MApp) {
+    this.set('collecting', true);
+
+    const { promise, resolve: waitingResolve } = Promise.withResolvers<void>();
+
+    this.waitingWorker = promise;
+
+    return new Promise<Record<string, Record<string, DepData>>>((resolve) => {
+      const worker = new Work();
+      worker.postMessage({
+        dsl: serialize(dsl),
+      });
+      worker.onmessage = (e) => {
+        resolve(e.data);
+      };
+      worker.onerror = () => {
+        resolve({});
+      };
+    }).then((depsData) => {
+      traverseTarget(this.watcher.getTargetsList(), (target) => {
+        if (depsData[target.type]?.[target.id]) {
+          target.deps = reactive(depsData[target.type][target.id]);
+
+          if (target.type === DepTargetType.DATA_SOURCE && dsl.dataSourceDeps) {
+            dsl.dataSourceDeps[target.id] = target.deps;
+          } else if (target.type === DepTargetType.DATA_SOURCE_COND && dsl.dataSourceCondDeps) {
+            dsl.dataSourceCondDeps[target.id] = target.deps;
+          } else if (target.type === DepTargetType.DATA_SOURCE_METHOD) {
+            dsl.dataSourceMethodDeps[target.id] = target.deps;
+          }
+        }
+      });
+
+      this.set('collecting', false);
+      this.emit('collected', dsl.items, true);
+      this.emit('ds-collected', dsl.items, true);
+      waitingResolve();
+
+      return depsData;
+    });
+  }
+
   public collectNode(node: MNode, target: Target, depExtendedData: DepExtendedData = {}, deep = false) {
     // 先删除原有依赖，重新收集
     if (isPage(node)) {

package/src/type.ts

@@ -21,27 +21,8 @@ import type EventEmitter from 'events';
 import Sortable, { type Options, type SortableEvent } from 'sortablejs';
 import type { PascalCasedProperties } from 'type-fest';
 
-import type {
-  CodeBlockContent,
-  CodeBlockDSL,
-  DataSourceFieldType,
-  DataSourceSchema,
-  Id,
-  MApp,
-  MContainer,
-  MNode,
-  MPage,
-  MPageFragment,
-} from '@tmagic/core';
-import type {
-  ChildConfig,
-  FilterFunction,
-  FormConfig,
-  FormItem,
-  FormState,
-  Input,
-  TableColumnConfig,
-} from '@tmagic/form';
+import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/core';
+import type { FormConfig, TableColumnConfig } from '@tmagic/form';
 import type StageCore from '@tmagic/stage';
 import type {
   ContainerHighlightType,
@@ -562,25 +543,6 @@ export interface HistoryState {
   canUndo: boolean;
 }
 
-export interface EventSelectConfig {
-  name: string;
-  type: 'event-select';
-  src: 'datasource' | 'component';
-  labelWidth?: string;
-  /** 事件名称表单配置 */
-  eventNameConfig?: FormItem;
-  /** 动作类型配置 */
-  actionTypeConfig?: FormItem;
-  /** 联动组件配置 */
-  targetCompConfig?: FormItem;
-  /** 联动组件动作配置 */
-  compActionConfig?: FormItem;
-  /** 联动代码配置 */
-  codeActionConfig?: FormItem;
-  /** 联动数据源配置 */
-  dataSourceActionConfig?: FormItem;
-}
-
 export enum KeyBindingCommand {
   /** 复制 */
   COPY_NODE = 'tmagic-system-copy-node',
@@ -636,69 +598,6 @@ export interface KeyBindingCacheItem {
   bound: boolean;
 }
 
-export interface CodeSelectColConfig extends FormItem {
-  type: 'code-select-col';
-  /** 是否可以编辑代码块，disable表示的是是否可以选择代码块 */
-  notEditable?: boolean | FilterFunction;
-}
-
-export interface PageFragmentSelectConfig extends FormItem {
-  type: 'page-fragment-select';
-}
-
-export interface DataSourceSelect extends FormItem, Input {
-  type: 'data-source-select';
-  /** 数据源类型: base、http... */
-  dataSourceType?: string;
-  /** 是否要编译成数据源的data。
-   * id: 不编译，就是要数据源id;
-   * value: 要编译（数据源data）
-   * */
-  value?: 'id' | 'value';
-  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
-  notEditable?: boolean | FilterFunction;
-}
-
-export interface DataSourceMethodSelectConfig extends FormItem {
-  type: 'data-source-method-select';
-  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
-  notEditable?: boolean | FilterFunction;
-}
-
-export interface DataSourceFieldSelectConfig extends FormItem {
-  type: 'data-source-field-select';
-  /**
-   * 是否要编译成数据源的data。
-   * key: 不编译，就是要数据源id和field name;
-   * value: 要编译（数据源data[`${filed}`]）
-   * */
-  value?: 'key' | 'value';
-  /** 是否严格的遵守父子节点不互相关联 */
-  checkStrictly?:
-    | boolean
-    | ((
-        mForm: FormState | undefined,
-        data: {
-          model: Record<any, any>;
-          values: Record<any, any>;
-          parent?: Record<any, any>;
-          formValue: Record<any, any>;
-          prop: string;
-          config: DataSourceFieldSelectConfig;
-          dataSource?: DataSourceSchema;
-        },
-      ) => boolean);
-  dataSourceFieldType?: DataSourceFieldType[];
-  fieldConfig?: ChildConfig;
-  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
-  notEditable?: boolean | FilterFunction;
-}
-
-export interface CondOpSelectConfig extends FormItem {
-  type: 'cond-op';
-  parentFields?: string[];
-}
-
 /** 可新增的数据源类型选项 */
 export interface DatasourceTypeOption {
   /** 数据源类型 */

package/src/utils/data-source/formConfigs/base.ts

@@ -1,7 +1,7 @@
-import type { FormConfig } from '@tmagic/form';
+import { defineFormConfig } from '@tmagic/form';
 
-export default function (): FormConfig {
-  return [
+export default () =>
+  defineFormConfig([
     {
       name: 'id',
       type: 'hidden',
@@ -26,5 +26,4 @@ export default function (): FormConfig {
       name: 'description',
       text: '描述',
     },
-  ];
-}
+  ]);

package/src/utils/data-source/formConfigs/http.ts

@@ -1,6 +1,6 @@
-import { FormConfig } from '@tmagic/form';
+import { defineFormConfig } from '@tmagic/form';
 
-export default [
+export default defineFormConfig([
   {
     name: 'autoFetch',
     text: '自动请求',
@@ -59,4 +59,4 @@ export default [
       },
     ],
   },
-] as FormConfig;
+]);

package/src/utils/dep/worker.ts

@@ -0,0 +1,63 @@
+import {
+  createCodeBlockTarget,
+  createDataSourceCondTarget,
+  createDataSourceMethodTarget,
+  createDataSourceTarget,
+  type DepData,
+  DepTargetType,
+  type Id,
+  type MApp,
+  traverseTarget,
+  Watcher,
+} from '@tmagic/core';
+
+import { error } from '../logger';
+
+onmessage = (e) => {
+  const watcher = new Watcher({ initialTargets: {} });
+
+  const { dsl } = e.data;
+
+  try {
+    // eslint-disable-next-line no-eval
+    const mApp: MApp = eval(`(${dsl})`);
+
+    if (!mApp) {
+      postMessage({});
+    }
+
+    if (mApp.codeBlocks) {
+      for (const [id, code] of Object.entries(mApp.codeBlocks)) {
+        watcher.addTarget(createCodeBlockTarget(id, code));
+      }
+    }
+
+    if (mApp.dataSources) {
+      for (const ds of mApp.dataSources) {
+        watcher.addTarget(createDataSourceTarget(ds, {}));
+        watcher.addTarget(createDataSourceMethodTarget(ds, {}));
+        watcher.addTarget(createDataSourceCondTarget(ds, {}));
+      }
+    }
+
+    watcher.collectByCallback(mApp.items, undefined, ({ node, target }) => {
+      watcher.collectItem(node, target, { pageId: node.id }, true);
+    });
+
+    const data: Record<string, Record<Id, DepData>> = {
+      [DepTargetType.DATA_SOURCE]: {},
+      [DepTargetType.DATA_SOURCE_METHOD]: {},
+      [DepTargetType.DATA_SOURCE_COND]: {},
+      [DepTargetType.CODE_BLOCK]: {},
+    };
+
+    traverseTarget(watcher.getTargetsList(), (target) => {
+      data[target.type][target.id] = target.deps;
+    });
+
+    postMessage(data);
+  } catch (e: any) {
+    error(e);
+    postMessage({});
+  }
+};

package/src/utils/index.ts

@@ -22,7 +22,7 @@ export * from './logger';
 export * from './editor';
 export * from './operator';
 export * from './data-source';
-export * from './idle-task';
+export * from './dep/idle-task';
 export * from './scroll-viewer';
 export * from './tree';
 export * from './undo-redo';