@tarojs/runtime 3.4.0-beta.0 → 3.4.0

package/dist/runtime.esm.js

@@ -1,4 +1,4 @@
-import { isFunction, isUndefined, isObject, warn, isArray, toCamelCase, ensure, toDashed, isString, EMPTY_OBJ, internalComponents, controlledComponent, defaultReconciler, noop } from '@tarojs/shared';
+import { isFunction, isUndefined, isObject, warn, isArray, toCamelCase, noop, ensure, toDashed, isString, EMPTY_OBJ, internalComponents, controlledComponent, defaultReconciler } from '@tarojs/shared';
 import { injectable, inject, ContainerModule, optional, multiInject, Container } from 'inversify';
 
 /*! *****************************************************************************
@@ -1260,7 +1260,8 @@ function shortcutAttr(key) {
         default:
             return key;
     }
-}
+}
+const customWrapperCache = new Map();
 
 const SID_TARO_ELEMENT = '0';
 const SID_TARO_ELEMENT_FACTORY = '1';
@@ -1358,6 +1359,7 @@ let TaroEventTarget = class TaroEventTarget {
     }
     addEventListener(type, handler, options) {
         var _a, _b;
+        type = type.toLowerCase();
         (_b = (_a = this.hooks).onAddEvent) === null || _b === void 0 ? void 0 : _b.call(_a, type, handler, options, this);
         if (type === 'regionchange') {
             // map 组件的 regionchange 事件非常特殊，详情：https://github.com/NervJS/taro/issues/5766
@@ -1365,8 +1367,6 @@ let TaroEventTarget = class TaroEventTarget {
             this.addEventListener('end', handler, options);
             return;
         }
-        type = type.toLowerCase();
-        const handlers = this.__handlers[type];
         let isCapture = Boolean(options);
         let isOnce = false;
         if (isObject(options)) {
@@ -1382,6 +1382,16 @@ let TaroEventTarget = class TaroEventTarget {
             return;
         }
         process.env.NODE_ENV !== 'production' && warn(isCapture, 'Taro 暂未实现 event 的 capture 特性。');
+        // 某些框架，如 PReact 有委托的机制，handler 始终是同一个函数
+        // 这会导致多层停止冒泡失败：view -> view(handler.stop = false) -> view(handler.stop = true)
+        // 这样解决：view -> view(handlerA.stop = false) -> view(handlerB.stop = false)
+        // 因此每次绑定事件都新建一个函数，如果带来了性能问题，可以把这段逻辑抽取到 PReact 插件中。
+        const oldHandler = handler;
+        handler = function () {
+            oldHandler.apply(this, arguments); // this 指向 Element
+        };
+        handler.oldHandler = oldHandler;
+        const handlers = this.__handlers[type];
         if (isArray(handlers)) {
             handlers.push(handler);
         }
@@ -1398,7 +1408,10 @@ let TaroEventTarget = class TaroEventTarget {
         if (!isArray(handlers)) {
             return;
         }
-        const index = handlers.indexOf(handler);
+        const index = handlers.findIndex(item => {
+            if (item === handler || item.oldHandler === handler)
+                return true;
+        });
         process.env.NODE_ENV !== 'production' && warn(index === -1, `事件: '${type}' 没有注册在 DOM 中，因此不会被移除。`);
         handlers.splice(index, 1);
     }
@@ -1430,10 +1443,13 @@ function hydrate(node) {
     }
     const data = {
         ["nn" /* NodeName */]: nodeName,
-        uid: node.uid
+        sid: node.sid
     };
     const { props } = node;
     const SPECIAL_NODES = node.hooks.getSpecialNodes();
+    if (node.uid !== node.sid) {
+        data.uid = node.uid;
+    }
     if (!node.isAnyEventBinded() && SPECIAL_NODES.indexOf(nodeName) > -1) {
         data["nn" /* NodeName */] = `static-${nodeName}`;
         if (nodeName === VIEW && !isHasExtractProp(node)) {
@@ -1472,8 +1488,158 @@ function hydrate(node) {
     return data;
 }
 
-const eventSource = new Map();
+class EventSource extends Map {
+    removeNode(child) {
+        const { sid, uid } = child;
+        this.delete(sid);
+        if (uid !== sid && uid)
+            this.delete(uid);
+    }
+    removeNodeTree(child) {
+        this.removeNode(child);
+        const { childNodes } = child;
+        childNodes.forEach(node => this.removeNodeTree(node));
+    }
+}
+const eventSource = new EventSource();
+
+const observers = [];
+/**
+ * The MutationObserver provides the ability
+ * to watch for changes being made to the DOM tree.
+ * It will invoke a specified callback function
+ * when DOM changes occur.
+ * @see https://dom.spec.whatwg.org/#mutationobserver
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
+ */
+class MutationObserverImpl {
+    constructor(callback) {
+        this.records = [];
+        this.callback = callback;
+    }
+    /**
+     * Configures the MutationObserver
+     * to begin receiving notifications
+     * through its callback function
+     * when DOM changes matching the given options occur.
+     *
+     * Options matching is to be implemented.
+     */
+    observe(target, options) {
+        this.disconnect();
+        this.target = target;
+        this.options = options || {};
+        observers.push(this);
+    }
+    /**
+     * Stop the MutationObserver instance
+     * from receiving further notifications
+     * until and unless observe() is called again.
+     */
+    disconnect() {
+        this.target = null;
+        const index = observers.indexOf(this);
+        if (index >= 0) {
+            observers.splice(index, 1);
+        }
+    }
+    /**
+     * Removes all pending notifications
+     * from the MutationObserver's notification queue
+     * and returns them in a new Array of MutationRecord objects.
+     */
+    takeRecords() {
+        return this.records.splice(0, this.records.length);
+    }
+}
+/** Match two TaroNodes by sid. */
+const sidMatches = (observerTarget, target) => {
+    return !!observerTarget && observerTarget.sid === (target === null || target === void 0 ? void 0 : target.sid);
+};
+const isConcerned = (record, options) => {
+    const { characterData, characterDataOldValue, attributes, attributeOldValue, childList } = options;
+    switch (record.type) {
+        case "characterData" /* CHARACTER_DATA */:
+            if (characterData) {
+                if (!characterDataOldValue)
+                    record.oldValue = null;
+                return true;
+            }
+            return false;
+        case "attributes" /* ATTRIBUTES */:
+            if (attributes) {
+                if (!attributeOldValue)
+                    record.oldValue = null;
+                return true;
+            }
+            return false;
+        case "childList" /* CHILD_LIST */:
+            if (childList) {
+                return true;
+            }
+            return false;
+    }
+};
+let pendingMuatations = false;
+function logMutation(observer, record) {
+    observer.records.push(record);
+    if (!pendingMuatations) {
+        pendingMuatations = true;
+        Promise
+            .resolve()
+            .then(() => {
+            pendingMuatations = false;
+            observers.forEach(observer => {
+                return observer.callback(observer.takeRecords());
+            });
+        });
+    }
+}
+function recordMutation(record) {
+    observers.forEach(observer => {
+        const { options } = observer;
+        for (let t = record.target; t; t = t.parentNode) {
+            if (sidMatches(observer.target, t) && isConcerned(record, options)) {
+                logMutation(observer, record);
+                break;
+            }
+            if (!options.subtree)
+                break;
+        }
+    });
+}
+
+class MutationObserver {
+    constructor(callback) {
+        if (ENABLE_MUTATION_OBSERVER) {
+            this.core = new MutationObserverImpl(callback);
+        }
+        else {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn('[Taro Warning] 若要使用 MutationObserver，请在 Taro 编译配置中设置 \'mini.enableMutationObserver: true\'');
+            }
+            this.core = {
+                observe: noop,
+                disconnect: noop,
+                takeRecords: noop
+            };
+        }
+    }
+    observe(...args) {
+        this.core.observe(...args);
+    }
+    disconnect() {
+        this.core.disconnect();
+    }
+    takeRecords() {
+        return this.core.takeRecords();
+    }
+    static record(record) {
+        recordMutation(record);
+    }
+}
 
+const CHILDNODES = "cn" /* Childnodes */;
 const nodeId = incrementId();
 let TaroNode = class TaroNode extends TaroEventTarget {
     constructor() {
@@ -1484,20 +1650,34 @@ let TaroNode = class TaroNode extends TaroEventTarget {
         this.hydrate = (node) => () => hydrate(node);
         const impl = getNodeImpl();
         impl.bind(this);
-        this.uid = `_n_${nodeId()}`;
-        eventSource.set(this.uid, this);
+        this.uid = `_n_${nodeId()}`; // dom 节点 id，开发者可修改
+        this.sid = this.uid; // dom 节点全局唯一 id，不可被修改
+        eventSource.set(this.sid, this);
     }
     /**
      * like jQuery's $.empty()
      */
     _empty() {
-        while (this.childNodes.length > 0) {
-            const child = this.childNodes[0];
+        while (this.firstChild) {
+            // Data Structure
+            const child = this.firstChild;
             child.parentNode = null;
-            eventSource.delete(child.uid);
             this.childNodes.shift();
+            // eventSource
+            eventSource.removeNodeTree(child);
         }
     }
+    updateChildNodes(isClean) {
+        const cleanChildNodes = () => [];
+        const rerenderChildNodes = () => {
+            const childNodes = this.childNodes.filter(node => !isComment(node));
+            return childNodes.map(hydrate);
+        };
+        this.enqueueUpdate({
+            path: `${this._path}.${CHILDNODES}`,
+            value: isClean ? cleanChildNodes : rerenderChildNodes
+        });
+    }
     get _root() {
         var _a;
         return ((_a = this.parentNode) === null || _a === void 0 ? void 0 : _a._root) || null;
@@ -1514,7 +1694,7 @@ let TaroNode = class TaroNode extends TaroEventTarget {
             const list = parentNode.childNodes.filter(node => !isComment(node));
             const indexOfNode = list.indexOf(this);
             const index = this.hooks.getPathIndex(indexOfNode);
-            return `${parentNode._path}.${"cn" /* Childnodes */}.${index}`;
+            return `${parentNode._path}.${CHILDNODES}.${index}`;
         }
         return '';
     }
@@ -1545,18 +1725,32 @@ let TaroNode = class TaroNode extends TaroEventTarget {
      * @TODO 等待完整 innerHTML 实现
      */
     set textContent(text) {
+        const document = this._getElement(ElementNames.Document)();
+        const newText = document.createTextNode(text);
+        // @Todo: appendChild 会多触发一次
+        MutationObserver.record({
+            type: "childList" /* CHILD_LIST */,
+            target: this,
+            removedNodes: this.childNodes.slice(),
+            addedNodes: text === '' ? [] : [newText]
+        });
         this._empty();
         if (text === '') {
-            this.enqueueUpdate({
-                path: `${this._path}.${"cn" /* Childnodes */}`,
-                value: () => []
-            });
+            this.updateChildNodes(true);
         }
         else {
-            const document = this._getElement(ElementNames.Document)();
-            this.appendChild(document.createTextNode(text));
+            this.appendChild(newText);
+            this.updateChildNodes();
         }
     }
+    /**
+     * @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) => {
@@ -1565,72 +1759,114 @@ let TaroNode = class TaroNode extends TaroEventTarget {
             }, refChild);
             return newChild;
         }
-        newChild.remove();
+        // Parent release newChild
+        //   - cleanRef: false (No need to clean eventSource, because newChild is about to be inserted)
+        //   - update: true (Need to update parent.childNodes, because parent.childNodes is reordered)
+        newChild.remove({ cleanRef: false });
+        // Data structure
         newChild.parentNode = this;
-        let payload;
         if (refChild) {
+            // insertBefore & replaceChild
             const index = this.findIndex(refChild);
             this.childNodes.splice(index, 0, newChild);
-            if (isReplace) {
-                payload = {
-                    path: newChild._path,
-                    value: this.hydrate(newChild)
-                };
-            }
-            else {
-                payload = {
-                    path: `${this._path}.${"cn" /* Childnodes */}`,
-                    value: () => {
-                        const childNodes = this.childNodes.filter(node => !isComment(node));
-                        return childNodes.map(hydrate);
-                    }
-                };
-            }
         }
         else {
+            // appendChild
             this.childNodes.push(newChild);
-            payload = {
+        }
+        // Serialization
+        if (!refChild || isReplace) {
+            // appendChild & replaceChild
+            this.enqueueUpdate({
                 path: newChild._path,
                 value: this.hydrate(newChild)
-            };
+            });
         }
-        this.enqueueUpdate(payload);
-        if (!eventSource.has(newChild.uid)) {
-            eventSource.set(newChild.uid, newChild);
+        else {
+            // insertBefore
+            this.updateChildNodes();
         }
+        MutationObserver.record({
+            type: "childList" /* CHILD_LIST */,
+            target: this,
+            addedNodes: [newChild],
+            removedNodes: isReplace
+                ? [refChild] /** replaceChild */
+                : [],
+            nextSibling: isReplace
+                ? refChild.nextSibling /** replaceChild */
+                : (refChild || null),
+            previousSibling: newChild.previousSibling
+        });
         return newChild;
     }
-    appendChild(child) {
-        this.insertBefore(child);
+    /**
+     * @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) {
-            this.insertBefore(newChild, oldChild, true);
-            oldChild.remove(true);
-            return oldChild;
-        }
+        if (oldChild.parentNode !== this)
+            return;
+        // Insert the newChild
+        this.insertBefore(newChild, oldChild, true);
+        // Destroy the oldChild
+        //   - cleanRef: true (Need to clean eventSource, because the oldChild was detached from the DOM tree)
+        //   - update: false (No need to update parent.childNodes, because replace will not cause the parent.childNodes being reordered)
+        oldChild.remove({ doUpdate: false });
+        return oldChild;
     }
-    removeChild(child, isReplace) {
-        const index = this.findIndex(child);
-        this.childNodes.splice(index, 1);
-        if (!isReplace) {
-            this.enqueueUpdate({
-                path: `${this._path}.${"cn" /* Childnodes */}`,
-                value: () => {
-                    const childNodes = this.childNodes.filter(node => !isComment(node));
-                    return childNodes.map(hydrate);
-                }
+    /**
+     * @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) {
+            // appendChild/replaceChild/insertBefore 不应该触发
+            // @Todo: 但其实如果 newChild 的父节点是另一颗子树的节点，应该是要触发的
+            MutationObserver.record({
+                type: "childList" /* CHILD_LIST */,
+                target: this,
+                removedNodes: [child],
+                nextSibling: child.nextSibling,
+                previousSibling: child.previousSibling
             });
         }
+        // Data Structure
+        const index = this.findIndex(child);
+        this.childNodes.splice(index, 1);
         child.parentNode = null;
-        eventSource.delete(child.uid);
-        // @TODO: eventSource memory overflow
-        // child._empty()
+        // Set eventSource
+        if (cleanRef !== false) {
+            eventSource.removeNodeTree(child);
+        }
+        // Serialization
+        if (doUpdate !== false) {
+            this.updateChildNodes();
+        }
         return child;
     }
-    remove(isReplace) {
+    remove(options) {
         var _a;
-        (_a = this.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this, isReplace);
+        (_a = this.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this, options);
     }
     hasChildNodes() {
         return this.childNodes.length > 0;
@@ -1656,6 +1892,11 @@ let TaroText = class TaroText extends TaroNode {
         this.nodeName = '#text';
     }
     set textContent(text) {
+        MutationObserver.record({
+            target: this,
+            type: "characterData" /* CHARACTER_DATA */,
+            oldValue: this._value
+        });
         this._value = text;
         this.enqueueUpdate({
             path: `${this._path}.${"v" /* Text */}`,
@@ -1869,6 +2110,7 @@ combine('box', ['DecorationBreak', 'Shadow', 'Sizing', 'Snap'], true);
 
 function setStyle(newVal, styleKey) {
     const old = this[styleKey];
+    const oldCssTxt = this.cssText;
     if (newVal) {
         this._usedStyleProp.add(styleKey);
     }
@@ -1879,6 +2121,16 @@ function setStyle(newVal, styleKey) {
             path: `${this._element._path}.${"st" /* Style */}`,
             value: this.cssText
         });
+        // @Todo:
+        //   el.style.cssText = 'x: y;m: n'（Bug: 触发两次）
+        //   el.style.cssText = 'x: y'（正常）
+        //   el.style.x = y（正常）
+        MutationObserver.record({
+            type: "attributes" /* ATTRIBUTES */,
+            target: this._element,
+            attributeName: 'style',
+            oldValue: oldCssTxt
+        });
     }
 }
 function initStyle(ctor) {
@@ -1918,15 +2170,15 @@ class Style {
         });
     }
     get cssText() {
-        let text = '';
+        const texts = [];
         this._usedStyleProp.forEach(key => {
             const val = this[key];
             if (!val)
                 return;
             const styleName = isCssVariable(key) ? key : toDashed(key);
-            text += `${styleName}: ${val};`;
+            texts.push(`${styleName}: ${val};`);
         });
-        return text;
+        return texts.join(' ');
     }
     set cssText(str) {
         if (str == null) {
@@ -2033,7 +2285,7 @@ class ClassList extends Set {
         this.el = el;
     }
     get value() {
-        return [...this].join(' ');
+        return [...this].filter(v => v !== '').join(' ');
     }
     add(s) {
         super.add(s);
@@ -2160,12 +2412,24 @@ let TaroElement = class TaroElement extends TaroNode {
         var _a, _b;
         process.env.NODE_ENV !== 'production' && warn(isString(value) && value.length > PROPERTY_THRESHOLD, `元素 ${this.nodeName} 的 属性 ${qualifiedName} 的值数据量过大，可能会影响渲染性能。考虑降低图片转为 base64 的阈值或在 CSS 中使用 base64。`);
         const isPureView = this.nodeName === VIEW && !isHasExtractProp(this) && !this.isAnyEventBinded();
+        if (qualifiedName !== STYLE) {
+            MutationObserver.record({
+                target: this,
+                type: "attributes" /* ATTRIBUTES */,
+                attributeName: qualifiedName,
+                oldValue: this.getAttribute(qualifiedName)
+            });
+        }
         switch (qualifiedName) {
             case STYLE:
                 this.style.cssText = value;
                 break;
             case ID:
-                eventSource.delete(this.uid);
+                if (this.uid !== this.sid) {
+                    // eventSource[sid] 永远保留，直到组件卸载
+                    // eventSource[uid] 可变
+                    eventSource.delete(this.uid);
+                }
                 value = String(value);
                 this.props[qualifiedName] = this.uid = value;
                 eventSource.set(value, this);
@@ -2183,7 +2447,7 @@ let TaroElement = class TaroElement extends TaroNode {
         qualifiedName = shortcutAttr(qualifiedName);
         const payload = {
             path: `${this._path}.${toCamelCase(qualifiedName)}`,
-            value
+            value: isFunction(value) ? () => value : value
         };
         (_b = (_a = this.hooks).modifySetAttrPayload) === null || _b === void 0 ? void 0 : _b.call(_a, this, qualifiedName, payload);
         this.enqueueUpdate(payload);
@@ -2208,6 +2472,12 @@ let TaroElement = class TaroElement extends TaroNode {
     removeAttribute(qualifiedName) {
         var _a, _b, _c, _d;
         const isStaticView = this.nodeName === VIEW && isHasExtractProp(this) && !this.isAnyEventBinded();
+        MutationObserver.record({
+            target: this,
+            type: "attributes" /* ATTRIBUTES */,
+            attributeName: qualifiedName,
+            oldValue: this.getAttribute(qualifiedName)
+        });
         if (qualifiedName === STYLE) {
             this.style.cssText = '';
         }
@@ -2348,24 +2618,33 @@ class Performance {
 }
 const perf = new Performance();
 
-function findCustomWrapper(ctx, dataPathArr) {
-    let currentData = ctx.__data__ || ctx.data || ctx._data;
-    let wrapper;
-    let index;
-    dataPathArr.some((item, i) => {
-        const key = item.replace(/^\[(.+)\]$/, '$1');
+function findCustomWrapper(root, dataPathArr) {
+    // ['root', 'cn', '[0]'] remove 'root' => ['cn', '[0]']
+    const list = dataPathArr.slice(1);
+    let currentData = root;
+    let customWrapper;
+    let splitedPath = '';
+    list.some((item, i) => {
+        const key = item
+            // '[0]' => '0'
+            .replace(/^\[(.+)\]$/, '$1')
+            // 'cn' => 'childNodes'
+            .replace(/\bcn\b/g, 'childNodes');
         currentData = currentData[key];
         if (isUndefined(currentData))
             return true;
-        if (currentData.nn === CUSTOM_WRAPPER) {
-            wrapper = currentData;
-            index = i;
+        if (currentData.nodeName === CUSTOM_WRAPPER) {
+            const res = customWrapperCache.get(currentData.sid);
+            if (res) {
+                customWrapper = res;
+                splitedPath = dataPathArr.slice(i + 2).join('.');
+            }
         }
     });
-    if (wrapper) {
+    if (customWrapper) {
         return {
-            wrapper,
-            index: index
+            customWrapper,
+            splitedPath
         };
     }
 }
@@ -2433,17 +2712,12 @@ let TaroRootElement = class TaroRootElement extends TaroElement {
                 // 更新渲染，区分 CustomWrapper 与页面级别的 setData
                 for (const p in data) {
                     const dataPathArr = p.split('.');
-                    const found = findCustomWrapper(ctx, dataPathArr);
+                    const found = findCustomWrapper(this, dataPathArr);
                     if (found) {
                         // 此项数据使用 CustomWrapper 去更新
-                        const { wrapper, index } = found;
-                        const customWrapperId = `#${wrapper.uid}`;
-                        const customWrapper = ctx.selectComponent(customWrapperId);
-                        if (customWrapper) {
-                            const splitedPath = dataPathArr.slice(index + 1).join('.');
-                            // 合并同一个 customWrapper 的相关更新到一次 setData 中
-                            customWrapperMap.set(customWrapper, Object.assign(Object.assign({}, (customWrapperMap.get(customWrapper) || {})), { [`i.${splitedPath}`]: data[p] }));
-                        }
+                        const { customWrapper, splitedPath } = found;
+                        // 合并同一个 customWrapper 的相关更新到一次 setData 中
+                        customWrapperMap.set(customWrapper, Object.assign(Object.assign({}, (customWrapperMap.get(customWrapper) || {})), { [`i.${splitedPath}`]: data[p] }));
                     }
                     else {
                         // 此项数据使用页面去更新
@@ -2593,11 +2867,13 @@ function createEvent(event, node) {
 const eventsBatch = {};
 // 小程序的事件代理回调函数
 function eventHandler(event) {
-    var _a;
+    var _a, _b;
     const hooks = getHooks();
     (_a = hooks.modifyMpEvent) === null || _a === void 0 ? void 0 : _a.call(hooks, event);
     event.currentTarget || (event.currentTarget = event.target);
-    const node = getDocument().getElementById(event.currentTarget.id);
+    const currentTarget = event.currentTarget;
+    const id = ((_b = currentTarget.dataset) === null || _b === void 0 ? void 0 : _b.sid /** sid */) || currentTarget.id /** uid */ || '';
+    const node = getDocument().getElementById(id);
     if (node) {
         const dispatch = () => {
             var _a;
@@ -3015,8 +3291,12 @@ class StyleTagParser {
         // console.log('res this.styles: ', this.styles)
     }
     parseSelector(src) {
-        // todo: 属性选择器里可以带空格：[a = "b"]，这里的 split(' ') 需要作兼容
-        const list = src.trim().replace(/ *([>~+]) */g, ' $1').replace(/ +/g, ' ').split(' ');
+        const list = src
+            .trim()
+            .replace(/ *([>~+]) */g, ' $1')
+            .replace(/ +/g, ' ')
+            .replace(/\[\s*([^[\]=\s]+)\s*=\s*([^[\]=\s]+)\s*\]/g, '[$1=$2]')
+            .split(' ');
         const selectors = list.map(item => {
             const firstChar = item.charAt(0);
             const selector = {
@@ -3522,7 +3802,7 @@ function bindInnerHTML(ctx, getDoc) {
         configurable: true,
         enumerable: true,
         set(html) {
-            setInnerHTML.call(ctx, ctx, html, getDoc);
+            setInnerHTML.call(this, this, html, getDoc);
         },
         get() {
             return '';
@@ -4029,11 +4309,11 @@ if (process.env.TARO_ENV && process.env.TARO_ENV !== 'h5') {
     if (!(DATE in window$1)) {
         window$1.Date = Date;
     }
-    window$1.setTimeout = function (cb, delay) {
-        setTimeout(cb, delay);
+    window$1.setTimeout = function (...args) {
+        return setTimeout(...args);
     };
-    window$1.clearTimeout = function (seed) {
-        clearTimeout(seed);
+    window$1.clearTimeout = function (...args) {
+        return clearTimeout(...args);
     };
     document$1.defaultView = window$1;
 }
@@ -4170,11 +4450,8 @@ function stringify(obj) {
     return path === '' ? path : '?' + path;
 }
 function getPath(id, options) {
-    let path = id;
-    if (process.env.TARO_ENV !== 'h5') {
-        path = id + stringify(options);
-    }
-    return path;
+    const idx = id.indexOf('?');
+    return `${idx > -1 ? id.substring(0, idx) : id}${stringify(process.env.TARO_ENV === 'h5' ? { stamp: (options === null || options === void 0 ? void 0 : options.stamp) || '' } : options)}`;
 }
 function getOnReadyEventKey(path) {
     return path + '.' + ON_READY;
@@ -4207,7 +4484,7 @@ function createPageConfig(component, pageName, data, pageConfig) {
     let loadResolver;
     let hasLoaded;
     const config = {
-        [ONLOAD](options, cb) {
+        [ONLOAD](options = {}, cb) {
             hasLoaded = new Promise(resolve => { loadResolver = resolve; });
             perf.start(PAGE_INIT);
             Current.page = this;
@@ -4216,6 +4493,9 @@ function createPageConfig(component, pageName, data, pageConfig) {
             // this.$taroPath 是页面唯一标识，不可变，因此页面参数 options 也不可变
             this.$taroPath = getPath(id, options);
             const $taroPath = this.$taroPath;
+            if (process.env.TARO_ENV === 'h5') {
+                config.path = this.$taroPath;
+            }
             // this.$taroParams 作为暴露给开发者的页面参数对象，可以被随意修改
             if (this.$taroParams == null) {
                 this.$taroParams = Object.assign({}, options);
@@ -4251,6 +4531,7 @@ function createPageConfig(component, pageName, data, pageConfig) {
                 instances.delete($taroPath);
                 if (pageElement) {
                     pageElement.ctx = null;
+                    pageElement = null;
                 }
                 if (prepareMountList.length) {
                     prepareMountList.forEach(fn => fn());
@@ -4265,13 +4546,13 @@ function createPageConfig(component, pageName, data, pageConfig) {
             raf(() => eventCenter.trigger(getOnReadyEventKey(id)));
             this.onReady.called = true;
         },
-        [ONSHOW]() {
+        [ONSHOW](options = {}) {
             hasLoaded.then(() => {
                 // 设置 Current 的 page 和 router
                 Current.page = this;
                 setCurrentRouter(this);
                 // 触发生命周期
-                safeExecute(this.$taroPath, ON_SHOW);
+                safeExecute(this.$taroPath, ON_SHOW, options);
                 // 通过事件触发子组件的生命周期
                 raf(() => eventCenter.trigger(getOnShowEventKey(id)));
             });
@@ -4320,9 +4601,6 @@ function createPageConfig(component, pageName, data, pageConfig) {
     if (!isUndefined(data)) {
         config.data = data;
     }
-    if (process.env.TARO_ENV === 'h5') {
-        config.path = id;
-    }
     (_c = hooks.modifyPageObject) === null || _c === void 0 ? void 0 : _c.call(hooks, config);
     return config;
 }
@@ -4367,8 +4645,26 @@ function createComponentConfig(component, componentName, data) {
     return config;
 }
 function createRecursiveComponentConfig(componentName) {
-    return {
-        properties: {
+    const isCustomWrapper = componentName === CUSTOM_WRAPPER;
+    const lifeCycles = isCustomWrapper
+        ? {
+            attached() {
+                var _a;
+                const componentId = (_a = this.data.i) === null || _a === void 0 ? void 0 : _a.sid;
+                if (isString(componentId)) {
+                    customWrapperCache.set(componentId, this);
+                }
+            },
+            detached() {
+                var _a;
+                const componentId = (_a = this.data.i) === null || _a === void 0 ? void 0 : _a.sid;
+                if (isString(componentId)) {
+                    customWrapperCache.delete(componentId);
+                }
+            }
+        }
+        : EMPTY_OBJ;
+    return Object.assign({ properties: {
             i: {
                 type: Object,
                 value: {
@@ -4379,15 +4675,12 @@ function createRecursiveComponentConfig(componentName) {
                 type: String,
                 value: ''
             }
-        },
-        options: {
+        }, options: {
             addGlobalClass: true,
-            virtualHost: componentName !== CUSTOM_WRAPPER
-        },
-        methods: {
+            virtualHost: !isCustomWrapper
+        }, methods: {
             eh: eventHandler
-        }
-    };
+        } }, lifeCycles);
 }
 
 function removeLeadingSlash(path) {
@@ -4428,5 +4721,5 @@ const nextTick = (cb, ctx) => {
     }
 };
 
-export { Current, ElementNames, Events, FormElement, SERVICE_IDENTIFIER, SVGElement, Style, TaroElement, TaroEvent, TaroNode, TaroRootElement, TaroText, addLeadingSlash, caf as cancelAnimationFrame, container, createComponentConfig, createDocument, createEvent, createPageConfig, createRecursiveComponentConfig, document$1 as document, eventCenter, eventHandler, getComputedStyle, getCurrentInstance, getPageInstance, hydrate, incrementId, injectPageInstance, navigator, nextTick, now, options, processPluginHooks, raf as requestAnimationFrame, safeExecute, stringify, window$1 as window };
+export { Current, ElementNames, Events, FormElement, MutationObserver, SERVICE_IDENTIFIER, SVGElement, Style, TaroElement, TaroEvent, TaroNode, TaroRootElement, TaroText, addLeadingSlash, caf as cancelAnimationFrame, container, createComponentConfig, createDocument, createEvent, createPageConfig, createRecursiveComponentConfig, document$1 as document, eventCenter, eventHandler, eventSource, getComputedStyle, getCurrentInstance, getPageInstance, hydrate, incrementId, injectPageInstance, navigator, nextTick, now, options, processPluginHooks, raf as requestAnimationFrame, safeExecute, stringify, window$1 as window };
 //# sourceMappingURL=runtime.esm.js.map