@tarojs/runtime 3.5.0-beta.2 → 3.5.0-beta.3

package/dist/current.d.ts

@@ -6,6 +6,7 @@ export interface Router {
     onReady: string;
     onHide: string;
     onShow: string;
+    exitState?: any;
 }
 interface Current {
     app: AppInstance | null;

package/dist/dom/node.d.ts

@@ -17,12 +17,8 @@ export declare class TaroNode extends TaroEventTarget {
     childNodes: TaroNode[];
     constructor();
     private hydrate;
-    /**
-     * like jQuery's $.empty()
-     */
-    private _empty;
     private updateChildNodes;
-    protected get _root(): TaroRootElement | null;
+    get _root(): TaroRootElement | null;
     protected findIndex(refChild: TaroNode): number;
     get _path(): string;
     get nextSibling(): TaroNode | null;

package/dist/dom/root.d.ts

@@ -7,7 +7,7 @@ export declare class TaroRootElement extends TaroElement {
     ctx: null | MpInstance;
     constructor();
     get _path(): string;
-    protected get _root(): TaroRootElement;
+    get _root(): TaroRootElement;
     enqueueUpdate(payload: UpdatePayload): void;
     performUpdate(initRender?: boolean, prerender?: Func): void;
     enqueueUpdateCallback(cb: Func, ctx?: Record<string, any>): void;

package/dist/dom/style.d.ts

@@ -1,5 +1,6 @@
 import { TaroElement } from './element';
 export declare class Style {
+    _pending: boolean;
     _usedStyleProp: Set<string>;
     _value: Partial<CSSStyleDeclaration>;
     _element: TaroElement;

package/dist/dsl/instance.d.ts

@@ -1,9 +1,9 @@
+import type { Component as Vue3Component } from '@vue/runtime-core';
 import type { Component, ComponentClass } from 'react';
 import VueCtor, { ComponentOptions, VNode } from 'vue';
-import type { Component as Vue3Component } from '@vue/runtime-core';
 import type { CombinedVueInstance } from 'vue/types/vue';
-import type { Func, MpEvent } from '../interface';
 import type { TaroElement } from '../dom/element';
+import type { Func, MpEvent } from '../interface';
 export interface Instance<T = Record<string, any>> extends Component<T>, Show, PageInstance {
     tid?: string;
     $forceUpdate?(): void;
@@ -53,6 +53,7 @@ export interface PageLifeCycle extends Show {
     onPullIntercept?(): void;
     onShareTimeline?(): void;
     onAddToFavorites?(): void;
+    onSaveExitState?(): void;
     eh?(event: MpEvent): void;
     onLoad?(options: Record<string, unknown>, cb?: Func): void;
     onUnload?(): void;
@@ -79,6 +80,7 @@ export interface AppInstance extends Show {
     onShow?(options?: Record<string, unknown>): void;
     unmount?(id: string): void;
     unmount?(id: string, cb: () => void): void;
+    onError?(error: string): void;
     onPageNotFound?(res: any): void;
     taroGlobalData?: Record<any, any>;
 }

package/dist/interface/hydrate.d.ts

@@ -9,6 +9,7 @@ export interface MpInstance {
     $taroPath: string;
     __data__: any;
     data: any;
+    exitState?: any;
     selectComponent: (selector: string) => any;
 }
 export interface MiniElementData {

package/dist/runtime.esm.js

@@ -1,4 +1,4 @@
-import { noop, isFunction, EMPTY_OBJ, hooks, toCamelCase, isObject, warn, isArray, ensure, isNull, isUndefined, toDashed, 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;
 }
 
@@ -448,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 = () => {
@@ -524,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
@@ -574,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 */,
@@ -658,7 +718,7 @@ class TaroNode extends TaroEventTarget {
             eventSource.removeNodeTree(child);
         }
         // Serialization
-        if (doUpdate !== false) {
+        if (this._root && doUpdate !== false) {
             this.updateChildNodes();
         }
         return child;
@@ -865,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 (!isNull(newVal) && !isUndefined(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 = {};
@@ -928,6 +996,8 @@ class Style {
         });
     }
     get cssText() {
+        if (!this._usedStyleProp.size)
+            return '';
         const texts = [];
         this._usedStyleProp.forEach(key => {
             const val = this[key];
@@ -942,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(';');
@@ -965,6 +1036,8 @@ class Style {
             }
             this.setProperty(propName.trim(), val.trim());
         }
+        this._pending = false;
+        enqueueUpdate(this);
     }
     setProperty(propertyName, value) {
         if (propertyName[0] === '-') {
@@ -974,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 {
@@ -990,8 +1060,7 @@ class Style {
             return '';
         }
         const value = this[propertyName];
-        this[propertyName] = '';
-        this._usedStyleProp.delete(propertyName);
+        this[propertyName] = undefined;
         return value;
     }
     getPropertyValue(propertyName) {
@@ -1121,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({
@@ -1155,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
                 });
             }
         }
@@ -1201,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
                 });
             }
         }
@@ -1281,9 +1376,11 @@ class TaroElement extends TaroNode {
             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);
@@ -1293,9 +1390,12 @@ class TaroElement extends TaroNode {
         const name = this.nodeName;
         const SPECIAL_NODES = hooks.call('getSpecialNodes');
         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
             });
         }
     }
@@ -2859,6 +2959,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;