@tmagic/editor 1.8.0-beta.22 → 1.8.0-beta.23

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.22",
+  "version": "1.8.0-beta.23",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -54,29 +54,29 @@
     "events": "^3.3.0",
     "gesto": "^1.19.4",
     "keycon": "^1.4.0",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "^4.18.1",
     "moveable": "^0.53.0",
-    "serialize-javascript": "^7.0.0",
-    "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.8.0-beta.22",
-    "@tmagic/form": "1.8.0-beta.22",
-    "@tmagic/utils": "1.8.0-beta.22",
-    "@tmagic/table": "1.8.0-beta.22",
-    "@tmagic/stage": "1.8.0-beta.22"
+    "serialize-javascript": "^7.0.7",
+    "sortablejs": "^1.15.7",
+    "@tmagic/design": "1.8.0-beta.23",
+    "@tmagic/stage": "1.8.0-beta.23",
+    "@tmagic/utils": "1.8.0-beta.23",
+    "@tmagic/table": "1.8.0-beta.23",
+    "@tmagic/form": "1.8.0-beta.23"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
-    "@types/lodash-es": "^4.17.4",
+    "@types/lodash-es": "^4.17.12",
     "@types/serialize-javascript": "^5.0.4",
     "@types/sortablejs": "^1.15.9",
-    "@vue/test-utils": "^2.4.6"
+    "@vue/test-utils": "^2.4.11"
   },
   "peerDependencies": {
     "monaco-editor": "^0.55.1 ",
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
     "vue": "^3.5.40",
-    "@tmagic/core": "1.8.0-beta.22"
+    "@tmagic/core": "1.8.0-beta.23"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/utils/dep/collect-worker-client.ts

@@ -12,6 +12,14 @@ export interface CollectWorkerResult {
   nodeIds: Id[];
 }
 
+interface CollectTask {
+  id: number;
+  createRequest: (id: number) => CollectWorkerRequest;
+  resolve: (response: CollectWorkerResponse | null) => void;
+  /** 已被 abort 丢弃：调用方已按 null 结算，结果回来后不再回传 */
+  discarded: boolean;
+}
+
 /**
  * 依赖收集 worker 的主线程客户端
  *
@@ -20,13 +28,20 @@ export interface CollectWorkerResult {
  *
  * 全量收集与增量收集共用一个常驻 worker：增量收集调用频繁（每次节点更新都会触发），
  * 按次创建 worker 的启动开销无法接受，也容易漏掉销毁导致线程泄漏。
+ *
+ * 请求在主线程侧排队后逐个投递（worker 本身也是串行处理），这样 abort 时能直接丢掉尚未投递的请求，
+ * 无需销毁线程：worker 只在真正异常或销毁时才重建。
  */
 export class CollectWorkerClient {
   private worker: Worker | null = null;
 
   private seed = 0;
 
-  private pending = new Map<number, (response: CollectWorkerResponse | null) => void>();
+  /** 等待投递给 worker 的请求 */
+  private queue: CollectTask[] = [];
+
+  /** 已投递、等待 worker 响应的请求，worker 串行处理，同一时刻最多一个 */
+  private inflight: CollectTask | null = null;
 
   public get isSupported() {
     return typeof Worker !== 'undefined';
@@ -53,24 +68,37 @@ export class CollectWorkerClient {
   public terminate() {
     this.worker?.terminate();
     this.worker = null;
-    this.settleAllPending();
+    this.settleAll();
   }
 
   /**
-   * 丢弃在途请求并重建 worker
-   * clearIdleTasks / reset 中断收集时调用，避免已 abort 的长任务继续占着常驻 worker 拖慢后续收集
+   * 丢弃在途请求，但保留常驻 worker
+   *
+   * clearIdleTasks / reset 中断收集时调用。这里不能销毁 worker：worker 重建要重新加载并启动整份收集逻辑，
+   * 而 clearIdleTasks / reset 触发频繁（root 更新、数据源变更、历史回滚等），一旦下一次 abort 落在
+   * 上一个 worker 还没启动完的窗口内，就会陷入「加载中被销毁 → 重建 → 又被销毁」的循环，
+   * 表现为 worker 反复加载且依赖始终收集不完。
+   *
+   * 因此 abort 只做「不要这些结果」：尚未投递的请求直接丢掉，已投递的那一个标记为丢弃，
+   * 结果回来后忽略（不写回主线程），worker 继续复用。
    */
   public abort() {
-    this.terminate();
+    const { queue } = this;
+    this.queue = [];
+
+    for (const task of queue) {
+      task.resolve(null);
+    }
+
+    // 已投递的请求无法从外部打断（worker 忙时收不到取消消息），只能丢弃其结果
+    if (this.inflight && !this.inflight.discarded) {
+      this.inflight.discarded = true;
+      this.inflight.resolve(null);
+    }
   }
 
-  /**
-   * worker 按收到的顺序逐个处理请求，因此请求间不会互相打断，用 id 把结果分发回各自的调用方
-   */
   private request(createRequest: (id: number) => CollectWorkerRequest): Promise<CollectWorkerResponse | null> {
-    const worker = this.getWorker();
-
-    if (!worker) {
+    if (!this.isSupported) {
       return Promise.resolve(null);
     }
 
@@ -78,19 +106,44 @@ export class CollectWorkerClient {
     const id = this.seed;
 
     return new Promise<CollectWorkerResponse | null>((resolve) => {
-      this.pending.set(id, resolve);
-
-      try {
-        // 节点配置中可能存在函数等无法结构化克隆的值，需要先序列化再传递
-        worker.postMessage(createRequest(id));
-      } catch (e) {
-        error('magic editor: 依赖收集 worker 通信失败', e);
-        this.pending.delete(id);
-        resolve(null);
-      }
+      this.queue.push({ id, createRequest, resolve, discarded: false });
+      this.flush();
     });
   }
 
+  /**
+   * 投递队首请求，worker 串行处理，因此同一时刻只投递一个，用 id 把结果分发回各自的调用方
+   */
+  private flush() {
+    if (this.inflight || !this.queue.length) {
+      return;
+    }
+
+    const worker = this.getWorker();
+
+    if (!worker) {
+      this.settleAll();
+      return;
+    }
+
+    const task = this.queue.shift()!;
+    this.inflight = task;
+
+    try {
+      // 节点配置中可能存在函数等无法结构化克隆的值，需要先序列化再传递
+      worker.postMessage(task.createRequest(task.id));
+    } catch (e) {
+      error('magic editor: 依赖收集 worker 通信失败', e);
+      this.inflight = null;
+
+      if (!task.discarded) {
+        task.resolve(null);
+      }
+
+      this.flush();
+    }
+  }
+
   private getWorker() {
     if (!this.isSupported) {
       return null;
@@ -122,28 +175,41 @@ export class CollectWorkerClient {
   }
 
   private handleResponse(response: CollectWorkerResponse) {
-    const resolve = this.pending.get(response?.id);
+    const task = this.inflight;
 
-    if (!resolve) {
+    if (task?.id !== response?.id) {
       return;
     }
 
-    this.pending.delete(response.id);
-    resolve(response.failed ? null : response);
+    this.inflight = null;
+
+    // 被 abort 丢弃的请求已按 null 结算，结果不能再写回主线程
+    if (!task.discarded) {
+      task.resolve(response.failed ? null : response);
+    }
+
+    this.flush();
   }
 
   private handleFatalError() {
     this.worker?.terminate();
     this.worker = null;
-    this.settleAllPending();
+    this.settleAll();
   }
 
-  private settleAllPending() {
-    const resolvers = [...this.pending.values()];
-    this.pending.clear();
+  private settleAll() {
+    const tasks = this.queue;
+    this.queue = [];
 
-    for (const resolve of resolvers) {
-      resolve(null);
+    if (this.inflight) {
+      tasks.push(this.inflight);
+      this.inflight = null;
+    }
+
+    for (const task of tasks) {
+      if (!task.discarded) {
+        task.resolve(null);
+      }
     }
   }
 }

package/src/utils/type-match-rules.ts

@@ -20,7 +20,7 @@ import type { DataSourceFieldType, DataSourceSchema, Id } from '@tmagic/core';
 import { NodeType } from '@tmagic/core';
 import { appendValidateSuggestion } from '@tmagic/design';
 import type { TypeMatchValidateContext, TypeMatchValidator } from '@tmagic/form';
-import { validateTypeMatch } from '@tmagic/form';
+import { MAX_SUGGESTION_OPTIONS, optionSuggestion, stringifyExampleValue, validateTypeMatch } from '@tmagic/form';
 import {
   DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX,
   DATA_SOURCE_SET_DATA_METHOD_NAME,
@@ -41,35 +41,9 @@ import {
   numberOptions,
 } from '@editor/utils/props';
 
-/**
- * 将值格式化为可读的参考示例字符串。
- */
-const stringifyExampleValue = (value: any): string => {
-  if (typeof value === 'string') return `"${value}"`;
-  if (value === null || value === undefined) return String(value);
-  if (typeof value === 'object') {
-    try {
-      return JSON.stringify(value);
-    } catch {
-      return String(value);
-    }
-  }
-  return String(value);
-};
-
-// 参考建议中最多展示的可选值个数，超出以「等」省略。
-const MAX_SUGGESTION_OPTIONS = 20;
-
-/**
- * 生成「请使用以下某一个值：xxx；xxx」形式的参考建议；无可选值时返回空字符串（不追加建议）。
- */
-const listSuggestion = (values: any[]): string => {
-  const list = values.filter((item) => typeof item !== 'undefined' && item !== null && item !== '');
-  if (!list.length) return '';
-  const shown = list.slice(0, MAX_SUGGESTION_OPTIONS).map(stringifyExampleValue);
-  const suffix = list.length > MAX_SUGGESTION_OPTIONS ? ' 等' : '';
-  return `请使用以下某一个值：${shown.join('；')}${suffix}`;
-};
+/** 复用 form 的可选项建议文案；额外过滤 null / 空串，避免业务侧无效枚举污染提示。 */
+const listSuggestion = (values: any[]): string =>
+  optionSuggestion(values.filter((item) => item !== null && item !== ''));
 
 /**
  * 列出当前可用数据源 id 的参考建议。