@tarojs/plugin-framework-react 4.0.0-beta.6 → 4.0.0-beta.60

package/dist/runtime.js

@@ -1,9 +1,15 @@
 import { EMPTY_OBJ, isFunction, isArray, 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';
+import { Current, getPageInstance, injectPageInstance, incrementId, document, perf, PAGE_INIT, getPath, window, CONTEXT_ACTIONS, safeExecute, removePageInstance, ON_READY, requestAnimationFrame, eventCenter, getOnReadyEventKey, ON_SHOW, getOnShowEventKey, ON_HIDE, getOnHideEventKey, eventHandler, addLeadingSlash } from '@tarojs/runtime';
+import * as Solid from 'solid-js';
+import { createContext, createMemo, useContext, createRenderEffect, onCleanup } from 'solid-js';
+import * as SolidReconciler from '@tarojs/plugin-framework-react/dist/reconciler';
 
 const reactMeta = {
     PageContext: EMPTY_OBJ,
-    R: EMPTY_OBJ
+    R: EMPTY_OBJ,
+};
+const solidMeta = {
+    PageContext: createContext(''),
 };
 
 const HOOKS_APP_ID = 'taro-app';
@@ -44,49 +50,87 @@ function setRouterParams(options) {
 
 const createTaroHook = (lifecycle) => {
     return (fn) => {
-        const { R: React, PageContext } = reactMeta;
-        const id = React.useContext(PageContext) || HOOKS_APP_ID;
-        const instRef = React.useRef();
-        // hold fn ref and keep up to date
-        const fnRef = React.useRef(fn);
-        if (fnRef.current !== fn)
-            fnRef.current = fn;
-        React.useLayoutEffect(() => {
-            let inst = instRef.current = getPageInstance(id);
-            let first = false;
-            if (!inst) {
-                first = true;
-                instRef.current = Object.create(null);
-                inst = instRef.current;
-            }
-            // 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 = instRef.current;
-                if (!inst)
-                    return;
-                const list = inst[lifecycle];
-                if (list === callback) {
-                    (inst[lifecycle]) = undefined;
+        if (process.env.FRAMEWORK !== 'solid') {
+            const { R: React, PageContext } = reactMeta;
+            const id = React.useContext(PageContext) || HOOKS_APP_ID;
+            const instRef = React.useRef();
+            // hold fn ref and keep up to date
+            const fnRef = React.useRef(fn);
+            if (fnRef.current !== fn)
+                fnRef.current = fn;
+            React.useLayoutEffect(() => {
+                let inst = instRef.current = getPageInstance(id);
+                let first = false;
+                if (!inst) {
+                    first = true;
+                    instRef.current = Object.create(null);
+                    inst = instRef.current;
                 }
-                else if (isArray(list)) {
-                    (inst[lifecycle]) = list.filter(item => item !== callback);
+                // 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];
                 }
-                instRef.current = undefined;
-            };
-        }, []);
+                else {
+                    (inst[lifecycle]) = [
+                        ...((inst[lifecycle]) || []),
+                        callback
+                    ];
+                }
+                if (first) {
+                    injectPageInstance(inst, id);
+                }
+                return () => {
+                    const inst = instRef.current;
+                    if (!inst)
+                        return;
+                    const list = inst[lifecycle];
+                    if (list === callback) {
+                        (inst[lifecycle]) = undefined;
+                    }
+                    else if (isArray(list)) {
+                        (inst[lifecycle]) = list.filter(item => item !== callback);
+                    }
+                    instRef.current = undefined;
+                };
+            }, []);
+        }
+        else {
+            const context = useContext(solidMeta.PageContext);
+            const id = context || HOOKS_APP_ID;
+            createRenderEffect(() => {
+                let inst = getPageInstance(id);
+                let first = false;
+                if (!inst) {
+                    first = true;
+                    inst = Object.create({
+                        id: id,
+                        type: 'page',
+                    });
+                }
+                if (isFunction(inst[lifecycle])) {
+                    inst[lifecycle] = [inst[lifecycle], fn];
+                }
+                else {
+                    inst[lifecycle] = [
+                        ...((inst[lifecycle]) || []),
+                        fn
+                    ];
+                }
+                if (first) {
+                    injectPageInstance(inst, id);
+                }
+                onCleanup(() => {
+                    const list = inst[lifecycle];
+                    if (list === fn) {
+                        (inst[lifecycle]) = undefined;
+                    }
+                    else if (isArray(list)) {
+                        (inst[lifecycle]) = list.filter(item => item !== fn);
+                    }
+                });
+            });
+        }
     };
 };
 /** LifeCycle */
@@ -115,8 +159,13 @@ const useTitleClick = createTaroHook('onTitleClick');
 /** Router */
 const useReady = createTaroHook('onReady');
 const useRouter = (dynamic = false) => {
-    const React = reactMeta.R;
-    return dynamic ? Current.router : React.useMemo(() => Current.router, []);
+    if (process.env.FRAMEWORK !== 'solid') {
+        const React = reactMeta.R;
+        return dynamic ? Current.router : React.useMemo(() => Current.router, []);
+    }
+    else {
+        return dynamic ? Current.router : createMemo(() => Current.router);
+    }
 };
 const useTabItemTap = createTaroHook('onTabItemTap');
 const useScope = () => undefined;
@@ -164,7 +213,12 @@ function setReconciler(ReactDOM) {
         });
     });
     hooks.tap('batchedEventUpdates', function (cb) {
-        ReactDOM.unstable_batchedUpdates(cb);
+        if (process.env.FRAMEWORK !== 'solid') {
+            ReactDOM === null || ReactDOM === void 0 ? void 0 : ReactDOM.unstable_batchedUpdates(cb);
+        }
+        else {
+            Solid.batch(cb);
+        }
     });
     hooks.tap('mergePageInstance', function (prev, next) {
         if (!prev || !next)
@@ -179,7 +233,8 @@ function setReconciler(ReactDOM) {
             next[item] = nextList.concat(prevList);
         });
     });
-    if (process.env.TARO_PLATFORM === 'web') {
+    // TODO 使用 solid 时，暂不支持以下事件
+    if (process.env.TARO_PLATFORM === 'web' && process.env.FRAMEWORK !== 'solid') {
         hooks.tap('createPullDownComponent', (el, _, R, customWrapper) => {
             const isReactComponent = isClassComponent(R, el);
             return R.forwardRef((props, ref) => {
@@ -192,8 +247,19 @@ function setReconciler(ReactDOM) {
                 return h$1(customWrapper || 'taro-pull-to-refresh-core', null, h$1(el, Object.assign(Object.assign({}, newProps), refs)));
             });
         });
-        hooks.tap('getDOMNode', inst => {
-            return ReactDOM.findDOMNode(inst);
+        hooks.tap('getDOMNode', (inst) => {
+            // 由于react 18移除了ReactDOM.findDOMNode方法，修复H5端 Taro.createSelectorQuery设置in(scope)时，报错问题
+            // https://zh-hans.react.dev/reference/react-dom/findDOMNode
+            if (!inst) {
+                return document;
+            }
+            else if (inst instanceof HTMLElement) {
+                return inst;
+            }
+            else if (inst.$taroPath) {
+                const el = document.getElementById(inst.$taroPath);
+                return el !== null && el !== void 0 ? el : document;
+            }
         });
     }
 }
@@ -254,7 +320,7 @@ function connectReactPage(R, id) {
  */
 function createReactApp(App, react, dom, config) {
     if (process.env.NODE_ENV !== 'production') {
-        ensure(!!dom, '构建 React/Nerv 项目请把 process.env.FRAMEWORK 设置为 \'react\'/\'nerv\' ');
+        ensure(!!dom, '构建 React/Nerv 项目请把 process.env.FRAMEWORK 设置为 \'react\'/\'preact\'/\'nerv\' ');
     }
     reactMeta.R = react;
     h$1 = react.createElement;
@@ -302,7 +368,10 @@ function createReactApp(App, react, dom, config) {
             const key = id + pageKeyId();
             const page = () => h$1(pageWrapper, { key, tid: id });
             this.pages.push(page);
-            this.forceUpdate(cb);
+            this.forceUpdate((...args) => {
+                perf.stop(PAGE_INIT);
+                return cb(...args);
+            });
         }
         unmount(id, cb) {
             const elements = this.elements;
@@ -469,6 +538,161 @@ function createReactApp(App, react, dom, config) {
     Current.app = appObj;
     return appObj;
 }
+function createSolidApp(App, config) {
+    setReconciler();
+    const appRef = {
+        mount: () => { },
+        unmount: () => { },
+    };
+    function getAppInstance() {
+        return appRef;
+    }
+    function AppWrapper() {
+        const [pages, setPages] = Solid.createSignal([]);
+        appRef.mount = (component, id) => {
+            setPages((old) => {
+                return [...old, { id, component }];
+            });
+        };
+        appRef.unmount = (id) => {
+            setPages(pages().filter((item) => {
+                return item.id !== id;
+            }));
+        };
+        return SolidReconciler.createComponent(App, {
+            ref: appRef,
+            children: SolidReconciler.createComponent(Solid.For, {
+                get each() {
+                    return pages();
+                },
+                children: ({ id, component }) => {
+                    const children = () => SolidReconciler.createComponent(solidMeta.PageContext.Provider, {
+                        value: id,
+                        children: () => {
+                            injectPageInstance({ id: id, type: 'page' }, id);
+                            return SolidReconciler.createComponent(component, {
+                                tid: id,
+                            });
+                        },
+                    });
+                    const root = process.env.TARO_PLATFORM === 'web'
+                        ? document.createElement('div')
+                        : SolidReconciler.createElement('root');
+                    if (process.env.TARO_PLATFORM === 'web') {
+                        root.setAttribute('id', id);
+                        root.classList.add('taro_page');
+                    }
+                    else {
+                        SolidReconciler.setProp(root, 'id', id);
+                    }
+                    SolidReconciler.insert(root, children);
+                    return root;
+                },
+            }),
+        });
+    }
+    function renderSolidRoot() {
+        let appId = 'app';
+        if (process.env.TARO_PLATFORM === 'web') {
+            appId = (config === null || config === void 0 ? void 0 : config.appId) || appId;
+        }
+        const container = document.getElementById(appId);
+        SolidReconciler.render(AppWrapper, container);
+    }
+    if (process.env.TARO_PLATFORM !== 'web') {
+        renderSolidRoot();
+    }
+    const [ONLAUNCH, ONSHOW, ONHIDE] = hooks.call('getMiniLifecycleImpl').app;
+    const appObj = Object.create({
+        mount(component, id, cb) {
+            const appInstance = getAppInstance();
+            appInstance === null || appInstance === void 0 ? void 0 : appInstance.mount(component, id);
+            Solid.batch((...args) => {
+                perf.stop(PAGE_INIT);
+                return cb(...args);
+            });
+        },
+        unmount(id, cb) {
+            const appInstance = getAppInstance();
+            appInstance === null || appInstance === void 0 ? void 0 : appInstance.unmount(id);
+            Solid.batch(cb);
+        },
+    }, {
+        config: setDefaultDescriptor({
+            configurable: true,
+            value: config,
+        }),
+        [ONLAUNCH]: setDefaultDescriptor({
+            value(options) {
+                setRouterParams(options);
+                if (process.env.TARO_PLATFORM === 'web') {
+                    renderSolidRoot();
+                }
+                const onLaunch = () => {
+                    var _a;
+                    const app = getAppInstance();
+                    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.onCreate) === null || _a === void 0 ? void 0 : _a.call(app);
+                    }
+                };
+                onLaunch();
+                triggerAppHook('onLaunch', options);
+            },
+        }),
+        [ONSHOW]: setDefaultDescriptor({
+            value(options) {
+                setRouterParams(options);
+                triggerAppHook('onShow', options);
+            },
+        }),
+        [ONHIDE]: setDefaultDescriptor({
+            value() {
+                triggerAppHook('onHide');
+            },
+        }),
+        onError: setDefaultDescriptor({
+            value(error) {
+                triggerAppHook('onError', error);
+            },
+        }),
+        onPageNotFound: setDefaultDescriptor({
+            value(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;
@@ -728,6 +952,13 @@ function createNativePageConfig(Component, pageName, data, react, reactDOM, page
     hooks.call('modifyPageObject', pageObj);
     return pageObj;
 }
+function createH5NativeComponentConfig(Component, react, reactdom) {
+    reactMeta.R = react;
+    h = react.createElement;
+    ReactDOM = reactdom;
+    setReconciler(ReactDOM);
+    return Component;
+}
 function createNativeComponentConfig(Component, react, reactdom, componentConfig) {
     var _a, _b;
     reactMeta.R = react;
@@ -867,7 +1098,7 @@ hooks.tap('initNativeApi', function (taro) {
         taro[hook] = taroHooks[hook];
     }
 });
-if (__TARO_FRAMEWORK__ === 'preact' && process.env.TARO_PLATFORM === 'mini') {
+if (process.env.FRAMEWORK === 'preact' && process.env.TARO_PLATFORM === 'mini') {
     const options = require('preact').options;
     const oldVNodeHook = options.vnode;
     const oldDiffedHook = options.diffed;
@@ -930,5 +1161,5 @@ if (__TARO_FRAMEWORK__ === 'preact' && process.env.TARO_PLATFORM === 'mini') {
     // })
 }
 
-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 };
+export { connectReactPage, createH5NativeComponentConfig, createNativeComponentConfig, createNativePageConfig, createReactApp, createSolidApp, 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