@tarojs/runtime 3.7.0-alpha.0 → 3.7.0-alpha.10

package/dist/runtime.esm.js

@@ -2,6 +2,8 @@ import { noop, isFunction, getComponentsAlias as getComponentsAlias$1, internalC
 export { Events, hooks } from '@tarojs/shared';
 
 const PROPERTY_THRESHOLD = 2046;
+const TARO_RUNTIME = 'Taro runtime';
+const HOOKS_APP_ID = 'taro-app';
 const SET_DATA = '小程序 setData';
 const PAGE_INIT = '页面初始化';
 const ROOT_STR = 'root';
@@ -34,6 +36,8 @@ const CONFIRM = 'confirm';
 const TIME_STAMP = 'timeStamp';
 const KEY_CODE = 'keyCode';
 const TOUCHMOVE = 'touchmove';
+const DATE = 'Date';
+const SET_TIMEOUT = 'setTimeout';
 const CATCHMOVE = 'catchMove';
 const CATCH_VIEW = 'catch-view';
 const COMMENT = 'comment';
@@ -283,46 +287,90 @@ function getComponentsAlias() {
     return componentsAlias$1;
 }
 
-class ClassList extends Set {
+class ClassList {
     constructor(className, el) {
-        super();
-        className.trim().split(/\s+/).forEach(super.add.bind(this));
+        this.tokenList = [];
         this.el = el;
+        className.trim().split(/\s+/).forEach(token => this.tokenList.push(token));
     }
     get value() {
-        return [...this].filter(v => v !== '').join(' ');
-    }
-    add(s) {
-        super.add(s);
-        this._update();
-        return this;
+        return this.toString();
     }
     get length() {
-        return this.size;
+        return this.tokenList.length;
+    }
+    add() {
+        let index = 0;
+        let updated = false;
+        const tokens = arguments;
+        const length = tokens.length;
+        const tokenList = this.tokenList;
+        do {
+            const token = tokens[index];
+            if (this.checkTokenIsValid(token) && !~tokenList.indexOf(token)) {
+                tokenList.push(token);
+                updated = true;
+            }
+        } while (++index < length);
+        if (updated) {
+            this._update();
+        }
+    }
+    remove() {
+        let i = 0;
+        let updated = false;
+        const tokens = arguments;
+        const length = tokens.length;
+        const tokenList = this.tokenList;
+        do {
+            const token = tokens[i] + '';
+            if (!this.checkTokenIsValid(token))
+                continue;
+            const index = tokenList.indexOf(token);
+            if (~tokenList.indexOf(token)) {
+                tokenList.splice(index, 1);
+                updated = true;
+            }
+        } while (++i < length);
+        if (updated) {
+            this._update();
+        }
     }
-    remove(s) {
-        super.delete(s);
-        this._update();
+    contains(token) {
+        if (!this.checkTokenIsValid(token))
+            return false;
+        return !!~this.tokenList.indexOf(token);
     }
-    toggle(s) {
-        if (super.has(s)) {
-            super.delete(s);
+    toggle(token, force) {
+        const result = this.contains(token);
+        const method = result ? force !== true && 'remove' : force !== false && 'add';
+        if (method) {
+            // @ts-ignore
+            this[method](token);
+        }
+        if (force === true || force === false) {
+            return force;
         }
         else {
-            super.add(s);
+            return !result;
         }
-        this._update();
     }
-    replace(s1, s2) {
-        super.delete(s1);
-        super.add(s2);
-        this._update();
-    }
-    contains(s) {
-        return super.has(s);
+    replace(token, replacement_token) {
+        if (!this.checkTokenIsValid(token) || !this.checkTokenIsValid(replacement_token))
+            return;
+        const index = this.tokenList.indexOf(token);
+        if (~index) {
+            this.tokenList.splice(index, 1, replacement_token);
+            this._update();
+        }
     }
     toString() {
-        return this.value;
+        return this.tokenList.filter(v => v !== '').join(' ');
+    }
+    checkTokenIsValid(token) {
+        if (token === '' || /\s/.test(token))
+            return false;
+        return true;
     }
     _update() {
         this.el.className = this.value;
@@ -359,6 +407,7 @@ let componentsAlias;
  * it's a vnode traverser and modifier: that's exactly what Taro's doing in here.
  */
 function hydrate(node) {
+    var _a;
     if (!componentsAlias) {
         // 初始化 componentsAlias
         componentsAlias = getComponentsAlias();
@@ -371,7 +420,7 @@ function hydrate(node) {
     if (isText(node)) {
         return {
             ["v" /* Shortcuts.Text */]: node.nodeValue,
-            ["nn" /* Shortcuts.NodeName */]: componentsAlias[nodeName]._num
+            ["nn" /* Shortcuts.NodeName */]: ((_a = componentsAlias[nodeName]) === null || _a === void 0 ? void 0 : _a._num) || '8'
         };
     }
     const data = {
@@ -529,6 +578,18 @@ class TaroNode extends TaroEventTarget {
             value: isClean ? cleanChildNodes : rerenderChildNodes
         });
     }
+    updateSingleChild(index) {
+        this.childNodes.forEach((child, childIndex) => {
+            if (isComment(child))
+                return;
+            if (index && childIndex < index)
+                return;
+            this.enqueueUpdate({
+                path: child._path,
+                value: this.hydrate(child)
+            });
+        });
+    }
     get _root() {
         var _a;
         return ((_a = this.parentNode) === null || _a === void 0 ? void 0 : _a._root) || null;
@@ -620,22 +681,24 @@ class TaroNode extends TaroEventTarget {
         //   - 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 });
+        let index = 0;
         // Data structure
         newChild.parentNode = this;
         if (refChild) {
             // insertBefore & replaceChild
-            const index = this.findIndex(refChild);
+            index = this.findIndex(refChild);
             this.childNodes.splice(index, 0, newChild);
         }
         else {
             // appendChild
             this.childNodes.push(newChild);
         }
+        const childNodesLength = this.childNodes.length;
         // Serialization
         if (this._root) {
             if (!refChild) {
                 // appendChild
-                const isOnlyChild = this.childNodes.length === 1;
+                const isOnlyChild = childNodesLength === 1;
                 if (isOnlyChild) {
                     this.updateChildNodes();
                 }
@@ -654,8 +717,26 @@ class TaroNode extends TaroEventTarget {
                 });
             }
             else {
-                // insertBefore
-                this.updateChildNodes();
+                // insertBefore 有两种更新模式
+                // 比方说有 A B C 三个节点，现在要在 C 前插入 D
+                // 1. 插入 D，然后更新整个父节点的 childNodes 数组
+                // setData({ cn: [A, B, D, C] })
+                // 2. 插入 D，然后更新 D 以及 D 之后每个节点的数据
+                // setData ({
+                //   cn.[2]: D,
+                //   cn.[3]: C,
+                // })
+                // 由于微信解析 ’cn.[2]‘ 这些路径的时候也需要消耗时间，
+                // 所以根据 insertBefore 插入的位置来做不同的处理
+                const mark = childNodesLength * 2 / 3;
+                if (mark > index) {
+                    // 如果 insertBefore 的位置在 childNodes 的 2/3 前，则为了避免解析路径消耗过多的时间，采用第一种方式
+                    this.updateChildNodes();
+                }
+                else {
+                    // 如果 insertBefore 的位置在 childNodes 的 2/3 之后，则采用第二种方式，避免 childNodes 的全量更新
+                    this.updateSingleChild(index);
+                }
             }
         }
         MutationObserver.record({
@@ -803,7 +884,8 @@ const styleProperties = [
     'widows',
     'width',
     'zIndex',
-    'pointerEvents'
+    'pointerEvents',
+    'aspectRatio'
     /** 非常用 style */
     // 'azimuth',
     // 'backfaceVisibility',
@@ -971,10 +1053,12 @@ function setStyle(newVal, styleKey) {
     }
     !this._pending && enqueueUpdate(this);
 }
-function initStyle(ctor) {
+function initStyle(ctor, styleProperties) {
     const properties = {};
     for (let i = 0; i < styleProperties.length; i++) {
         const styleKey = styleProperties[i];
+        if (ctor[styleKey])
+            return;
         properties[styleKey] = {
             get() {
                 const val = this._value[styleKey];
@@ -1085,7 +1169,17 @@ class Style {
         return value;
     }
 }
-initStyle(Style);
+initStyle(Style, styleProperties);
+hooks.tap('injectNewStyleProperties', (newStyleProperties) => {
+    if (isArray(newStyleProperties)) {
+        initStyle(Style, newStyleProperties);
+    }
+    else {
+        if (typeof newStyleProperties !== 'string')
+            return;
+        initStyle(Style, [newStyleProperties]);
+    }
+});
 
 function returnTrue() {
     return true;
@@ -1104,7 +1198,9 @@ function treeToArray(root, predict) {
 }
 function following(el, root) {
     const firstChild = el.firstChild;
-    if (firstChild) {
+    const isElmentTypeValid = el.nodeType === 1 /* NodeType.ELEMENT_NODE */ || el.nodeType === 9 /* NodeType.DOCUMENT_NODE */;
+    // 如果当前 el 不是 element 或 document 元素，则可以直接不递归他的子元素了
+    if (firstChild && isElmentTypeValid) {
         return firstChild;
     }
     let current = el;
@@ -1345,10 +1441,10 @@ class TaroElement extends TaroNode {
         });
     }
     getElementsByClassName(className) {
+        const classNames = className.trim().split(/\s+/);
         return treeToArray(this, (el) => {
             const classList = el.classList;
-            const classNames = className.trim().split(/\s+/);
-            return classNames.every(c => classList.has(c));
+            return classNames.every(c => classList.contains(c));
         });
     }
     dispatchEvent(event) {
@@ -2371,13 +2467,13 @@ class TaroEvent {
         this.defaultPrevented = true;
     }
     get target() {
-        var _a, _b;
+        var _a, _b, _c;
         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);
+            const element = env.document.getElementById(((_b = target.dataset) === null || _b === void 0 ? void 0 : _b.sid) || target.id || null);
             target.dataset = element !== null ? element.dataset : EMPTY_OBJ;
-            for (const key in (_b = this.mpEvent) === null || _b === void 0 ? void 0 : _b.detail) {
+            for (const key in (_c = this.mpEvent) === null || _c === void 0 ? void 0 : _c.detail) {
                 target[key] = this.mpEvent.detail[key];
             }
             this.cacheTarget = target;
@@ -2388,19 +2484,19 @@ class TaroEvent {
         }
     }
     get currentTarget() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         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);
+            const element = doc.getElementById(((_b = currentTarget.dataset) === null || _b === void 0 ? void 0 : _b.sid) || currentTarget.id || null);
+            const targetElement = doc.getElementById(((_e = (_d = (_c = this.mpEvent) === null || _c === void 0 ? void 0 : _c.target) === null || _d === void 0 ? void 0 : _d.dataset) === null || _e === void 0 ? void 0 : _e.sid) || ((_g = (_f = this.mpEvent) === null || _f === void 0 ? void 0 : _f.target) === null || _g === void 0 ? void 0 : _g.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) {
+            for (const key in (_h = this.mpEvent) === null || _h === void 0 ? void 0 : _h.detail) {
                 currentTarget[key] = this.mpEvent.detail[key];
             }
             this.cacheCurrentTarget = currentTarget;
@@ -2458,7 +2554,8 @@ function eventHandler(event) {
         const dispatch = () => {
             const e = createEvent(event, node);
             hooks.call('modifyTaroEvent', e, node);
-            node.dispatchEvent(e);
+            hooks.call('dispatchTaroEvent', e, node);
+            hooks.call('dispatchTaroEventFinish', e, node);
         };
         if (hooks.isExist('batchedEventUpdates')) {
             const type = event.type;
@@ -2488,6 +2585,13 @@ function eventHandler(event) {
 }
 
 class FormElement extends TaroElement {
+    get type() {
+        var _a;
+        return (_a = this.props[TYPE]) !== null && _a !== void 0 ? _a : '';
+    }
+    set type(val) {
+        this.setAttribute(TYPE, val);
+    }
     get value() {
         // eslint-disable-next-line dot-notation
         const val = this.props[VALUE];
@@ -2594,7 +2698,7 @@ class TaroRootElement extends TaroElement {
     }
     performUpdate(initRender = false, prerender) {
         this.pendingUpdate = true;
-        const ctx = this.ctx;
+        const ctx = hooks.call('proxyToRaw', this.ctx);
         setTimeout(() => {
             const setDataMark = `${SET_DATA} 开始时间戳 ${Date.now()}`;
             perf.start(setDataMark);
@@ -2747,6 +2851,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise */
+
 
 function __classPrivateFieldGet(receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
@@ -2879,6 +2985,12 @@ _URLSearchParams_dict = new WeakMap();
 
 var _URL_hash, _URL_hostname, _URL_pathname, _URL_port, _URL_protocol, _URL_search;
 class URL {
+    static createObjectURL() {
+        throw new Error('Oops, not support URL.createObjectURL() in miniprogram.');
+    }
+    static revokeObjectURL() {
+        throw new Error('Oops, not support URL.revokeObjectURL() in miniprogram.');
+    }
     constructor(url, base) {
         /* private property */
         _URL_hash.set(this, '');
@@ -2898,12 +3010,6 @@ class URL {
         __classPrivateFieldSet(this, _URL_protocol, protocol, "f");
         __classPrivateFieldSet(this, _URL_search, new URLSearchParams(search), "f");
     }
-    static createObjectURL() {
-        throw new Error('Oops, not support URL.createObjectURL() in miniprogram.');
-    }
-    static revokeObjectURL() {
-        throw new Error('Oops, not support URL.revokeObjectURL() in miniprogram.');
-    }
     /* public property */
     get protocol() {
         return __classPrivateFieldGet(this, _URL_protocol, "f");
@@ -3139,9 +3245,6 @@ class AnchorElement extends TaroElement {
     }
 }
 
-class CustomWrapperElement extends TaroElement {
-}
-
 class TaroDocument extends TaroElement {
     constructor() {
         super();
@@ -3162,9 +3265,6 @@ class TaroDocument extends TaroElement {
             case nodeName === A:
                 element = new AnchorElement();
                 break;
-            case nodeName === CUSTOM_WRAPPER:
-                element = new CustomWrapperElement();
-                break;
             default:
                 element = new TaroElement();
                 break;
@@ -3333,7 +3433,7 @@ class History extends Events {
         return __classPrivateFieldGet(this, _History_stack, "f").length;
     }
     get state() {
-        return __classPrivateFieldGet(this, _History_stack, "f")[__classPrivateFieldGet(this, _History_cur, "f")];
+        return __classPrivateFieldGet(this, _History_stack, "f")[__classPrivateFieldGet(this, _History_cur, "f")].state;
     }
     /* public method */
     go(delta) {
@@ -3829,7 +3929,7 @@ function getOnHideEventKey(path) {
 function createPageConfig(component, pageName, data, pageConfig) {
     // 小程序 Page 构造器是一个傲娇小公主，不能把复杂的对象挂载到参数上
     const id = pageName !== null && pageName !== void 0 ? pageName : `taro_page_${pageId()}`;
-    const [ONLOAD, ONUNLOAD, ONREADY, ONSHOW, ONHIDE, LIFECYCLES, SIDE_EFFECT_LIFECYCLES] = hooks.call('getMiniLifecycleImpl').page;
+    const [ONLOAD, ONUNLOAD, ONREADY, ONSHOW, ONHIDE, LIFECYCLES, SIDE_EFFECT_LIFECYCLES,] = hooks.call('getMiniLifecycleImpl').page;
     let pageElement = null;
     let unmounting = false;
     let prepareMountList = [];
@@ -3955,8 +4055,19 @@ function createPageConfig(component, pageName, data, pageConfig) {
         }
     };
     LIFECYCLES.forEach((lifecycle) => {
+        let isDefer = false;
+        lifecycle = lifecycle.replace(/^defer:/, () => {
+            isDefer = true;
+            return '';
+        });
         config[lifecycle] = function () {
-            return safeExecute(this.$taroPath, lifecycle, ...arguments);
+            const exec = () => safeExecute(this.$taroPath, lifecycle, ...arguments);
+            if (isDefer) {
+                hasLoaded.then(exec);
+            }
+            else {
+                return exec();
+            }
         };
     });
     // onShareAppMessage 和 onShareTimeline 一样，会影响小程序右上方按钮的选项，因此不能默认注册。
@@ -3964,7 +4075,8 @@ function createPageConfig(component, pageName, data, pageConfig) {
         var _a;
         if (component[lifecycle] ||
             ((_a = component.prototype) === null || _a === void 0 ? void 0 : _a[lifecycle]) ||
-            component[lifecycle.replace(/^on/, 'enable')]) {
+            component[lifecycle.replace(/^on/, 'enable')] ||
+            (pageConfig === null || pageConfig === void 0 ? void 0 : pageConfig[lifecycle.replace(/^on/, 'enable')])) {
             config[lifecycle] = function (...args) {
                 var _a;
                 const target = (_a = args[0]) === null || _a === void 0 ? void 0 : _a.target;
@@ -3994,7 +4106,8 @@ function createComponentConfig(component, componentName, data) {
         [ATTACHED]() {
             var _a;
             perf.start(PAGE_INIT);
-            const path = getPath(id, { id: ((_a = this.getPageId) === null || _a === void 0 ? void 0 : _a.call(this)) || pageId() });
+            this.pageIdCache = ((_a = this.getPageId) === null || _a === void 0 ? void 0 : _a.call(this)) || pageId();
+            const path = getPath(id, { id: this.pageIdCache });
             Current.app.mount(component, path, () => {
                 componentElement = env.document.getElementById(path);
                 ensure(componentElement !== null, '没有找到组件实例。');
@@ -4007,7 +4120,7 @@ function createComponentConfig(component, componentName, data) {
             });
         },
         [DETACHED]() {
-            const path = getPath(id, { id: this.getPageId() });
+            const path = getPath(id, { id: this.pageIdCache });
             Current.app.unmount(path, () => {
                 instances.delete(path);
                 if (componentElement) {
@@ -4076,18 +4189,27 @@ function createRecursiveComponentConfig(componentName) {
         } }, lifeCycles);
 }
 
+const TIMEOUT = 100;
 const nextTick = (cb, ctx) => {
-    var _a, _b, _c;
+    const beginTime = Date.now();
     const router = Current.router;
     const timerFunc = () => {
         setTimeout(function () {
             ctx ? cb.call(ctx) : cb();
         }, 1);
     };
-    if (router !== null) {
-        let pageElement = null;
-        const path = router.$taroPath;
-        pageElement = env.document.getElementById(path);
+    if (router === null)
+        return timerFunc();
+    const path = router.$taroPath;
+    /**
+     * 三种情况
+     *   1. 调用 nextTick 时，pendingUpdate 已经从 true 变为 false（即已更新完成），那么需要光等 100ms
+     *   2. 调用 nextTick 时，pendingUpdate 为 true，那么刚好可以搭上便车
+     *   3. 调用 nextTick 时，pendingUpdate 还是 false，框架仍未启动更新逻辑，这时最多轮询 100ms，等待 pendingUpdate 变为 true。
+     */
+    function next() {
+        var _a, _b, _c;
+        const pageElement = env.document.getElementById(path);
         if (pageElement === null || pageElement === void 0 ? void 0 : pageElement.pendingUpdate) {
             if (isWebPlatform()) {
                 // eslint-disable-next-line dot-notation
@@ -4099,14 +4221,15 @@ const nextTick = (cb, ctx) => {
                 pageElement.enqueueUpdateCallback(cb, ctx);
             }
         }
-        else {
+        else if (Date.now() - beginTime > TIMEOUT) {
             timerFunc();
         }
+        else {
+            setTimeout(() => next(), 20);
+        }
     }
-    else {
-        timerFunc();
-    }
+    next();
 };
 
-export { Current, FormElement, History, Location, MutationObserver, SVGElement, Style, TaroElement, TaroEvent, TaroNode, TaroRootElement, TaroText, URL, URLSearchParams, addLeadingSlash, _caf as cancelAnimationFrame, createComponentConfig, createEvent, createPageConfig, createRecursiveComponentConfig, document$1 as document, eventCenter, eventHandler, eventSource, getComputedStyle, getCurrentInstance, getPageInstance, history, hydrate, incrementId, injectPageInstance, location, nav as navigator, nextTick, now, options, parseUrl, removePageInstance, _raf as requestAnimationFrame, safeExecute, stringify, window$1 as window };
+export { A, APP, BEHAVIORS, BODY, CATCHMOVE, CATCH_VIEW, CHANGE, CLASS, COMMENT, CONFIRM, CONTAINER, CONTEXT_ACTIONS, CURRENT_TARGET, CUSTOM_WRAPPER, Current, DATASET, DATE, DOCUMENT_ELEMENT_NAME, DOCUMENT_FRAGMENT, EVENT_CALLBACK_RESULT, EXTERNAL_CLASSES, FOCUS, FormElement, HEAD, HOOKS_APP_ID, HTML, History, ID, INPUT, KEY_CODE, Location, MutationObserver, OBJECT, ON_HIDE, ON_LOAD, ON_READY, ON_SHOW, OPTIONS, PAGE_INIT, PROPERTY_THRESHOLD, PROPS, PURE_VIEW, ROOT_STR, SET_DATA, SET_TIMEOUT, STATIC_VIEW, STYLE, SVGElement, Style, TARGET, TARO_RUNTIME, TIME_STAMP, TOUCHMOVE, TYPE, TaroElement, TaroEvent, TaroNode, TaroRootElement, TaroText, UID, URL, URLSearchParams, VALUE, VIEW, addLeadingSlash, _caf as cancelAnimationFrame, createComponentConfig, createEvent, createPageConfig, createRecursiveComponentConfig, document$1 as document, env, eventCenter, eventHandler, eventSource, getComputedStyle, getCurrentInstance, getOnHideEventKey, getOnReadyEventKey, getOnShowEventKey, getPageInstance, getPath, history, hydrate, incrementId, injectPageInstance, location, nav as navigator, nextTick, now, options, parseUrl, removePageInstance, _raf as requestAnimationFrame, safeExecute, stringify, window$1 as window };
 //# sourceMappingURL=runtime.esm.js.map