@tmagic/editor 1.8.0-manmanyu.9 → 1.8.0

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

@@ -0,0 +1,215 @@
+import serialize from 'serialize-javascript';
+
+import type { Id, MApp } from '@tmagic/core';
+
+import { error } from '../logger';
+
+import type { CollectWorkerPayload, CollectWorkerRequest, CollectWorkerResponse, DepsData } from './worker';
+import CollectWorker from './worker.ts?worker&inline';
+
+export interface CollectWorkerResult {
+  deps: DepsData;
+  nodeIds: Id[];
+}
+
+interface CollectTask {
+  id: number;
+  createRequest: (id: number) => CollectWorkerRequest;
+  resolve: (response: CollectWorkerResponse | null) => void;
+  /** 已被 abort 丢弃：调用方已按 null 结算，结果回来后不再回传 */
+  discarded: boolean;
+}
+
+/**
+ * 依赖收集 worker 的主线程客户端
+ *
+ * 依赖收集需要深度遍历整棵节点树并对每个属性做匹配，节点/数据源多时会长时间占用主线程导致页面卡死，
+ * 这里把遍历匹配放到 worker 中执行，主线程只负责把结果写回 target。
+ *
+ * 全量收集与增量收集共用一个常驻 worker：增量收集调用频繁（每次节点更新都会触发），
+ * 按次创建 worker 的启动开销无法接受，也容易漏掉销毁导致线程泄漏。
+ *
+ * 请求在主线程侧排队后逐个投递（worker 本身也是串行处理），这样 abort 时能直接丢掉尚未投递的请求，
+ * 无需销毁线程：worker 只在真正异常或销毁时才重建。
+ */
+export class CollectWorkerClient {
+  private worker: Worker | null = null;
+
+  private seed = 0;
+
+  /** 等待投递给 worker 的请求 */
+  private queue: CollectTask[] = [];
+
+  /** 已投递、等待 worker 响应的请求，worker 串行处理，同一时刻最多一个 */
+  private inflight: CollectTask | null = null;
+
+  public get isSupported() {
+    return typeof Worker !== 'undefined';
+  }
+
+  /**
+   * 在 worker 中全量收集整个 DSL 的依赖，target 由 worker 根据 DSL 重建
+   * @returns 收集结果，返回 null 表示 worker 不可用或执行失败
+   */
+  public collectDsl(dsl: MApp): Promise<DepsData | null> {
+    return this.request((id) => ({ id, dsl: serialize(dsl) })).then((response) => response?.deps || null);
+  }
+
+  /**
+   * 在 worker 中增量收集指定节点的依赖，target 以可序列化描述的形式传入
+   * @returns 收集结果，返回 null 表示 worker 不可用或执行失败，调用方需要回退到主线程收集
+   */
+  public collect(payload: CollectWorkerPayload): Promise<CollectWorkerResult | null> {
+    return this.request((id) => ({ id, payload: serialize(payload) })).then((response) =>
+      response ? { deps: response.deps || {}, nodeIds: response.nodeIds || [] } : null,
+    );
+  }
+
+  public terminate() {
+    this.worker?.terminate();
+    this.worker = null;
+    this.settleAll();
+  }
+
+  /**
+   * 丢弃在途请求，但保留常驻 worker
+   *
+   * clearIdleTasks / reset 中断收集时调用。这里不能销毁 worker：worker 重建要重新加载并启动整份收集逻辑，
+   * 而 clearIdleTasks / reset 触发频繁（root 更新、数据源变更、历史回滚等），一旦下一次 abort 落在
+   * 上一个 worker 还没启动完的窗口内，就会陷入「加载中被销毁 → 重建 → 又被销毁」的循环，
+   * 表现为 worker 反复加载且依赖始终收集不完。
+   *
+   * 因此 abort 只做「不要这些结果」：尚未投递的请求直接丢掉，已投递的那一个标记为丢弃，
+   * 结果回来后忽略（不写回主线程），worker 继续复用。
+   */
+  public abort() {
+    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);
+    }
+  }
+
+  private request(createRequest: (id: number) => CollectWorkerRequest): Promise<CollectWorkerResponse | null> {
+    if (!this.isSupported) {
+      return Promise.resolve(null);
+    }
+
+    this.seed += 1;
+    const id = this.seed;
+
+    return new Promise<CollectWorkerResponse | null>((resolve) => {
+      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;
+    }
+
+    if (this.worker) {
+      return this.worker;
+    }
+
+    try {
+      const worker: Worker = new CollectWorker();
+      worker.onmessage = (e: MessageEvent<CollectWorkerResponse>) => {
+        this.handleResponse(e.data);
+      };
+      // worker 整体异常时无法定位到具体请求，只能结算全部在途请求并重建 worker
+      worker.onerror = () => {
+        this.handleFatalError();
+      };
+      worker.onmessageerror = () => {
+        this.handleFatalError();
+      };
+      this.worker = worker;
+    } catch (e) {
+      error('magic editor: 依赖收集 worker 创建失败', e);
+      return null;
+    }
+
+    return this.worker;
+  }
+
+  private handleResponse(response: CollectWorkerResponse) {
+    const task = this.inflight;
+
+    if (task?.id !== response?.id) {
+      return;
+    }
+
+    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.settleAll();
+  }
+
+  private settleAll() {
+    const tasks = this.queue;
+    this.queue = [];
+
+    if (this.inflight) {
+      tasks.push(this.inflight);
+      this.inflight = null;
+    }
+
+    for (const task of tasks) {
+      if (!task.discarded) {
+        task.resolve(null);
+      }
+    }
+  }
+}

package/src/utils/dep/idle-task.ts

@@ -1,5 +1,7 @@
 import { EventEmitter } from 'events';
 
+import { error } from '../logger';
+
 export interface IdleTaskEvents {
   finish: [];
   'hight-level-finish': [];
@@ -11,6 +13,18 @@ type TaskList<T> = {
   data: T;
 }[];
 
+/**
+ * 回调因 timeout 触发（主线程一直没有空闲）时，单次回调执行任务的时间预算，单位 ms
+ * 参考一帧内可让出的余量：既保证队列有进展，又不长时间阻塞主线程
+ */
+const TIMEOUT_RUN_BUDGET = 5;
+
+/**
+ * 回调因 timeout 触发时，每两次读取时钟之间执行的任务数
+ * 与空闲时间 <=5ms 时的批量保持一致，避免每个任务都读一次时钟
+ */
+const TIMEOUT_BATCH_SIZE = 10;
+
 globalThis.requestIdleCallback =
   globalThis.requestIdleCallback ||
   function (cb) {
@@ -25,6 +39,12 @@ globalThis.requestIdleCallback =
     }, 1);
   };
 
+globalThis.cancelIdleCallback =
+  globalThis.cancelIdleCallback ||
+  function (handle) {
+    clearTimeout(handle as unknown as ReturnType<typeof setTimeout>);
+  };
+
 export class IdleTask<T = any> extends EventEmitter {
   private taskList: TaskList<T> = [];
 
@@ -58,7 +78,7 @@ export class IdleTask<T = any> extends EventEmitter {
     this.taskHandle = null;
 
     this.emit('update-task-length', {
-      length: this.taskList.length + this.hightLevelTaskList.length,
+      length: this.getTaskLength(),
       hightLevelLength: this.hightLevelTaskList.length,
     });
   }
@@ -82,51 +102,100 @@ export class IdleTask<T = any> extends EventEmitter {
   }
 
   private runTaskQueue(deadline: IdleDeadline) {
-    const { hightLevelTaskList, taskList } = this;
-
-    // 动画会占用空闲时间,当任务一直无法执行时，看看是否有动画正在播放
-    // 根据空闲时间的多少来决定执行的任务数，保证页面不卡死的情况下尽量多执行任务，不然当任务数巨大时，执行时间会很久
-    // 执行不完不会影响配置，但是会影响画布渲染
-    while (deadline.timeRemaining() > 0 && (taskList.length || hightLevelTaskList.length)) {
-      const timeRemaining = deadline.timeRemaining();
-      let times = 0;
-      if (timeRemaining <= 5) {
-        times = 10;
-      } else if (timeRemaining <= 10) {
-        times = 100;
-      } else if (timeRemaining <= 15) {
-        times = 300;
-      } else {
-        times = 600;
+    // 本次回调已触发，句柄随之失效；置空后 clearTasks / enqueueTask 才能正确判断是否需要重新调度
+    this.taskHandle = null;
+
+    try {
+      // 主线程一直没有空闲时，回调只会因 timeout 触发，此时 deadline.timeRemaining() 恒为 0（规范行为）。
+      // 若仍以它作为循环条件，一个任务都执行不了，而 finishRun 又会接着重新调度，
+      // 队列就会无限空转下去：依赖收集永远不结束，collecting 卡在 true，画布也不再更新。
+      // 这种情况下改用自有时间预算推进，既保证有进展，又不会像放开循环那样长时间阻塞主线程。
+      if (deadline.didTimeout) {
+        const start = Date.now();
+        do {
+          this.runTaskBatch(TIMEOUT_BATCH_SIZE);
+        } while (this.getTaskLength() && Date.now() - start < TIMEOUT_RUN_BUDGET);
+
+        return;
       }
 
-      for (let i = 0; i < times; i++) {
-        const task = hightLevelTaskList.length > 0 ? hightLevelTaskList.shift() : taskList.shift();
-        if (task) {
-          task.handler(task.data);
+      // 动画会占用空闲时间,当任务一直无法执行时，看看是否有动画正在播放
+      // 根据空闲时间的多少来决定执行的任务数，保证页面不卡死的情况下尽量多执行任务，不然当任务数巨大时，执行时间会很久
+      // 执行不完不会影响配置，但是会影响画布渲染
+      while (deadline.timeRemaining() > 0 && this.getTaskLength()) {
+        const timeRemaining = deadline.timeRemaining();
+        let times = 0;
+        if (timeRemaining <= 5) {
+          times = 10;
+        } else if (timeRemaining <= 10) {
+          times = 100;
+        } else if (timeRemaining <= 15) {
+          times = 300;
+        } else {
+          times = 600;
         }
 
-        if (hightLevelTaskList.length === 0 && taskList.length === 0) {
-          break;
-        }
+        this.runTaskBatch(times);
       }
+    } finally {
+      // 必须放在 finally 中：一旦这里被跳过，taskHandle 会一直是真值，
+      // enqueueTask 也就不会再重新调度，剩余任务与任务数将永久停在当前状态
+      this.finishRun();
     }
+  }
 
-    if (!hightLevelTaskList.length) {
-      this.emit('hight-level-finish');
+  /**
+   * 执行一批任务，队列被清空时提前结束
+   */
+  private runTaskBatch(times: number) {
+    for (let i = 0; i < times; i++) {
+      // 每次都从实例上取队列，任务执行过程中调用 clearTasks 能立即生效，不会继续消费已被清空的旧队列
+      const task = this.hightLevelTaskList.length > 0 ? this.hightLevelTaskList.shift() : this.taskList.shift();
+      if (task) {
+        this.runTask(task);
+      }
+
+      if (!this.getTaskLength()) {
+        break;
+      }
     }
+  }
+
+  /**
+   * 单个任务失败不能中断整个队列，否则后续任务永远不会被执行，
+   * 依赖收集会停在半路（收集中状态与剩余任务数都不再变化）
+   */
+  private runTask(task: TaskList<T>[number]) {
+    try {
+      task.handler(task.data);
+    } catch (e) {
+      error('magic editor: 空闲任务执行失败', e);
+    }
+  }
 
-    if (hightLevelTaskList.length || taskList.length) {
-      this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 300 });
-    } else {
-      this.taskHandle = 0;
+  private finishRun() {
+    try {
+      if (!this.hightLevelTaskList.length) {
+        this.emit('hight-level-finish');
+      }
+    } finally {
+      if (this.getTaskLength()) {
+        // 任务执行或事件监听中可能已经重新调度过
+        if (!this.taskHandle) {
+          this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 300 });
+        }
+      } else {
+        this.emit('finish');
+      }
 
-      this.emit('finish');
+      this.emit('update-task-length', {
+        length: this.getTaskLength(),
+        hightLevelLength: this.hightLevelTaskList.length,
+      });
     }
+  }
 
-    this.emit('update-task-length', {
-      length: taskList.length + hightLevelTaskList.length,
-      hightLevelLength: hightLevelTaskList.length,
-    });
+  private getTaskLength() {
+    return this.taskList.length + this.hightLevelTaskList.length;
   }
 }

package/src/utils/dep/worker.ts

@@ -3,30 +3,85 @@ import {
   createDataSourceCondTarget,
   createDataSourceMethodTarget,
   createDataSourceTarget,
+  createTargetByDescriptor,
   type DepData,
+  type DepExtendedData,
   DepTargetType,
   type Id,
   type MApp,
+  type TargetDescriptor,
+  type TargetNode,
   traverseTarget,
   Watcher,
 } from '@tmagic/core';
 
 import { error } from '../logger';
 
-onmessage = (e) => {
-  const watcher = new Watcher({ initialTargets: {} });
+export type DepsData = Record<string, Record<Id, DepData>>;
 
-  const { dsl } = e.data;
+/** 全量收集请求：worker 中根据 DSL 重建代码块/数据源 target */
+export interface DslCollectRequest {
+  /** 请求 id，用于把结果与调用方对应起来 */
+  id: number;
+  /** serialize-javascript 序列化后的 MApp */
+  dsl: string;
+}
 
+export interface CollectWorkerPayload {
+  /** 待收集的节点 */
+  nodes: TargetNode[];
+  /** 参与本次收集的 target 描述，worker 中据此重建 target */
+  targets: TargetDescriptor[];
+  depExtendedData: DepExtendedData;
+  deep: boolean;
+}
+
+/** 增量收集请求：target 由主线程以可序列化描述的形式传入 */
+export interface NodesCollectRequest {
+  id: number;
+  /** serialize-javascript 序列化后的 CollectWorkerPayload */
+  payload: string;
+}
+
+export type CollectWorkerRequest = DslCollectRequest | NodesCollectRequest;
+
+export interface CollectWorkerResponse {
+  id: number;
+  /** 收集结果，结构为 { [target.type]: { [target.id]: deps } } */
+  deps: DepsData;
+  /** 增量收集时本次覆盖到的节点 id（deep=true 时含子孙），主线程据此删除旧依赖 */
+  nodeIds?: Id[];
+  /** 收集失败，调用方需要回退到主线程收集 */
+  failed?: boolean;
+}
+
+/**
+ * 收集本次会覆盖到的节点 id
+ * 必须与 deep 一致：deep=false 时不能带上子孙 id，否则写回阶段 removeDep 会清掉未重收的子节点依赖
+ */
+const getNodeIds = (nodes: TargetNode[], deep: boolean, ids: Id[] = []) => {
+  for (const node of nodes) {
+    ids.push(node.id);
+
+    if (deep && Array.isArray(node.items) && node.items.length) {
+      getNodeIds(node.items, deep, ids);
+    }
+  }
+
+  return ids;
+};
+
+const collectDsl = ({ id, dsl }: DslCollectRequest) => {
   try {
     // eslint-disable-next-line no-eval
     const mApp: MApp = eval(`(${dsl})`);
 
     if (!mApp) {
-      postMessage({});
+      postMessage({ id, deps: {} });
+      return;
     }
 
-    watcher.clearTargets();
+    const watcher = new Watcher({ initialTargets: {} });
 
     if (mApp.codeBlocks) {
       for (const [id, code] of Object.entries(mApp.codeBlocks)) {
@@ -48,7 +103,7 @@ onmessage = (e) => {
       watcher.collectItems(page, targets, { pageId: page.id }, true);
     }
 
-    const data: Record<string, Record<Id, DepData>> = {
+    const deps: DepsData = {
       [DepTargetType.DATA_SOURCE]: {},
       [DepTargetType.DATA_SOURCE_METHOD]: {},
       [DepTargetType.DATA_SOURCE_COND]: {},
@@ -56,12 +111,61 @@ onmessage = (e) => {
     };
 
     traverseTarget(watcher.getTargetsList(), (target) => {
-      data[target.type][target.id] = target.deps;
+      deps[target.type][target.id] = target.deps;
     });
 
-    postMessage(data);
+    const response: CollectWorkerResponse = { id, deps };
+    postMessage(response);
   } catch (e: any) {
     error(e);
-    postMessage({});
+    const response: CollectWorkerResponse = { id, deps: {}, failed: true };
+    postMessage(response);
   }
 };
+
+const collectNodes = ({ id, payload }: NodesCollectRequest) => {
+  try {
+    // eslint-disable-next-line no-eval
+    const { nodes, targets: descriptors, depExtendedData, deep }: CollectWorkerPayload = eval(`(${payload})`);
+
+    const watcher = new Watcher({ initialTargets: {} });
+    // worker 中 target 均为新建（deps 为空），无需删除阶段，直接批量收集
+    const targets = descriptors.map((descriptor) => createTargetByDescriptor(descriptor));
+
+    for (const node of nodes) {
+      watcher.collectItems(node, targets, depExtendedData, deep);
+    }
+
+    const deps: DepsData = {};
+    for (const target of targets) {
+      if (!deps[target.type]) {
+        deps[target.type] = {};
+      }
+      deps[target.type][target.id] = target.deps;
+    }
+
+    const response: CollectWorkerResponse = { id, deps, nodeIds: getNodeIds(nodes, deep) };
+    postMessage(response);
+  } catch (e: any) {
+    error(e);
+    const response: CollectWorkerResponse = { id, deps: {}, nodeIds: [], failed: true };
+    postMessage(response);
+  }
+};
+
+/**
+ * 依赖收集 worker
+ *
+ * 依赖收集需要深度遍历整棵节点树并对每个属性做 target 匹配，节点/数据源多时会长时间占用主线程导致页面卡死，
+ * 因此把遍历匹配放到 worker 中执行。
+ * 全量与增量收集共用一个常驻 worker：收集逻辑只打进一份 inline worker 产物，
+ * 也不会因为频繁收集而反复创建线程，每个请求用 id 与调用方对应。
+ */
+onmessage = (e: MessageEvent<CollectWorkerRequest>) => {
+  if ('dsl' in e.data) {
+    collectDsl(e.data);
+    return;
+  }
+
+  collectNodes(e.data);
+};