@rsmax/web 1.0.1

package/cjs/createPageConfig.js

@@ -0,0 +1,162 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const qs_1 = __importDefault(require("qs"));
+const framework_shared_1 = require("@rsmax/framework-shared");
+const PullToRefresh_1 = __importDefault(require("./PullToRefresh"));
+const DEFAULT_REACH_BOTTOM_DISTANCE = 50;
+function createPageConfig(Page, name) {
+    const page = {
+        lifeCycleCallback: {},
+        wrapperRef: React.createRef(),
+        registerLifecycle(lifeCycle, callback) {
+            this.lifeCycleCallback[lifeCycle] = this.lifeCycleCallback[lifeCycle] || [];
+            this.lifeCycleCallback[lifeCycle].push(callback);
+            return () => {
+                this.lifeCycleCallback[lifeCycle].splice(this.lifeCycleCallback[lifeCycle].indexOf(callback), 1);
+            };
+        },
+        callLifecycle(lifeCycle, ...args) {
+            const callbacks = this.lifeCycleCallback[lifeCycle] || [];
+            let result;
+            callbacks.forEach((callback) => {
+                result = callback(...args);
+            });
+            if (result) {
+                return result;
+            }
+            const callback = (0, framework_shared_1.callbackName)(lifeCycle);
+            if (this.wrapperRef.current && this.wrapperRef.current[callback]) {
+                return this.wrapperRef.current[callback](...args);
+            }
+        },
+    };
+    const PageWrapper = (0, framework_shared_1.createPageWrapper)(Page, name);
+    return class PageConfig extends React.Component {
+        constructor(props) {
+            super(props);
+            this.state = {
+                refreshing: true,
+            };
+            this.title = this.props.pageConfig.defaultTitle || document.title;
+            this.componentDidCache = () => {
+                this.title = document.title;
+                page.callLifecycle(framework_shared_1.Lifecycle.hide);
+                this.unregisterPageScroll();
+            };
+            this.componentDidRecover = () => {
+                this.setTitle();
+                page.callLifecycle(framework_shared_1.Lifecycle.show);
+            };
+            this.setTitle = () => {
+                document.title = this.title;
+            };
+            this.isPullDownRefreshEnabled = () => {
+                const { pageConfig } = this.props;
+                return pageConfig.pullRefresh;
+            };
+            this.getReachBottomDistance = () => {
+                var _a;
+                const { pageConfig } = this.props;
+                return (_a = pageConfig.onReachBottomDistance) !== null && _a !== void 0 ? _a : DEFAULT_REACH_BOTTOM_DISTANCE;
+            };
+            this.isReachBottom = false;
+            this.scrollEvent = () => {
+                this.checkReachBottom();
+                const event = { scrollTop: window.scrollY };
+                page.callLifecycle(framework_shared_1.Lifecycle.pageScroll, event);
+            };
+            this.registerPageScroll = () => {
+                window.addEventListener('scroll', this.scrollEvent);
+            };
+            this.unregisterPageScroll = () => {
+                window.removeEventListener('scroll', this.scrollEvent);
+            };
+            this.handleRefresh = async () => {
+                this.setState({
+                    refreshing: true,
+                });
+                try {
+                    await page.callLifecycle(framework_shared_1.Lifecycle.pullDownRefresh);
+                }
+                catch (error) {
+                    this.setState({
+                        refreshing: false,
+                    });
+                    throw error;
+                }
+                this.setState({
+                    refreshing: false,
+                });
+            };
+            this.checkReachBottom = () => {
+                const isCurrentReachBottom = document.body.scrollHeight - (window.innerHeight + window.scrollY) <= this.getReachBottomDistance();
+                if (!this.isReachBottom && isCurrentReachBottom) {
+                    this.isReachBottom = true;
+                    page.callLifecycle(framework_shared_1.Lifecycle.reachBottom);
+                    return;
+                }
+                this.isReachBottom = isCurrentReachBottom;
+            };
+            props.cacheLifecycles.didCache(this.componentDidCache);
+            props.cacheLifecycles.didRecover(this.componentDidRecover);
+        }
+        componentDidMount() {
+            this.setTitle();
+            page.callLifecycle(framework_shared_1.Lifecycle.load);
+            page.callLifecycle(framework_shared_1.Lifecycle.show);
+            page.callLifecycle(framework_shared_1.Lifecycle.ready);
+            this.registerPageScroll();
+        }
+        componentWillUnmount() {
+            this.unregisterPageScroll();
+        }
+        render() {
+            const { tabBar, location } = this.props;
+            const { refreshing } = this.state;
+            const hasTabBar = !!tabBar;
+            const className = `remax-page ${hasTabBar ? 'with-tab-bar' : ''}`;
+            const query = qs_1.default.parse(location.search, { ignoreQueryPrefix: true });
+            if (this.isPullDownRefreshEnabled()) {
+                return (React.createElement(PullToRefresh_1.default, { onRefresh: this.handleRefresh, refreshing: refreshing, distanceToRefresh: 50 },
+                    React.createElement("div", { className: className }, React.createElement(PageWrapper, {
+                        page,
+                        query,
+                        ref: page.wrapperRef,
+                    }))));
+            }
+            return (React.createElement("div", { className: className }, React.createElement(PageWrapper, {
+                page,
+                query,
+                ref: page.wrapperRef,
+            })));
+        }
+    };
+}
+exports.default = createPageConfig;

package/cjs/hooks/useNativeEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export default useEffect;

package/cjs/hooks/useNativeEffect.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+exports.default = react_1.useEffect;

package/cjs/hooks/usePageInstance.d.ts

@@ -0,0 +1 @@
+export default function usePageInstance(): any;

package/cjs/hooks/usePageInstance.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function usePageInstance() {
+    return null;
+}
+exports.default = usePageInstance;

package/cjs/hooks/useQuery.d.ts

@@ -0,0 +1,3 @@
+export default function useQuery<Q extends Record<string, string | undefined> = {
+    [name: string]: string | undefined;
+}>(): Q;

package/cjs/hooks/useQuery.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_router_dom_1 = require("react-router-dom");
+const qs_1 = __importDefault(require("qs"));
+const framework_shared_1 = require("@rsmax/framework-shared");
+function useQuery() {
+    const location = framework_shared_1.RuntimeOptions.get('mpa') ? window.location : (0, react_router_dom_1.useLocation)();
+    return qs_1.default.parse(location.search, { ignoreQueryPrefix: true });
+}
+exports.default = useQuery;

package/cjs/index.d.ts

@@ -0,0 +1,10 @@
+export { useAppEvent, usePageEvent } from '@rsmax/framework-shared';
+export { default as createAppConfig } from './createAppConfig';
+export { default as createPageConfig } from './createPageConfig';
+export { default as useQuery } from './hooks/useQuery';
+export { default as useNativeEffect } from './hooks/useNativeEffect';
+export { default as usePageInstance } from './hooks/usePageInstance';
+export { default as bootstrap } from './bootstrap';
+export { default as bootstrapMpa } from './bootstrapMpa';
+export * from './api';
+export * from './types';

package/cjs/index.js

@@ -0,0 +1,39 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bootstrapMpa = exports.bootstrap = exports.usePageInstance = exports.useNativeEffect = exports.useQuery = exports.createPageConfig = exports.createAppConfig = exports.usePageEvent = exports.useAppEvent = void 0;
+var framework_shared_1 = require("@rsmax/framework-shared");
+Object.defineProperty(exports, "useAppEvent", { enumerable: true, get: function () { return framework_shared_1.useAppEvent; } });
+Object.defineProperty(exports, "usePageEvent", { enumerable: true, get: function () { return framework_shared_1.usePageEvent; } });
+var createAppConfig_1 = require("./createAppConfig");
+Object.defineProperty(exports, "createAppConfig", { enumerable: true, get: function () { return __importDefault(createAppConfig_1).default; } });
+var createPageConfig_1 = require("./createPageConfig");
+Object.defineProperty(exports, "createPageConfig", { enumerable: true, get: function () { return __importDefault(createPageConfig_1).default; } });
+var useQuery_1 = require("./hooks/useQuery");
+Object.defineProperty(exports, "useQuery", { enumerable: true, get: function () { return __importDefault(useQuery_1).default; } });
+var useNativeEffect_1 = require("./hooks/useNativeEffect");
+Object.defineProperty(exports, "useNativeEffect", { enumerable: true, get: function () { return __importDefault(useNativeEffect_1).default; } });
+var usePageInstance_1 = require("./hooks/usePageInstance");
+Object.defineProperty(exports, "usePageInstance", { enumerable: true, get: function () { return __importDefault(usePageInstance_1).default; } });
+var bootstrap_1 = require("./bootstrap");
+Object.defineProperty(exports, "bootstrap", { enumerable: true, get: function () { return __importDefault(bootstrap_1).default; } });
+var bootstrapMpa_1 = require("./bootstrapMpa");
+Object.defineProperty(exports, "bootstrapMpa", { enumerable: true, get: function () { return __importDefault(bootstrapMpa_1).default; } });
+__exportStar(require("./api"), exports);
+__exportStar(require("./types"), exports);

package/cjs/types/index.d.ts

@@ -0,0 +1,89 @@
+/// <reference types="react" />
+export interface Page {
+    route: string;
+    config: PageConfig;
+}
+export declare const enum RouterType {
+    hash = "hash",
+    browser = "browser"
+}
+export interface BootstrapOptions {
+    async?: boolean;
+    appComponent: React.ComponentType;
+    appConfig: AppConfig;
+    plugins?: any[];
+    pageComponents: Array<() => Promise<{
+        default: React.ComponentType;
+    }> | React.ComponentType>;
+    pages: Page[];
+}
+export interface TabItem {
+    /**
+     * 设置页面路径
+     */
+    url: string;
+    /**
+     * 名称
+     */
+    title: string;
+    /**
+     * 平常图标路径
+     */
+    image: string;
+    /**
+     * 高亮图标路径
+     */
+    activeImage?: string;
+}
+export interface TabBarConfig {
+    /**
+     * 标题颜色
+     */
+    textColor?: string;
+    /**
+     * 选中标题颜色
+     */
+    selectedColor?: string;
+    /**
+     * 背景色
+     */
+    backgroundColor?: string;
+    /**
+     * 每个 tab 配置
+     */
+    items: TabItem[];
+}
+interface WindowConfig {
+    /**
+     * 页面默认标题
+     */
+    defaultTitle?: string;
+    /**
+     * 默认值：false
+     * 是否开启全局的下拉刷新。
+     */
+    pullRefresh?: boolean;
+    /**
+     * 默认值：50
+     * 页面触底事件触发时距页面底部距离，单位为 px。
+     */
+    onReachBottomDistance?: number;
+}
+/** 全局配置文件 */
+export interface AppConfig {
+    /**
+     * 设置页面路径
+     */
+    pages: string[];
+    window?: WindowConfig;
+    /**
+     * 设置底部 tab bar 的表现
+     */
+    tabBar?: TabBarConfig;
+    router?: {
+        type: RouterType;
+    };
+}
+/** 页面配置文件 */
+export type PageConfig = WindowConfig;
+export {};

package/cjs/types/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/esm/LoadingIcon.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface LoadingIconProps {
+    animate?: boolean;
+}
+export default function LoadingIcon(props: LoadingIconProps): React.JSX.Element;
+export {};

package/esm/LoadingIcon.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+const values = '2; 2; 2; 2';
+const animateValues = '0; 4; 0; 0';
+export default function LoadingIcon(props) {
+    const animate = props.animate;
+    return (React.createElement("svg", { className: "remax-pull-to-refresh-loading", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" },
+        React.createElement("circle", { transform: "translate(8 0)", cx: "0", cy: "16", r: "0" },
+            React.createElement("animate", { attributeName: "r", values: !animate ? values : animateValues, dur: "1.2s", repeatCount: "indefinite", begin: "0", keyTimes: "0;0.2;0.7;1", keySplines: "0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8", calcMode: "spline" })),
+        React.createElement("circle", { transform: "translate(16 0)", cx: "0", cy: "16", r: "0" },
+            React.createElement("animate", { attributeName: "r", values: !animate ? values : animateValues, dur: "1.2s", repeatCount: "indefinite", begin: "0.3", keyTimes: "0;0.2;0.7;1", keySplines: "0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8", calcMode: "spline" })),
+        React.createElement("circle", { transform: "translate(24 0)", cx: "0", cy: "16", r: "0" },
+            React.createElement("animate", { attributeName: "r", values: !animate ? values : animateValues, dur: "1.2s", repeatCount: "indefinite", begin: "0.6", keyTimes: "0;0.2;0.7;1", keySplines: "0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8", calcMode: "spline" }))));
+}

package/esm/PullToRefresh.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const RemaxPullToRefresh: React.FC<any>;
+export default RemaxPullToRefresh;

package/esm/PullToRefresh.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import PullToRefresh from 'rmc-pull-to-refresh';
+import LoadingIcon from './LoadingIcon';
+const RemaxPullToRefresh = props => {
+    return (React.createElement(PullToRefresh, Object.assign({}, props, { getScrollContainer: () => {
+            document.body;
+        }, indicator: {
+            activate: React.createElement(LoadingIcon, null),
+            deactivate: React.createElement(LoadingIcon, null),
+            release: React.createElement(LoadingIcon, { animate: true }),
+            finish: React.createElement(LoadingIcon, null),
+        } })));
+};
+export default RemaxPullToRefresh;

package/esm/TabBar.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { History } from 'history';
+import { TabBarConfig } from './types';
+export declare function TabBar({ config, history }: {
+    config: TabBarConfig;
+    history: History;
+}): React.JSX.Element;

package/esm/TabBar.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+export function TabBar({ config, history }) {
+    var _a;
+    const [currentPath, setCurrentPath] = React.useState(history.location.pathname);
+    React.useEffect(() => {
+        setCurrentPath(history.location.pathname);
+        return history.listen(() => {
+            setCurrentPath(history.location.pathname);
+        });
+    }, []);
+    const isActive = (url) => {
+        if (!url.startsWith('/')) {
+            url = '/' + url;
+        }
+        return currentPath === url;
+    };
+    return (React.createElement("div", { className: "remax-tab-bar", style: { backgroundColor: (_a = config.backgroundColor) !== null && _a !== void 0 ? _a : '' } }, config.items.map((item, index) => (React.createElement(TabBarItem, { key: index, config: config, isActive: isActive(item.url), item: item })))));
+}
+function TabBarItem({ config, isActive, item }) {
+    var _a, _b;
+    const icon = isActive ? item.activeImage || item.image : item.image;
+    const textColor = (_a = config.textColor) !== null && _a !== void 0 ? _a : '#333';
+    const selectedColor = (_b = config.selectedColor) !== null && _b !== void 0 ? _b : '#108ee9';
+    return (React.createElement(Link, { to: `/${item.url}`, className: "remax-tab-item" },
+        React.createElement("div", { className: "remax-tab-item-image", style: { backgroundImage: `url(${icon})` } }),
+        React.createElement("div", { className: "remax-tab-item-title", style: {
+                color: isActive ? selectedColor : textColor,
+            } }, item.title)));
+}

package/esm/api.d.ts

@@ -0,0 +1,16 @@
+interface NavigateToParams {
+    url: string;
+}
+interface NavigateBackParams {
+    /** 返回的页面数 */
+    delta?: number;
+}
+type RedirectToParams = NavigateToParams;
+type ReLaunchParams = NavigateToParams;
+type SwitchTabParams = NavigateToParams;
+export declare function navigateTo(params: NavigateToParams): Promise<void>;
+export declare function navigateBack(params?: NavigateBackParams): Promise<void>;
+export declare function redirectTo(params: RedirectToParams): Promise<void>;
+export declare function reLaunch(params: ReLaunchParams): void;
+export declare function switchTab(params: SwitchTabParams): void;
+export {};

package/esm/api.js

@@ -0,0 +1,22 @@
+import { RuntimeOptions } from '@rsmax/framework-shared';
+export function navigateTo(params) {
+    const history = RuntimeOptions.get('history');
+    history.push(params.url);
+    return Promise.resolve();
+}
+export function navigateBack(params) {
+    const history = RuntimeOptions.get('history');
+    history.go(-((params === null || params === void 0 ? void 0 : params.delta) || 1));
+    return Promise.resolve();
+}
+export function redirectTo(params) {
+    const history = RuntimeOptions.get('history');
+    history.replace(params.url);
+    return Promise.resolve();
+}
+export function reLaunch(params) {
+    window.location.href = params.url;
+}
+export function switchTab(params) {
+    navigateTo(params);
+}

package/esm/bootstrap.d.ts

@@ -0,0 +1,2 @@
+import { BootstrapOptions } from './types';
+export default function bootstrap(options: BootstrapOptions): void;

package/esm/bootstrap.js

@@ -0,0 +1,12 @@
+import { render } from 'react-dom';
+import hd from 'umi-hd';
+import { createHashHistory, createBrowserHistory } from 'history';
+import { RuntimeOptions } from '@rsmax/framework-shared';
+import createApp from './createApp';
+export default function bootstrap(options) {
+    hd();
+    const { appConfig } = options;
+    const history = !appConfig.router || appConfig.router.type !== 'browser' ? createHashHistory() : createBrowserHistory();
+    RuntimeOptions.apply({ history, mpa: false });
+    render(createApp(options, history), document.getElementById('remax-app'));
+}

package/esm/bootstrapMpa.d.ts

@@ -0,0 +1 @@
+export default function bootstrap(options: any): void;

package/esm/bootstrapMpa.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { render } from 'react-dom';
+import hd from 'umi-hd';
+import createAppConfig from './createAppConfig';
+import { PluginDriver, RuntimeOptions } from '@rsmax/framework-shared';
+import createPageConfig from './createPageConfig';
+const noop = () => {
+    // ignore
+};
+function createApp(options) {
+    const { appComponent, pageComponent, page, appConfig } = options;
+    const AppConfig = createAppConfig(appComponent);
+    const PageConfig = createPageConfig(pageComponent, page.route);
+    return (React.createElement(AppConfig, null,
+        React.createElement(PageConfig, { pageConfig: Object.assign(Object.assign({}, appConfig.window), page.config), tabBar: appConfig.tabBar, location: window.location, cacheLifecycles: {
+                didCache: noop,
+                didRecover: noop,
+            } })));
+}
+export default function bootstrap(options) {
+    hd();
+    const { plugins = [], page } = options;
+    const pluginDriver = new PluginDriver(plugins.map((plugin) => plugin.default || plugin));
+    const history = {
+        push(url) {
+            url = history.transformUrl(url);
+            console.log('not implemented');
+        },
+        go() {
+            console.log('not implemented');
+        },
+        replace(url) {
+            url = history.transformUrl(url);
+            location.replace(url);
+        },
+        page: null,
+        transformUrl(url) {
+            if (!url)
+                return url;
+            let publicPath = '';
+            if (url.startsWith('/'))
+                publicPath = location.pathname.replace(`/${page.route}.html`, '');
+            const arr = url.split('?');
+            arr[0] = arr[0] + '.html';
+            return publicPath + arr.join('?');
+        },
+    };
+    RuntimeOptions.apply({ pluginDriver, history, mpa: true });
+    const App = createApp(options);
+    render(App, document.getElementById('remax-app'));
+}

package/esm/createApp.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { History } from 'history';
+import { BootstrapOptions } from './types';
+export default function createApp(options: BootstrapOptions, history: History): React.JSX.Element;

package/esm/createApp.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { RuntimeOptions, PluginDriver } from '@rsmax/framework-shared';
+import { CacheRoute, CacheSwitch } from '@remax/react-router-cache-route';
+import { Router, Route, Redirect, useLocation } from 'react-router-dom';
+import loadable from '@loadable/component';
+import createAppConfig from './createAppConfig';
+import createPageConfig from './createPageConfig';
+import { TabBar } from './TabBar';
+export default function createApp(options, history) {
+    var _a, _b, _c;
+    const { async = true, appComponent, appConfig, pageComponents, pages, plugins = [] } = options;
+    const AppConfig = createAppConfig(appComponent);
+    const pluginDriver = new PluginDriver(plugins.map(plugin => plugin.default || plugin));
+    RuntimeOptions.apply({ pluginDriver });
+    const pageComponentsHoc = pages.map((page, i) => {
+        const pageComponent = async
+            ? loadable(() => pageComponents[i]().then(({ default: c }) => createPageConfig(c, page.route)))
+            : createPageConfig(pageComponents[i](), page.route);
+        return pageComponent;
+    });
+    return (React.createElement(Router, { history: history },
+        React.createElement(AppConfig, null,
+            React.createElement(CacheSwitch, null,
+                React.createElement(Route, { exact: true, path: "/" },
+                    React.createElement(Redirect, { to: `/${(_a = pages[0]) === null || _a === void 0 ? void 0 : _a.route}` })),
+                pages.map((page, i) => {
+                    return (React.createElement(CacheRoute, { key: page.route, className: "remax-cached-router-wrapper", path: `/${page.route}`, exact: true }, (props) => {
+                        const pageComponent = pageComponentsHoc[i];
+                        return React.createElement(pageComponent, Object.assign(Object.assign({}, props), { pageConfig: Object.assign(Object.assign({}, appConfig.window), page.config), tabBar: appConfig.tabBar }));
+                    }));
+                }),
+                React.createElement(Route, null,
+                    React.createElement(Redirect, { to: `/${(_b = pages[0]) === null || _b === void 0 ? void 0 : _b.route}` }))),
+            ((_c = appConfig.tabBar) === null || _c === void 0 ? void 0 : _c.items) && appConfig.tabBar.items.length > 0 && (React.createElement(TabBar, { history: history, config: appConfig.tabBar })),
+            process.env.NODE_ENV === 'development' && React.createElement(LogLocation, null))));
+}
+function LogLocation() {
+    const location = useLocation();
+    React.useEffect(() => {
+        console.log('[remax][react-router]location change', location.pathname);
+    }, [location]);
+    return null;
+}

package/esm/createAppConfig.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+export default function createAppConfig(this: any, App: any): {
+    new (props: any): {
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        visibilityChangeEvent: () => void;
+        handelVisibilityChange: () => void;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<any>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<any>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<any>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: any, context: any): {
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        visibilityChangeEvent: () => void;
+        handelVisibilityChange: () => void;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<any>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<any>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<any>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    contextType?: React.Context<any> | undefined;
+};