@tarojs/runtime 3.4.0-beta.0 → 3.4.0-beta.1

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';
 
 /*! *****************************************************************************
@@ -1430,10 +1430,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 +1475,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 +1637,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 +1681,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 +1712,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 +1746,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 +1879,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 +2097,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 +2108,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 +2157,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 +2272,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 +2399,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 +2434,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 +2459,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 = '';
         }
@@ -2593,11 +2850,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 +3274,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 +3785,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 '';
@@ -4207,7 +4470,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;
@@ -4251,6 +4514,7 @@ function createPageConfig(component, pageName, data, pageConfig) {
                 instances.delete($taroPath);
                 if (pageElement) {
                     pageElement.ctx = null;
+                    pageElement = null;
                 }
                 if (prepareMountList.length) {
                     prepareMountList.forEach(fn => fn());
@@ -4428,5 +4692,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