@tarojs/runtime 3.4.0-beta.1 → 3.4.1

package/dist/dsl/common.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { eventHandler } from '../dom/event';
 import type { PageConfig } from '@tarojs/taro';
 import type { Instance, PageInstance, PageProps } from './instance';
 export declare function injectPageInstance(inst: Instance<PageProps>, id: string): void;
@@ -13,24 +12,4 @@ export declare function getOnShowEventKey(path: string): string;
 export declare function getOnHideEventKey(path: string): string;
 export declare function createPageConfig(component: any, pageName?: string, data?: Record<string, unknown>, pageConfig?: PageConfig): PageInstance;
 export declare function createComponentConfig(component: React.ComponentClass, componentName?: string, data?: Record<string, unknown>): any;
-export declare function createRecursiveComponentConfig(componentName?: string): {
-    properties: {
-        i: {
-            type: ObjectConstructor;
-            value: {
-                nn: string;
-            };
-        };
-        l: {
-            type: StringConstructor;
-            value: string;
-        };
-    };
-    options: {
-        addGlobalClass: boolean;
-        virtualHost: boolean;
-    };
-    methods: {
-        eh: typeof eventHandler;
-    };
-};
+export declare function createRecursiveComponentConfig(componentName?: string): any;

package/dist/dsl/instance.d.ts

@@ -21,13 +21,13 @@ interface VueInternal {
 export interface PageProps {
     tid?: string;
 }
-export interface ReactPageComponent<T = PageProps> extends ComponentClass<T>, Show, PageInstance {
+export interface ReactPageComponent<T = PageProps> extends ComponentClass<T>, PageInstance {
 }
-export interface ReactPageInstance<T = PageProps> extends Component<T>, Show, PageInstance {
+export interface ReactPageInstance<T = PageProps> extends Component<T>, PageInstance {
     componentDidShow?(): void;
     componentDidHide?(): void;
 }
-export interface ReactAppInstance<T = AppInstance> extends Component<T>, Show, AppInstance {
+export interface ReactAppInstance<T = AppInstance> extends Component<T>, AppInstance {
 }
 export interface PageLifeCycle extends Show {
     onPullDownRefresh?(): void;
@@ -63,15 +63,17 @@ export interface PageInstance extends PageLifeCycle {
     options?: Record<string, unknown>;
 }
 interface Show {
-    componentDidShow?(options?: unknown): void;
-    componentDidHide?(options?: unknown): void;
-    onShow?(options?: unknown): void;
-    onHide?(options?: unknown): void;
+    componentDidShow?(): void;
+    componentDidHide?(): void;
+    onShow?(): void;
+    onHide?(): void;
 }
 export interface AppInstance extends Show {
-    onLaunch?(options?: string): void;
+    onLaunch?(options?: Record<string, unknown>): void;
     mount?(component: React.ComponentClass | ComponentOptions<VueCtor> | Vue3Component, id: string, cb: (...args: any[]) => void): void;
     mount?(component: React.ComponentClass | ComponentOptions<VueCtor> | Vue3Component, id: string, cb: () => void): void;
+    componentDidShow?(options?: Record<string, unknown>): void;
+    onShow?(options?: Record<string, unknown>): void;
     unmount?(id: string): void;
     unmount?(id: string, cb: () => void): void;
     onPageNotFound?(res: any): void;

package/dist/runtime.esm.js

@@ -70,10 +70,9 @@ if (process.env.TARO_ENV === 'h5') {
           };
           // Load global or shim versions of Map, Set, and WeakMap
           var functionPrototype = Object.getPrototypeOf(Function);
-          var usePolyfill = isObject(process) && process.env && process.env["REFLECT_METADATA_USE_MAP_POLYFILL"] === "true";
           var _Map = Map;
           var _Set = Set;
-          var _WeakMap = !usePolyfill && isFunction(WeakMap) ? WeakMap : CreateWeakMapPolyfill();
+          var _WeakMap = isFunction(WeakMap) ? WeakMap : CreateWeakMapPolyfill();
           // [[Metadata]] internal slot
           // https://rbuckton.github.io/reflect-metadata/#ordinary-object-internal-methods-and-internal-slots
           var Metadata = new _WeakMap();
@@ -1260,7 +1259,8 @@ function shortcutAttr(key) {
         default:
             return key;
     }
-}
+}
+const customWrapperCache = new Map();
 
 const SID_TARO_ELEMENT = '0';
 const SID_TARO_ELEMENT_FACTORY = '1';
@@ -1358,6 +1358,7 @@ let TaroEventTarget = class TaroEventTarget {
     }
     addEventListener(type, handler, options) {
         var _a, _b;
+        type = type.toLowerCase();
         (_b = (_a = this.hooks).onAddEvent) === null || _b === void 0 ? void 0 : _b.call(_a, type, handler, options, this);
         if (type === 'regionchange') {
             // map 组件的 regionchange 事件非常特殊，详情：https://github.com/NervJS/taro/issues/5766
@@ -1365,8 +1366,6 @@ let TaroEventTarget = class TaroEventTarget {
             this.addEventListener('end', handler, options);
             return;
         }
-        type = type.toLowerCase();
-        const handlers = this.__handlers[type];
         let isCapture = Boolean(options);
         let isOnce = false;
         if (isObject(options)) {
@@ -1382,6 +1381,16 @@ let TaroEventTarget = class TaroEventTarget {
             return;
         }
         process.env.NODE_ENV !== 'production' && warn(isCapture, 'Taro 暂未实现 event 的 capture 特性。');
+        // 某些框架，如 PReact 有委托的机制，handler 始终是同一个函数
+        // 这会导致多层停止冒泡失败：view -> view(handler.stop = false) -> view(handler.stop = true)
+        // 这样解决：view -> view(handlerA.stop = false) -> view(handlerB.stop = false)
+        // 因此每次绑定事件都新建一个函数，如果带来了性能问题，可以把这段逻辑抽取到 PReact 插件中。
+        const oldHandler = handler;
+        handler = function () {
+            oldHandler.apply(this, arguments); // this 指向 Element
+        };
+        handler.oldHandler = oldHandler;
+        const handlers = this.__handlers[type];
         if (isArray(handlers)) {
             handlers.push(handler);
         }
@@ -1398,7 +1407,10 @@ let TaroEventTarget = class TaroEventTarget {
         if (!isArray(handlers)) {
             return;
         }
-        const index = handlers.indexOf(handler);
+        const index = handlers.findIndex(item => {
+            if (item === handler || item.oldHandler === handler)
+                return true;
+        });
         process.env.NODE_ENV !== 'production' && warn(index === -1, `事件: '${type}' 没有注册在 DOM 中，因此不会被移除。`);
         handlers.splice(index, 1);
     }
@@ -2605,24 +2617,33 @@ class Performance {
 }
 const perf = new Performance();
 
-function findCustomWrapper(ctx, dataPathArr) {
-    let currentData = ctx.__data__ || ctx.data || ctx._data;
-    let wrapper;
-    let index;
-    dataPathArr.some((item, i) => {
-        const key = item.replace(/^\[(.+)\]$/, '$1');
+function findCustomWrapper(root, dataPathArr) {
+    // ['root', 'cn', '[0]'] remove 'root' => ['cn', '[0]']
+    const list = dataPathArr.slice(1);
+    let currentData = root;
+    let customWrapper;
+    let splitedPath = '';
+    list.some((item, i) => {
+        const key = item
+            // '[0]' => '0'
+            .replace(/^\[(.+)\]$/, '$1')
+            // 'cn' => 'childNodes'
+            .replace(/\bcn\b/g, 'childNodes');
         currentData = currentData[key];
         if (isUndefined(currentData))
             return true;
-        if (currentData.nn === CUSTOM_WRAPPER) {
-            wrapper = currentData;
-            index = i;
+        if (currentData.nodeName === CUSTOM_WRAPPER) {
+            const res = customWrapperCache.get(currentData.sid);
+            if (res) {
+                customWrapper = res;
+                splitedPath = dataPathArr.slice(i + 2).join('.');
+            }
         }
     });
-    if (wrapper) {
+    if (customWrapper) {
         return {
-            wrapper,
-            index: index
+            customWrapper,
+            splitedPath
         };
     }
 }
@@ -2690,17 +2711,12 @@ let TaroRootElement = class TaroRootElement extends TaroElement {
                 // 更新渲染，区分 CustomWrapper 与页面级别的 setData
                 for (const p in data) {
                     const dataPathArr = p.split('.');
-                    const found = findCustomWrapper(ctx, dataPathArr);
+                    const found = findCustomWrapper(this, dataPathArr);
                     if (found) {
                         // 此项数据使用 CustomWrapper 去更新
-                        const { wrapper, index } = found;
-                        const customWrapperId = `#${wrapper.uid}`;
-                        const customWrapper = ctx.selectComponent(customWrapperId);
-                        if (customWrapper) {
-                            const splitedPath = dataPathArr.slice(index + 1).join('.');
-                            // 合并同一个 customWrapper 的相关更新到一次 setData 中
-                            customWrapperMap.set(customWrapper, Object.assign(Object.assign({}, (customWrapperMap.get(customWrapper) || {})), { [`i.${splitedPath}`]: data[p] }));
-                        }
+                        const { customWrapper, splitedPath } = found;
+                        // 合并同一个 customWrapper 的相关更新到一次 setData 中
+                        customWrapperMap.set(customWrapper, Object.assign(Object.assign({}, (customWrapperMap.get(customWrapper) || {})), { [`i.${splitedPath}`]: data[p] }));
                     }
                     else {
                         // 此项数据使用页面去更新
@@ -4292,11 +4308,11 @@ if (process.env.TARO_ENV && process.env.TARO_ENV !== 'h5') {
     if (!(DATE in window$1)) {
         window$1.Date = Date;
     }
-    window$1.setTimeout = function (cb, delay) {
-        setTimeout(cb, delay);
+    window$1.setTimeout = function (...args) {
+        return setTimeout(...args);
     };
-    window$1.clearTimeout = function (seed) {
-        clearTimeout(seed);
+    window$1.clearTimeout = function (...args) {
+        return clearTimeout(...args);
     };
     document$1.defaultView = window$1;
 }
@@ -4433,11 +4449,8 @@ function stringify(obj) {
     return path === '' ? path : '?' + path;
 }
 function getPath(id, options) {
-    let path = id;
-    if (process.env.TARO_ENV !== 'h5') {
-        path = id + stringify(options);
-    }
-    return path;
+    const idx = id.indexOf('?');
+    return `${idx > -1 ? id.substring(0, idx) : id}${stringify(process.env.TARO_ENV === 'h5' ? { stamp: (options === null || options === void 0 ? void 0 : options.stamp) || '' } : options)}`;
 }
 function getOnReadyEventKey(path) {
     return path + '.' + ON_READY;
@@ -4479,6 +4492,9 @@ function createPageConfig(component, pageName, data, pageConfig) {
             // this.$taroPath 是页面唯一标识，不可变，因此页面参数 options 也不可变
             this.$taroPath = getPath(id, options);
             const $taroPath = this.$taroPath;
+            if (process.env.TARO_ENV === 'h5') {
+                config.path = this.$taroPath;
+            }
             // this.$taroParams 作为暴露给开发者的页面参数对象，可以被随意修改
             if (this.$taroParams == null) {
                 this.$taroParams = Object.assign({}, options);
@@ -4529,13 +4545,13 @@ function createPageConfig(component, pageName, data, pageConfig) {
             raf(() => eventCenter.trigger(getOnReadyEventKey(id)));
             this.onReady.called = true;
         },
-        [ONSHOW]() {
+        [ONSHOW](options = {}) {
             hasLoaded.then(() => {
                 // 设置 Current 的 page 和 router
                 Current.page = this;
                 setCurrentRouter(this);
                 // 触发生命周期
-                safeExecute(this.$taroPath, ON_SHOW);
+                safeExecute(this.$taroPath, ON_SHOW, options);
                 // 通过事件触发子组件的生命周期
                 raf(() => eventCenter.trigger(getOnShowEventKey(id)));
             });
@@ -4584,9 +4600,6 @@ function createPageConfig(component, pageName, data, pageConfig) {
     if (!isUndefined(data)) {
         config.data = data;
     }
-    if (process.env.TARO_ENV === 'h5') {
-        config.path = id;
-    }
     (_c = hooks.modifyPageObject) === null || _c === void 0 ? void 0 : _c.call(hooks, config);
     return config;
 }
@@ -4631,8 +4644,26 @@ function createComponentConfig(component, componentName, data) {
     return config;
 }
 function createRecursiveComponentConfig(componentName) {
-    return {
-        properties: {
+    const isCustomWrapper = componentName === CUSTOM_WRAPPER;
+    const lifeCycles = isCustomWrapper
+        ? {
+            attached() {
+                var _a;
+                const componentId = (_a = this.data.i) === null || _a === void 0 ? void 0 : _a.sid;
+                if (isString(componentId)) {
+                    customWrapperCache.set(componentId, this);
+                }
+            },
+            detached() {
+                var _a;
+                const componentId = (_a = this.data.i) === null || _a === void 0 ? void 0 : _a.sid;
+                if (isString(componentId)) {
+                    customWrapperCache.delete(componentId);
+                }
+            }
+        }
+        : EMPTY_OBJ;
+    return Object.assign({ properties: {
             i: {
                 type: Object,
                 value: {
@@ -4643,15 +4674,12 @@ function createRecursiveComponentConfig(componentName) {
                 type: String,
                 value: ''
             }
-        },
-        options: {
+        }, options: {
             addGlobalClass: true,
-            virtualHost: componentName !== CUSTOM_WRAPPER
-        },
-        methods: {
+            virtualHost: !isCustomWrapper
+        }, methods: {
             eh: eventHandler
-        }
-    };
+        } }, lifeCycles);
 }
 
 function removeLeadingSlash(path) {