@tarojs/runtime 3.7.0-canary.0 → 3.8.0-canary.0

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,9 @@ const CONFIRM = 'confirm';
 const TIME_STAMP = 'timeStamp';
 const KEY_CODE = 'keyCode';
 const TOUCHMOVE = 'touchmove';
+const DATE = 'Date';
+const SET_TIMEOUT = 'setTimeout';
+const COMPILE_MODE = 'compileMode';
 const CATCHMOVE = 'catchMove';
 const CATCH_VIEW = 'catch-view';
 const COMMENT = 'comment';
@@ -396,41 +401,47 @@ const env = {
 
 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,
- * actually, `hydrate` basicly do the `render()` thing, but ignore some properties,
- * 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');
-    }
+function initConfig() {
+    // 初始化 SPECIAL_NODES
+    SPECIAL_NODES || (SPECIAL_NODES = hooks.call('getSpecialNodes'));
+    // 初始化 componentsAlias
+    componentsAlias || (componentsAlias = getComponentsAlias());
+}
+function hydrateTextNode(node) {
+    var _a;
+    return {
+        ["v" /* Shortcuts.Text */]: node.nodeValue,
+        ["nn" /* Shortcuts.NodeName */]: ((_a = componentsAlias[node.nodeName]) === null || _a === void 0 ? void 0 : _a._num) || '8'
+    };
+}
+function hydrateElementNode(node) {
     const nodeName = node.nodeName;
-    if (isText(node)) {
-        return {
-            ["v" /* Shortcuts.Text */]: node.nodeValue,
-            ["nn" /* Shortcuts.NodeName */]: componentsAlias[nodeName]._num
-        };
-    }
+    let isCompileMode = false;
     const data = {
         ["nn" /* Shortcuts.NodeName */]: nodeName,
         sid: node.sid
     };
-    if (node.uid !== node.sid) {
-        data.uid = node.uid;
-    }
+    // NodeName
     if (!node.isAnyEventBinded() && SPECIAL_NODES.indexOf(nodeName) > -1) {
         data["nn" /* Shortcuts.NodeName */] = `static-${nodeName}`;
         if (nodeName === VIEW && !isHasExtractProp(node)) {
             data["nn" /* Shortcuts.NodeName */] = PURE_VIEW;
         }
     }
+    // Id
+    if (node.uid !== node.sid) {
+        data.uid = node.uid;
+    }
+    // Class
+    if (node.className !== '') {
+        data["cl" /* Shortcuts.Class */] = node.className;
+    }
+    // Style
+    const cssText = node.cssText;
+    if (cssText !== '' && nodeName !== 'swiper-item') {
+        data["st" /* Shortcuts.Style */] = cssText;
+    }
+    // Attributes
     const { props } = node;
     for (const prop in props) {
         const propInCamelCase = toCamelCase(prop);
@@ -438,30 +449,22 @@ function hydrate(node) {
             prop !== CLASS &&
             prop !== STYLE &&
             prop !== ID &&
-            propInCamelCase !== CATCHMOVE) {
+            propInCamelCase !== CATCHMOVE &&
+            propInCamelCase !== COMPILE_MODE) {
             data[propInCamelCase] = props[prop];
         }
         if (nodeName === VIEW && propInCamelCase === CATCHMOVE && props[prop] !== false) {
             data["nn" /* Shortcuts.NodeName */] = CATCH_VIEW;
         }
+        if (propInCamelCase === COMPILE_MODE) {
+            isCompileMode = true;
+        }
     }
-    let { childNodes } = node;
-    // 过滤 comment 节点
-    childNodes = childNodes.filter(node => !isComment(node));
-    if (childNodes.length > 0) {
-        data["cn" /* Shortcuts.Childnodes */] = childNodes.map(hydrate);
-    }
-    else {
-        data["cn" /* Shortcuts.Childnodes */] = [];
-    }
-    if (node.className !== '') {
-        data["cl" /* Shortcuts.Class */] = node.className;
-    }
-    const cssText = node.cssText;
-    if (cssText !== '' && nodeName !== 'swiper-item') {
-        data["st" /* Shortcuts.Style */] = cssText;
-    }
+    // Children
+    data["cn" /* Shortcuts.Childnodes */] = node.childNodes.filter(n => !isComment(n)).map(hydrate);
+    // Custom behavior
     hooks.call('modifyHydrateData', data);
+    // Turn in alias
     const nn = data["nn" /* Shortcuts.NodeName */];
     const componentAlias = componentsAlias[nn];
     if (componentAlias) {
@@ -473,8 +476,26 @@ function hydrate(node) {
             }
         }
     }
+    if (isCompileMode) {
+        data["nn" /* Shortcuts.NodeName */] = props[COMPILE_MODE];
+    }
     return data;
 }
+/**
+ * React also has a fancy function's name for this: `hydrate()`.
+ * You may have been heard `hydrate` as a SSR-related function,
+ * actually, `hydrate` basicly do the `render()` thing, but ignore some properties,
+ * it's a vnode traverser and modifier: that's exactly what Taro's doing in here.
+ */
+function hydrate(node) {
+    initConfig();
+    if (isText(node)) {
+        return hydrateTextNode(node);
+    }
+    else {
+        return hydrateElementNode(node);
+    }
+}
 
 class TaroEventTarget {
     constructor() {
@@ -573,6 +594,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;
@@ -664,22 +697,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();
                 }
@@ -698,8 +733,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({
@@ -2430,13 +2483,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;
@@ -2447,19 +2500,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;
@@ -2814,8 +2867,6 @@ 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");
@@ -3208,9 +3259,6 @@ class AnchorElement extends TaroElement {
     }
 }
 
-class CustomWrapperElement extends TaroElement {
-}
-
 class TaroDocument extends TaroElement {
     constructor() {
         super();
@@ -3231,9 +3279,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;
@@ -4024,8 +4069,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 一样，会影响小程序右上方按钮的选项，因此不能默认注册。
@@ -4064,7 +4120,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, '没有找到组件实例。');
@@ -4077,7 +4134,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) {
@@ -4188,5 +4245,5 @@ const nextTick = (cb, ctx) => {
     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, getPath, 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, COMPILE_MODE, 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