@tarojs/runtime 3.5.0-beta.1 → 3.5.0-beta.4

package/dist/runtime.esm.js

@@ -1,4 +1,4 @@
-import { noop, isFunction, EMPTY_OBJ, hooks, toCamelCase, isObject, warn, isArray, ensure, toDashed, isUndefined, isString, internalComponents, controlledComponent, Events } from '@tarojs/shared';
+import { noop, isFunction, getComponentsAlias as getComponentsAlias$1, internalComponents, EMPTY_OBJ, hooks, toCamelCase, isObject, warn, isArray, ensure, isNull, isUndefined, toDashed, isString, controlledComponent, Events } from '@tarojs/shared';
 export { Events, hooks } from '@tarojs/shared';
 
 const PROPERTY_THRESHOLD = 2046;
@@ -182,8 +182,33 @@ class MutationObserver {
 }
 
 const incrementId = () => {
-    let id = 0;
-    return () => (id++).toString();
+    const chatCodes = [];
+    // A-Z
+    for (let i = 65; i <= 90; i++) {
+        chatCodes.push(i);
+    }
+    // a-z
+    for (let i = 97; i <= 122; i++) {
+        chatCodes.push(i);
+    }
+    const chatCodesLen = chatCodes.length - 1;
+    const list = [0, 0];
+    return () => {
+        const target = list.map(item => chatCodes[item]);
+        const res = String.fromCharCode(...target);
+        let tailIdx = list.length - 1;
+        list[tailIdx]++;
+        while (list[tailIdx] > chatCodesLen) {
+            list[tailIdx] = 0;
+            tailIdx = tailIdx - 1;
+            if (tailIdx < 0) {
+                list.push(0);
+                break;
+            }
+            list[tailIdx]++;
+        }
+        return res;
+    };
 };
 function isElement(node) {
     return node.nodeType === 1 /* ELEMENT_NODE */;
@@ -237,6 +262,13 @@ function extend(ctor, methodName, options) {
         };
     }
     Object.defineProperty(ctor.prototype, methodName, Object.assign({ configurable: true, enumerable: true }, options));
+}
+let componentsAlias$1;
+function getComponentsAlias() {
+    if (!componentsAlias$1) {
+        componentsAlias$1 = getComponentsAlias$1(internalComponents);
+    }
+    return componentsAlias$1;
 }
 
 class ClassList extends Set {
@@ -305,6 +337,8 @@ const env = {
     document: process.env.TARO_ENV === 'h5' ? document : EMPTY_OBJ
 };
 
+let SPECIAL_NODES;
+let componentsAlias;
 /**
  * React also has a fancy function's name for this: `hydrate()`.
  * You may have been heard `hydrate` as a SSR-related function,
@@ -312,19 +346,25 @@ const env = {
  * it's a vnode traverser and modifier: that's exactly what Taro's doing in here.
  */
 function hydrate(node) {
+    if (!componentsAlias) {
+        // 初始化 componentsAlias
+        componentsAlias = getComponentsAlias();
+    }
+    if (!SPECIAL_NODES) {
+        // 初始化 SPECIAL_NODES
+        SPECIAL_NODES = hooks.call('getSpecialNodes');
+    }
     const nodeName = node.nodeName;
     if (isText(node)) {
         return {
             ["v" /* Text */]: node.nodeValue,
-            ["nn" /* NodeName */]: nodeName
+            ["nn" /* NodeName */]: componentsAlias[nodeName]._num
         };
     }
     const data = {
         ["nn" /* NodeName */]: nodeName,
         sid: node.sid
     };
-    const { props } = node;
-    const SPECIAL_NODES = hooks.call('getSpecialNodes');
     if (node.uid !== node.sid) {
         data.uid = node.uid;
     }
@@ -334,6 +374,7 @@ function hydrate(node) {
             data["nn" /* NodeName */] = PURE_VIEW;
         }
     }
+    const { props } = node;
     for (const prop in props) {
         const propInCamelCase = toCamelCase(prop);
         if (!prop.startsWith('data-') && // 在 node.dataset 的数据
@@ -359,10 +400,22 @@ function hydrate(node) {
     if (node.className !== '') {
         data["cl" /* Class */] = node.className;
     }
-    if (node.cssText !== '' && nodeName !== 'swiper-item') {
-        data["st" /* Style */] = node.cssText;
+    const cssText = node.cssText;
+    if (cssText !== '' && nodeName !== 'swiper-item') {
+        data["st" /* Style */] = cssText;
     }
     hooks.call('modifyHydrateData', data);
+    const nn = data["nn" /* NodeName */];
+    const componentAlias = componentsAlias[nn];
+    if (componentAlias) {
+        data["nn" /* NodeName */] = componentAlias._num;
+        for (const prop in data) {
+            if (prop in componentAlias) {
+                data[componentAlias[prop]] = data[prop];
+                delete data[prop];
+            }
+        }
+    }
     return data;
 }
 
@@ -413,6 +466,12 @@ class TaroEventTarget {
     }
     removeEventListener(type, handler) {
         type = type.toLowerCase();
+        if (type === 'regionchange') {
+            // map 组件的 regionchange 事件非常特殊，详情：https://github.com/NervJS/taro/issues/5766
+            this.removeEventListener('begin', handler);
+            this.removeEventListener('end', handler);
+            return;
+        }
         if (!handler) {
             return;
         }
@@ -442,23 +501,10 @@ class TaroNode extends TaroEventTarget {
         this.parentNode = null;
         this.childNodes = [];
         this.hydrate = (node) => () => hydrate(node);
-        this.uid = `_n_${nodeId()}`; // dom 节点 id，开发者可修改
+        this.uid = '_' + nodeId(); // dom 节点 id，开发者可修改
         this.sid = this.uid; // dom 节点全局唯一 id，不可被修改
         eventSource.set(this.sid, this);
     }
-    /**
-     * like jQuery's $.empty()
-     */
-    _empty() {
-        while (this.firstChild) {
-            // Data Structure
-            const child = this.firstChild;
-            child.parentNode = null;
-            this.childNodes.shift();
-            // eventSource
-            eventSource.removeNodeTree(child);
-        }
-    }
     updateChildNodes(isClean) {
         const cleanChildNodes = () => [];
         const rerenderChildNodes = () => {
@@ -518,23 +564,28 @@ class TaroNode extends TaroEventTarget {
      */
     // eslint-disable-next-line accessor-pairs
     set textContent(text) {
-        const document = env.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();
+        const removedNodes = this.childNodes.slice();
+        const addedNodes = [];
+        // Handle old children' data structure & ref
+        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();
         }
+        // @Todo: appendChild 会多触发一次
+        MutationObserver.record({
+            type: "childList" /* CHILD_LIST */,
+            target: this,
+            removedNodes,
+            addedNodes
+        });
     }
     /**
      * @doc https://developer.mozilla.org/zh-CN/docs/Web/API/Node/insertBefore
@@ -568,16 +619,31 @@ class TaroNode extends TaroEventTarget {
             this.childNodes.push(newChild);
         }
         // Serialization
-        if (!refChild || isReplace) {
-            // appendChild & replaceChild
-            this.enqueueUpdate({
-                path: newChild._path,
-                value: this.hydrate(newChild)
-            });
-        }
-        else {
-            // insertBefore
-            this.updateChildNodes();
+        if (this._root) {
+            if (!refChild) {
+                // appendChild
+                const isOnlyChild = this.childNodes.length === 1;
+                if (isOnlyChild) {
+                    this.updateChildNodes();
+                }
+                else {
+                    this.enqueueUpdate({
+                        path: newChild._path,
+                        value: this.hydrate(newChild)
+                    });
+                }
+            }
+            else if (isReplace) {
+                // replaceChild
+                this.enqueueUpdate({
+                    path: newChild._path,
+                    value: this.hydrate(newChild)
+                });
+            }
+            else {
+                // insertBefore
+                this.updateChildNodes();
+            }
         }
         MutationObserver.record({
             type: "childList" /* CHILD_LIST */,
@@ -652,7 +718,7 @@ class TaroNode extends TaroEventTarget {
             eventSource.removeNodeTree(child);
         }
         // Serialization
-        if (doUpdate !== false) {
+        if (this._root && doUpdate !== false) {
             this.updateChildNodes();
         }
         return child;
@@ -859,30 +925,38 @@ combine('object', ['Fit', 'Position'], true);
 combine('box', ['DecorationBreak', 'Shadow', 'Sizing', 'Snap'], true);
 combine(WEBKIT, ['LineClamp', 'BoxOrient', 'TextFillColor', 'TextStroke', 'TextStrokeColor', 'TextStrokeWidth'], true);
 
+function recordCss(obj) {
+    MutationObserver.record({
+        type: "attributes" /* ATTRIBUTES */,
+        target: obj._element,
+        attributeName: 'style',
+        oldValue: obj.cssText
+    });
+}
+function enqueueUpdate(obj) {
+    const element = obj._element;
+    if (element._root) {
+        element.enqueueUpdate({
+            path: `${element._path}.${"st" /* Style */}`,
+            value: obj.cssText
+        });
+    }
+}
 function setStyle(newVal, styleKey) {
+    process.env.NODE_ENV !== 'production' && warn(isString(newVal) && newVal.length > PROPERTY_THRESHOLD, `Style 属性 ${styleKey} 的值数据量过大，可能会影响渲染性能，考虑使用 CSS 类或其它方案替代。`);
     const old = this[styleKey];
-    const oldCssTxt = this.cssText;
-    if (newVal) {
-        this._usedStyleProp.add(styleKey);
+    if (old === newVal)
+        return;
+    !this._pending && recordCss(this);
+    if (isNull(newVal) || isUndefined(newVal)) {
+        this._usedStyleProp.delete(styleKey);
+        delete this._value[styleKey];
     }
-    process.env.NODE_ENV !== 'production' && warn(isString(newVal) && newVal.length > PROPERTY_THRESHOLD, `Style 属性 ${styleKey} 的值数据量过大，可能会影响渲染性能，考虑使用 CSS 类或其它方案替代。`);
-    if (old !== newVal) {
+    else {
+        this._usedStyleProp.add(styleKey);
         this._value[styleKey] = newVal;
-        this._element.enqueueUpdate({
-            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
-        });
     }
+    !this._pending && enqueueUpdate(this);
 }
 function initStyle(ctor) {
     const properties = {};
@@ -890,7 +964,8 @@ function initStyle(ctor) {
         const styleKey = styleProperties[i];
         properties[styleKey] = {
             get() {
-                return this._value[styleKey] || '';
+                const val = this._value[styleKey];
+                return isNull(val) || isUndefined(val) ? '' : val;
             },
             set(newVal) {
                 setStyle.call(this, newVal, styleKey);
@@ -921,10 +996,12 @@ class Style {
         });
     }
     get cssText() {
+        if (!this._usedStyleProp.size)
+            return '';
         const texts = [];
         this._usedStyleProp.forEach(key => {
             const val = this[key];
-            if (!val)
+            if (isNull(val) || isUndefined(val))
                 return;
             let styleName = isCssVariable(key) ? key : toDashed(key);
             if (styleName.indexOf('webkit') === 0 || styleName.indexOf('Webkit') === 0) {
@@ -935,13 +1012,14 @@ class Style {
         return texts.join(' ');
     }
     set cssText(str) {
-        if (str == null) {
-            str = '';
-        }
+        this._pending = true;
+        recordCss(this);
         this._usedStyleProp.forEach(prop => {
             this.removeProperty(prop);
         });
-        if (str === '') {
+        if (str === '' || isUndefined(str) || isNull(str)) {
+            this._pending = false;
+            enqueueUpdate(this);
             return;
         }
         const rules = str.split(';');
@@ -958,6 +1036,8 @@ class Style {
             }
             this.setProperty(propName.trim(), val.trim());
         }
+        this._pending = false;
+        enqueueUpdate(this);
     }
     setProperty(propertyName, value) {
         if (propertyName[0] === '-') {
@@ -967,10 +1047,7 @@ class Style {
         else {
             propertyName = toCamelCase(propertyName);
         }
-        if (isUndefined(value)) {
-            return;
-        }
-        if (value === null || value === '') {
+        if (isNull(value) || isUndefined(value)) {
             this.removeProperty(propertyName);
         }
         else {
@@ -983,8 +1060,7 @@ class Style {
             return '';
         }
         const value = this[propertyName];
-        this[propertyName] = '';
-        this._usedStyleProp.delete(propertyName);
+        this[propertyName] = undefined;
         return value;
     }
     getPropertyValue(propertyName) {
@@ -1114,7 +1190,7 @@ class TaroElement extends TaroNode {
         this.setAttribute(FOCUS, false);
     }
     setAttribute(qualifiedName, value) {
-        process.env.NODE_ENV !== 'production' && warn(isString(value) && value.length > PROPERTY_THRESHOLD, `元素 ${this.nodeName} 的 属性 ${qualifiedName} 的值数据量过大，可能会影响渲染性能。考虑降低图片转为 base64 的阈值或在 CSS 中使用 base64。`);
+        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({
@@ -1148,27 +1224,40 @@ class TaroElement extends TaroNode {
                 }
                 break;
         }
+        // Serialization
+        if (!this._root)
+            return;
+        const componentsAlias = getComponentsAlias();
+        const _alias = componentsAlias[this.nodeName];
+        const viewAlias = componentsAlias[VIEW]._num;
+        const staticViewAlias = componentsAlias[STATIC_VIEW]._num;
+        const catchViewAlias = componentsAlias[CATCH_VIEW]._num;
+        const _path = this._path;
         qualifiedName = shortcutAttr(qualifiedName);
         const payload = {
-            path: `${this._path}.${toCamelCase(qualifiedName)}`,
+            path: `${_path}.${toCamelCase(qualifiedName)}`,
             value: isFunction(value) ? () => value : value
         };
-        hooks.call('modifySetAttrPayload', this, qualifiedName, payload);
+        hooks.call('modifySetAttrPayload', this, qualifiedName, payload, componentsAlias);
+        if (_alias) {
+            const qualifiedNameAlias = _alias[qualifiedName] || qualifiedName;
+            payload.path = `${_path}.${toCamelCase(qualifiedNameAlias)}`;
+        }
         this.enqueueUpdate(payload);
         if (this.nodeName === VIEW) {
             if (toCamelCase(qualifiedName) === CATCHMOVE) {
                 // catchMove = true: catch-view
                 // catchMove = false: view or static-view
                 this.enqueueUpdate({
-                    path: `${this._path}.${"nn" /* NodeName */}`,
-                    value: value ? CATCH_VIEW : (this.isAnyEventBinded() ? VIEW : STATIC_VIEW)
+                    path: `${_path}.${"nn" /* NodeName */}`,
+                    value: value ? catchViewAlias : (this.isAnyEventBinded() ? viewAlias : staticViewAlias)
                 });
             }
             else if (isPureView && isHasExtractProp(this)) {
                 // pure-view => static-view
                 this.enqueueUpdate({
-                    path: `${this._path}.${"nn" /* NodeName */}`,
-                    value: STATIC_VIEW
+                    path: `${_path}.${"nn" /* NodeName */}`,
+                    value: staticViewAlias
                 });
             }
         }
@@ -1194,26 +1283,39 @@ class TaroElement extends TaroNode {
             }
             delete this.props[qualifiedName];
         }
+        // Serialization
+        if (!this._root)
+            return;
+        const componentsAlias = getComponentsAlias();
+        const _alias = componentsAlias[this.nodeName];
+        const viewAlias = componentsAlias[VIEW]._num;
+        const staticViewAlias = componentsAlias[STATIC_VIEW]._num;
+        const pureViewAlias = componentsAlias[PURE_VIEW]._num;
+        const _path = this._path;
         qualifiedName = shortcutAttr(qualifiedName);
         const payload = {
-            path: `${this._path}.${toCamelCase(qualifiedName)}`,
+            path: `${_path}.${toCamelCase(qualifiedName)}`,
             value: ''
         };
-        hooks.call('modifyRmAttrPayload', this, qualifiedName, payload);
+        hooks.call('modifyRmAttrPayload', this, qualifiedName, payload, componentsAlias);
+        if (_alias) {
+            const qualifiedNameAlias = _alias[qualifiedName] || qualifiedName;
+            payload.path = `${_path}.${toCamelCase(qualifiedNameAlias)}`;
+        }
         this.enqueueUpdate(payload);
         if (this.nodeName === VIEW) {
             if (toCamelCase(qualifiedName) === CATCHMOVE) {
                 // catch-view => view or static-view or pure-view
                 this.enqueueUpdate({
-                    path: `${this._path}.${"nn" /* NodeName */}`,
-                    value: this.isAnyEventBinded() ? VIEW : (isHasExtractProp(this) ? STATIC_VIEW : PURE_VIEW)
+                    path: `${_path}.${"nn" /* NodeName */}`,
+                    value: this.isAnyEventBinded() ? viewAlias : (isHasExtractProp(this) ? staticViewAlias : pureViewAlias)
                 });
             }
             else if (isStaticView && !isHasExtractProp(this)) {
                 // static-view => pure-view
                 this.enqueueUpdate({
-                    path: `${this._path}.${"nn" /* NodeName */}`,
-                    value: PURE_VIEW
+                    path: `${_path}.${"nn" /* NodeName */}`,
+                    value: pureViewAlias
                 });
             }
         }
@@ -1268,22 +1370,32 @@ class TaroElement extends TaroNode {
     addEventListener(type, handler, options) {
         const name = this.nodeName;
         const SPECIAL_NODES = hooks.call('getSpecialNodes');
-        if (!this.isAnyEventBinded() && SPECIAL_NODES.indexOf(name) > -1) {
+        let sideEffect = true;
+        if (isObject(options) && options.sideEffect === false) {
+            sideEffect = false;
+            delete options.sideEffect;
+        }
+        if (sideEffect !== false && !this.isAnyEventBinded() && SPECIAL_NODES.indexOf(name) > -1) {
+            const componentsAlias = getComponentsAlias();
+            const alias = componentsAlias[name]._num;
             this.enqueueUpdate({
                 path: `${this._path}.${"nn" /* NodeName */}`,
-                value: name
+                value: alias
             });
         }
         super.addEventListener(type, handler, options);
     }
-    removeEventListener(type, handler) {
+    removeEventListener(type, handler, sideEffect = true) {
         super.removeEventListener(type, handler);
         const name = this.nodeName;
         const SPECIAL_NODES = hooks.call('getSpecialNodes');
-        if (!this.isAnyEventBinded() && SPECIAL_NODES.indexOf(name) > -1) {
+        if (sideEffect !== false && !this.isAnyEventBinded() && SPECIAL_NODES.indexOf(name) > -1) {
+            const componentsAlias = getComponentsAlias();
+            const value = isHasExtractProp(this) ? `static-${name}` : `pure-${name}`;
+            const valueAlias = componentsAlias[value]._num;
             this.enqueueUpdate({
                 path: `${this._path}.${"nn" /* NodeName */}`,
-                value: isHasExtractProp(this) ? `static-${name}` : `pure-${name}`
+                value: valueAlias
             });
         }
     }
@@ -2240,26 +2352,43 @@ class TaroEvent {
     }
     get target() {
         var _a, _b;
-        const target = Object.create(((_a = this.mpEvent) === null || _a === void 0 ? void 0 : _a.target) || null);
-        const element = env.document.getElementById(target.id);
-        target.dataset = element !== null ? element.dataset : EMPTY_OBJ;
-        for (const key in (_b = this.mpEvent) === null || _b === void 0 ? void 0 : _b.detail) {
-            target[key] = this.mpEvent.detail[key];
+        const cacheTarget = this.cacheTarget;
+        if (!cacheTarget) {
+            const target = Object.create(((_a = this.mpEvent) === null || _a === void 0 ? void 0 : _a.target) || null);
+            const element = env.document.getElementById(target.id);
+            target.dataset = element !== null ? element.dataset : EMPTY_OBJ;
+            for (const key in (_b = this.mpEvent) === null || _b === void 0 ? void 0 : _b.detail) {
+                target[key] = this.mpEvent.detail[key];
+            }
+            this.cacheTarget = target;
+            return target;
+        }
+        else {
+            return cacheTarget;
         }
-        return target;
     }
     get currentTarget() {
-        var _a, _b;
-        const currentTarget = Object.create(((_a = this.mpEvent) === null || _a === void 0 ? void 0 : _a.currentTarget) || null);
-        const element = env.document.getElementById(currentTarget.id);
-        if (element === null) {
-            return this.target;
+        var _a, _b, _c, _d;
+        const cacheCurrentTarget = this.cacheCurrentTarget;
+        if (!cacheCurrentTarget) {
+            const doc = env.document;
+            const currentTarget = Object.create(((_a = this.mpEvent) === null || _a === void 0 ? void 0 : _a.currentTarget) || null);
+            const element = doc.getElementById(currentTarget.id);
+            const targetElement = doc.getElementById(((_c = (_b = this.mpEvent) === null || _b === void 0 ? void 0 : _b.target) === null || _c === void 0 ? void 0 : _c.id) || null);
+            if (element === null || (element && element === targetElement)) {
+                this.cacheCurrentTarget = this.target;
+                return this.target;
+            }
+            currentTarget.dataset = element.dataset;
+            for (const key in (_d = this.mpEvent) === null || _d === void 0 ? void 0 : _d.detail) {
+                currentTarget[key] = this.mpEvent.detail[key];
+            }
+            this.cacheCurrentTarget = currentTarget;
+            return currentTarget;
         }
-        currentTarget.dataset = element.dataset;
-        for (const key in (_b = this.mpEvent) === null || _b === void 0 ? void 0 : _b.detail) {
-            currentTarget[key] = this.mpEvent.detail[key];
+        else {
+            return cacheCurrentTarget;
         }
-        return currentTarget;
     }
 }
 function createEvent(event, node) {
@@ -2847,6 +2976,9 @@ function createPageConfig(component, pageName, data, pageConfig) {
             onShow: getOnShowEventKey(id),
             onHide: getOnHideEventKey(id)
         };
+        if (!isUndefined(page.exitState)) {
+            Current.router.exitState = page.exitState;
+        }
     }
     let loadResolver;
     let hasLoaded;