@rsmax/web 1.3.3 → 1.3.4

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.4](https://github.com/remaxjs/remax/compare/v1.3.3...v1.3.4) (2025-06-02)
+
+### Bug Fixes
+
+- **web:** 修复 web 平台无法启动 ([567d4b8](https://github.com/remaxjs/remax/commit/567d4b88d99f3c2770336619d62197db16199e49))
+- **web:** 修复测试 ([31d6c23](https://github.com/remaxjs/remax/commit/31d6c23d9da225bfe75eb696c6baeadf436e2554))
+
 ## [1.3.3](https://github.com/remaxjs/remax/compare/v1.3.2...v1.3.3) (2025-05-30)
 
 **Note:** Version bump only for package @rsmax/web

package/assets/app.css

@@ -1,4 +1,4 @@
-.remax-button {
+.rsmax-button {
   /* prettier-ignore */
   font-size: 18PX;
   /* prettier-ignore */
@@ -26,7 +26,7 @@
   width: 100%;
 }
 
-.remax-input {
+.rsmax-input {
   /* prettier-ignore */
   font-size: 17PX;
   /* prettier-ignore */
@@ -39,7 +39,7 @@
   box-sizing: content-box;
 }
 
-.remax-textarea {
+.rsmax-textarea {
   position: relative;
   background-color: rgb(255, 255, 255);
   /* prettier-ignore */
@@ -52,7 +52,7 @@
   line-height: 1.4;
 }
 
-.remax-image {
+.rsmax-image {
   background-repeat: no-repeat;
   display: inline-block;
   overflow: hidden;
@@ -63,26 +63,26 @@
   height: 225PX;
 }
 
-.remax-text-selectable {
+.rsmax-text-selectable {
   user-select: text;
 }
 
-.remax-web-view {
+.rsmax-web-view {
   width: 100%;
   min-height: 100vh;
 }
 
-.remax-page.with-tab-bar {
+.rsmax-page.with-tab-bar {
   padding-bottom: 96px;
 }
 
-.remax-page {
+.rsmax-page {
   min-height: 100vh;
   box-sizing: border-box;
   font-size: 32px;
 }
 
-.remax-page.disable-scroll {
+.rsmax-page.disable-scroll {
   overflow: hidden;
 }
 
@@ -104,12 +104,12 @@
   margin-top: -100px;
 }
 
-.remax-pull-to-refresh-loading {
+.rsmax-pull-to-refresh-loading {
   width: 100px;
   height: 100px;
 }
 
-.remax-tab-bar {
+.rsmax-tab-bar {
   height: 96px;
   position: fixed;
   bottom: 0;
@@ -123,7 +123,7 @@
   z-index: 999999;
 }
 
-.remax-tab-bar .remax-tab-item {
+.rsmax-tab-bar .rsmax-tab-item {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -131,7 +131,7 @@
   height: 100%;
 }
 
-.remax-tab-bar .remax-tab-item .remax-tab-item-image {
+.rsmax-tab-bar .rsmax-tab-item .rsmax-tab-item-image {
   height: 34px;
   width: 34px;
   background-size: contain;
@@ -139,13 +139,13 @@
   background-repeat: no-repeat;
 }
 
-.remax-tab-bar .remax-tab-item .remax-tab-item-title {
+.rsmax-tab-bar .rsmax-tab-item .rsmax-tab-item-title {
   font-size: 12px;
   color: #333;
   transform: scale(0.7);
 }
 
-.remax-tab-bar .remax-tab-item .remax-tab-item-title.active {
+.rsmax-tab-bar .rsmax-tab-item .rsmax-tab-item-title.active {
   color: #108ee9;
 }
 

package/cjs/LoadingIcon.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 interface LoadingIconProps {
     animate?: boolean;
 }

package/cjs/LoadingIcon.js

@@ -1,39 +1,19 @@
 "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 react_1 = __importDefault(require("react"));
 const values = '2; 2; 2; 2';
 const animateValues = '0; 4; 0; 0';
 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" }))));
+    return (react_1.default.createElement("svg", { className: "rsmax-pull-to-refresh-loading", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" },
+        react_1.default.createElement("circle", { transform: "translate(8 0)", cx: "0", cy: "16", r: "0" },
+            react_1.default.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_1.default.createElement("circle", { transform: "translate(16 0)", cx: "0", cy: "16", r: "0" },
+            react_1.default.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_1.default.createElement("circle", { transform: "translate(24 0)", cx: "0", cy: "16", r: "0" },
+            react_1.default.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" }))));
 }
 exports.default = LoadingIcon;

package/cjs/PullToRefresh.d.ts

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

package/cjs/PullToRefresh.js

@@ -1,42 +1,19 @@
 "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 react_1 = __importDefault(require("react"));
 const rmc_pull_to_refresh_1 = __importDefault(require("rmc-pull-to-refresh"));
 const LoadingIcon_1 = __importDefault(require("./LoadingIcon"));
 const RemaxPullToRefresh = props => {
-    return (React.createElement(rmc_pull_to_refresh_1.default, Object.assign({}, props, { getScrollContainer: () => {
+    return (react_1.default.createElement(rmc_pull_to_refresh_1.default, Object.assign({}, props, { getScrollContainer: () => {
             document.body;
         }, indicator: {
-            activate: React.createElement(LoadingIcon_1.default, null),
-            deactivate: React.createElement(LoadingIcon_1.default, null),
-            release: React.createElement(LoadingIcon_1.default, { animate: true }),
-            finish: React.createElement(LoadingIcon_1.default, null),
+            activate: react_1.default.createElement(LoadingIcon_1.default, null),
+            deactivate: react_1.default.createElement(LoadingIcon_1.default, null),
+            release: react_1.default.createElement(LoadingIcon_1.default, { animate: true }),
+            finish: react_1.default.createElement(LoadingIcon_1.default, null),
         } })));
 };
 exports.default = RemaxPullToRefresh;

package/cjs/TabBar.d.ts

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

package/cjs/TabBar.js

@@ -1,35 +1,15 @@
 "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 });
 exports.TabBar = void 0;
-const React = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 function TabBar({ config, history }) {
     var _a;
-    const [currentPath, setCurrentPath] = React.useState(history.location.pathname);
-    React.useEffect(() => {
+    const [currentPath, setCurrentPath] = react_1.default.useState(history.location.pathname);
+    react_1.default.useEffect(() => {
         setCurrentPath(history.location.pathname);
         return history.listen(() => {
             setCurrentPath(history.location.pathname);
@@ -41,7 +21,7 @@ function TabBar({ config, history }) {
         }
         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 })))));
+    return (react_1.default.createElement("div", { className: "rsmax-tab-bar", style: { backgroundColor: (_a = config.backgroundColor) !== null && _a !== void 0 ? _a : '' } }, config.items.map((item, index) => (react_1.default.createElement(TabBarItem, { key: index, config: config, isActive: isActive(item.url), item: item })))));
 }
 exports.TabBar = TabBar;
 function TabBarItem({ config, isActive, item }) {
@@ -49,9 +29,9 @@ function TabBarItem({ config, isActive, item }) {
     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(react_router_dom_1.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: {
+    return (react_1.default.createElement(react_router_dom_1.Link, { to: `/${item.url}`, className: "rsmax-tab-item" },
+        react_1.default.createElement("div", { className: "rsmax-tab-item-image", style: { backgroundImage: `url(${icon})` } }),
+        react_1.default.createElement("div", { className: "rsmax-tab-item-title", style: {
                 color: isActive ? selectedColor : textColor,
             } }, item.title)));
 }

package/cjs/bootstrap.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_dom_1 = require("react-dom");
+const client_1 = require("react-dom/client");
 const umi_hd_1 = __importDefault(require("umi-hd"));
 const history_1 = require("history");
 const framework_shared_1 = require("@rsmax/framework-shared");
@@ -13,6 +13,10 @@ function bootstrap(options) {
     const { appConfig } = options;
     const history = !appConfig.router || appConfig.router.type !== 'browser' ? (0, history_1.createHashHistory)() : (0, history_1.createBrowserHistory)();
     framework_shared_1.RuntimeOptions.apply({ history, mpa: false });
-    (0, react_dom_1.render)((0, createApp_1.default)(options, history), document.getElementById('remax-app'));
+    const container = document.getElementById('rsmax-app');
+    if (!container)
+        throw new Error('Failed to find the root element');
+    const root = (0, client_1.createRoot)(container);
+    root.render((0, createApp_1.default)(options, history));
 }
 exports.default = bootstrap;

package/cjs/bootstrapMpa.js

@@ -1,33 +1,10 @@
 "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 react_dom_1 = require("react-dom");
+const react_1 = __importDefault(require("react"));
+const client_1 = require("react-dom/client");
 const umi_hd_1 = __importDefault(require("umi-hd"));
 const createAppConfig_1 = __importDefault(require("./createAppConfig"));
 const framework_shared_1 = require("@rsmax/framework-shared");
@@ -39,8 +16,8 @@ function createApp(options) {
     const { appComponent, pageComponent, page, appConfig } = options;
     const AppConfig = (0, createAppConfig_1.default)(appComponent);
     const PageConfig = (0, createPageConfig_1.default)(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: {
+    return (react_1.default.createElement(AppConfig, null,
+        react_1.default.createElement(PageConfig, { pageConfig: Object.assign(Object.assign({}, appConfig.window), page.config), tabBar: appConfig.tabBar, location: window.location, cacheLifecycles: {
                 didCache: noop,
                 didRecover: noop,
             } })));
@@ -75,6 +52,10 @@ function bootstrap(options) {
     };
     framework_shared_1.RuntimeOptions.apply({ pluginDriver, history, mpa: true });
     const App = createApp(options);
-    (0, react_dom_1.render)(App, document.getElementById('remax-app'));
+    const container = document.getElementById('rsmax-app');
+    if (!container)
+        throw new Error('Failed to find the root element');
+    const root = (0, client_1.createRoot)(container);
+    root.render(App);
 }
 exports.default = bootstrap;

package/cjs/createApp.d.ts

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

package/cjs/createApp.js

@@ -1,32 +1,9 @@
 "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 react_1 = __importDefault(require("react"));
 const framework_shared_1 = require("@rsmax/framework-shared");
 const react_router_cache_route_1 = require("@remax/react-router-cache-route");
 const react_router_dom_1 = require("react-router-dom");
@@ -46,27 +23,27 @@ function createApp(options, history) {
             : (0, createPageConfig_1.default)(pageComponents[i](), page.route);
         return pageComponent;
     });
-    return (React.createElement(react_router_dom_1.Router, { history: history },
-        React.createElement(AppConfig, null,
-            React.createElement(react_router_cache_route_1.CacheSwitch, null,
-                React.createElement(react_router_dom_1.Route, { exact: true, path: "/" },
-                    React.createElement(react_router_dom_1.Redirect, { to: `/${(_a = pages[0]) === null || _a === void 0 ? void 0 : _a.route}` })),
+    return (react_1.default.createElement(react_router_dom_1.Router, { history: history },
+        react_1.default.createElement(AppConfig, null,
+            react_1.default.createElement(react_router_cache_route_1.CacheSwitch, null,
+                react_1.default.createElement(react_router_dom_1.Route, { exact: true, path: "/" },
+                    react_1.default.createElement(react_router_dom_1.Redirect, { to: `/${(_a = pages[0]) === null || _a === void 0 ? void 0 : _a.route}` })),
                 pages.map((page, i) => {
-                    return (React.createElement(react_router_cache_route_1.CacheRoute, { key: page.route, className: "remax-cached-router-wrapper", path: `/${page.route}`, exact: true }, (props) => {
+                    return (react_1.default.createElement(react_router_cache_route_1.CacheRoute, { key: page.route, className: "rsmax-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 }));
+                        return react_1.default.createElement(pageComponent, Object.assign(Object.assign({}, props), { pageConfig: Object.assign(Object.assign({}, appConfig.window), page.config), tabBar: appConfig.tabBar }));
                     }));
                 }),
-                React.createElement(react_router_dom_1.Route, null,
-                    React.createElement(react_router_dom_1.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_1.TabBar, { history: history, config: appConfig.tabBar })),
-            process.env.NODE_ENV === 'development' && React.createElement(LogLocation, null))));
+                react_1.default.createElement(react_router_dom_1.Route, null,
+                    react_1.default.createElement(react_router_dom_1.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_1.default.createElement(TabBar_1.TabBar, { history: history, config: appConfig.tabBar })),
+            process.env.NODE_ENV === 'development' && react_1.default.createElement(LogLocation, null))));
 }
 exports.default = createApp;
 function LogLocation() {
     const location = (0, react_router_dom_1.useLocation)();
-    React.useEffect(() => {
-        console.log('[remax][react-router]location change', location.pathname);
+    react_1.default.useEffect(() => {
+        console.log('[rsmax][react-router]location change', location.pathname);
     }, [location]);
     return null;
 }

package/cjs/createAppConfig.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 export default function createAppConfig(this: any, App: any): {
     new (props: any): {
         componentDidMount(): void;

package/cjs/createAppConfig.js

@@ -1,40 +1,20 @@
 "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 react_1 = __importDefault(require("react"));
 const react_is_1 = require("react-is");
 const framework_shared_1 = require("@rsmax/framework-shared");
-class DefaultAppComponent extends React.Component {
+class DefaultAppComponent extends react_1.default.Component {
     render() {
-        return React.createElement(React.Fragment, this.props);
+        return react_1.default.createElement(react_1.default.Fragment, this.props);
     }
 }
 function createAppConfig(App) {
     const createConfig = (AppComponent = DefaultAppComponent) => {
         const config = {
-            _instance: React.createRef(),
+            _instance: react_1.default.createRef(),
             callLifecycle(lifecycle, ...args) {
                 const callbacks = framework_shared_1.AppInstanceContext.lifecycleCallback[lifecycle] || [];
                 let result;
@@ -50,7 +30,7 @@ function createAppConfig(App) {
                 }
             },
         };
-        return class AppConfig extends React.Component {
+        return class AppConfig extends react_1.default.Component {
             constructor() {
                 super(...arguments);
                 this.visibilityChangeEvent = () => {
@@ -80,7 +60,7 @@ function createAppConfig(App) {
                 if ((0, framework_shared_1.isClassComponent)(AppComponent) || AppComponent.$$typeof === react_is_1.ForwardRef) {
                     ref = config._instance;
                 }
-                return React.createElement(AppComponent, Object.assign({}, this.props, { ref: ref }));
+                return react_1.default.createElement(AppComponent, Object.assign({}, this.props, { ref: ref }));
             }
         };
     };

package/cjs/createPageConfig.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { TabBarConfig, PageConfig } from './types';
 interface PageConfigProps {
     tabBar: TabBarConfig;

package/cjs/createPageConfig.js

@@ -1,32 +1,9 @@
 "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 react_1 = __importDefault(require("react"));
 const qs_1 = __importDefault(require("qs"));
 const framework_shared_1 = require("@rsmax/framework-shared");
 const PullToRefresh_1 = __importDefault(require("./PullToRefresh"));
@@ -34,7 +11,7 @@ const DEFAULT_REACH_BOTTOM_DISTANCE = 50;
 function createPageConfig(Page, name) {
     const page = {
         lifeCycleCallback: {},
-        wrapperRef: React.createRef(),
+        wrapperRef: react_1.default.createRef(),
         registerLifecycle(lifeCycle, callback) {
             this.lifeCycleCallback[lifeCycle] = this.lifeCycleCallback[lifeCycle] || [];
             this.lifeCycleCallback[lifeCycle].push(callback);
@@ -58,7 +35,7 @@ function createPageConfig(Page, name) {
         },
     };
     const PageWrapper = (0, framework_shared_1.createPageWrapper)(Page, name);
-    return class PageConfig extends React.Component {
+    return class PageConfig extends react_1.default.Component {
         constructor(props) {
             super(props);
             this.state = {
@@ -141,17 +118,17 @@ function createPageConfig(Page, name) {
             const { tabBar, location } = this.props;
             const { refreshing } = this.state;
             const hasTabBar = !!tabBar;
-            const className = `remax-page ${hasTabBar ? 'with-tab-bar' : ''}`;
+            const className = `rsmax-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, {
+                return (react_1.default.createElement(PullToRefresh_1.default, { onRefresh: this.handleRefresh, refreshing: refreshing, distanceToRefresh: 50 },
+                    react_1.default.createElement("div", { className: className }, react_1.default.createElement(PageWrapper, {
                         page,
                         query,
                         ref: page.wrapperRef,
                     }))));
             }
-            return (React.createElement("div", { className: className }, React.createElement(PageWrapper, {
+            return (react_1.default.createElement("div", { className: className }, react_1.default.createElement(PageWrapper, {
                 page,
                 query,
                 ref: page.wrapperRef,

package/esm/LoadingIcon.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 interface LoadingIconProps {
     animate?: boolean;
 }

package/esm/LoadingIcon.js

@@ -1,9 +1,9 @@
-import * as React from 'react';
+import 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" },
+    return (React.createElement("svg", { className: "rsmax-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" },

package/esm/PullToRefresh.d.ts

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

package/esm/PullToRefresh.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import PullToRefresh from 'rmc-pull-to-refresh';
 import LoadingIcon from './LoadingIcon';
 const RemaxPullToRefresh = props => {

package/esm/TabBar.d.ts

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

package/esm/TabBar.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 export function TabBar({ config, history }) {
     var _a;
@@ -15,16 +15,16 @@ export function TabBar({ config, history }) {
         }
         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 })))));
+    return (React.createElement("div", { className: "rsmax-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: {
+    return (React.createElement(Link, { to: `/${item.url}`, className: "rsmax-tab-item" },
+        React.createElement("div", { className: "rsmax-tab-item-image", style: { backgroundImage: `url(${icon})` } }),
+        React.createElement("div", { className: "rsmax-tab-item-title", style: {
                 color: isActive ? selectedColor : textColor,
             } }, item.title)));
 }

package/esm/bootstrap.js

@@ -1,4 +1,4 @@
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import hd from 'umi-hd';
 import { createHashHistory, createBrowserHistory } from 'history';
 import { RuntimeOptions } from '@rsmax/framework-shared';
@@ -8,5 +8,9 @@ export default function bootstrap(options) {
     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'));
+    const container = document.getElementById('rsmax-app');
+    if (!container)
+        throw new Error('Failed to find the root element');
+    const root = createRoot(container);
+    root.render(createApp(options, history));
 }

package/esm/bootstrapMpa.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { render } from 'react-dom';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
 import hd from 'umi-hd';
 import createAppConfig from './createAppConfig';
 import { PluginDriver, RuntimeOptions } from '@rsmax/framework-shared';
@@ -47,5 +47,9 @@ export default function bootstrap(options) {
     };
     RuntimeOptions.apply({ pluginDriver, history, mpa: true });
     const App = createApp(options);
-    render(App, document.getElementById('remax-app'));
+    const container = document.getElementById('rsmax-app');
+    if (!container)
+        throw new Error('Failed to find the root element');
+    const root = createRoot(container);
+    root.render(App);
 }

package/esm/createApp.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import 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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import 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';
@@ -24,7 +24,7 @@ export default function createApp(options, history) {
                 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) => {
+                    return (React.createElement(CacheRoute, { key: page.route, className: "rsmax-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 }));
                     }));
@@ -37,7 +37,7 @@ export default function createApp(options, history) {
 function LogLocation() {
     const location = useLocation();
     React.useEffect(() => {
-        console.log('[remax][react-router]location change', location.pathname);
+        console.log('[rsmax][react-router]location change', location.pathname);
     }, [location]);
     return null;
 }

package/esm/createAppConfig.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 export default function createAppConfig(this: any, App: any): {
     new (props: any): {
         componentDidMount(): void;

package/esm/createAppConfig.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { ForwardRef } from 'react-is';
 import { AppInstanceContext, AppLifecycle, callbackName, isClassComponent } from '@rsmax/framework-shared';
 class DefaultAppComponent extends React.Component {

package/esm/createPageConfig.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { TabBarConfig, PageConfig } from './types';
 interface PageConfigProps {
     tabBar: TabBarConfig;

package/esm/createPageConfig.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import qs from 'qs';
 import { createPageWrapper, Lifecycle, callbackName } from '@rsmax/framework-shared';
 import PullToRefresh from './PullToRefresh';
@@ -113,7 +113,7 @@ export default function createPageConfig(Page, name) {
             const { tabBar, location } = this.props;
             const { refreshing } = this.state;
             const hasTabBar = !!tabBar;
-            const className = `remax-page ${hasTabBar ? 'with-tab-bar' : ''}`;
+            const className = `rsmax-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 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsmax/web",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "Shim of web for rsmax",
   "author": "Wei Zhu <yesmeck@gmail.com>",
   "homepage": "https://github.com/remaxjs/remax#readme",
@@ -26,7 +26,7 @@
   "dependencies": {
     "@loadable/component": "^5.12.0",
     "@remax/react-router-cache-route": "^1.8.4",
-    "@rsmax/framework-shared": "1.3.3",
+    "@rsmax/framework-shared": "1.3.4",
     "history": "^5.3.0",
     "qs": "^6.9.3",
     "react-is": "^18.3.0",
@@ -38,15 +38,16 @@
     "@types/loadable__component": "^5.10.0",
     "@types/qs": "^6.9.3",
     "@types/react": "^18.3.0",
-    "@types/react-is": "^17.0.2",
+    "@types/react-is": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-test-renderer": "^18.3.0",
     "jsdom": "^26.1.0",
     "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "react-test-renderer": "^18.3.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c147c027f14f6f05c23c3f22aaf00a504b438ee8"
+  "gitHead": "162e6c3a1c557480622b4bdc39e258de6026430e"
 }