@tarojs/plugin-framework-react 3.7.0-alpha.2 → 3.7.0-alpha.20

package/dist/runtime.js

@@ -1,5 +1,5 @@
-import { EMPTY_OBJ, isFunction, isArray, isWebPlatform, hooks, ensure } from '@tarojs/shared';
-import { Current, getPageInstance, injectPageInstance, incrementId, document, safeExecute, eventHandler, addLeadingSlash, removePageInstance } from '@tarojs/runtime';
+import { EMPTY_OBJ, isFunction, isArray, isWebPlatform, hooks, ensure, isUndefined } from '@tarojs/shared';
+import { Current, getPageInstance, injectPageInstance, incrementId, document, getPath, window, CONTEXT_ACTIONS, safeExecute, removePageInstance, ON_READY, requestAnimationFrame, eventCenter, getOnReadyEventKey, ON_SHOW, getOnShowEventKey, ON_HIDE, getOnHideEventKey, eventHandler, addLeadingSlash } from '@tarojs/runtime';
 
 const reactMeta = {
     PageContext: EMPTY_OBJ,
@@ -473,7 +473,9 @@ function createReactApp(App, react, dom, config) {
 const getNativeCompId = incrementId();
 let h;
 let ReactDOM;
-function initNativeComponentEntry(R, ReactDOM) {
+let nativeComponentApp;
+function initNativeComponentEntry(params) {
+    const { R, ReactDOM, cb, isDefaultEntryDom = true } = params;
     class NativeComponentWrapper extends R.Component {
         constructor() {
             super(...arguments);
@@ -488,7 +490,8 @@ function initNativeComponentEntry(R, ReactDOM) {
         }
         render() {
             return (h('root', {
-                ref: this.root
+                ref: this.root,
+                id: this.props.compId
             }, this.props.renderComponent(this.ctx)));
         }
     }
@@ -500,9 +503,15 @@ function initNativeComponentEntry(R, ReactDOM) {
             };
         }
         componentDidMount() {
-            Current.app = this;
+            if (isDefaultEntryDom) {
+                Current.app = this;
+            }
+            else {
+                nativeComponentApp = this;
+            }
+            cb && cb();
         }
-        mount(Component, compId, getCtx) {
+        mount(Component, compId, getCtx, cb) {
             const isReactComponent = isClassComponent(R, Component);
             const inject = (node) => node && injectPageInstance(node, compId);
             const refs = isReactComponent ? { ref: inject } : {
@@ -516,6 +525,7 @@ function initNativeComponentEntry(R, ReactDOM) {
                 compId,
                 element: h(NativeComponentWrapper, {
                     key: compId,
+                    compId,
                     getCtx,
                     renderComponent(ctx) {
                         return h(reactMeta.PageContext.Provider, { value: compId }, h(Component, Object.assign(Object.assign(Object.assign({}, (ctx.data || (ctx.data = {})).props), refs), { $scope: ctx })));
@@ -524,9 +534,9 @@ function initNativeComponentEntry(R, ReactDOM) {
             };
             this.setState({
                 components: [...this.state.components, item]
-            });
+            }, () => cb && cb());
         }
-        unmount(compId) {
+        unmount(compId, cb) {
             const components = this.state.components;
             const index = components.findIndex(item => item.compId === compId);
             const next = [...components.slice(0, index), ...components.slice(index + 1)];
@@ -534,6 +544,7 @@ function initNativeComponentEntry(R, ReactDOM) {
                 components: next
             }, () => {
                 removePageInstance(compId);
+                cb && cb();
             });
         }
         render() {
@@ -542,15 +553,187 @@ function initNativeComponentEntry(R, ReactDOM) {
         }
     }
     setReconciler(ReactDOM);
-    const app = document.getElementById('app');
+    let app = document.getElementById('app');
+    if (!isDefaultEntryDom && !nativeComponentApp) {
+        // create
+        const nativeApp = document.createElement('nativeComponent');
+        // insert
+        app.appendChild(nativeApp);
+        app = nativeApp;
+    }
     ReactDOM.render(h(Entry, {}), app);
 }
+function createNativePageConfig(Component, pageName, data, react, reactdom, pageConfig) {
+    reactMeta.R = react;
+    h = react.createElement;
+    ReactDOM = reactdom;
+    setReconciler(ReactDOM);
+    const [ONLOAD, ONUNLOAD, ONREADY, ONSHOW, ONHIDE, LIFECYCLES, SIDE_EFFECT_LIFECYCLES] = hooks.call('getMiniLifecycleImpl').page;
+    let unmounting = false;
+    let prepareMountList = [];
+    let pageElement = null;
+    let loadResolver;
+    let hasLoaded;
+    const id = pageName !== null && pageName !== void 0 ? pageName : `taro_page_${getNativeCompId()}`;
+    function setCurrentRouter(page) {
+        const router = page.route || page.__route__ || page.$taroPath;
+        Current.router = {
+            params: page.$taroParams,
+            path: addLeadingSlash(router),
+            $taroPath: page.$taroPath,
+            onReady: getOnReadyEventKey(id),
+            onShow: getOnShowEventKey(id),
+            onHide: getOnHideEventKey(id)
+        };
+        if (!isUndefined(page.exitState)) {
+            Current.router.exitState = page.exitState;
+        }
+    }
+    const pageObj = {
+        options: pageConfig,
+        [ONLOAD](options = {}, cb) {
+            hasLoaded = new Promise(resolve => { loadResolver = resolve; });
+            Current.page = this;
+            this.config = pageConfig || {};
+            // this.$taroPath 是页面唯一标识
+            const uniqueOptions = Object.assign({}, options, { $taroTimestamp: Date.now() });
+            const $taroPath = this.$taroPath = getPath(id, uniqueOptions);
+            // this.$taroParams 作为暴露给开发者的页面参数对象，可以被随意修改
+            if (this.$taroParams == null) {
+                this.$taroParams = uniqueOptions;
+            }
+            setCurrentRouter(this);
+            window.trigger(CONTEXT_ACTIONS.INIT, $taroPath);
+            const mountCallback = () => {
+                pageElement = document.getElementById($taroPath);
+                ensure(pageElement !== null, '没有找到页面实例。');
+                safeExecute($taroPath, ONLOAD, this.$taroParams);
+                loadResolver();
+                pageElement.ctx = this;
+                pageElement.performUpdate(true, cb);
+            };
+            const mount = () => {
+                if (!Current.app) {
+                    initNativeComponentEntry({
+                        R: react,
+                        ReactDOM,
+                        cb: () => {
+                            Current.app.mount(Component, $taroPath, () => this, mountCallback);
+                        }
+                    });
+                }
+                else {
+                    Current.app.mount(Component, $taroPath, () => this, mountCallback);
+                }
+            };
+            if (unmounting) {
+                prepareMountList.push(mount);
+            }
+            else {
+                mount();
+            }
+        },
+        [ONUNLOAD]() {
+            const $taroPath = this.$taroPath;
+            // 销毁当前页面的上下文信息
+            window.trigger(CONTEXT_ACTIONS.DESTORY, $taroPath);
+            // 触发onUnload生命周期
+            safeExecute($taroPath, ONUNLOAD);
+            resetCurrent();
+            unmounting = true;
+            Current.app.unmount($taroPath, () => {
+                unmounting = false;
+                removePageInstance($taroPath);
+                if (pageElement) {
+                    pageElement.ctx = null;
+                    pageElement = null;
+                }
+                if (prepareMountList.length) {
+                    prepareMountList.forEach(fn => fn());
+                    prepareMountList = [];
+                }
+            });
+        },
+        [ONREADY]() {
+            hasLoaded.then(() => {
+                // 触发生命周期
+                safeExecute(this.$taroPath, ON_READY);
+                // 通过事件触发子组件的生命周期
+                requestAnimationFrame(() => eventCenter.trigger(getOnReadyEventKey(id)));
+                this.onReady.called = true;
+            });
+        },
+        [ONSHOW](options = {}) {
+            hasLoaded.then(() => {
+                // 设置 Current 的 page 和 router
+                Current.page = this;
+                setCurrentRouter(this);
+                // 恢复上下文信息
+                window.trigger(CONTEXT_ACTIONS.RECOVER, this.$taroPath);
+                // 触发生命周期
+                safeExecute(this.$taroPath, ON_SHOW, options);
+                // 通过事件触发子组件的生命周期
+                requestAnimationFrame(() => eventCenter.trigger(getOnShowEventKey(id)));
+            });
+        },
+        [ONHIDE]() {
+            // 缓存当前页面上下文信息
+            window.trigger(CONTEXT_ACTIONS.RESTORE, this.$taroPath);
+            // 设置 Current 的 page 和 router
+            if (Current.page === this) {
+                Current.page = null;
+                Current.router = null;
+            }
+            // 触发生命周期
+            safeExecute(this.$taroPath, ON_HIDE);
+            // 通过事件触发子组件的生命周期
+            eventCenter.trigger(getOnHideEventKey(id));
+        },
+    };
+    function resetCurrent() {
+        // 小程序插件页面卸载之后返回到宿主页面时，需重置Current页面和路由。否则引发插件组件二次加载异常 fix:#11991
+        Current.page = null;
+        Current.router = null;
+    }
+    LIFECYCLES.forEach((lifecycle) => {
+        pageObj[lifecycle] = function () {
+            return safeExecute(this.$taroPath, lifecycle, ...arguments);
+        };
+    });
+    // onShareAppMessage 和 onShareTimeline 一样，会影响小程序右上方按钮的选项，因此不能默认注册。
+    SIDE_EFFECT_LIFECYCLES.forEach(lifecycle => {
+        var _a;
+        if (Component[lifecycle] ||
+            ((_a = Component.prototype) === null || _a === void 0 ? void 0 : _a[lifecycle]) ||
+            Component[lifecycle.replace(/^on/, 'enable')]) {
+            pageObj[lifecycle] = function (...args) {
+                var _a;
+                const target = (_a = args[0]) === null || _a === void 0 ? void 0 : _a.target;
+                if (target === null || target === void 0 ? void 0 : target.id) {
+                    const id = target.id;
+                    const element = document.getElementById(id);
+                    if (element) {
+                        target.dataset = element.dataset;
+                    }
+                }
+                return safeExecute(this.$taroPath, lifecycle, ...args);
+            };
+        }
+    });
+    pageObj.eh = eventHandler;
+    if (!isUndefined(data)) {
+        pageObj.data = data;
+    }
+    hooks.call('modifyPageObject', pageObj);
+    return pageObj;
+}
 function createNativeComponentConfig(Component, react, reactdom, componentConfig) {
     var _a, _b;
     reactMeta.R = react;
     h = react.createElement;
     ReactDOM = reactdom;
     setReconciler(ReactDOM);
+    const { isNewBlended } = componentConfig;
     const componentObj = {
         options: componentConfig,
         properties: {
@@ -564,22 +747,37 @@ function createNativeComponentConfig(Component, react, reactdom, componentConfig
             }
         },
         created() {
-            if (!Current.app) {
-                initNativeComponentEntry(react, ReactDOM);
+            const app = (isNewBlended ? nativeComponentApp : Current.app);
+            if (!app) {
+                initNativeComponentEntry({
+                    R: react,
+                    ReactDOM,
+                    isDefaultEntryDom: !isNewBlended
+                });
             }
         },
         attached() {
             const compId = this.compId = getNativeCompId();
             setCurrent(compId);
             this.config = componentConfig;
-            Current.app.mount(Component, compId, () => this);
+            const app = (isNewBlended ? nativeComponentApp : Current.app);
+            app.mount(Component, compId, () => this, () => {
+                const instance = getPageInstance(compId);
+                if (instance && instance.node) {
+                    const el = document.getElementById(instance.node.uid);
+                    if (el) {
+                        el.ctx = this;
+                    }
+                }
+            });
         },
         ready() {
             safeExecute(this.compId, 'onReady');
         },
         detached() {
             resetCurrent();
-            Current.app.unmount(this.compId);
+            const app = (isNewBlended ? nativeComponentApp : Current.app);
+            app.unmount(this.compId);
         },
         pageLifetimes: {
             show(options) {
@@ -604,37 +802,6 @@ function createNativeComponentConfig(Component, react, reactdom, componentConfig
         Current.page = null;
         Current.router = null;
     }
-    function setCurrent(compId) {
-        const pages = getCurrentPages();
-        const currentPage = pages[pages.length - 1];
-        if (Current.page === currentPage)
-            return;
-        Current.page = currentPage;
-        const route = currentPage.route || currentPage.__route__;
-        const router = {
-            params: currentPage.options || {},
-            path: addLeadingSlash(route),
-            $taroPath: compId,
-            onReady: '',
-            onHide: '',
-            onShow: ''
-        };
-        Current.router = router;
-        if (!currentPage.options) {
-            // 例如在微信小程序中，页面 options 的设置时机比组件 attached 慢
-            Object.defineProperty(currentPage, 'options', {
-                enumerable: true,
-                configurable: true,
-                get() {
-                    return this._optionsValue;
-                },
-                set(value) {
-                    router.params = value;
-                    this._optionsValue = value;
-                }
-            });
-        }
-    }
     // onShareAppMessage 和 onShareTimeline 一样，会影响小程序右上方按钮的选项，因此不能默认注册。
     if (Component.onShareAppMessage ||
         ((_a = Component.prototype) === null || _a === void 0 ? void 0 : _a.onShareAppMessage) ||
@@ -660,13 +827,46 @@ function createNativeComponentConfig(Component, react, reactdom, componentConfig
     }
     return componentObj;
 }
+function setCurrent(compId) {
+    if (!getCurrentPages || typeof getCurrentPages !== 'function')
+        return;
+    const pages = getCurrentPages();
+    const currentPage = pages[pages.length - 1];
+    if (Current.page === currentPage)
+        return;
+    Current.page = currentPage;
+    const route = currentPage.route || currentPage.__route__;
+    const router = {
+        params: currentPage.options || {},
+        path: addLeadingSlash(route),
+        $taroPath: compId,
+        onReady: '',
+        onHide: '',
+        onShow: ''
+    };
+    Current.router = router;
+    if (!currentPage.options) {
+        // 例如在微信小程序中，页面 options 的设置时机比组件 attached 慢
+        Object.defineProperty(currentPage, 'options', {
+            enumerable: true,
+            configurable: true,
+            get() {
+                return this._optionsValue;
+            },
+            set(value) {
+                router.params = value;
+                this._optionsValue = value;
+            }
+        });
+    }
+}
 
 hooks.tap('initNativeApi', function (taro) {
     for (const hook in taroHooks) {
         taro[hook] = taroHooks[hook];
     }
 });
-if (__TARO_FRAMEWORK__ === 'preact') {
+if (__TARO_FRAMEWORK__ === 'preact' && process.env.TARO_PLATFORM === 'mini') {
     const options = require('preact').options;
     const oldVNodeHook = options.vnode;
     const oldDiffedHook = options.diffed;
@@ -729,5 +929,5 @@ if (__TARO_FRAMEWORK__ === 'preact') {
     // })
 }
 
-export { connectReactPage, createNativeComponentConfig, createReactApp, setReconciler, useAddToFavorites, useDidHide, useDidShow, useError, useLaunch, useLoad, useOptionMenuClick, usePageNotFound, usePageScroll, usePullDownRefresh, usePullIntercept, useReachBottom, useReady, useResize, useRouter, useSaveExitState, useScope, useShareAppMessage, useShareTimeline, useTabItemTap, useTitleClick, useUnhandledRejection, useUnload };
+export { connectReactPage, createNativeComponentConfig, createNativePageConfig, createReactApp, setReconciler, useAddToFavorites, useDidHide, useDidShow, useError, useLaunch, useLoad, useOptionMenuClick, usePageNotFound, usePageScroll, usePullDownRefresh, usePullIntercept, useReachBottom, useReady, useResize, useRouter, useSaveExitState, useScope, useShareAppMessage, useShareTimeline, useTabItemTap, useTitleClick, useUnhandledRejection, useUnload };
 //# sourceMappingURL=runtime.js.map