@tarojs/plugin-framework-react 4.0.0-beta.87 → 4.0.0-beta.88

package/dist/runtime.js

@@ -1,10 +1,16 @@
 import { EMPTY_OBJ, isFunction, isArray, hooks, ensure, isUndefined } from '@tarojs/shared';
 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,
 };
+const solidMeta = {
+    PageContext: createContext(''),
+};
 
 const HOOKS_APP_ID = 'taro-app';
 function isClassComponent(R, component) {
@@ -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,37 +159,42 @@ 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;
 
 var taroHooks = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    useAddToFavorites: useAddToFavorites,
-    useDidHide: useDidHide,
-    useDidShow: useDidShow,
-    useError: useError,
-    useLaunch: useLaunch,
-    useLoad: useLoad,
-    useOptionMenuClick: useOptionMenuClick,
-    usePageNotFound: usePageNotFound,
-    usePageScroll: usePageScroll,
-    usePullDownRefresh: usePullDownRefresh,
-    usePullIntercept: usePullIntercept,
-    useReachBottom: useReachBottom,
-    useReady: useReady,
-    useResize: useResize,
-    useRouter: useRouter,
-    useSaveExitState: useSaveExitState,
-    useScope: useScope,
-    useShareAppMessage: useShareAppMessage,
-    useShareTimeline: useShareTimeline,
-    useTabItemTap: useTabItemTap,
-    useTitleClick: useTitleClick,
-    useUnhandledRejection: useUnhandledRejection,
-    useUnload: useUnload
+  __proto__: null,
+  useAddToFavorites: useAddToFavorites,
+  useDidHide: useDidHide,
+  useDidShow: useDidShow,
+  useError: useError,
+  useLaunch: useLaunch,
+  useLoad: useLoad,
+  useOptionMenuClick: useOptionMenuClick,
+  usePageNotFound: usePageNotFound,
+  usePageScroll: usePageScroll,
+  usePullDownRefresh: usePullDownRefresh,
+  usePullIntercept: usePullIntercept,
+  useReachBottom: useReachBottom,
+  useReady: useReady,
+  useResize: useResize,
+  useRouter: useRouter,
+  useSaveExitState: useSaveExitState,
+  useScope: useScope,
+  useShareAppMessage: useShareAppMessage,
+  useShareTimeline: useShareTimeline,
+  useTabItemTap: useTabItemTap,
+  useTitleClick: useTitleClick,
+  useUnhandledRejection: useUnhandledRejection,
+  useUnload: useUnload
 });
 
 let h$1;
@@ -164,7 +213,12 @@ function setReconciler(ReactDOM) {
         });
     });
     hooks.tap('batchedEventUpdates', function (cb) {
-        ReactDOM === null || ReactDOM === void 0 ? void 0 : 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) => {
@@ -281,12 +336,7 @@ function createReactApp(App, react, dom, config) {
         return appInstanceRef.current;
     }
     function waitAppWrapper(cb) {
-        /**
-         * 当同个事件触发多次时，waitAppWrapper 会出现同步和异步任务的执行顺序问题，
-         * 导致某些场景下 onShow 会优于 onLaunch 执行
-         */
-        appWrapperPromise.then(() => cb());
-        // appWrapper ? cb() : appWrapperPromise.then(() => cb())
+        appWrapper ? cb() : appWrapperPromise.then(() => cb());
     }
     function renderReactRoot() {
         var _a, _b;
@@ -359,12 +409,7 @@ function createReactApp(App, react, dom, config) {
             }
         },
         unmount(id, cb) {
-            if (appWrapper) {
-                appWrapper.unmount(id, cb);
-            }
-            else {
-                appWrapperPromise.then(appWrapper => appWrapper.unmount(id, cb));
-            }
+            appWrapper.unmount(id, cb);
         }
     }, {
         config: setDefaultDescriptor({
@@ -493,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;
@@ -962,5 +1162,5 @@ if (process.env.FRAMEWORK === 'preact' && process.env.TARO_PLATFORM === 'mini')
     // })
 }
 
-export { connectReactPage, createH5NativeComponentConfig, 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