@tarojs/plugin-framework-react 3.5.0-canary.0 → 3.5.0-theta.1

package/dist/runtime.js

@@ -1,353 +1,114 @@
-import { Current, incrementId, container, SERVICE_IDENTIFIER, document, getPageInstance, injectPageInstance, safeExecute, eventHandler, addLeadingSlash } from '@tarojs/runtime';
-import { isFunction, isArray, EMPTY_OBJ, ensure } from '@tarojs/shared';
+import { EMPTY_OBJ, isFunction, isArray, hooks, ensure } from '@tarojs/shared';
+import { Current, getPageInstance, injectPageInstance, incrementId, document, safeExecute, eventHandler, addLeadingSlash } from '@tarojs/runtime';
 
-const HOOKS_APP_ID = 'taro-app';
-function isClassComponent(R, component) {
-    const prototype = component.prototype;
-    return (isFunction(component.render) ||
-        !!(prototype === null || prototype === void 0 ? void 0 : prototype.isReactComponent) ||
-        prototype instanceof R.Component // compat for some others react-like library
-    );
-}
-function ensureIsArray(item) {
-    if (isArray(item)) {
-        return item;
-    }
-    else {
-        return item ? [item] : [];
-    }
-}
-/**
- * set writable, enumerable to true
- */
-function setDefaultDescriptor(obj) {
-    obj.writable = true;
-    obj.enumerable = true;
-    return obj;
-}
-/**
- * 设置入口的路由参数
- * @param options 小程序传入的参数
- */
-function setRouterParams(options) {
-    Current.router = Object.assign({ params: options === null || options === void 0 ? void 0 : options.query }, options);
-}
+const reactMeta = {
+    PageContext: EMPTY_OBJ,
+    R: EMPTY_OBJ
+};
 
-// 初始值设置为 any 主要是为了过 TS 的校验
-let PageContext = EMPTY_OBJ;
-let R$1 = EMPTY_OBJ;
-let h$1;
-let ReactDOM$1;
-const pageKeyId = incrementId();
-const hooks$1 = container.get(SERVICE_IDENTIFIER.Hooks);
-function setReconciler() {
-    var _a;
-    hooks$1.getLifecycle = function (instance, lifecycle) {
-        lifecycle = lifecycle.replace(/^on(Show|Hide)$/, 'componentDid$1');
-        return instance[lifecycle];
-    };
-    (_a = hooks$1.modifyMpEventImpls) === null || _a === void 0 ? void 0 : _a.push(function (event) {
-        event.type = event.type.replace(/-/g, '');
-    });
-    hooks$1.batchedEventUpdates = function (cb) {
-        ReactDOM$1.unstable_batchedUpdates(cb);
-    };
-    hooks$1.mergePageInstance = function (prev, next) {
-        if (!prev || !next)
-            return;
-        // 子组件使用 lifecycle hooks 注册了生命周期后，会存在 prev，里面是注册的生命周期回调。
-        // prev 使用 Object.create(null) 创建，H5 的 fast-refresh 可能也会导致存在 prev，要排除这些意外产生的 prev
-        if ('constructor' in prev)
-            return;
-        Object.keys(prev).forEach(item => {
-            const prevList = prev[item];
-            const nextList = ensureIsArray(next[item]);
-            next[item] = nextList.concat(prevList);
-        });
-    };
-    if (process.env.TARO_ENV === 'h5') {
-        hooks$1.createPullDownComponent = (el, _, R, customWrapper) => {
-            const isReactComponent = isClassComponent(R, el);
-            return R.forwardRef((props, ref) => {
-                const newProps = Object.assign({}, props);
-                const refs = isReactComponent ? { ref: ref } : {
-                    forwardedRef: ref,
-                    // 兼容 react-redux 7.20.1+
-                    reactReduxForwardedRef: ref
-                };
-                return h$1(customWrapper || 'taro-pull-to-refresh', null, h$1(el, Object.assign(Object.assign({}, newProps), refs)));
-            });
-        };
-        hooks$1.getDOMNode = inst => {
-            return ReactDOM$1.findDOMNode(inst);
-        };
-    }
-}
-function connectReactPage(R, id) {
-    return (Page) => {
-        // eslint-disable-next-line dot-notation
-        const isReactComponent = isClassComponent(R, Page);
-        const inject = (node) => node && injectPageInstance(node, id);
-        const refs = isReactComponent ? { ref: inject } : {
-            forwardedRef: inject,
-            // 兼容 react-redux 7.20.1+
-            reactReduxForwardedRef: inject
-        };
-        if (PageContext === EMPTY_OBJ) {
-            PageContext = R.createContext('');
-        }
-        return class PageWrapper extends R.Component {
-            constructor() {
-                super(...arguments);
-                this.state = {
-                    hasError: false
-                };
-            }
-            static getDerivedStateFromError(error) {
-                process.env.NODE_ENV !== 'production' && console.warn(error);
-                return { hasError: true };
-            }
-            // React 16 uncaught error 会导致整个应用 crash，
-            // 目前把错误缩小到页面
-            componentDidCatch(error, info) {
-                if (process.env.NODE_ENV !== 'production') {
-                    console.warn(error);
-                    console.error(info.componentStack);
-                }
-            }
-            render() {
-                const children = this.state.hasError
-                    ? []
-                    : h$1(PageContext.Provider, { value: id }, h$1(Page, Object.assign(Object.assign({}, this.props), refs)));
-                if (process.env.TARO_ENV === 'h5') {
-                    return h$1('div', { id, className: 'taro_page' }, children);
-                }
-                else {
-                    return h$1('root', { id }, children);
-                }
-            }
-        };
-    };
-}
-/**
- * 桥接小程序 App 构造器和 React 渲染流程
- * @param App 用户编写的入口组件
- * @param react 框架
- * @param reactdom 框架渲染器
- * @param config 入口组件配置 app.config.js 的内容
- * @returns 传递给 App 构造器的对象 obj ：App(obj)
- */
-function createReactApp(App, react, reactdom, config) {
-    if (process.env.NODE_ENV !== 'production') {
-        ensure(!!reactdom, '构建 React/Nerv 项目请把 process.env.FRAMEWORK 设置为 \'react\'/\'nerv\' ');
-    }
-    R$1 = react;
-    h$1 = react.createElement;
-    ReactDOM$1 = reactdom;
-    const appInstanceRef = react.createRef();
-    const isReactComponent = isClassComponent(R$1, App);
-    let appWrapper;
-    setReconciler();
-    function getAppInstance() {
-        return appInstanceRef.current;
-    }
-    class AppWrapper extends R$1.Component {
-        constructor() {
-            super(...arguments);
-            // run createElement() inside the render function to make sure that owner is right
-            this.pages = [];
-            this.elements = [];
-        }
-        mount(pageComponent, id, cb) {
-            const pageWrapper = connectReactPage(R$1, id)(pageComponent);
-            const key = id + pageKeyId();
-            const page = () => h$1(pageWrapper, { key, tid: id });
-            this.pages.push(page);
-            this.forceUpdate(cb);
-        }
-        unmount(id, cb) {
-            const elements = this.elements;
-            const idx = elements.findIndex(item => item.props.tid === id);
-            elements.splice(idx, 1);
-            this.forceUpdate(cb);
-        }
-        render() {
-            const { pages, elements } = this;
-            while (pages.length > 0) {
-                const page = pages.pop();
-                elements.push(page());
-            }
-            let props = null;
-            if (isReactComponent) {
-                props = { ref: appInstanceRef };
-            }
-            return h$1(App, props, process.env.TARO_ENV === 'h5' ? h$1('div', null, elements.slice()) : elements.slice());
-        }
-    }
-    if (process.env.TARO_ENV !== 'h5') {
-        // eslint-disable-next-line react/no-render-return-value
-        appWrapper = ReactDOM$1.render(h$1(AppWrapper), document.getElementById('app'));
-    }
-    const [ONLAUNCH, ONSHOW, ONHIDE] = hooks$1.getMiniLifecycleImpl().app;
-    const appObj = Object.create({
-        render(cb) {
-            appWrapper.forceUpdate(cb);
-        },
-        mount(component, id, cb) {
-            appWrapper.mount(component, id, cb);
-        },
-        unmount(id, cb) {
-            appWrapper.unmount(id, cb);
-        }
-    }, {
-        config: setDefaultDescriptor({
-            configurable: true,
-            value: config
-        }),
-        [ONLAUNCH]: setDefaultDescriptor({
-            value(options) {
-                var _a;
-                setRouterParams(options);
-                if (process.env.TARO_ENV === 'h5') {
-                    // 由于 H5 路由初始化的时候会清除 app 下的 dom 元素，所以需要在路由初始化后执行 render
-                    // eslint-disable-next-line react/no-render-return-value
-                    appWrapper = ReactDOM$1.render(h$1(AppWrapper), document.getElementById('app'));
-                }
-                // 用户编写的入口组件实例
-                const app = getAppInstance();
-                this.$app = app;
-                if (app) {
-                    // 把 App Class 上挂载的额外属性同步到全局 app 对象中
-                    if (app.taroGlobalData) {
-                        const globalData = app.taroGlobalData;
-                        const keys = Object.keys(globalData);
-                        const descriptors = Object.getOwnPropertyDescriptors(globalData);
-                        keys.forEach(key => {
-                            Object.defineProperty(this, key, {
-                                configurable: true,
-                                enumerable: true,
-                                get() {
-                                    return globalData[key];
-                                },
-                                set(value) {
-                                    globalData[key] = value;
-                                }
-                            });
-                        });
-                        Object.defineProperties(this, descriptors);
-                    }
-                    (_a = app.onLaunch) === null || _a === void 0 ? void 0 : _a.call(app, options);
-                }
-            }
-        }),
-        [ONSHOW]: setDefaultDescriptor({
-            value(options) {
-                var _a;
-                setRouterParams(options);
-                /**
-                 * trigger lifecycle
-                 */
-                const app = getAppInstance();
-                // class component, componentDidShow
-                (_a = app === null || app === void 0 ? void 0 : app.componentDidShow) === null || _a === void 0 ? void 0 : _a.call(app, options);
-                // functional component, useDidShow
-                triggerAppHook('onShow');
-            }
-        }),
-        [ONHIDE]: setDefaultDescriptor({
-            value(options) {
-                var _a;
-                /**
-                 * trigger lifecycle
-                 */
-                const app = getAppInstance();
-                // class component, componentDidHide
-                (_a = app === null || app === void 0 ? void 0 : app.componentDidHide) === null || _a === void 0 ? void 0 : _a.call(app, options);
-                // functional component, useDidHide
-                triggerAppHook('onHide');
-            }
-        }),
-        onPageNotFound: setDefaultDescriptor({
-            value(res) {
-                var _a;
-                const app = getAppInstance();
-                (_a = app === null || app === void 0 ? void 0 : app.onPageNotFound) === null || _a === void 0 ? void 0 : _a.call(app, res);
-            }
-        })
-    });
-    function triggerAppHook(lifecycle) {
-        const instance = getPageInstance(HOOKS_APP_ID);
-        if (instance) {
-            const app = getAppInstance();
-            const func = hooks$1.getLifecycle(instance, lifecycle);
-            if (Array.isArray(func)) {
-                func.forEach(cb => cb.apply(app));
-            }
-        }
-    }
-    Current.app = appObj;
-    return appObj;
+const HOOKS_APP_ID = 'taro-app';
+function isClassComponent(R, component) {
+    var _a;
+    const prototype = component.prototype;
+    // For React Redux
+    if ((_a = component.displayName) === null || _a === void 0 ? void 0 : _a.includes('Connect'))
+        return false;
+    return (isFunction(component.render) ||
+        !!(prototype === null || prototype === void 0 ? void 0 : prototype.isReactComponent) ||
+        prototype instanceof R.Component // compat for some others react-like library
+    );
+}
+function ensureIsArray(item) {
+    if (isArray(item)) {
+        return item;
+    }
+    else {
+        return item ? [item] : [];
+    }
+}
+/**
+ * set writable, enumerable to true
+ */
+function setDefaultDescriptor(obj) {
+    obj.writable = true;
+    obj.enumerable = true;
+    return obj;
+}
+/**
+ * 设置入口的路由参数
+ * @param options 小程序传入的参数
+ */
+function setRouterParams(options) {
+    Current.router = Object.assign({ params: options === null || options === void 0 ? void 0 : options.query }, options);
 }
 
-const taroHooks = (lifecycle) => {
-    return (fn) => {
-        const id = R$1.useContext(PageContext) || HOOKS_APP_ID;
-        // hold fn ref and keep up to date
-        const fnRef = R$1.useRef(fn);
-        if (fnRef.current !== fn)
-            fnRef.current = fn;
-        R$1.useLayoutEffect(() => {
-            let inst = getPageInstance(id);
-            let first = false;
-            if (inst == null) {
-                first = true;
-                inst = Object.create(null);
-            }
-            inst = inst;
-            // callback is immutable but inner function is up to date
-            const callback = (...args) => fnRef.current(...args);
-            if (isFunction(inst[lifecycle])) {
-                inst[lifecycle] = [inst[lifecycle], callback];
-            }
-            else {
-                inst[lifecycle] = [
-                    ...(inst[lifecycle] || []),
-                    callback
-                ];
-            }
-            if (first) {
-                injectPageInstance(inst, id);
-            }
-            return () => {
-                const inst = getPageInstance(id);
-                const list = inst[lifecycle];
-                if (list === callback) {
-                    inst[lifecycle] = undefined;
-                }
-                else if (isArray(list)) {
-                    inst[lifecycle] = list.filter(item => item !== callback);
-                }
-            };
-        }, []);
-    };
-};
-const useDidShow = taroHooks('componentDidShow');
-const useDidHide = taroHooks('componentDidHide');
-const usePullDownRefresh = taroHooks('onPullDownRefresh');
-const useReachBottom = taroHooks('onReachBottom');
-const usePageScroll = taroHooks('onPageScroll');
-const useResize = taroHooks('onResize');
-const useShareAppMessage = taroHooks('onShareAppMessage');
-const useTabItemTap = taroHooks('onTabItemTap');
-const useTitleClick = taroHooks('onTitleClick');
-const useOptionMenuClick = taroHooks('onOptionMenuClick');
-const usePullIntercept = taroHooks('onPullIntercept');
-const useShareTimeline = taroHooks('onShareTimeline');
-const useAddToFavorites = taroHooks('onAddToFavorites');
-const useReady = taroHooks('onReady');
-const useRouter = (dynamic = false) => {
-    return dynamic ? Current.router : R$1.useMemo(() => Current.router, []);
-};
+const taroHooks = (lifecycle) => {
+    return (fn) => {
+        const { R: React, PageContext } = reactMeta;
+        const id = React.useContext(PageContext) || HOOKS_APP_ID;
+        // hold fn ref and keep up to date
+        const fnRef = React.useRef(fn);
+        if (fnRef.current !== fn)
+            fnRef.current = fn;
+        React.useLayoutEffect(() => {
+            let inst = getPageInstance(id);
+            let first = false;
+            if (inst == null) {
+                first = true;
+                inst = Object.create(null);
+            }
+            inst = inst;
+            // callback is immutable but inner function is up to date
+            const callback = (...args) => fnRef.current(...args);
+            if (isFunction(inst[lifecycle])) {
+                inst[lifecycle] = [inst[lifecycle], callback];
+            }
+            else {
+                inst[lifecycle] = [
+                    ...(inst[lifecycle] || []),
+                    callback
+                ];
+            }
+            if (first) {
+                injectPageInstance(inst, id);
+            }
+            return () => {
+                const inst = getPageInstance(id);
+                const list = inst[lifecycle];
+                if (list === callback) {
+                    inst[lifecycle] = undefined;
+                }
+                else if (isArray(list)) {
+                    inst[lifecycle] = list.filter(item => item !== callback);
+                }
+            };
+        }, []);
+    };
+};
+const useDidShow = taroHooks('componentDidShow');
+const useDidHide = taroHooks('componentDidHide');
+const usePullDownRefresh = taroHooks('onPullDownRefresh');
+const useReachBottom = taroHooks('onReachBottom');
+const usePageScroll = taroHooks('onPageScroll');
+const useResize = taroHooks('onResize');
+const useShareAppMessage = taroHooks('onShareAppMessage');
+const useTabItemTap = taroHooks('onTabItemTap');
+const useTitleClick = taroHooks('onTitleClick');
+const useOptionMenuClick = taroHooks('onOptionMenuClick');
+const usePullIntercept = taroHooks('onPullIntercept');
+const useShareTimeline = taroHooks('onShareTimeline');
+const useAddToFavorites = taroHooks('onAddToFavorites');
+const useSaveExitState = taroHooks('onSaveExitState');
+const useReady = taroHooks('onReady');
+const useLaunch = taroHooks('onLaunch');
+const useLoad = taroHooks('onLoad');
+const useUnload = taroHooks('onUnload');
+const useError = taroHooks('onError');
+const usePageNotFound = taroHooks('onPageNotFound');
+const useRouter = (dynamic = false) => {
+    const React = reactMeta.R;
+    return dynamic ? Current.router : React.useMemo(() => Current.router, []);
+};
 const useScope = () => undefined;
 
 var taroHooks$1 = /*#__PURE__*/Object.freeze({
@@ -365,177 +126,538 @@ var taroHooks$1 = /*#__PURE__*/Object.freeze({
   usePullIntercept: usePullIntercept,
   useShareTimeline: useShareTimeline,
   useAddToFavorites: useAddToFavorites,
+  useSaveExitState: useSaveExitState,
   useReady: useReady,
+  useLaunch: useLaunch,
+  useLoad: useLoad,
+  useUnload: useUnload,
+  useError: useError,
+  usePageNotFound: usePageNotFound,
   useRouter: useRouter,
   useScope: useScope
 });
 
-const getNativeCompId = incrementId();
-let R;
-let h;
-let ReactDOM;
-function initNativeComponentEntry(R, ReactDOM) {
-    class NativeComponentWrapper extends R.Component {
-        constructor() {
-            super(...arguments);
-            this.root = R.createRef();
-            this.ctx = this.props.getCtx();
-        }
-        componentDidMount() {
-            this.ctx.component = this;
-            const rootElement = this.root.current;
-            rootElement.ctx = this.ctx;
-            rootElement.performUpdate(true);
-        }
-        render() {
-            return (h('root', {
-                ref: this.root
-            }, this.props.renderComponent(this.ctx)));
-        }
-    }
-    class Entry extends R.Component {
-        constructor() {
-            super(...arguments);
-            this.state = {
-                components: []
-            };
-        }
-        componentDidMount() {
-            Current.app = this;
-        }
-        mount(Component, compId, getCtx) {
-            const isReactComponent = isClassComponent(R, Component);
-            const inject = (node) => node && injectPageInstance(node, compId);
-            const refs = isReactComponent ? { ref: inject } : {
-                forwardedRef: inject,
-                reactReduxForwardedRef: inject
-            };
-            const item = {
-                compId,
-                element: h(NativeComponentWrapper, {
-                    key: compId,
-                    getCtx,
-                    renderComponent(ctx) {
-                        return h(Component, Object.assign(Object.assign({}, (ctx.data || (ctx.data = {})).props), refs));
-                    }
-                })
-            };
-            this.setState({
-                components: [...this.state.components, item]
-            });
-        }
-        unmount(compId) {
-            const components = this.state.components;
-            const index = components.findIndex(item => item.compId === compId);
-            const next = [...components.slice(0, index), ...components.slice(index + 1)];
-            this.setState({
-                components: next
-            });
-        }
-        render() {
-            const components = this.state.components;
-            return (components.map(({ element }) => element));
-        }
-    }
-    setReconciler();
-    const app = document.getElementById('app');
-    ReactDOM.render(h(Entry, {}), app);
-}
-function createNativeComponentConfig(Component, react, reactdom, componentConfig) {
-    R = react;
-    h = react.createElement;
-    ReactDOM = reactdom;
-    setReconciler();
-    const componentObj = {
-        properties: {
-            props: {
-                type: null,
-                value: null,
-                observer(_newVal, oldVal) {
-                    oldVal && this.component.forceUpdate();
-                }
-            }
-        },
-        created() {
-            if (!Current.app) {
-                initNativeComponentEntry(R, ReactDOM);
-            }
-        },
-        attached() {
-            setCurrent();
-            this.compId = getNativeCompId();
-            this.config = componentConfig;
-            Current.app.mount(Component, this.compId, () => this);
-        },
-        ready() {
-            safeExecute(this.compId, 'onReady');
-        },
-        detached() {
-            Current.app.unmount(this.compId);
-        },
-        pageLifetimes: {
-            show() {
-                safeExecute(this.compId, 'onShow');
-            },
-            hide() {
-                safeExecute(this.compId, 'onHide');
-            }
-        },
-        methods: {
-            eh: eventHandler
-        }
-    };
-    function setCurrent() {
-        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),
-            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;
-                }
-            });
-        }
-    }
-    return componentObj;
+let h$1;
+let ReactDOM$1;
+let Fragment;
+const pageKeyId = incrementId();
+function setReconciler(ReactDOM) {
+    hooks.tap('getLifecycle', function (instance, lifecycle) {
+        lifecycle = lifecycle.replace(/^on(Show|Hide)$/, 'componentDid$1');
+        return instance[lifecycle];
+    });
+    hooks.tap('modifyMpEvent', function (event) {
+        event.type = event.type.replace(/-/g, '');
+    });
+    hooks.tap('batchedEventUpdates', function (cb) {
+        ReactDOM.unstable_batchedUpdates(cb);
+    });
+    hooks.tap('mergePageInstance', function (prev, next) {
+        if (!prev || !next)
+            return;
+        // 子组件使用 lifecycle hooks 注册了生命周期后，会存在 prev，里面是注册的生命周期回调。
+        // prev 使用 Object.create(null) 创建，H5 的 fast-refresh 可能也会导致存在 prev，要排除这些意外产生的 prev
+        if ('constructor' in prev)
+            return;
+        Object.keys(prev).forEach(item => {
+            const prevList = prev[item];
+            const nextList = ensureIsArray(next[item]);
+            next[item] = nextList.concat(prevList);
+        });
+    });
+    if (process.env.TARO_ENV === 'h5') {
+        hooks.tap('createPullDownComponent', (el, _, R, customWrapper) => {
+            const isReactComponent = isClassComponent(R, el);
+            return R.forwardRef((props, ref) => {
+                const newProps = Object.assign({}, props);
+                const refs = isReactComponent ? { ref: ref } : {
+                    forwardedRef: ref,
+                    // 兼容 react-redux 7.20.1+
+                    reactReduxForwardedRef: ref
+                };
+                return h$1(customWrapper || 'taro-pull-to-refresh', null, h$1(el, Object.assign(Object.assign({}, newProps), refs)));
+            });
+        });
+        hooks.tap('getDOMNode', inst => {
+            return ReactDOM.findDOMNode(inst);
+        });
+    }
+}
+function connectReactPage(R, id) {
+    return (Page) => {
+        // eslint-disable-next-line dot-notation
+        const isReactComponent = isClassComponent(R, Page);
+        const inject = (node) => node && injectPageInstance(node, id);
+        const refs = isReactComponent ? { ref: inject } : {
+            forwardedRef: inject,
+            // 兼容 react-redux 7.20.1+
+            reactReduxForwardedRef: inject
+        };
+        if (reactMeta.PageContext === EMPTY_OBJ) {
+            reactMeta.PageContext = R.createContext('');
+        }
+        return class PageWrapper extends R.Component {
+            constructor() {
+                super(...arguments);
+                this.state = {
+                    hasError: false
+                };
+            }
+            static getDerivedStateFromError(error) {
+                var _a, _b;
+                (_b = (_a = Current.app) === null || _a === void 0 ? void 0 : _a.onError) === null || _b === void 0 ? void 0 : _b.call(_a, error.message + error.stack);
+                return { hasError: true };
+            }
+            // React 16 uncaught error 会导致整个应用 crash，
+            // 目前把错误缩小到页面
+            componentDidCatch(error, info) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.warn(error);
+                    console.error(info.componentStack);
+                }
+            }
+            render() {
+                const children = this.state.hasError
+                    ? []
+                    : h$1(reactMeta.PageContext.Provider, { value: id }, h$1(Page, Object.assign(Object.assign({}, this.props), refs)));
+                if (process.env.TARO_ENV === 'h5') {
+                    return h$1('div', { id, className: 'taro_page' }, children);
+                }
+                else {
+                    return h$1('root', { id }, children);
+                }
+            }
+        };
+    };
+}
+/**
+ * 桥接小程序 App 构造器和 React 渲染流程
+ * @param App 用户编写的入口组件
+ * @param react 框架
+ * @param dom 框架渲染器
+ * @param config 入口组件配置 app.config.js 的内容
+ * @returns 传递给 App 构造器的对象 obj ：App(obj)
+ */
+function createReactApp(App, react, dom, config) {
+    if (process.env.NODE_ENV !== 'production') {
+        ensure(!!dom, '构建 React/Nerv 项目请把 process.env.FRAMEWORK 设置为 \'react\'/\'nerv\' ');
+    }
+    reactMeta.R = react;
+    h$1 = react.createElement;
+    ReactDOM$1 = dom;
+    Fragment = react.Fragment;
+    const appInstanceRef = react.createRef();
+    const isReactComponent = isClassComponent(react, App);
+    let appWrapper;
+    setReconciler(ReactDOM$1);
+    function getAppInstance() {
+        return appInstanceRef.current;
+    }
+    function renderReactRoot() {
+        var _a, _b;
+        const reactMode = __TARO_FRAMEWORK_REACT_MODE__;
+        let appId = 'app';
+        if (process.env.TARO_ENV === 'h5') {
+            appId = (config === null || config === void 0 ? void 0 : config.appId) || appId;
+        }
+        else {
+            ReactDOM$1.version = react.version;
+        }
+        const container = document.getElementById(appId);
+        const version = Number((ReactDOM$1.version || '').split('.')[0]);
+        if (version >= 18 && reactMode === 'concurrent') {
+            const root = ReactDOM$1.createRoot(container);
+            (_a = root.render) === null || _a === void 0 ? void 0 : _a.call(root, h$1(AppWrapper));
+        }
+        else {
+            (_b = ReactDOM$1.render) === null || _b === void 0 ? void 0 : _b.call(ReactDOM$1, h$1(AppWrapper), container);
+        }
+    }
+    class AppWrapper extends react.Component {
+        constructor(props) {
+            super(props);
+            // run createElement() inside the render function to make sure that owner is right
+            this.pages = [];
+            this.elements = [];
+            appWrapper = this;
+        }
+        mount(pageComponent, id, cb) {
+            const pageWrapper = connectReactPage(react, id)(pageComponent);
+            const key = id + pageKeyId();
+            const page = () => h$1(pageWrapper, { key, tid: id });
+            this.pages.push(page);
+            this.forceUpdate(cb);
+        }
+        unmount(id, cb) {
+            const elements = this.elements;
+            const idx = elements.findIndex(item => item.props.tid === id);
+            elements.splice(idx, 1);
+            this.forceUpdate(cb);
+        }
+        render() {
+            const { pages, elements } = this;
+            while (pages.length > 0) {
+                const page = pages.pop();
+                elements.push(page());
+            }
+            let props = null;
+            if (isReactComponent) {
+                props = { ref: appInstanceRef };
+            }
+            return h$1(App, props, process.env.TARO_ENV === 'h5' ? h$1(Fragment !== null && Fragment !== void 0 ? Fragment : 'div', null, elements.slice()) : elements.slice());
+        }
+    }
+    if (process.env.TARO_ENV !== 'h5') {
+        renderReactRoot();
+    }
+    const [ONLAUNCH, ONSHOW, ONHIDE] = hooks.call('getMiniLifecycleImpl').app;
+    const appObj = Object.create({
+        render(cb) {
+            appWrapper.forceUpdate(cb);
+        },
+        mount(component, id, cb) {
+            appWrapper.mount(component, id, cb);
+        },
+        unmount(id, cb) {
+            appWrapper.unmount(id, cb);
+        }
+    }, {
+        config: setDefaultDescriptor({
+            configurable: true,
+            value: config
+        }),
+        [ONLAUNCH]: setDefaultDescriptor({
+            value(options) {
+                var _a;
+                setRouterParams(options);
+                if (process.env.TARO_ENV === 'h5') {
+                    // 由于 H5 路由初始化的时候会清除 app 下的 dom 元素，所以需要在路由初始化后执行 render
+                    renderReactRoot();
+                }
+                // 用户编写的入口组件实例
+                const app = getAppInstance();
+                this.$app = app;
+                if (app) {
+                    // 把 App Class 上挂载的额外属性同步到全局 app 对象中
+                    if (app.taroGlobalData) {
+                        const globalData = app.taroGlobalData;
+                        const keys = Object.keys(globalData);
+                        const descriptors = Object.getOwnPropertyDescriptors(globalData);
+                        keys.forEach(key => {
+                            Object.defineProperty(this, key, {
+                                configurable: true,
+                                enumerable: true,
+                                get() {
+                                    return globalData[key];
+                                },
+                                set(value) {
+                                    globalData[key] = value;
+                                }
+                            });
+                        });
+                        Object.defineProperties(this, descriptors);
+                    }
+                    (_a = app.onLaunch) === null || _a === void 0 ? void 0 : _a.call(app, options);
+                }
+                triggerAppHook('onLaunch', options);
+            }
+        }),
+        [ONSHOW]: setDefaultDescriptor({
+            value(options) {
+                var _a;
+                setRouterParams(options);
+                /**
+                 * trigger lifecycle
+                 */
+                const app = getAppInstance();
+                // class component, componentDidShow
+                (_a = app === null || app === void 0 ? void 0 : app.componentDidShow) === null || _a === void 0 ? void 0 : _a.call(app, options);
+                // functional component, useDidShow
+                triggerAppHook('onShow', options);
+            }
+        }),
+        [ONHIDE]: setDefaultDescriptor({
+            value() {
+                var _a;
+                /**
+                 * trigger lifecycle
+                 */
+                const app = getAppInstance();
+                // class component, componentDidHide
+                (_a = app === null || app === void 0 ? void 0 : app.componentDidHide) === null || _a === void 0 ? void 0 : _a.call(app);
+                // functional component, useDidHide
+                triggerAppHook('onHide');
+            }
+        }),
+        onError: setDefaultDescriptor({
+            value(error) {
+                var _a;
+                const app = getAppInstance();
+                (_a = app === null || app === void 0 ? void 0 : app.onError) === null || _a === void 0 ? void 0 : _a.call(app, error);
+                triggerAppHook('onError', error);
+                if (process.env.NODE_ENV !== 'production' && error.includes('Minified React error')) {
+                    console.warn('React 出现报错，请打开编译配置 mini.debugReact 查看报错详情：https://docs.taro.zone/docs/config-detail#minidebugreact');
+                }
+            }
+        }),
+        onPageNotFound: setDefaultDescriptor({
+            value(res) {
+                var _a;
+                const app = getAppInstance();
+                (_a = app === null || app === void 0 ? void 0 : app.onPageNotFound) === null || _a === void 0 ? void 0 : _a.call(app, res);
+                triggerAppHook('onPageNotFound', res);
+            }
+        })
+    });
+    function triggerAppHook(lifecycle, ...option) {
+        const instance = getPageInstance(HOOKS_APP_ID);
+        if (instance) {
+            const app = getAppInstance();
+            const func = hooks.call('getLifecycle', instance, lifecycle);
+            if (Array.isArray(func)) {
+                func.forEach(cb => cb.apply(app, option));
+            }
+        }
+    }
+    Current.app = appObj;
+    return appObj;
+}
+
+const getNativeCompId = incrementId();
+let h;
+let ReactDOM;
+function initNativeComponentEntry(R, ReactDOM) {
+    class NativeComponentWrapper extends R.Component {
+        constructor() {
+            super(...arguments);
+            this.root = R.createRef();
+            this.ctx = this.props.getCtx();
+        }
+        componentDidMount() {
+            this.ctx.component = this;
+            const rootElement = this.root.current;
+            rootElement.ctx = this.ctx;
+            rootElement.performUpdate(true);
+        }
+        render() {
+            return (h('root', {
+                ref: this.root
+            }, this.props.renderComponent(this.ctx)));
+        }
+    }
+    class Entry extends R.Component {
+        constructor() {
+            super(...arguments);
+            this.state = {
+                components: []
+            };
+        }
+        componentDidMount() {
+            Current.app = this;
+        }
+        mount(Component, compId, getCtx) {
+            const isReactComponent = isClassComponent(R, Component);
+            const inject = (node) => node && injectPageInstance(node, compId);
+            const refs = isReactComponent ? { ref: inject } : {
+                forwardedRef: inject,
+                reactReduxForwardedRef: inject
+            };
+            if (reactMeta.PageContext === EMPTY_OBJ) {
+                reactMeta.PageContext = R.createContext('');
+            }
+            const item = {
+                compId,
+                element: h(NativeComponentWrapper, {
+                    key: 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 })));
+                    }
+                })
+            };
+            this.setState({
+                components: [...this.state.components, item]
+            });
+        }
+        unmount(compId) {
+            const components = this.state.components;
+            const index = components.findIndex(item => item.compId === compId);
+            const next = [...components.slice(0, index), ...components.slice(index + 1)];
+            this.setState({
+                components: next
+            });
+        }
+        render() {
+            const components = this.state.components;
+            return (components.map(({ element }) => element));
+        }
+    }
+    setReconciler(ReactDOM);
+    const app = document.getElementById('app');
+    ReactDOM.render(h(Entry, {}), app);
+}
+function createNativeComponentConfig(Component, react, reactdom, componentConfig) {
+    var _a, _b;
+    reactMeta.R = react;
+    h = react.createElement;
+    ReactDOM = reactdom;
+    setReconciler(ReactDOM);
+    const componentObj = {
+        options: componentConfig,
+        properties: {
+            props: {
+                type: null,
+                value: null,
+                observer(_newVal, oldVal) {
+                    oldVal && this.component.forceUpdate();
+                }
+            }
+        },
+        created() {
+            if (!Current.app) {
+                initNativeComponentEntry(react, ReactDOM);
+            }
+        },
+        attached() {
+            const compId = this.compId = getNativeCompId();
+            setCurrent(compId);
+            this.config = componentConfig;
+            Current.app.mount(Component, compId, () => this);
+        },
+        ready() {
+            safeExecute(this.compId, 'onReady');
+        },
+        detached() {
+            Current.app.unmount(this.compId);
+        },
+        pageLifetimes: {
+            show(options) {
+                safeExecute(this.compId, 'onShow', options);
+            },
+            hide() {
+                safeExecute(this.compId, 'onHide');
+            }
+        },
+        methods: {
+            eh: eventHandler
+        }
+    };
+    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) ||
+        Component.enableShareAppMessage) {
+        componentObj.methods.onShareAppMessage = function (options) {
+            const target = options === null || options === void 0 ? void 0 : options.target;
+            if (target) {
+                const id = target.id;
+                const element = document.getElementById(id);
+                if (element) {
+                    target.dataset = element.dataset;
+                }
+            }
+            return safeExecute(this.compId, 'onShareAppMessage', options);
+        };
+    }
+    if (Component.onShareTimeline ||
+        ((_b = Component.prototype) === null || _b === void 0 ? void 0 : _b.onShareTimeline) ||
+        Component.enableShareTimeline) {
+        componentObj.methods.onShareTimeline = function () {
+            return safeExecute(this.compId, 'onShareTimeline');
+        };
+    }
+    return componentObj;
 }
 
-var _a, _b;
-const hooks = container.get(SERVICE_IDENTIFIER.Hooks);
-hooks.initNativeApiImpls || (hooks.initNativeApiImpls = []);
-hooks.initNativeApiImpls.push(function (taro) {
-    for (const hook in taroHooks$1) {
-        taro[hook] = taroHooks$1[hook];
-    }
-});
-if (__TARO_FRAMEWORK__ === 'preact') {
-    (_a = hooks.modifyMpEventImpls) === null || _a === void 0 ? void 0 : _a.push(e => {
-        if (e.type === 'tap')
-            e.type = 'click';
-    });
-    (_b = hooks.modifyDispatchEventImpls) === null || _b === void 0 ? void 0 : _b.push(e => {
-        const type = e.type;
-        e.type = type[0].toUpperCase() + type.slice(1);
-    });
+hooks.tap('initNativeApi', function (taro) {
+    for (const hook in taroHooks$1) {
+        taro[hook] = taroHooks$1[hook];
+    }
+});
+if (__TARO_FRAMEWORK__ === 'preact') {
+    const options = require('preact').options;
+    const oldVNodeHook = options.vnode;
+    const oldDiffedHook = options.diffed;
+    options.vnode = vnode => {
+        const { type, props } = vnode;
+        let normalizedProps = props;
+        // only normalize props on Element nodes
+        if (typeof type === 'string') {
+            normalizedProps = {};
+            for (let i in props) {
+                const value = props[i];
+                if (/^on/.test(i)) {
+                    i = i.toLowerCase();
+                }
+                normalizedProps[i] = value;
+            }
+            vnode.props = normalizedProps;
+        }
+        if (oldVNodeHook)
+            oldVNodeHook(vnode);
+    };
+    options.diffed = function (newVNode) {
+        const dom = newVNode._dom;
+        const newVNodeProps = newVNode.props;
+        if (dom) { /** ElementNode */
+            for (const propName in newVNodeProps) {
+                const propValue = newVNodeProps[propName];
+                if (propValue === false && dom.props[propName] === undefined) {
+                    // 值为 false 的属性在 Preact 的 diff 中被 removeAttribute 了，这里手动 setAttribute
+                    // fix https://github.com/NervJS/taro/issues/11197
+                    dom.setAttribute(propName, propValue);
+                }
+            }
+        }
+        if (oldDiffedHook)
+            oldDiffedHook(newVNode);
+    };
+    hooks.tap('modifyMpEvent', e => {
+        const type = e.type;
+        if (type === 'tap') {
+            e.type = 'click';
+        }
+        else if (type === 'focus') {
+            // 兼容 preact/compat/src/render.js options.vnode 的处理逻辑
+            e.type = 'focusin';
+        }
+        else if (type === 'blur') {
+            e.type = 'focusout';
+        }
+    });
+    // hooks.modifyDispatchEventImpls?.push(e => {
+    // })
 }
 
-export { PageContext, R$1 as R, connectReactPage, createNativeComponentConfig, createReactApp, setReconciler, useAddToFavorites, useDidHide, useDidShow, useOptionMenuClick, usePageScroll, usePullDownRefresh, usePullIntercept, useReachBottom, useReady, useResize, useRouter, useScope, useShareAppMessage, useShareTimeline, useTabItemTap, useTitleClick };
+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, useUnload };
 //# sourceMappingURL=runtime.js.map