@modern-js/runtime 2.0.0-beta.2 → 2.0.0-beta.3

package/CHANGELOG.md

@@ -1,5 +1,105 @@
 # @modern-js/runtime
 
+## 2.0.0-beta.3
+
+### Major Changes
+
+- dda38c9c3e: chore: v2
+
+### Minor Changes
+
+- c9e800d39a: feat: support React18 streaming SSR
+  feat: 支持 React18 流式 SSR
+- 543be9558e: feat: compile server loader and support handle loader request
+  feat: 编译 server loader 并支持处理 loader 的请求
+
+### Patch Changes
+
+- 2344eb26ed: fix: bootstrap function params type define
+
+  fix: 修复 bootstrap 函数参数类型定义
+
+- a11fcf8b50: feat: fallback logic of streaming ssr
+  feat: streaming ssr 降级逻辑
+- e7ce063: fix: root layout css chunks should't be loaded
+  fix: 不应该加载 root layout 的 css chunks
+- b18fa8f3ed: feat: remove @loadable/component in streaming ssr
+  feat: 移除 streaming ssr 中的 @loadable/component 逻辑
+- 6604f1b: feat: support router basename
+  feat: router 插件支持设置 basename
+- fda836f: feat: support `models`,`initialState` config for state plugin
+  feat: state 插件支持`model`,`initialState` 配置
+- 3e57f2bd58: feat: add document feature with plugin
+
+  feat: 增加 document 功能插件
+
+- 2e60319: fix: some optimizations for router and loader
+  fix: 一些 router 和 loader 的优化
+  q
+- fbf5eed5aa: fix: fix ssg failure due to lack of Web Response API
+  fix: 修复因为缺少 Web Response API 而导致 ssg 失败
+- a2509bfbdb: feat: bump esbuild from 0.14.38 to 0.15.7
+
+  feat: 将 esbuild 从 0.14.38 版本升级至 0.15.7 版本
+
+- 425e570: feat: export react-router-dom/server staticRouter
+  feat: 导出 react-router-dom/server 的 staticRouter 组件
+- e4357f1: fix: change default document file and name
+
+  fix: 重置默认的 document 文件和文件名
+
+- 4369648ae2: fix: fix html template of streaming ssr
+  fix: 修复流式渲染的 html 模版
+- 92c0994468: chore: remove `registerPrefetch`
+  chore: 移除 `registerPrefetch`
+- 6bda14ed71: feat: refactor router with react-router@6.4
+
+  feat: 使用 react-router@6.4 重构路由模块
+
+- 92004d1906: feat: support load chunks parallelly
+  feat: 支持并行加载 chunks
+- 40ed5874c6: feat: inject css chunk into html for streaming ssr
+  feat: streaming ssr 返回的 html 注入 css chunk
+- 60d5378632: fix: function extname should not return array
+  fix: 函数 extname 不应该返回一个数组
+- 8b8e1bb571: feat: support nested routes
+  feat: 支持嵌套路由
+- 3bbea92b2a: feat: support Hook、Middleware new API
+  feat: 支持 Hook、Middleware 的新 API
+- 18aaf42249: fix: fix server loader redirects
+  fix: 修复 server loader 重定向错误
+- 34702d5: feat: support internal env vars: metaName_TARGET
+  feat: 支持内置环境变量 metaName_TARGET
+- fcace5b5b9: fix: remove overmuch `@modernjs/utils` dependency import in ssr runtime & SSR hydrate error
+  fix: 去除 ssr 运行时过多的 `@modernjs/utils` 依赖引入 & SSR hydrate 错误
+- Updated dependencies [6aca875]
+- Updated dependencies [2e60319]
+- Updated dependencies [92f0eade39]
+- Updated dependencies [edd1cfb1af]
+- Updated dependencies [cc971eabfc]
+- Updated dependencies [5b9049f2e9]
+- Updated dependencies [6bda14ed71]
+- Updated dependencies [92004d1906]
+- Updated dependencies [b8bbe036c7]
+- Updated dependencies [40ed5874c6]
+- Updated dependencies [87c1ff86b9]
+- Updated dependencies [d5a31df781]
+- Updated dependencies [dda38c9c3e]
+- Updated dependencies [102d32e4ba]
+- Updated dependencies [8b8e1bb571]
+- Updated dependencies [3bbea92b2a]
+- Updated dependencies [b710adb]
+- Updated dependencies [f179749375]
+- Updated dependencies [ea7cf06]
+- Updated dependencies [bbe4c4a]
+- Updated dependencies [e4558a0]
+- Updated dependencies [abf3421a75]
+- Updated dependencies [543be9558e]
+- Updated dependencies [14b712da84]
+  - @modern-js/utils@2.0.0-beta.3
+  - @modern-js/types@2.0.0-beta.3
+  - @modern-js/plugin@2.0.0-beta.3
+
 ## 2.0.0-beta.2
 
 ### Major Changes

package/dist/js/modern/router/runtime/plugin.js

@@ -4,11 +4,12 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import React from 'react';
 import { createBrowserRouter, createHashRouter, RouterProvider, createRoutesFromElements } from 'react-router-dom';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { renderRoutes } from "./utils";
+import { renderRoutes, urlJoin } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const routerPlugin = ({
   serverBase: _serverBase = [],
   supportHtml5History: _supportHtml5History = true,
+  basename: _basename2 = '',
   routesConfig,
   createRoutes
 }) => {
@@ -22,7 +23,7 @@ export const routerPlugin = ({
         }, next) => {
           // can not get routes config, skip wrapping React Router.
           // e.g. App.tsx as the entrypoint
-          if (!routesConfig) {
+          if (!routesConfig && !createRoutes) {
             return next({
               App
             });
@@ -30,13 +31,13 @@ export const routerPlugin = ({
           const getRouteApp = () => {
             return props => {
               var _window$_SERVER_DATA;
-              const routeElements = renderRoutes(routesConfig);
-              const routes = createRoutes ? createRoutes() : createRoutesFromElements(routeElements);
+              const routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(routesConfig));
               const baseUrl = ((_window$_SERVER_DATA = window._SERVER_DATA) === null || _window$_SERVER_DATA === void 0 ? void 0 : _window$_SERVER_DATA.router.baseUrl) || select(location.pathname);
+              const _basename = baseUrl === '/' ? urlJoin(baseUrl, _basename2) : baseUrl;
               const router = _supportHtml5History ? createBrowserRouter(routes, {
-                basename: baseUrl
+                basename: _basename
               }) : createHashRouter(routes, {
-                basename: baseUrl
+                basename: _basename
               });
               return /*#__PURE__*/_jsx(App, _objectSpread(_objectSpread({}, props), {}, {
                 children: /*#__PURE__*/_jsx(RouterProvider, {
@@ -46,7 +47,7 @@ export const routerPlugin = ({
             };
           };
           const RouteApp = getRouteApp();
-          if (routesConfig.globalApp) {
+          if (routesConfig !== null && routesConfig !== void 0 && routesConfig.globalApp) {
             return next({
               App: hoistNonReactStatics(RouteApp, routesConfig.globalApp)
             });

package/dist/js/modern/router/runtime/plugin.node.js

@@ -8,7 +8,7 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
 import { installGlobals } from '@remix-run/node';
 import { createRoutesFromElements } from 'react-router-dom';
 import { RuntimeReactContext } from "../../core";
-import { renderRoutes } from "./utils";
+import { renderRoutes, urlJoin } from "./utils";
 
 // Polyfill Web Fetch API
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -54,6 +54,7 @@ export function createFetchHeaders(requestHeaders) {
   return headers;
 }
 export const routerPlugin = ({
+  basename: _basename2 = '',
   routesConfig,
   createRoutes
 }) => {
@@ -66,7 +67,7 @@ export const routerPlugin = ({
         }, next) {
           // can not get routes config, skip wrapping React Router.
           // e.g. App.tsx as the entrypoint
-          if (!routesConfig) {
+          if (!routesConfig && !createRoutes) {
             return next({
               context
             });
@@ -74,11 +75,14 @@ export const routerPlugin = ({
           const {
             request
           } = context.ssrContext;
-          const routeElements = renderRoutes(routesConfig);
-          const routes = createRoutes ? createRoutes() : createRoutesFromElements(routeElements);
+          const baseUrl = request.baseUrl;
+          const _basename = baseUrl === '/' ? urlJoin(baseUrl, _basename2) : baseUrl;
+          const routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(routesConfig));
           const {
             query
-          } = createStaticHandler(routes);
+          } = createStaticHandler(routes, {
+            basename: _basename
+          });
           const remixRequest = createFetchRequest(request);
           const routerContext = await query(remixRequest);
           if (routerContext instanceof Response) {
@@ -122,7 +126,7 @@ export const routerPlugin = ({
             };
           };
           const RouteApp = getRouteApp();
-          if (routesConfig.globalApp) {
+          if (routesConfig !== null && routesConfig !== void 0 && routesConfig.globalApp) {
             return next({
               App: hoistNonReactStatics(RouteApp, routesConfig.globalApp)
             });

package/dist/js/modern/router/runtime/server.js

@@ -0,0 +1 @@
+export * from 'react-router-dom/server';

package/dist/js/modern/router/runtime/utils.js

@@ -49,12 +49,10 @@ const renderNestedRoute = (nestedRoute, parent) => {
       });
     }
   }
-  if (!parent) {
+  if (!parent && element) {
     element = /*#__PURE__*/_jsx(RootLayout, {
       routes: [nestedRoute],
-      children: /*#__PURE__*/_jsx(Suspense, {
-        children: element
-      })
+      children: element
     });
   }
   routeProps.element = element;

package/dist/js/modern/ssr/cli/index.js

@@ -1,3 +1,6 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 import { getEntryOptions, SERVER_RENDER_FUNCTION_NAME, LOADABLE_STATS_FILE, isUseSSRBundle, createRuntimeExportsUtils, isSingleEntry } from '@modern-js/utils';
 const PLUGIN_IDENTIFIER = 'ssr';
 const hasStringSSREntry = userConfig => {
@@ -36,6 +39,7 @@ export default (() => ({
           tools: {
             webpackChain: (chain, {
               name,
+              isServer,
               CHAIN_ID
             }) => {
               const userConfig = api.useResolvedConfigContext();
@@ -46,6 +50,16 @@ export default (() => ({
                   filename: LOADABLE_STATS_FILE
                 }]);
               }
+
+              // add environment variables to determine the node/browser
+              const prefix = `${appContext.metaName.split(/[-_]/)[0]}_`.toUpperCase();
+              const modernVars = {
+                [`process.env.${prefix}TARGET`]: JSON.stringify(isServer ? 'node' : 'browser')
+              };
+              chain.plugin(CHAIN_ID.PLUGIN.DEFINE).tap(args => {
+                const [vars, ...rest] = args;
+                return [_objectSpread(_objectSpread({}, vars), modernVars), ...rest];
+              });
             },
             babel: config => {
               const userConfig = api.useResolvedConfigContext();

package/dist/js/modern/ssr/serverRender/renderToStream/bulidTemplate.before.js

@@ -33,7 +33,11 @@ function getHeadTemplate(beforeEntryTemplate, context) {
       } = routeManifest;
       const cssChunks = [];
       const matches = matchRoutes(routes, routerContext.location);
-      matches === null || matches === void 0 ? void 0 : matches.forEach(match => {
+      matches === null || matches === void 0 ? void 0 : matches.forEach((match, index) => {
+        // root layout css chunks should't be loaded
+        if (!index) {
+          return;
+        }
         const routeId = match.route.id;
         if (routeId) {
           const {

package/dist/js/modern/state/runtime/plugin.js

@@ -19,9 +19,16 @@ const getStoreConfig = config => {
   const internalPlugins = ['immer', 'effects', 'autoActions', 'devtools'];
   const plugins = [];
   internalPlugins.filter(plugin => config[plugin] !== false).forEach(plugin => plugins.push(StatePluginHandleMap[plugin](config[plugin])));
-  return {
-    plugins
-  };
+  const storeConfig = {};
+  for (const [key, value] of Object.entries(config)) {
+    if (internalPlugins.includes(key)) {
+      plugins.push(StatePluginHandleMap[key](value));
+    } else {
+      storeConfig[key] = value;
+    }
+  }
+  storeConfig.plugins = plugins;
+  return storeConfig;
 };
 const state = config => ({
   name: '@modern-js/plugin-state',

package/dist/js/node/router/runtime/plugin.js

@@ -16,6 +16,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 const routerPlugin = ({
   serverBase: _serverBase = [],
   supportHtml5History: _supportHtml5History = true,
+  basename: _basename2 = '',
   routesConfig,
   createRoutes
 }) => {
@@ -29,7 +30,7 @@ const routerPlugin = ({
         }, next) => {
           // can not get routes config, skip wrapping React Router.
           // e.g. App.tsx as the entrypoint
-          if (!routesConfig) {
+          if (!routesConfig && !createRoutes) {
             return next({
               App
             });
@@ -37,13 +38,13 @@ const routerPlugin = ({
           const getRouteApp = () => {
             return props => {
               var _window$_SERVER_DATA;
-              const routeElements = (0, _utils.renderRoutes)(routesConfig);
-              const routes = createRoutes ? createRoutes() : (0, _reactRouterDom.createRoutesFromElements)(routeElements);
+              const routes = createRoutes ? createRoutes() : (0, _reactRouterDom.createRoutesFromElements)((0, _utils.renderRoutes)(routesConfig));
               const baseUrl = ((_window$_SERVER_DATA = window._SERVER_DATA) === null || _window$_SERVER_DATA === void 0 ? void 0 : _window$_SERVER_DATA.router.baseUrl) || select(location.pathname);
+              const _basename = baseUrl === '/' ? (0, _utils.urlJoin)(baseUrl, _basename2) : baseUrl;
               const router = _supportHtml5History ? (0, _reactRouterDom.createBrowserRouter)(routes, {
-                basename: baseUrl
+                basename: _basename
               }) : (0, _reactRouterDom.createHashRouter)(routes, {
-                basename: baseUrl
+                basename: _basename
               });
               return /*#__PURE__*/(0, _jsxRuntime.jsx)(App, _objectSpread(_objectSpread({}, props), {}, {
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.RouterProvider, {
@@ -53,7 +54,7 @@ const routerPlugin = ({
             };
           };
           const RouteApp = getRouteApp();
-          if (routesConfig.globalApp) {
+          if (routesConfig !== null && routesConfig !== void 0 && routesConfig.globalApp) {
             return next({
               App: (0, _hoistNonReactStatics.default)(RouteApp, routesConfig.globalApp)
             });

package/dist/js/node/router/runtime/plugin.node.js

@@ -63,6 +63,7 @@ function createFetchHeaders(requestHeaders) {
   return headers;
 }
 const routerPlugin = ({
+  basename: _basename2 = '',
   routesConfig,
   createRoutes
 }) => {
@@ -75,7 +76,7 @@ const routerPlugin = ({
         }, next) {
           // can not get routes config, skip wrapping React Router.
           // e.g. App.tsx as the entrypoint
-          if (!routesConfig) {
+          if (!routesConfig && !createRoutes) {
             return next({
               context
             });
@@ -83,11 +84,14 @@ const routerPlugin = ({
           const {
             request
           } = context.ssrContext;
-          const routeElements = (0, _utils.renderRoutes)(routesConfig);
-          const routes = createRoutes ? createRoutes() : (0, _reactRouterDom.createRoutesFromElements)(routeElements);
+          const baseUrl = request.baseUrl;
+          const _basename = baseUrl === '/' ? (0, _utils.urlJoin)(baseUrl, _basename2) : baseUrl;
+          const routes = createRoutes ? createRoutes() : (0, _reactRouterDom.createRoutesFromElements)((0, _utils.renderRoutes)(routesConfig));
           const {
             query
-          } = (0, _router.unstable_createStaticHandler)(routes);
+          } = (0, _router.unstable_createStaticHandler)(routes, {
+            basename: _basename
+          });
           const remixRequest = createFetchRequest(request);
           const routerContext = await query(remixRequest);
           if (routerContext instanceof Response) {
@@ -131,7 +135,7 @@ const routerPlugin = ({
             };
           };
           const RouteApp = getRouteApp();
-          if (routesConfig.globalApp) {
+          if (routesConfig !== null && routesConfig !== void 0 && routesConfig.globalApp) {
             return next({
               App: (0, _hoistNonReactStatics.default)(RouteApp, routesConfig.globalApp)
             });

package/dist/js/node/router/runtime/server.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _server = require("react-router-dom/server");
+Object.keys(_server).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _server[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _server[key];
+    }
+  });
+});

package/dist/js/node/router/runtime/utils.js

@@ -61,12 +61,10 @@ const renderNestedRoute = (nestedRoute, parent) => {
       });
     }
   }
-  if (!parent) {
+  if (!parent && element) {
     element = /*#__PURE__*/(0, _jsxRuntime.jsx)(_root.RootLayout, {
       routes: [nestedRoute],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
-        children: element
-      })
+      children: element
     });
   }
   routeProps.element = element;

package/dist/js/node/ssr/cli/index.js

@@ -5,6 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@modern-js/utils");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 const PLUGIN_IDENTIFIER = 'ssr';
 const hasStringSSREntry = userConfig => {
   const isStreaming = ssr => ssr && typeof ssr === 'object' && ssr.mode === 'stream';
@@ -42,6 +45,7 @@ var _default = () => ({
           tools: {
             webpackChain: (chain, {
               name,
+              isServer,
               CHAIN_ID
             }) => {
               const userConfig = api.useResolvedConfigContext();
@@ -52,6 +56,16 @@ var _default = () => ({
                   filename: _utils.LOADABLE_STATS_FILE
                 }]);
               }
+
+              // add environment variables to determine the node/browser
+              const prefix = `${appContext.metaName.split(/[-_]/)[0]}_`.toUpperCase();
+              const modernVars = {
+                [`process.env.${prefix}TARGET`]: JSON.stringify(isServer ? 'node' : 'browser')
+              };
+              chain.plugin(CHAIN_ID.PLUGIN.DEFINE).tap(args => {
+                const [vars, ...rest] = args;
+                return [_objectSpread(_objectSpread({}, vars), modernVars), ...rest];
+              });
             },
             babel: config => {
               const userConfig = api.useResolvedConfigContext();

package/dist/js/node/ssr/serverRender/renderToStream/bulidTemplate.before.js

@@ -40,7 +40,11 @@ function getHeadTemplate(beforeEntryTemplate, context) {
       } = routeManifest;
       const cssChunks = [];
       const matches = (0, _reactRouterDom.matchRoutes)(routes, routerContext.location);
-      matches === null || matches === void 0 ? void 0 : matches.forEach(match => {
+      matches === null || matches === void 0 ? void 0 : matches.forEach((match, index) => {
+        // root layout css chunks should't be loaded
+        if (!index) {
+          return;
+        }
         const routeId = match.route.id;
         if (routeId) {
           const {

package/dist/js/node/state/runtime/plugin.js

@@ -38,9 +38,16 @@ const getStoreConfig = config => {
   const internalPlugins = ['immer', 'effects', 'autoActions', 'devtools'];
   const plugins = [];
   internalPlugins.filter(plugin => config[plugin] !== false).forEach(plugin => plugins.push(StatePluginHandleMap[plugin](config[plugin])));
-  return {
-    plugins
-  };
+  const storeConfig = {};
+  for (const [key, value] of Object.entries(config)) {
+    if (internalPlugins.includes(key)) {
+      plugins.push(StatePluginHandleMap[key](value));
+    } else {
+      storeConfig[key] = value;
+    }
+  }
+  storeConfig.plugins = plugins;
+  return storeConfig;
 };
 const state = config => ({
   name: '@modern-js/plugin-state',

package/dist/js/treeshaking/router/runtime/plugin.js

@@ -2,13 +2,15 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React from 'react';
 import { createBrowserRouter, createHashRouter, RouterProvider, createRoutesFromElements } from 'react-router-dom';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { renderRoutes } from "./utils";
+import { renderRoutes, urlJoin } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var routerPlugin = function routerPlugin(_ref) {
   var _ref$serverBase = _ref.serverBase,
     serverBase = _ref$serverBase === void 0 ? [] : _ref$serverBase,
     _ref$supportHtml5Hist = _ref.supportHtml5History,
     supportHtml5History = _ref$supportHtml5Hist === void 0 ? true : _ref$supportHtml5Hist,
+    _ref$basename = _ref.basename,
+    basename = _ref$basename === void 0 ? '' : _ref$basename,
     routesConfig = _ref.routesConfig,
     createRoutes = _ref.createRoutes;
   var select = function select(pathname) {
@@ -24,7 +26,7 @@ export var routerPlugin = function routerPlugin(_ref) {
           var App = _ref2.App;
           // can not get routes config, skip wrapping React Router.
           // e.g. App.tsx as the entrypoint
-          if (!routesConfig) {
+          if (!routesConfig && !createRoutes) {
             return next({
               App: App
             });
@@ -32,13 +34,13 @@ export var routerPlugin = function routerPlugin(_ref) {
           var getRouteApp = function getRouteApp() {
             return function (props) {
               var _window$_SERVER_DATA;
-              var routeElements = renderRoutes(routesConfig);
-              var routes = createRoutes ? createRoutes() : createRoutesFromElements(routeElements);
+              var routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(routesConfig));
               var baseUrl = ((_window$_SERVER_DATA = window._SERVER_DATA) === null || _window$_SERVER_DATA === void 0 ? void 0 : _window$_SERVER_DATA.router.baseUrl) || select(location.pathname);
+              var _basename = baseUrl === '/' ? urlJoin(baseUrl, basename) : baseUrl;
               var router = supportHtml5History ? createBrowserRouter(routes, {
-                basename: baseUrl
+                basename: _basename
               }) : createHashRouter(routes, {
-                basename: baseUrl
+                basename: _basename
               });
               return /*#__PURE__*/_jsx(App, _objectSpread(_objectSpread({}, props), {}, {
                 children: /*#__PURE__*/_jsx(RouterProvider, {
@@ -48,7 +50,7 @@ export var routerPlugin = function routerPlugin(_ref) {
             };
           };
           var RouteApp = getRouteApp();
-          if (routesConfig.globalApp) {
+          if (routesConfig !== null && routesConfig !== void 0 && routesConfig.globalApp) {
             return next({
               App: hoistNonReactStatics(RouteApp, routesConfig.globalApp)
             });

package/dist/js/treeshaking/router/runtime/plugin.node.js

@@ -10,7 +10,7 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
 import { installGlobals } from '@remix-run/node';
 import { createRoutesFromElements } from 'react-router-dom';
 import { RuntimeReactContext } from "../../core";
-import { renderRoutes } from "./utils";
+import { renderRoutes, urlJoin } from "./utils";
 
 // Polyfill Web Fetch API
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -68,7 +68,9 @@ export function createFetchHeaders(requestHeaders) {
   return headers;
 }
 export var routerPlugin = function routerPlugin(_ref) {
-  var routesConfig = _ref.routesConfig,
+  var _ref$basename = _ref.basename,
+    basename = _ref$basename === void 0 ? '' : _ref$basename,
+    routesConfig = _ref.routesConfig,
     createRoutes = _ref.createRoutes;
   return {
     name: '@modern-js/plugin-router',
@@ -76,13 +78,13 @@ export var routerPlugin = function routerPlugin(_ref) {
       return {
         init: function init(_ref2, next) {
           return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-            var context, _ref3, request, routeElements, routes, _createStaticHandler, query, remixRequest, routerContext, router;
+            var context, _ref3, request, baseUrl, _basename, routes, _createStaticHandler, query, remixRequest, routerContext, router;
             return _regeneratorRuntime().wrap(function _callee$(_context) {
               while (1) {
                 switch (_context.prev = _context.next) {
                   case 0:
                     context = _ref2.context;
-                    if (routesConfig) {
+                    if (!(!routesConfig && !createRoutes)) {
                       _context.next = 3;
                       break;
                     }
@@ -91,20 +93,23 @@ export var routerPlugin = function routerPlugin(_ref) {
                     }));
                   case 3:
                     _ref3 = context.ssrContext, request = _ref3.request;
-                    routeElements = renderRoutes(routesConfig);
-                    routes = createRoutes ? createRoutes() : createRoutesFromElements(routeElements);
-                    _createStaticHandler = createStaticHandler(routes), query = _createStaticHandler.query;
+                    baseUrl = request.baseUrl;
+                    _basename = baseUrl === '/' ? urlJoin(baseUrl, basename) : baseUrl;
+                    routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(routesConfig));
+                    _createStaticHandler = createStaticHandler(routes, {
+                      basename: _basename
+                    }), query = _createStaticHandler.query;
                     remixRequest = createFetchRequest(request);
-                    _context.next = 10;
+                    _context.next = 11;
                     return query(remixRequest);
-                  case 10:
+                  case 11:
                     routerContext = _context.sent;
                     if (!(routerContext instanceof Response)) {
-                      _context.next = 13;
+                      _context.next = 14;
                       break;
                     }
                     return _context.abrupt("return", routerContext);
-                  case 13:
+                  case 14:
                     router = createStaticRouter(routes, routerContext);
                     context.router = router;
                     context.routerContext = routerContext;
@@ -114,7 +119,7 @@ export var routerPlugin = function routerPlugin(_ref) {
                     return _context.abrupt("return", next({
                       context: context
                     }));
-                  case 19:
+                  case 20:
                   case "end":
                     return _context.stop();
                 }
@@ -146,7 +151,7 @@ export var routerPlugin = function routerPlugin(_ref) {
             };
           };
           var RouteApp = getRouteApp();
-          if (routesConfig.globalApp) {
+          if (routesConfig !== null && routesConfig !== void 0 && routesConfig.globalApp) {
             return next({
               App: hoistNonReactStatics(RouteApp, routesConfig.globalApp)
             });

package/dist/js/treeshaking/router/runtime/server.js

@@ -0,0 +1 @@
+export * from 'react-router-dom/server';

package/dist/js/treeshaking/router/runtime/utils.js

@@ -45,12 +45,10 @@ var renderNestedRoute = function renderNestedRoute(nestedRoute, parent) {
       });
     }
   }
-  if (!parent) {
+  if (!parent && element) {
     element = /*#__PURE__*/_jsx(RootLayout, {
       routes: [nestedRoute],
-      children: /*#__PURE__*/_jsx(Suspense, {
-        children: element
-      })
+      children: element
     });
   }
   routeProps.element = element;

package/dist/js/treeshaking/ssr/cli/index.js

@@ -1,3 +1,7 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _toArray from "@babel/runtime/helpers/esm/toArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import { getEntryOptions, SERVER_RENDER_FUNCTION_NAME, LOADABLE_STATS_FILE, isUseSSRBundle, createRuntimeExportsUtils, isSingleEntry } from '@modern-js/utils';
 var PLUGIN_IDENTIFIER = 'ssr';
@@ -39,6 +43,7 @@ export default (function () {
             tools: {
               webpackChain: function webpackChain(chain, _ref) {
                 var name = _ref.name,
+                  isServer = _ref.isServer,
                   CHAIN_ID = _ref.CHAIN_ID;
                 var userConfig = api.useResolvedConfigContext();
                 if (isUseSSRBundle(userConfig) && name !== 'server' && hasStringSSREntry(userConfig)) {
@@ -48,6 +53,16 @@ export default (function () {
                     filename: LOADABLE_STATS_FILE
                   }]);
                 }
+
+                // add environment variables to determine the node/browser
+                var prefix = "".concat(appContext.metaName.split(/[-_]/)[0], "_").toUpperCase();
+                var modernVars = _defineProperty({}, "process.env.".concat(prefix, "TARGET"), JSON.stringify(isServer ? 'node' : 'browser'));
+                chain.plugin(CHAIN_ID.PLUGIN.DEFINE).tap(function (args) {
+                  var _args = _toArray(args),
+                    vars = _args[0],
+                    rest = _args.slice(1);
+                  return [_objectSpread(_objectSpread({}, vars), modernVars)].concat(_toConsumableArray(rest));
+                });
               },
               babel: function babel(config) {
                 var userConfig = api.useResolvedConfigContext();

package/dist/js/treeshaking/ssr/serverRender/renderToStream/bulidTemplate.before.js

@@ -34,7 +34,11 @@ function getHeadTemplate(beforeEntryTemplate, context) {
       var routeAssets = routeManifest.routeAssets;
       var cssChunks = [];
       var matches = matchRoutes(routes, routerContext.location);
-      matches === null || matches === void 0 ? void 0 : matches.forEach(function (match) {
+      matches === null || matches === void 0 ? void 0 : matches.forEach(function (match, index) {
+        // root layout css chunks should't be loaded
+        if (!index) {
+          return;
+        }
         var routeId = match.route.id;
         if (routeId) {
           var _routeAssets$routeId$ = routeAssets[routeId].assets,

package/dist/js/treeshaking/state/runtime/plugin.js

@@ -1,4 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useContext } from 'react';
 import { createStore } from '@modern-js-reduck/store';
 import { Provider } from '@modern-js-reduck/react';
@@ -21,9 +22,19 @@ var getStoreConfig = function getStoreConfig(config) {
   }).forEach(function (plugin) {
     return plugins.push(StatePluginHandleMap[plugin](config[plugin]));
   });
-  return {
-    plugins: plugins
-  };
+  var storeConfig = {};
+  for (var _i = 0, _Object$entries = Object.entries(config); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+      key = _Object$entries$_i[0],
+      value = _Object$entries$_i[1];
+    if (internalPlugins.includes(key)) {
+      plugins.push(StatePluginHandleMap[key](value));
+    } else {
+      storeConfig[key] = value;
+    }
+  }
+  storeConfig.plugins = plugins;
+  return storeConfig;
 };
 var state = function state(config) {
   return {

package/dist/types/router/runtime/plugin.d.ts

@@ -3,6 +3,7 @@ import type { RouterConfig } from './types';
 export declare const routerPlugin: ({
   serverBase,
   supportHtml5History,
+  basename,
   routesConfig,
   createRoutes
 }: RouterConfig) => Plugin;

package/dist/types/router/runtime/plugin.node.d.ts

@@ -3,6 +3,7 @@ import { SSRServerContext } from '../../ssr/serverRender/types';
 import type { RouterConfig } from './types';
 export declare function createFetchHeaders(requestHeaders: SSRServerContext['request']['headers']): Headers;
 export declare const routerPlugin: ({
+  basename,
   routesConfig,
   createRoutes
 }: RouterConfig) => Plugin;

package/dist/types/router/runtime/server.d.ts

@@ -0,0 +1 @@
+export * from 'react-router-dom/server';

package/dist/types/router/runtime/types.d.ts

@@ -32,5 +32,6 @@ export declare type RouterConfig = {
   };
   serverBase?: string[];
   supportHtml5History?: boolean;
+  basename?: string;
   createRoutes?: () => RouteObject[];
 };

package/dist/types/state/runtime/plugin.d.ts

@@ -1,6 +1,11 @@
+import { type Model } from '@modern-js-reduck/store';
 import type { Plugin } from '../../core';
-export declare type StatePluginType = 'immer' | 'effects' | 'autoActions' | 'devtools';
-export declare type StateConfig = Partial<Record<StatePluginType, boolean>>;
+declare type StatePluginType = 'immer' | 'effects' | 'autoActions' | 'devtools';
+declare type StateExtraType = {
+  initialState: any;
+  models: Array<Model>;
+};
+export declare type StateConfig = Partial<Record<StatePluginType, boolean> & StateExtraType>;
 declare const state: (config: StateConfig) => Plugin;
 export default state;
 export * from '../plugins';

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "engines": {
     "node": ">=14.17.6"
   },
@@ -72,10 +72,10 @@
       "node": "./dist/js/node/router/index.js",
       "default": "./dist/js/treeshaking/router/index.js"
     },
-    "./router-server": {
-      "jsnext:source": "./src/router/server/index.ts",
-      "node": "./dist/js/node/router/server/index.js",
-      "default": "./dist/js/treeshaking/router/server/index.js"
+    "./router/server": {
+      "jsnext:source": "./src/router/server.ts",
+      "node": "./dist/js/node/router/server.js",
+      "default": "./dist/js/treeshaking/router/server.js"
     }
   },
   "typesVersions": {
@@ -110,8 +110,8 @@
       "router": [
         "./dist/types/router/index.d.ts"
       ],
-      "router-server": [
-        "./dist/types/router/server/index.d.ts"
+      "router/server": [
+        "./dist/types/router/runtime/server.d.ts"
       ]
     }
   },
@@ -122,12 +122,12 @@
     "@loadable/webpack-plugin": "5.15.2",
     "@loadable/component": "^5.15.0",
     "@loadable/server": "^5.15.1",
-    "@modern-js-reduck/plugin-auto-actions": "^1.0.2",
-    "@modern-js-reduck/plugin-devtools": "^1.0.3",
-    "@modern-js-reduck/plugin-effects": "^1.0.2",
-    "@modern-js-reduck/plugin-immutable": "^1.0.1",
-    "@modern-js-reduck/react": "^1.0.1",
-    "@modern-js-reduck/store": "^1.0.3",
+    "@modern-js-reduck/plugin-auto-actions": "^1.1.4",
+    "@modern-js-reduck/plugin-devtools": "^1.1.4",
+    "@modern-js-reduck/plugin-effects": "^1.1.4",
+    "@modern-js-reduck/plugin-immutable": "^1.1.4",
+    "@modern-js-reduck/react": "^1.1.4",
+    "@modern-js-reduck/store": "^1.1.4",
     "@types/loadable__component": "^5.13.4",
     "@types/react-helmet": "^6.1.2",
     "@types/redux-logger": "^3.0.9",
@@ -136,16 +136,16 @@
     "invariant": "^2.2.4",
     "react-helmet": "^6.1.0",
     "@remix-run/node": "^1.7.0",
-    "@remix-run/router": "^1.0.1",
+    "@remix-run/router": "^1.0.4",
     "react-is": "^18",
-    "react-router-dom": "^6.4.0",
+    "react-router-dom": "^6.4.4",
     "react-side-effect": "^2.1.1",
     "redux-logger": "^3.0.6",
     "serialize-javascript": "^6.0.0",
     "styled-components": "^5.3.1",
-    "@modern-js/plugin": "2.0.0-beta.2",
-    "@modern-js/types": "2.0.0-beta.2",
-    "@modern-js/utils": "2.0.0-beta.2"
+    "@modern-js/plugin": "2.0.0-beta.3",
+    "@modern-js/types": "2.0.0-beta.3",
+    "@modern-js/utils": "2.0.0-beta.3"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -166,12 +166,12 @@
     "react-dom": "^18",
     "ts-jest": "^27.0.4",
     "typescript": "^4",
-    "@modern-js/core": "2.0.0-beta.2",
-    "@modern-js/server-core": "2.0.0-beta.2",
-    "@modern-js/utils": "2.0.0-beta.2",
-    "@scripts/build": "2.0.0-beta.2",
-    "@modern-js/app-tools": "2.0.0-beta.2",
-    "@scripts/jest-config": "2.0.0-beta.2"
+    "@modern-js/core": "2.0.0-beta.3",
+    "@modern-js/server-core": "2.0.0-beta.3",
+    "@modern-js/utils": "2.0.0-beta.3",
+    "@scripts/build": "2.0.0-beta.3",
+    "@modern-js/app-tools": "2.0.0-beta.3",
+    "@scripts/jest-config": "2.0.0-beta.3"
   },
   "sideEffects": false,
   "modernConfig": {},