@spcsn/taro-runtime 0.1.0

package/dist/dom/node.d.ts

@@ -0,0 +1,76 @@
+import { TaroEventTarget } from './event-target';
+import { NodeType } from './node_types';
+import type { TFunc, UpdatePayload } from '../interface';
+import type { TaroDocument } from './document';
+import type { TaroElement } from './element';
+import type { TaroRootElement } from './root';
+interface RemoveChildOptions {
+    cleanRef?: boolean;
+    doUpdate?: boolean;
+}
+export declare class TaroNode extends TaroEventTarget {
+    uid: string;
+    sid: string;
+    nodeType: NodeType;
+    nodeName: string;
+    parentNode: TaroNode | null;
+    childNodes: TaroNode[];
+    constructor();
+    private hydrate;
+    private updateChildNodes;
+    private updateSingleChild;
+    get _root(): TaroRootElement | null;
+    protected findIndex(refChild: TaroNode): number;
+    get _path(): string;
+    get nextSibling(): TaroNode | null;
+    get previousSibling(): TaroNode | null;
+    get parentElement(): TaroElement | null;
+    get firstChild(): TaroNode | null;
+    get lastChild(): TaroNode | null;
+    /**
+     * @textContent 目前只能置空子元素
+     * @TODO 等待完整 innerHTML 实现
+     */
+    set textContent(text: string);
+    /**
+     * @doc https://developer.mozilla.org/zh-CN/docs/Web/API/Node/insertBefore
+     * @scenario
+     * [A,B,C]
+     *   1. insert D before C, D has no parent
+     *   2. insert D before C, D has the same parent of C
+     *   3. insert D before C, D has the different parent of C
+     */
+    insertBefore<T extends TaroNode>(newChild: T, refChild?: TaroNode | null, isReplace?: boolean): T;
+    /**
+     * @doc https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild
+     * @scenario
+     * [A,B,C]
+     *   1. append C, C has no parent
+     *   2. append C, C has the same parent of B
+     *   3. append C, C has the different parent of B
+     */
+    appendChild(newChild: TaroNode): TaroNode;
+    /**
+     * @doc https://developer.mozilla.org/zh-CN/docs/Web/API/Node/replaceChild
+     * @scenario
+     * [A,B,C]
+     *   1. replace B with C, C has no parent
+     *   2. replace B with C, C has no parent, C has the same parent of B
+     *   3. replace B with C, C has no parent, C has the different parent of B
+     */
+    replaceChild(newChild: TaroNode, oldChild: TaroNode): TaroNode | undefined;
+    /**
+     * @doc https://developer.mozilla.org/zh-CN/docs/Web/API/Node/removeChild
+     * @scenario
+     * [A,B,C]
+     *   1. remove A or B
+     *   2. remove C
+     */
+    removeChild<T extends TaroNode>(child: T, options?: RemoveChildOptions): T;
+    remove(options?: RemoveChildOptions): void;
+    hasChildNodes(): boolean;
+    enqueueUpdate(payload: UpdatePayload): void;
+    get ownerDocument(): TaroDocument;
+    static extend(methodName: string, options: TFunc | Record<string, any>): void;
+}
+export {};

package/dist/dom/node.js

@@ -0,0 +1,213 @@
+import "../constants/index.js";
+import { MutationObserver } from "../dom-external/mutation-observer/index.js";
+import env from "../env.js";
+import { extend, incrementId, isComment } from "../utils/index.js";
+import { eventSource } from "./event-source.js";
+import { hydrate } from "../hydrate.js";
+import { TaroEventTarget } from "./event-target.js";
+import { Shortcuts, ensure, hooks } from "@spcsn/taro-shared";
+//#region src/dom/node.ts
+const CHILDNODES = Shortcuts.Childnodes;
+const nodeId = incrementId();
+var TaroNode = class TaroNode extends TaroEventTarget {
+	constructor() {
+		super();
+		this.parentNode = null;
+		this.childNodes = [];
+		this.hydrate = (node) => () => hydrate(node);
+		this.uid = "_" + nodeId();
+		this.sid = this.uid;
+		eventSource.set(this.sid, this);
+	}
+	updateChildNodes(isClean) {
+		const cleanChildNodes = () => [];
+		const rerenderChildNodes = () => {
+			return this.childNodes.filter((node) => !isComment(node)).map(hydrate);
+		};
+		this.enqueueUpdate({
+			path: `${this._path}.${CHILDNODES}`,
+			value: isClean ? cleanChildNodes : rerenderChildNodes
+		});
+	}
+	updateSingleChild(index) {
+		this.childNodes.forEach((child, childIndex) => {
+			if (isComment(child)) return;
+			if (index && childIndex < index) return;
+			this.enqueueUpdate({
+				path: child._path,
+				value: this.hydrate(child)
+			});
+		});
+	}
+	get _root() {
+		return this.parentNode?._root || null;
+	}
+	findIndex(refChild) {
+		const index = this.childNodes.indexOf(refChild);
+		ensure(index !== -1, "The node to be replaced is not a child of this node.");
+		return index;
+	}
+	get _path() {
+		const parentNode = this.parentNode;
+		if (parentNode) {
+			const indexOfNode = parentNode.childNodes.filter((node) => !isComment(node)).indexOf(this);
+			const index = hooks.call("getPathIndex", indexOfNode);
+			return `${parentNode._path}.${CHILDNODES}.${index}`;
+		}
+		return "";
+	}
+	get nextSibling() {
+		const parentNode = this.parentNode;
+		return parentNode?.childNodes[parentNode.findIndex(this) + 1] || null;
+	}
+	get previousSibling() {
+		const parentNode = this.parentNode;
+		return parentNode?.childNodes[parentNode.findIndex(this) - 1] || null;
+	}
+	get parentElement() {
+		const parentNode = this.parentNode;
+		if (parentNode?.nodeType === 1) return parentNode;
+		return null;
+	}
+	get firstChild() {
+		return this.childNodes[0] || null;
+	}
+	get lastChild() {
+		const childNodes = this.childNodes;
+		return childNodes[childNodes.length - 1] || null;
+	}
+	/**
+	* @textContent 目前只能置空子元素
+	* @TODO 等待完整 innerHTML 实现
+	*/
+	set textContent(text) {
+		const removedNodes = this.childNodes.slice();
+		const addedNodes = [];
+		while (this.firstChild) this.removeChild(this.firstChild, { doUpdate: false });
+		if (text === "") this.updateChildNodes(true);
+		else {
+			const newText = env.document.createTextNode(text);
+			addedNodes.push(newText);
+			this.appendChild(newText);
+			this.updateChildNodes();
+		}
+		MutationObserver.record({
+			type: "childList",
+			target: this,
+			removedNodes,
+			addedNodes
+		});
+	}
+	/**
+	* @doc https://developer.mozilla.org/zh-CN/docs/Web/API/Node/insertBefore
+	* @scenario
+	* [A,B,C]
+	*   1. insert D before C, D has no parent
+	*   2. insert D before C, D has the same parent of C
+	*   3. insert D before C, D has the different parent of C
+	*/
+	insertBefore(newChild, refChild, isReplace) {
+		if (newChild.nodeName === "document-fragment") {
+			newChild.childNodes.reduceRight((previousValue, currentValue) => {
+				this.insertBefore(currentValue, previousValue);
+				return currentValue;
+			}, refChild);
+			return newChild;
+		}
+		newChild.remove({ cleanRef: false });
+		let index = 0;
+		newChild.parentNode = this;
+		if (refChild) {
+			index = this.findIndex(refChild);
+			this.childNodes.splice(index, 0, newChild);
+		} else this.childNodes.push(newChild);
+		const childNodesLength = this.childNodes.length;
+		if (this._root) if (!refChild) if (childNodesLength === 1) this.updateChildNodes();
+		else this.enqueueUpdate({
+			path: newChild._path,
+			value: this.hydrate(newChild)
+		});
+		else if (isReplace) this.enqueueUpdate({
+			path: newChild._path,
+			value: this.hydrate(newChild)
+		});
+		else if (childNodesLength * 2 / 3 > index) this.updateChildNodes();
+		else this.updateSingleChild(index);
+		MutationObserver.record({
+			type: "childList",
+			target: this,
+			addedNodes: [newChild],
+			removedNodes: isReplace ? [refChild] : [],
+			nextSibling: isReplace ? refChild.nextSibling : refChild || null,
+			previousSibling: newChild.previousSibling
+		});
+		return newChild;
+	}
+	/**
+	* @doc https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild
+	* @scenario
+	* [A,B,C]
+	*   1. append C, C has no parent
+	*   2. append C, C has the same parent of B
+	*   3. append C, C has the different parent of B
+	*/
+	appendChild(newChild) {
+		return this.insertBefore(newChild);
+	}
+	/**
+	* @doc https://developer.mozilla.org/zh-CN/docs/Web/API/Node/replaceChild
+	* @scenario
+	* [A,B,C]
+	*   1. replace B with C, C has no parent
+	*   2. replace B with C, C has no parent, C has the same parent of B
+	*   3. replace B with C, C has no parent, C has the different parent of B
+	*/
+	replaceChild(newChild, oldChild) {
+		if (oldChild.parentNode !== this) return;
+		this.insertBefore(newChild, oldChild, true);
+		oldChild.remove({ doUpdate: false });
+		return oldChild;
+	}
+	/**
+	* @doc https://developer.mozilla.org/zh-CN/docs/Web/API/Node/removeChild
+	* @scenario
+	* [A,B,C]
+	*   1. remove A or B
+	*   2. remove C
+	*/
+	removeChild(child, options = {}) {
+		const { cleanRef, doUpdate } = options;
+		if (cleanRef !== false && doUpdate !== false) MutationObserver.record({
+			type: "childList",
+			target: this,
+			removedNodes: [child],
+			nextSibling: child.nextSibling,
+			previousSibling: child.previousSibling
+		});
+		const index = this.findIndex(child);
+		this.childNodes.splice(index, 1);
+		child.parentNode = null;
+		if (cleanRef !== false) eventSource.removeNodeTree(child);
+		if (this._root && doUpdate !== false) this.updateChildNodes();
+		return child;
+	}
+	remove(options) {
+		this.parentNode?.removeChild(this, options);
+	}
+	hasChildNodes() {
+		return this.childNodes.length > 0;
+	}
+	enqueueUpdate(payload) {
+		this._root?.enqueueUpdate(payload);
+	}
+	get ownerDocument() {
+		return env.document;
+	}
+	static extend(methodName, options) {
+		extend(TaroNode, methodName, options);
+	}
+};
+//#endregion
+export { TaroNode };
+
+//# sourceMappingURL=node.js.map

package/dist/dom/node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node.js","names":[],"sources":["../../src/dom/node.ts"],"sourcesContent":["import { ensure, hooks, Shortcuts } from '@spcsn/taro-shared';\n\nimport { DOCUMENT_FRAGMENT } from '../constants';\nimport { MutationObserver, MutationRecordType } from '../dom-external/mutation-observer';\nimport env from '../env';\nimport { hydrate } from '../hydrate';\nimport { extend, incrementId, isComment } from '../utils';\nimport { eventSource } from './event-source';\nimport { TaroEventTarget } from './event-target';\nimport { NodeType } from './node_types';\n\nimport type { TFunc, UpdatePayload } from '../interface';\nimport type { TaroDocument } from './document';\nimport type { TaroElement } from './element';\nimport type { TaroRootElement } from './root';\n\ninterface RemoveChildOptions {\n  cleanRef?: boolean;\n  doUpdate?: boolean;\n}\n\nconst CHILDNODES = Shortcuts.Childnodes;\nconst nodeId = incrementId();\n\nexport class TaroNode extends TaroEventTarget {\n  public uid: string;\n  public sid: string;\n  public nodeType: NodeType;\n  public nodeName: string;\n  public parentNode: TaroNode | null = null;\n  public childNodes: TaroNode[] = [];\n\n  public constructor() {\n    super();\n    this.uid = '_' + nodeId(); // dom 节点 id，开发者可修改\n    this.sid = this.uid; // dom 节点全局唯一 id，不可被修改\n    eventSource.set(this.sid, this);\n  }\n\n  private hydrate = (node: TaroNode) => () => hydrate(node as TaroElement);\n\n  private updateChildNodes(isClean?: boolean) {\n    const cleanChildNodes = () => [];\n    const rerenderChildNodes = () => {\n      const childNodes = this.childNodes.filter((node) => !isComment(node));\n      return childNodes.map(hydrate);\n    };\n\n    this.enqueueUpdate({\n      path: `${this._path}.${CHILDNODES}`,\n      value: isClean ? cleanChildNodes : rerenderChildNodes,\n    });\n  }\n\n  private updateSingleChild(index: number) {\n    this.childNodes.forEach((child, childIndex) => {\n      if (isComment(child)) return;\n\n      if (index && childIndex < index) return;\n\n      this.enqueueUpdate({\n        path: child._path,\n        value: this.hydrate(child),\n      });\n    });\n  }\n\n  public get _root(): TaroRootElement | null {\n    return this.parentNode?._root || null;\n  }\n\n  protected findIndex(refChild: TaroNode): number {\n    const index = this.childNodes.indexOf(refChild);\n\n    ensure(index !== -1, 'The node to be replaced is not a child of this node.');\n\n    return index;\n  }\n\n  public get _path(): string {\n    const parentNode = this.parentNode;\n\n    if (parentNode) {\n      // 计算路径时，先过滤掉 comment 节点\n      const list = parentNode.childNodes.filter((node) => !isComment(node));\n      const indexOfNode = list.indexOf(this);\n      const index = hooks.call('getPathIndex', indexOfNode);\n\n      return `${parentNode._path}.${CHILDNODES}.${index}`;\n    }\n\n    return '';\n  }\n\n  public get nextSibling(): TaroNode | null {\n    const parentNode = this.parentNode;\n    return parentNode?.childNodes[parentNode.findIndex(this) + 1] || null;\n  }\n\n  public get previousSibling(): TaroNode | null {\n    const parentNode = this.parentNode;\n    return parentNode?.childNodes[parentNode.findIndex(this) - 1] || null;\n  }\n\n  public get parentElement(): TaroElement | null {\n    const parentNode = this.parentNode;\n    if (parentNode?.nodeType === NodeType.ELEMENT_NODE) {\n      return parentNode as TaroElement;\n    }\n    return null;\n  }\n\n  public get firstChild(): TaroNode | null {\n    return this.childNodes[0] || null;\n  }\n\n  public get lastChild(): TaroNode | null {\n    const childNodes = this.childNodes;\n    return childNodes[childNodes.length - 1] || null;\n  }\n\n  /**\n   * @textContent 目前只能置空子元素\n   * @TODO 等待完整 innerHTML 实现\n   */\n  // eslint-disable-next-line accessor-pairs\n  public set textContent(text: string) {\n    const removedNodes = this.childNodes.slice();\n    const addedNodes: TaroNode[] = [];\n\n    // Handle old children' data structure & ref\n    while (this.firstChild) {\n      this.removeChild(this.firstChild, { doUpdate: false });\n    }\n\n    if (text === '') {\n      this.updateChildNodes(true);\n    } else {\n      const newText = env.document.createTextNode(text);\n      addedNodes.push(newText);\n      this.appendChild(newText);\n      this.updateChildNodes();\n    }\n\n    // @Todo: appendChild 会多触发一次\n    MutationObserver.record({\n      type: MutationRecordType.CHILD_LIST,\n      target: this,\n      removedNodes,\n      addedNodes,\n    });\n  }\n\n  /**\n   * @doc https://developer.mozilla.org/zh-CN/docs/Web/API/Node/insertBefore\n   * @scenario\n   * [A,B,C]\n   *   1. insert D before C, D has no parent\n   *   2. insert D before C, D has the same parent of C\n   *   3. insert D before C, D has the different parent of C\n   */\n  public insertBefore<T extends TaroNode>(newChild: T, refChild?: TaroNode | null, isReplace?: boolean): T {\n    if (newChild.nodeName === DOCUMENT_FRAGMENT) {\n      newChild.childNodes.reduceRight((previousValue, currentValue) => {\n        this.insertBefore(currentValue, previousValue);\n        return currentValue;\n      }, refChild);\n      return newChild;\n    }\n\n    // Parent release newChild\n    //   - cleanRef: false (No need to clean eventSource, because newChild is about to be inserted)\n    //   - update: true (Need to update parent.childNodes, because parent.childNodes is reordered)\n    newChild.remove({ cleanRef: false });\n\n    let index = 0;\n    // Data structure\n    newChild.parentNode = this;\n    if (refChild) {\n      // insertBefore & replaceChild\n      index = this.findIndex(refChild);\n      this.childNodes.splice(index, 0, newChild);\n    } else {\n      // appendChild\n      this.childNodes.push(newChild);\n    }\n\n    const childNodesLength = this.childNodes.length;\n    // Serialization\n    if (this._root) {\n      if (!refChild) {\n        // appendChild\n        const isOnlyChild = childNodesLength === 1;\n        if (isOnlyChild) {\n          this.updateChildNodes();\n        } else {\n          this.enqueueUpdate({\n            path: newChild._path,\n            value: this.hydrate(newChild),\n          });\n        }\n      } else if (isReplace) {\n        // replaceChild\n        this.enqueueUpdate({\n          path: newChild._path,\n          value: this.hydrate(newChild),\n        });\n      } else {\n        // insertBefore 有两种更新模式\n        // 比方说有 A B C 三个节点，现在要在 C 前插入 D\n        // 1. 插入 D，然后更新整个父节点的 childNodes 数组\n        // setData({ cn: [A, B, D, C] })\n        // 2. 插入 D，然后更新 D 以及 D 之后每个节点的数据\n        // setData ({\n        //   cn.[2]: D,\n        //   cn.[3]: C,\n        // })\n        // 由于微信解析 ’cn.[2]‘ 这些路径的时候也需要消耗时间，\n        // 所以根据 insertBefore 插入的位置来做不同的处理\n        const mark = (childNodesLength * 2) / 3;\n        if (mark > index) {\n          // 如果 insertBefore 的位置在 childNodes 的 2/3 前，则为了避免解析路径消耗过多的时间，采用第一种方式\n          this.updateChildNodes();\n        } else {\n          // 如果 insertBefore 的位置在 childNodes 的 2/3 之后，则采用第二种方式，避免 childNodes 的全量更新\n          this.updateSingleChild(index);\n        }\n      }\n    }\n\n    MutationObserver.record({\n      type: MutationRecordType.CHILD_LIST,\n      target: this,\n      addedNodes: [newChild],\n      removedNodes: isReplace ? [refChild as TaroNode] /** replaceChild */ : [],\n      nextSibling: isReplace\n        ? (refChild as TaroNode).nextSibling /** replaceChild */\n        : refChild || null /** insertBefore & appendChild */,\n      previousSibling: newChild.previousSibling,\n    });\n\n    return newChild;\n  }\n\n  /**\n   * @doc https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild\n   * @scenario\n   * [A,B,C]\n   *   1. append C, C has no parent\n   *   2. append C, C has the same parent of B\n   *   3. append C, C has the different parent of B\n   */\n  public appendChild(newChild: TaroNode) {\n    return this.insertBefore(newChild);\n  }\n\n  /**\n   * @doc https://developer.mozilla.org/zh-CN/docs/Web/API/Node/replaceChild\n   * @scenario\n   * [A,B,C]\n   *   1. replace B with C, C has no parent\n   *   2. replace B with C, C has no parent, C has the same parent of B\n   *   3. replace B with C, C has no parent, C has the different parent of B\n   */\n  public replaceChild(newChild: TaroNode, oldChild: TaroNode) {\n    if (oldChild.parentNode !== this) return;\n\n    // Insert the newChild\n    this.insertBefore(newChild, oldChild, true);\n\n    // Destroy the oldChild\n    //   - cleanRef: true (Need to clean eventSource, because the oldChild was detached from the DOM tree)\n    //   - update: false (No need to update parent.childNodes, because replace will not cause the parent.childNodes being reordered)\n    oldChild.remove({ doUpdate: false });\n\n    return oldChild;\n  }\n\n  /**\n   * @doc https://developer.mozilla.org/zh-CN/docs/Web/API/Node/removeChild\n   * @scenario\n   * [A,B,C]\n   *   1. remove A or B\n   *   2. remove C\n   */\n  public removeChild<T extends TaroNode>(child: T, options: RemoveChildOptions = {}): T {\n    const { cleanRef, doUpdate } = options;\n\n    if (cleanRef !== false && doUpdate !== false) {\n      // appendChild/replaceChild/insertBefore 不应该触发\n      // @Todo: 但其实如果 newChild 的父节点是另一颗子树的节点，应该是要触发的\n      MutationObserver.record({\n        type: MutationRecordType.CHILD_LIST,\n        target: this,\n        removedNodes: [child],\n        nextSibling: child.nextSibling,\n        previousSibling: child.previousSibling,\n      });\n    }\n\n    // Data Structure\n    const index = this.findIndex(child);\n    this.childNodes.splice(index, 1);\n    child.parentNode = null;\n\n    // Set eventSource\n    if (cleanRef !== false) {\n      eventSource.removeNodeTree(child);\n    }\n\n    // Serialization\n    if (this._root && doUpdate !== false) {\n      this.updateChildNodes();\n    }\n\n    return child;\n  }\n\n  public remove(options?: RemoveChildOptions) {\n    this.parentNode?.removeChild(this, options);\n  }\n\n  public hasChildNodes() {\n    return this.childNodes.length > 0;\n  }\n\n  public enqueueUpdate(payload: UpdatePayload) {\n    this._root?.enqueueUpdate(payload);\n  }\n\n  public get ownerDocument(): TaroDocument {\n    return env.document;\n  }\n\n  static extend(methodName: string, options: TFunc | Record<string, any>) {\n    extend(TaroNode, methodName, options);\n  }\n}\n"],"mappings":"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"}

package/dist/dom/node_types.d.ts

@@ -0,0 +1,10 @@
+export declare const enum NodeType {
+    ELEMENT_NODE = 1,
+    ATTRIBUTE_NODE = 2,
+    TEXT_NODE = 3,
+    CDATA_SECTION_NODE = 4,
+    ENTITY_REFERENCE_NODE = 5,
+    COMMENT_NODE = 6,
+    PROCESSING_INSTRUCTION_NODE = 7,
+    DOCUMENT_NODE = 9
+}

package/dist/dom/root.d.ts

@@ -0,0 +1,16 @@
+import { TaroElement } from './element';
+import type { MpInstance, TFunc, UpdatePayload } from '../interface';
+export declare class TaroRootElement extends TaroElement {
+    private updatePayloads;
+    private updateCallbacks;
+    pendingUpdate: boolean;
+    ctx: null | MpInstance;
+    constructor();
+    get _path(): string;
+    get _root(): TaroRootElement;
+    scheduleTask(fn: TFunc): void;
+    enqueueUpdate(payload: UpdatePayload): void;
+    performUpdate(initRender?: boolean, prerender?: TFunc): void;
+    enqueueUpdateCallback(cb: TFunc, ctx?: Record<string, any>): void;
+    flushUpdateCallback(): void;
+}

package/dist/dom/root.js

@@ -0,0 +1,127 @@
+import { ROOT_STR, SET_DATA } from "../constants/index.js";
+import { customWrapperCache, isComment } from "../utils/index.js";
+import { TaroElement } from "./element.js";
+import { options } from "../options.js";
+import { perf } from "../perf.js";
+import { Shortcuts, hooks, isArray, isFunction, isUndefined } from "@spcsn/taro-shared";
+//#region src/dom/root.ts
+function findCustomWrapper(root, dataPathArr) {
+	const list = dataPathArr.slice(1);
+	let currentData = root;
+	let customWrapper;
+	let splitedPath = "";
+	list.some((item, i) => {
+		const key = item.replace(/^\[(.+)\]$/, "$1").replace(/\bcn\b/g, "childNodes");
+		currentData = currentData[key];
+		if (isArray(currentData)) currentData = currentData.filter((el) => !isComment(el));
+		if (isUndefined(currentData)) return true;
+		if (currentData.nodeName === "custom-wrapper") {
+			const res = customWrapperCache.get(currentData.sid);
+			if (res) {
+				customWrapper = res;
+				splitedPath = dataPathArr.slice(i + 2).join(".");
+			}
+		}
+	});
+	if (customWrapper) return {
+		customWrapper,
+		splitedPath
+	};
+}
+var TaroRootElement = class extends TaroElement {
+	constructor() {
+		super();
+		this.updatePayloads = [];
+		this.updateCallbacks = [];
+		this.pendingUpdate = false;
+		this.ctx = null;
+		this.nodeName = ROOT_STR;
+		this.tagName = ROOT_STR.toUpperCase();
+	}
+	get _path() {
+		return ROOT_STR;
+	}
+	get _root() {
+		return this;
+	}
+	scheduleTask(fn) {
+		setTimeout(fn);
+	}
+	enqueueUpdate(payload) {
+		this.updatePayloads.push(payload);
+		if (!this.pendingUpdate && this.ctx) this.performUpdate();
+	}
+	performUpdate(initRender = false, prerender) {
+		this.pendingUpdate = true;
+		const ctx = hooks.call("proxyToRaw", this.ctx);
+		this.scheduleTask(() => {
+			const setDataMark = `${SET_DATA} 开始时间戳 ${Date.now()}`;
+			perf.start(setDataMark);
+			const data = Object.create(null);
+			const resetPaths = new Set(initRender ? ["root.cn.[0]", "root.cn[0]"] : []);
+			while (this.updatePayloads.length > 0) {
+				const { path, value } = this.updatePayloads.shift();
+				if (path.endsWith(Shortcuts.Childnodes)) resetPaths.add(path);
+				data[path] = value;
+			}
+			for (const path in data) {
+				resetPaths.forEach((p) => {
+					if (path.includes(p) && path !== p) delete data[path];
+				});
+				const value = data[path];
+				if (isFunction(value)) data[path] = value();
+			}
+			if (isFunction(prerender)) return prerender(data);
+			this.pendingUpdate = false;
+			let normalUpdate = {};
+			const customWrapperMap = /* @__PURE__ */ new Map();
+			if (initRender) normalUpdate = data;
+			else for (const p in data) {
+				const dataPathArr = p.split(".");
+				const found = findCustomWrapper(this, dataPathArr);
+				if (found) {
+					const { customWrapper, splitedPath } = found;
+					customWrapperMap.set(customWrapper, {
+						...customWrapperMap.get(customWrapper) || {},
+						[`i.${splitedPath}`]: data[p]
+					});
+				} else normalUpdate[p] = data[p];
+			}
+			const customWrapperCount = customWrapperMap.size;
+			const isNeedNormalUpdate = Object.keys(normalUpdate).length > 0;
+			const updateArrLen = customWrapperCount + (isNeedNormalUpdate ? 1 : 0);
+			let executeTime = 0;
+			const cb = () => {
+				if (++executeTime === updateArrLen) {
+					perf.stop(setDataMark);
+					this.flushUpdateCallback();
+					initRender && perf.stop("页面初始化");
+				}
+			};
+			if (customWrapperCount) customWrapperMap.forEach((data, ctx) => {
+				if (options.debug) console.log("custom wrapper setData: ", data);
+				ctx.setData(data, cb);
+			});
+			if (isNeedNormalUpdate) {
+				if (options.debug) console.log("page setData:", normalUpdate);
+				ctx.setData(normalUpdate, cb);
+			}
+		});
+	}
+	enqueueUpdateCallback(cb, ctx) {
+		this.updateCallbacks.push(() => {
+			ctx ? cb.call(ctx) : cb();
+		});
+	}
+	flushUpdateCallback() {
+		const updateCallbacks = this.updateCallbacks;
+		if (!updateCallbacks.length) return;
+		const copies = updateCallbacks.slice(0);
+		this.updateCallbacks.length = 0;
+		for (let i = 0; i < copies.length; i++) copies[i]();
+	}
+};
+//#endregion
+export { TaroRootElement };
+
+//# sourceMappingURL=root.js.map

package/dist/dom/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../src/dom/root.ts"],"sourcesContent":["import { hooks, isArray, isFunction, isUndefined, Shortcuts } from '@spcsn/taro-shared';\n\nimport { CUSTOM_WRAPPER, PAGE_INIT, ROOT_STR, SET_DATA } from '../constants';\nimport { options } from '../options';\nimport { perf } from '../perf';\nimport { customWrapperCache, isComment } from '../utils';\nimport { TaroElement } from './element';\n\nimport type { HydratedData, MpInstance, TFunc, UpdatePayload, UpdatePayloadValue } from '../interface';\n\nfunction findCustomWrapper(root: TaroRootElement, dataPathArr: string[]) {\n  // ['root', 'cn', '[0]'] remove 'root' => ['cn', '[0]']\n  const list = dataPathArr.slice(1);\n  let currentData: any = root;\n  let customWrapper: Record<string, any> | undefined;\n  let splitedPath = '';\n\n  list.some((item, i) => {\n    const key = item\n      // '[0]' => '0'\n      .replace(/^\\[(.+)\\]$/, '$1')\n      // 'cn' => 'childNodes'\n      .replace(/\\bcn\\b/g, 'childNodes');\n\n    currentData = currentData[key];\n\n    if (isArray(currentData)) {\n      currentData = currentData.filter((el) => !isComment(el));\n    }\n\n    if (isUndefined(currentData)) return true;\n\n    if (currentData.nodeName === CUSTOM_WRAPPER) {\n      const res = customWrapperCache.get(currentData.sid);\n      if (res) {\n        customWrapper = res;\n        splitedPath = dataPathArr.slice(i + 2).join('.');\n      }\n    }\n  });\n\n  if (customWrapper) {\n    return {\n      customWrapper,\n      splitedPath,\n    };\n  }\n}\n\nexport class TaroRootElement extends TaroElement {\n  private updatePayloads: UpdatePayload[] = [];\n\n  private updateCallbacks: TFunc[] = [];\n\n  public pendingUpdate = false;\n\n  public ctx: null | MpInstance = null;\n\n  public constructor() {\n    super();\n    this.nodeName = ROOT_STR;\n    this.tagName = ROOT_STR.toUpperCase();\n  }\n\n  public get _path(): string {\n    return ROOT_STR;\n  }\n\n  public get _root(): TaroRootElement {\n    return this;\n  }\n\n  public scheduleTask(fn: TFunc) {\n    // 这里若使用微任务可略微提前setData的执行时机，但在部分场景下可能会出现连续setData两次，造成更大的性能问题\n    setTimeout(fn);\n  }\n\n  public enqueueUpdate(payload: UpdatePayload): void {\n    this.updatePayloads.push(payload);\n\n    if (!this.pendingUpdate && this.ctx) {\n      this.performUpdate();\n    }\n  }\n\n  public performUpdate(initRender = false, prerender?: TFunc) {\n    this.pendingUpdate = true;\n\n    const ctx = hooks.call('proxyToRaw', this.ctx)!;\n\n    this.scheduleTask(() => {\n      const setDataMark = `${SET_DATA} 开始时间戳 ${Date.now()}`;\n      perf.start(setDataMark);\n      const data: Record<string, UpdatePayloadValue | ReturnType<HydratedData>> = Object.create(null);\n      const resetPaths = new Set<string>(initRender ? ['root.cn.[0]', 'root.cn[0]'] : []);\n\n      while (this.updatePayloads.length > 0) {\n        const { path, value } = this.updatePayloads.shift()!;\n        if (path.endsWith(Shortcuts.Childnodes)) {\n          resetPaths.add(path);\n        }\n        data[path] = value;\n      }\n\n      for (const path in data) {\n        resetPaths.forEach((p) => {\n          // 已经重置了数组，就不需要分别再设置了\n          if (path.includes(p) && path !== p) {\n            delete data[path];\n          }\n        });\n\n        const value = data[path];\n        if (isFunction(value)) {\n          data[path] = value();\n        }\n      }\n\n      // 预渲染\n      if (isFunction(prerender)) return prerender(data);\n\n      // 正常渲染\n      this.pendingUpdate = false;\n      let normalUpdate = {};\n      const customWrapperMap: Map<Record<any, any>, Record<string, any>> = new Map();\n\n      if (initRender) {\n        // 初次渲染，使用页面级别的 setData\n        normalUpdate = data;\n      } else {\n        // 更新渲染，区分 CustomWrapper 与页面级别的 setData\n        for (const p in data) {\n          const dataPathArr = p.split('.');\n          const found = findCustomWrapper(this, dataPathArr);\n          if (found) {\n            // 此项数据使用 CustomWrapper 去更新\n            const { customWrapper, splitedPath } = found;\n            // 合并同一个 customWrapper 的相关更新到一次 setData 中\n            customWrapperMap.set(customWrapper, {\n              ...(customWrapperMap.get(customWrapper) || {}),\n              [`i.${splitedPath}`]: data[p],\n            });\n          } else {\n            // 此项数据使用页面去更新\n            normalUpdate[p] = data[p];\n          }\n        }\n      }\n\n      const customWrapperCount = customWrapperMap.size;\n      const isNeedNormalUpdate = Object.keys(normalUpdate).length > 0;\n      const updateArrLen = customWrapperCount + (isNeedNormalUpdate ? 1 : 0);\n      let executeTime = 0;\n\n      const cb = () => {\n        if (++executeTime === updateArrLen) {\n          perf.stop(setDataMark);\n          this.flushUpdateCallback();\n          initRender && perf.stop(PAGE_INIT);\n        }\n      };\n\n      // custom-wrapper setData\n      if (customWrapperCount) {\n        customWrapperMap.forEach((data, ctx) => {\n          if (process.env.NODE_ENV !== 'production' && options.debug) {\n            // eslint-disable-next-line no-console\n            console.log('custom wrapper setData: ', data);\n          }\n          ctx.setData(data, cb);\n        });\n      }\n\n      // page setData\n      if (isNeedNormalUpdate) {\n        if (process.env.NODE_ENV !== 'production' && options.debug) {\n          // eslint-disable-next-line no-console\n          console.log('page setData:', normalUpdate);\n        }\n        ctx.setData(normalUpdate, cb);\n      }\n    });\n  }\n\n  public enqueueUpdateCallback(cb: TFunc, ctx?: Record<string, any>) {\n    this.updateCallbacks.push(() => {\n      ctx ? cb.call(ctx) : cb();\n    });\n  }\n\n  public flushUpdateCallback() {\n    const updateCallbacks = this.updateCallbacks;\n    if (!updateCallbacks.length) return;\n\n    const copies = updateCallbacks.slice(0);\n    this.updateCallbacks.length = 0;\n    for (let i = 0; i < copies.length; i++) {\n      copies[i]();\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/dom/style.d.ts

@@ -0,0 +1,14 @@
+import { TaroElement } from './element';
+export declare class Style {
+    _pending: boolean;
+    _usedStyleProp: Set<string>;
+    _value: Partial<CSSStyleDeclaration>;
+    _element: TaroElement;
+    constructor(element: TaroElement);
+    private setCssVariables;
+    get cssText(): string;
+    set cssText(str: string);
+    setProperty(propertyName: string, value?: string | null): void;
+    removeProperty(propertyName: string): string;
+    getPropertyValue(propertyName: string): any;
+}

package/dist/dom/style.js

@@ -0,0 +1,138 @@
+import "../constants/index.js";
+import { MutationObserver } from "../dom-external/mutation-observer/index.js";
+import { styleProperties } from "./style_properties.js";
+import { Shortcuts, hooks, isArray, isNull, isString, isUndefined, toCamelCase, toDashed, warn } from "@spcsn/taro-shared";
+//#region src/dom/style.ts
+function recordCss(obj) {
+	MutationObserver.record({
+		type: "attributes",
+		target: obj._element,
+		attributeName: "style",
+		oldValue: obj.cssText
+	});
+}
+function enqueueUpdate(obj) {
+	const element = obj._element;
+	if (element._root) element.enqueueUpdate({
+		path: `${element._path}.${Shortcuts.Style}`,
+		value: obj.cssText
+	});
+}
+function setStyle(newVal, styleKey) {
+	warn(isString(newVal) && newVal.length > 2046, `Style 属性 ${styleKey} 的值数据量过大，可能会影响渲染性能，考虑使用 CSS 类或其它方案替代。`);
+	if (this[styleKey] === newVal) return;
+	!this._pending && recordCss(this);
+	if (isNull(newVal) || isUndefined(newVal) || newVal === "") {
+		this._usedStyleProp.delete(styleKey);
+		delete this._value[styleKey];
+	} else {
+		this._usedStyleProp.add(styleKey);
+		this._value[styleKey] = newVal;
+	}
+	!this._pending && enqueueUpdate(this);
+}
+function initStyle(ctor, styleProperties) {
+	const properties = {};
+	for (let i = 0; i < styleProperties.length; i++) {
+		const styleKey = styleProperties[i];
+		if (ctor[styleKey]) return;
+		properties[styleKey] = {
+			get() {
+				const val = this._value[styleKey];
+				return isNull(val) || isUndefined(val) ? "" : val;
+			},
+			set(newVal) {
+				setStyle.call(this, newVal, styleKey);
+			}
+		};
+	}
+	Object.defineProperties(ctor.prototype, properties);
+}
+function isCssVariable(propertyName) {
+	return /^--/.test(propertyName);
+}
+var Style = class {
+	constructor(element) {
+		this._element = element;
+		this._usedStyleProp = /* @__PURE__ */ new Set();
+		this._value = {};
+	}
+	setCssVariables(styleKey) {
+		this.hasOwnProperty(styleKey) || Object.defineProperty(this, styleKey, {
+			enumerable: true,
+			configurable: true,
+			get: () => {
+				return this._value[styleKey] || "";
+			},
+			set: (newVal) => {
+				setStyle.call(this, newVal, styleKey);
+			}
+		});
+	}
+	get cssText() {
+		if (!this._usedStyleProp.size) return "";
+		const texts = [];
+		this._usedStyleProp.forEach((key) => {
+			const val = this[key];
+			if (isNull(val) || isUndefined(val)) return;
+			let styleName = isCssVariable(key) ? key : toDashed(key);
+			if (styleName.indexOf("webkit") === 0 || styleName.indexOf("Webkit") === 0) styleName = `-${styleName}`;
+			texts.push(`${styleName}: ${val};`);
+		});
+		return texts.join(" ");
+	}
+	set cssText(str) {
+		this._pending = true;
+		recordCss(this);
+		this._usedStyleProp.forEach((prop) => {
+			this.removeProperty(prop);
+		});
+		if (str === "" || isUndefined(str) || isNull(str)) {
+			this._pending = false;
+			enqueueUpdate(this);
+			return;
+		}
+		const rules = str.split(";");
+		for (let i = 0; i < rules.length; i++) {
+			const rule = rules[i].trim();
+			if (rule === "") continue;
+			const [propName, ...valList] = rule.split(":");
+			const val = valList.join(":");
+			if (isUndefined(val)) continue;
+			this.setProperty(propName.trim(), val.trim());
+		}
+		this._pending = false;
+		enqueueUpdate(this);
+	}
+	setProperty(propertyName, value) {
+		if (propertyName[0] === "-") this.setCssVariables(propertyName);
+		else propertyName = toCamelCase(propertyName);
+		if (isNull(value) || isUndefined(value)) this.removeProperty(propertyName);
+		else this[propertyName] = value;
+	}
+	removeProperty(propertyName) {
+		propertyName = toCamelCase(propertyName);
+		if (!this._usedStyleProp.has(propertyName)) return "";
+		const value = this[propertyName];
+		this[propertyName] = void 0;
+		return value;
+	}
+	getPropertyValue(propertyName) {
+		propertyName = toCamelCase(propertyName);
+		const value = this[propertyName];
+		if (!value) return "";
+		return value;
+	}
+};
+initStyle(Style, styleProperties);
+hooks.tap("injectNewStyleProperties", (newStyleProperties) => {
+	if (isArray(newStyleProperties)) initStyle(Style, newStyleProperties);
+	else {
+		if (typeof newStyleProperties !== "string") return;
+		initStyle(Style, [newStyleProperties]);
+	}
+});
+//#endregion
+export { Style };
+
+//# sourceMappingURL=style.js.map

package/dist/dom/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","names":[],"sources":["../../src/dom/style.ts"],"sourcesContent":["import {\n  hooks,\n  isArray,\n  isNull,\n  isString,\n  isUndefined,\n  Shortcuts,\n  toCamelCase,\n  toDashed,\n  warn,\n} from '@spcsn/taro-shared';\n\nimport { PROPERTY_THRESHOLD } from '../constants';\nimport { MutationObserver, MutationRecordType } from '../dom-external/mutation-observer';\nimport { TaroElement } from './element';\nimport { styleProperties } from './style_properties';\n\nfunction recordCss(obj: Style) {\n  MutationObserver.record({\n    type: MutationRecordType.ATTRIBUTES,\n    target: obj._element,\n    attributeName: 'style',\n    oldValue: obj.cssText,\n  });\n}\n\nfunction enqueueUpdate(obj: Style) {\n  const element = obj._element;\n  if (element._root) {\n    element.enqueueUpdate({\n      path: `${element._path}.${Shortcuts.Style}`,\n      value: obj.cssText,\n    });\n  }\n}\n\nfunction setStyle(this: Style, newVal: string, styleKey: string) {\n  process.env.NODE_ENV !== 'production' &&\n    warn(\n      isString(newVal) && newVal.length > PROPERTY_THRESHOLD,\n      `Style 属性 ${styleKey} 的值数据量过大，可能会影响渲染性能，考虑使用 CSS 类或其它方案替代。`,\n    );\n\n  const old = this[styleKey];\n\n  if (old === newVal) return;\n\n  !this._pending && recordCss(this);\n\n  if (isNull(newVal) || isUndefined(newVal) || newVal === '') {\n    this._usedStyleProp.delete(styleKey);\n    delete this._value[styleKey];\n  } else {\n    this._usedStyleProp.add(styleKey);\n    this._value[styleKey] = newVal;\n  }\n\n  !this._pending && enqueueUpdate(this);\n}\n\nfunction initStyle(ctor: typeof Style, styleProperties: string[]) {\n  const properties = {};\n\n  for (let i = 0; i < styleProperties.length; i++) {\n    const styleKey = styleProperties[i];\n\n    if (ctor[styleKey]) return;\n\n    properties[styleKey] = {\n      get(this: Style) {\n        const val = this._value[styleKey];\n        return isNull(val) || isUndefined(val) ? '' : val;\n      },\n      set(this: Style, newVal: string) {\n        setStyle.call(this, newVal, styleKey);\n      },\n    };\n  }\n\n  Object.defineProperties(ctor.prototype, properties);\n}\n\nfunction isCssVariable(propertyName) {\n  return /^--/.test(propertyName);\n}\n\nexport class Style {\n  public _pending: boolean;\n\n  public _usedStyleProp: Set<string>;\n\n  public _value: Partial<CSSStyleDeclaration>;\n\n  public _element: TaroElement;\n\n  public constructor(element: TaroElement) {\n    this._element = element;\n    this._usedStyleProp = new Set();\n    this._value = {};\n  }\n\n  private setCssVariables(styleKey: string) {\n    this.hasOwnProperty(styleKey) ||\n      Object.defineProperty(this, styleKey, {\n        enumerable: true,\n        configurable: true,\n        get: () => {\n          return this._value[styleKey] || '';\n        },\n        set: (newVal: string) => {\n          setStyle.call(this, newVal, styleKey);\n        },\n      });\n  }\n\n  public get cssText() {\n    if (!this._usedStyleProp.size) return '';\n\n    const texts: string[] = [];\n    this._usedStyleProp.forEach((key) => {\n      const val = this[key];\n      if (isNull(val) || isUndefined(val)) return;\n      let styleName = isCssVariable(key) ? key : toDashed(key);\n      if (styleName.indexOf('webkit') === 0 || styleName.indexOf('Webkit') === 0) {\n        styleName = `-${styleName}`;\n      }\n      texts.push(`${styleName}: ${val};`);\n    });\n    return texts.join(' ');\n  }\n\n  public set cssText(str: string) {\n    this._pending = true;\n    recordCss(this);\n\n    this._usedStyleProp.forEach((prop) => {\n      this.removeProperty(prop);\n    });\n\n    if (str === '' || isUndefined(str) || isNull(str)) {\n      this._pending = false;\n      enqueueUpdate(this);\n      return;\n    }\n\n    const rules = str.split(';');\n\n    for (let i = 0; i < rules.length; i++) {\n      const rule = rules[i].trim();\n      if (rule === '') {\n        continue;\n      }\n\n      // 可能存在 'background: url(http:x/y/z)' 的情况\n      const [propName, ...valList] = rule.split(':');\n      const val = valList.join(':');\n\n      if (isUndefined(val)) {\n        continue;\n      }\n      this.setProperty(propName.trim(), val.trim());\n    }\n\n    this._pending = false;\n    enqueueUpdate(this);\n  }\n\n  public setProperty(propertyName: string, value?: string | null) {\n    if (propertyName[0] === '-') {\n      // 支持 webkit 属性或 css 变量\n      this.setCssVariables(propertyName);\n    } else {\n      propertyName = toCamelCase(propertyName);\n    }\n\n    if (isNull(value) || isUndefined(value)) {\n      this.removeProperty(propertyName);\n    } else {\n      this[propertyName] = value;\n    }\n  }\n\n  public removeProperty(propertyName: string): string {\n    propertyName = toCamelCase(propertyName);\n    if (!this._usedStyleProp.has(propertyName)) {\n      return '';\n    }\n\n    const value = this[propertyName];\n    this[propertyName] = undefined;\n    return value;\n  }\n\n  public getPropertyValue(propertyName: string) {\n    propertyName = toCamelCase(propertyName);\n    const value = this[propertyName];\n    if (!value) {\n      return '';\n    }\n\n    return value;\n  }\n}\n\ninitStyle(Style, styleProperties);\n\nhooks.tap('injectNewStyleProperties', (newStyleProperties: string[]) => {\n  if (isArray(newStyleProperties)) {\n    initStyle(Style, newStyleProperties);\n  } else {\n    if (typeof newStyleProperties !== 'string') return;\n\n    initStyle(Style, [newStyleProperties]);\n  }\n});\n"],"mappings":"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"}