@tmagic/editor 1.8.0-beta.2 → 1.8.0-beta.21

package/dist/es/services/dep.js

@@ -1,11 +1,10 @@
 import BaseService from "./BaseService.js";
 import { IdleTask } from "../utils/dep/idle-task.js";
-import WorkerWrapper from "../utils/dep/worker.js";
+import { CollectWorkerClient } from "../utils/dep/collect-worker-client.js";
 import { isPage } from "@tmagic/utils";
 import { DepTargetType, Watcher, traverseTarget } from "@tmagic/core";
 import { reactive, shallowReactive } from "vue";
 import { throttle } from "lodash-es";
-import serialize from "serialize-javascript";
 //#region packages/editor/src/services/dep.ts
 var Dep = class extends BaseService {
 	state = shallowReactive({
@@ -13,8 +12,12 @@ var Dep = class extends BaseService {
 		taskLength: 0
 	});
 	idleTask = new IdleTask();
+	collectWorker = new CollectWorkerClient();
 	watcher = new Watcher({ initialTargets: reactive({}) });
 	waitingWorker;
+	resolveWaitingWorker;
+	workerGeneration = 0;
+	activeBatches = /* @__PURE__ */ new Set();
 	constructor() {
 		super();
 		this.idleTask.on("update-task-length", throttle(({ length }) => {
@@ -62,45 +65,54 @@ var Dep = class extends BaseService {
 		this.emit("collected", nodes, deep);
 		this.emit("ds-collected", nodes, deep);
 	}
+	/**
+	* 空闲收集依赖
+	*
+	* 遍历匹配是整个收集过程中最耗时的部分（要深度遍历节点树并对每个属性做 target 匹配），
+	* 节点/数据源多时在主线程执行会长时间卡死页面，因此优先交给 worker 执行，主线程只负责把结果写回 target。
+	* 自定义 target 的 isTarget 是无法跨线程传递的闭包函数（没有 descriptor），仍走主线程空闲队列；
+	* worker 不可用（如 SSR）或执行失败时也会回退到主线程空闲队列。
+	*/
 	async collectIdle(nodes, depExtendedData = {}, deep = false, type) {
 		if (this.waitingWorker) await this.waitingWorker;
+		const batch = {
+			nodes,
+			deep,
+			pending: 0,
+			dsPending: 0,
+			collectedEmitted: false,
+			dsSettled: false,
+			aborted: false,
+			resolve: () => {}
+		};
+		const workerTargets = [];
+		for (const target of this.watcher.getCollectableTargets(type)) if (target.descriptor && this.collectWorker.isSupported) workerTargets.push(target);
+		else this.enqueueTasks(nodes, target, depExtendedData, deep, batch);
+		if (workerTargets.length && nodes.length) this.collectByCollectWorker(nodes, workerTargets, depExtendedData, deep, batch);
+		if (batch.pending === 0) {
+			this.emit("collected", nodes, deep);
+			this.updateCollectingState();
+			return true;
+		}
+		this.activeBatches.add(batch);
 		this.set("collecting", true);
-		let startTask = false;
-		this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
-			startTask = true;
-			this.enqueueTask(node, target, depExtendedData, deep);
-		});
 		return new Promise((resolve) => {
-			if (!startTask) {
-				this.emit("collected", nodes, deep);
-				this.set("collecting", false);
-				resolve();
-				return;
-			}
-			this.idleTask.once("finish", () => {
-				this.emit("collected", nodes, deep);
-				this.set("collecting", false);
-			});
-			this.idleTask.once("hight-level-finish", () => {
-				this.emit("ds-collected", nodes, deep);
-				resolve();
-			});
+			batch.resolve = resolve;
 		});
 	}
 	collectByWorker(dsl) {
 		this.set("collecting", true);
+		this.workerGeneration += 1;
+		const generation = this.workerGeneration;
 		const { promise, resolve: waitingResolve } = Promise.withResolvers();
 		this.waitingWorker = promise;
-		return new Promise((resolve) => {
-			const worker = new WorkerWrapper();
-			worker.postMessage({ dsl: serialize(dsl) });
-			worker.onmessage = (e) => {
-				resolve(e.data);
-			};
-			worker.onerror = () => {
-				resolve({});
-			};
-		}).then((depsData) => {
+		this.resolveWaitingWorker = waitingResolve;
+		return this.collectWorker.collectDsl(dsl).then((deps) => {
+			const depsData = deps || {};
+			if (generation !== this.workerGeneration) {
+				waitingResolve();
+				return depsData;
+			}
 			traverseTarget(this.watcher.getTargetsList(), (target) => {
 				if (depsData[target.type]?.[target.id]) {
 					target.deps = reactive(depsData[target.type][target.id]);
@@ -113,12 +125,17 @@ var Dep = class extends BaseService {
 			this.emit("collected", dsl.items, true);
 			this.emit("ds-collected", dsl.items, true);
 			waitingResolve();
+			if (this.waitingWorker === promise) {
+				this.waitingWorker = void 0;
+				this.resolveWaitingWorker = void 0;
+			}
 			return depsData;
 		});
 	}
 	collectNode(node, target, depExtendedData = {}, deep = false) {
 		if (isPage(node)) this.removePageDep(target, depExtendedData);
-		else this.watcher.removeTargetDep(target, node);
+		else if (deep) this.watcher.removeTargetDep(target, node);
+		else target.removeDep(node.id);
 		this.watcher.collectItem(node, target, depExtendedData, deep);
 	}
 	clear(nodes) {
@@ -134,7 +151,9 @@ var Dep = class extends BaseService {
 		return this.watcher.hasSpecifiedTypeTarget(type);
 	}
 	clearIdleTasks() {
+		this.abortActiveBatches();
 		this.idleTask.clearTasks();
+		this.collectWorker.abort();
 	}
 	on(eventName, listener) {
 		return super.on(eventName, listener);
@@ -143,7 +162,13 @@ var Dep = class extends BaseService {
 		return super.once(eventName, listener);
 	}
 	reset() {
+		this.abortActiveBatches();
+		this.workerGeneration += 1;
+		this.resolveWaitingWorker?.();
+		this.resolveWaitingWorker = void 0;
+		this.waitingWorker = void 0;
 		this.idleTask.clearTasks();
+		this.collectWorker.abort();
 		for (const type of Object.keys(this.watcher.getTargetsList())) this.removeTargets(type);
 		this.set("collecting", false);
 	}
@@ -153,6 +178,7 @@ var Dep = class extends BaseService {
 		this.reset();
 		this.removeAllPlugins();
 		this.idleTask.removeAllListeners();
+		this.collectWorker.terminate();
 	}
 	emit(eventName, ...args) {
 		return super.emit(eventName, ...args);
@@ -167,18 +193,113 @@ var Dep = class extends BaseService {
 			if (dep.data?.pageId && dep.data.pageId === depExtendedData.pageId) delete target.deps[depKey];
 		}
 	}
-	enqueueTask(node, target, depExtendedData, deep) {
-		this.idleTask.enqueueTask(({ node, deep, target }) => {
-			this.collectNode(node, target, depExtendedData, deep);
-		}, {
-			node,
-			deep: false,
-			target
-		}, target.type === DepTargetType.DATA_SOURCE);
+	/**
+	* 把遍历匹配交给 worker，结果回来后按 target 分片写回主线程
+	*/
+	collectByCollectWorker(nodes, targets, depExtendedData, deep, batch) {
+		const hasDataSource = targets.some((target) => target.type === DepTargetType.DATA_SOURCE);
+		this.beginBatchTask(batch, hasDataSource);
+		this.collectWorker.collect({
+			nodes,
+			targets: targets.map((target) => target.descriptor),
+			depExtendedData,
+			deep
+		}).then((result) => {
+			if (batch.aborted) return;
+			for (const target of targets) if (result) this.enqueueApplyTask(target, result.deps[target.type]?.[target.id] || {}, result.nodeIds, batch, {
+				nodes,
+				depExtendedData,
+				deep
+			});
+			else this.enqueueTasks(nodes, target, depExtendedData, deep, batch);
+		}).finally(() => {
+			this.onBatchTaskDone(batch, hasDataSource);
+		});
+	}
+	/**
+	* 用 worker 的收集结果替换 target 上这批节点的依赖
+	*/
+	enqueueApplyTask(target, deps, nodeIds, batch, { nodes, depExtendedData, deep }) {
+		const isDataSource = target.type === DepTargetType.DATA_SOURCE;
+		this.beginBatchTask(batch, isDataSource);
+		this.idleTask.enqueueTask(() => {
+			try {
+				const current = this.watcher.getTarget(target.id, target.type);
+				if (current !== target) {
+					if (current) this.enqueueTasks(nodes, current, depExtendedData, deep, batch);
+					return;
+				}
+				if (nodes.some((node) => isPage(node))) this.removePageDep(target, depExtendedData);
+				for (const id of nodeIds) target.removeDep(id);
+				for (const [id, dep] of Object.entries(deps)) target.deps[id] = dep;
+			} finally {
+				this.onBatchTaskDone(batch, isDataSource);
+			}
+		}, void 0, isDataSource);
+	}
+	enqueueTasks(nodes, target, depExtendedData, deep, batch) {
+		for (const node of nodes) this.enqueueTask(node, target, depExtendedData, deep, batch);
+	}
+	enqueueTask(node, target, depExtendedData, deep, batch) {
+		const isDataSource = target.type === DepTargetType.DATA_SOURCE;
+		this.beginBatchTask(batch, isDataSource);
+		this.idleTask.enqueueTask(() => {
+			try {
+				this.collectNode(node, target, depExtendedData);
+			} finally {
+				this.onBatchTaskDone(batch, isDataSource);
+			}
+		}, void 0, isDataSource);
 		if (deep && Array.isArray(node.items) && node.items.length) node.items.forEach((item) => {
-			this.enqueueTask(item, target, depExtendedData, deep);
+			this.enqueueTask(item, target, depExtendedData, deep, batch);
 		});
 	}
+	beginBatchTask(batch, isDataSource) {
+		batch.pending += 1;
+		if (isDataSource) batch.dsPending += 1;
+	}
+	onBatchTaskDone(batch, isDataSource) {
+		if (batch.aborted) return;
+		if (isDataSource) {
+			batch.dsPending -= 1;
+			if (batch.dsPending === 0) this.settleBatchDs(batch);
+		}
+		batch.pending -= 1;
+		if (batch.pending === 0) this.finishBatch(batch);
+	}
+	settleBatchDs(batch) {
+		if (batch.dsSettled) return;
+		batch.dsSettled = true;
+		this.emit("ds-collected", batch.nodes, batch.deep);
+		batch.resolve(true);
+	}
+	finishBatch(batch) {
+		if (!batch.collectedEmitted) {
+			batch.collectedEmitted = true;
+			this.emit("collected", batch.nodes, batch.deep);
+		}
+		this.settleBatchDs(batch);
+		this.activeBatches.delete(batch);
+		this.updateCollectingState();
+	}
+	/**
+	* idleTask 被清空时，在途批次的任务不会再执行，必须主动结算，
+	* 否则对应的 collectIdle Promise 永远不会 resolve（collecting 卡在 true、once 监听器泄漏）。
+	* 收集被中断（通常紧跟一次全量重新收集），因此不再 emit collected/ds-collected，仅结算 Promise。
+	*/
+	abortActiveBatches() {
+		if (!this.activeBatches.size) return;
+		const batches = [...this.activeBatches];
+		this.activeBatches.clear();
+		for (const batch of batches) {
+			batch.aborted = true;
+			batch.resolve(false);
+		}
+		this.updateCollectingState();
+	}
+	updateCollectingState() {
+		this.set("collecting", this.activeBatches.size > 0);
+	}
 };
 var dep_default = new Dep();
 //#endregion