@rsmax/web 1.0.1

package/esm/createAppConfig.js

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { ForwardRef } from 'react-is';
+import { AppInstanceContext, AppLifecycle, callbackName, isClassComponent } from '@rsmax/framework-shared';
+class DefaultAppComponent extends React.Component {
+    render() {
+        return React.createElement(React.Fragment, this.props);
+    }
+}
+export default function createAppConfig(App) {
+    const createConfig = (AppComponent = DefaultAppComponent) => {
+        const config = {
+            _instance: React.createRef(),
+            callLifecycle(lifecycle, ...args) {
+                const callbacks = AppInstanceContext.lifecycleCallback[lifecycle] || [];
+                let result;
+                callbacks.forEach((callback) => {
+                    result = callback(...args);
+                });
+                if (result) {
+                    return result;
+                }
+                const callback = callbackName(lifecycle);
+                if (this._instance.current && this._instance.current[callback]) {
+                    return this._instance.current[callback](...args);
+                }
+            },
+        };
+        return class AppConfig extends React.Component {
+            constructor() {
+                super(...arguments);
+                this.visibilityChangeEvent = () => {
+                    if (document.visibilityState === 'visible') {
+                        config.callLifecycle(AppLifecycle.show);
+                    }
+                    else {
+                        config.callLifecycle(AppLifecycle.hide);
+                    }
+                };
+                this.handelVisibilityChange = () => {
+                    document.addEventListener('visibilitychange', this.visibilityChangeEvent);
+                };
+            }
+            componentDidMount() {
+                window.onerror = (...params) => {
+                    config.callLifecycle(AppLifecycle.error, ...params);
+                };
+                config.callLifecycle(AppLifecycle.launch);
+                this.handelVisibilityChange();
+            }
+            componentWillUnmount() {
+                document.removeEventListener('visibilitychange', this.visibilityChangeEvent);
+            }
+            render() {
+                let ref;
+                if (isClassComponent(AppComponent) || AppComponent.$$typeof === ForwardRef) {
+                    ref = config._instance;
+                }
+                return React.createElement(AppComponent, Object.assign({}, this.props, { ref: ref }));
+            }
+        };
+    };
+    return createConfig(App);
+}

package/esm/createPageConfig.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { TabBarConfig, PageConfig } from './types';
+interface PageConfigProps {
+    tabBar: TabBarConfig;
+    pageConfig: PageConfig;
+    location: any;
+    cacheLifecycles?: any;
+}
+export default function createPageConfig(Page: React.ComponentType<any>, name: string): {
+    new (props: any): {
+        state: {
+            refreshing: boolean;
+        };
+        title: string;
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        componentDidCache: () => void;
+        componentDidRecover: () => void;
+        setTitle: () => void;
+        isPullDownRefreshEnabled: () => boolean | undefined;
+        getReachBottomDistance: () => number;
+        isReachBottom: boolean;
+        scrollEvent: () => void;
+        registerPageScroll: () => void;
+        unregisterPageScroll: () => void;
+        handleRefresh: () => Promise<void>;
+        checkReachBottom: () => void;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<PageConfigProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<PageConfigProps>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<PageConfigProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<PageConfigProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<PageConfigProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<PageConfigProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<PageConfigProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<PageConfigProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<PageConfigProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export {};

package/esm/createPageConfig.js

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import qs from 'qs';
+import { createPageWrapper, Lifecycle, callbackName } from '@rsmax/framework-shared';
+import PullToRefresh from './PullToRefresh';
+const DEFAULT_REACH_BOTTOM_DISTANCE = 50;
+export default 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 = callbackName(lifeCycle);
+            if (this.wrapperRef.current && this.wrapperRef.current[callback]) {
+                return this.wrapperRef.current[callback](...args);
+            }
+        },
+    };
+    const PageWrapper = 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(Lifecycle.hide);
+                this.unregisterPageScroll();
+            };
+            this.componentDidRecover = () => {
+                this.setTitle();
+                page.callLifecycle(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(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(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(Lifecycle.reachBottom);
+                    return;
+                }
+                this.isReachBottom = isCurrentReachBottom;
+            };
+            props.cacheLifecycles.didCache(this.componentDidCache);
+            props.cacheLifecycles.didRecover(this.componentDidRecover);
+        }
+        componentDidMount() {
+            this.setTitle();
+            page.callLifecycle(Lifecycle.load);
+            page.callLifecycle(Lifecycle.show);
+            page.callLifecycle(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.parse(location.search, { ignoreQueryPrefix: true });
+            if (this.isPullDownRefreshEnabled()) {
+                return (React.createElement(PullToRefresh, { 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,
+            })));
+        }
+    };
+}

package/esm/hooks/useNativeEffect.d.ts

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

package/esm/hooks/useNativeEffect.js

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

package/esm/hooks/usePageInstance.d.ts

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

package/esm/hooks/usePageInstance.js

@@ -0,0 +1,3 @@
+export default function usePageInstance() {
+    return null;
+}

package/esm/hooks/useQuery.d.ts

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

package/esm/hooks/useQuery.js

@@ -0,0 +1,7 @@
+import { useLocation } from 'react-router-dom';
+import qs from 'qs';
+import { RuntimeOptions } from '@rsmax/framework-shared';
+export default function useQuery() {
+    const location = RuntimeOptions.get('mpa') ? window.location : useLocation();
+    return qs.parse(location.search, { ignoreQueryPrefix: true });
+}

package/esm/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/esm/index.js

@@ -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/esm/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/esm/types/index.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@rsmax/web",
+  "version": "1.0.1",
+  "description": "Shim of web for rsmax",
+  "author": "Wei Zhu <yesmeck@gmail.com>",
+  "homepage": "https://github.com/remaxjs/remax#readme",
+  "license": "MIT",
+  "main": "./cjs/index.js",
+  "esnext": "./esm/index.js",
+  "module": "./esm/index.js",
+  "typings": "./esm/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/remaxjs/remax.git"
+  },
+  "scripts": {
+    "clean": "rimraf cjs esm tsconfig.tsbuildinfo",
+    "prebuild": "npm run clean",
+    "build": "tsc",
+    "build:cjs": "tsc --module CommonJS --outDir cjs",
+    "test": "vitest run"
+  },
+  "bugs": {
+    "url": "https://github.com/remaxjs/remax/issues"
+  },
+  "dependencies": {
+    "@loadable/component": "^5.12.0",
+    "@remax/react-router-cache-route": "^1.8.4",
+    "@rsmax/framework-shared": "1.0.1",
+    "history": "^5.3.0",
+    "qs": "^6.9.3",
+    "react-is": "^18.3.0",
+    "react-router-dom": "^5.2.0",
+    "rmc-pull-to-refresh": "^1.0.12",
+    "umi-hd": "^5.0.1"
+  },
+  "devDependencies": {
+    "@types/loadable__component": "^5.10.0",
+    "@types/qs": "^6.9.3",
+    "@types/react": "^18.3.0",
+    "@types/react-is": "^17.0.2",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-test-renderer": "^18.3.0",
+    "jsdom": "^26.1.0",
+    "react": "^18.3.0",
+    "react-test-renderer": "^18.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "d2ff644810449152d124a9da76218bcd9fdfff46"
+}

package/typings/index.d.ts

@@ -0,0 +1 @@
+declare module 'umi-hd';

package/vitest.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    exclude: ['cjs/**/*', 'esm/**/*', 'node_modules/**/*'],
+  },
+});