@modern-js/runtime 2.20.0 → 2.21.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @modern-js/runtime
 
+## 2.21.0
+
+### Minor Changes
+
+- 0a1aa3b: feat: the runtime package export `loadable_bundler_plugin`
+  feat: runtime 包导出 `loadable_bundler_plugin`
+
+### Patch Changes
+
+- e81eeaf: refactor: guard react-router version consistency
+  refactor: 保证 react-router 相关包的版本一致性
+- 26dcf3a: chore: bump typescript to v5 in devDependencies
+
+  chore: 升级 devDependencies 中的 typescript 版本到 v5
+
+- 8b7c6d4: chore: update reduck
+  chore: 更新 reduck
+- 807f04a: fix(plugin-runtime): streaming ssr split chunk so that can't match `SHELL_STREAM_END_MARK`
+  fix(plugin-runtime): streaming ssr chunk 进行分割导致无法匹配 `SHELL_STREAM_END_MARK`
+- 0fc15ca: fix: fix `@modern-js/utils` subpath exports
+  fix: 修复 `@modern-js/utils` 子路径导出
+- 43b4e83: feat: support security.nonce for add nonce attribute on script tag
+  feat: 支持 security.nonce 配置，为 script 标签添加 nonce 属性
+- ad78387: chore(deps): bump babel-related dependencies to latest version
+
+  chore(deps): 升级 babel 相关依赖到最新版本
+
+- Updated dependencies [e81eeaf]
+- Updated dependencies [26dcf3a]
+- Updated dependencies [1ef03dc]
+- Updated dependencies [056627f]
+- Updated dependencies [0fc15ca]
+- Updated dependencies [43b4e83]
+- Updated dependencies [ad78387]
+  - @modern-js/utils@2.21.0
+  - @modern-js/plugin@2.21.0
+  - @modern-js/types@2.21.0
+
 ## 2.20.0
 
 ### Patch Changes

package/dist/cjs/document/cli/index.js

@@ -62,8 +62,9 @@ const _default = () => {
           return null;
         }
         return async ({ htmlWebpackPlugin }) => {
+          const config = api.useResolvedConfigContext();
           const documentParams = getDocParams({
-            config: api.useResolvedConfigContext(),
+            config,
             entryName,
             templateParameters
           });
@@ -137,7 +138,9 @@ const _default = () => {
             htmlWebpackPlugin.tags.headTags.filter((item) => item.tagName !== "script" && item.tagName !== "link").join("")
           ].join("");
           if (html.includes(_constants.DOCUMENT_SCRIPT_PLACEHOLDER_START) && html.includes(_constants.DOCUMENT_SCRIPT_PLACEHOLDER_END)) {
-            html = html.replace(new RegExp(`${_constants.DOCUMENT_SCRIPT_PLACEHOLDER_START}(.*?)${_constants.DOCUMENT_SCRIPT_PLACEHOLDER_END}`, "g"), (_scriptStr, $1) => `<script>${decodeURIComponent($1)}</script>`);
+            const { nonce } = config.security;
+            const nonceAttr = nonce ? `nonce=${nonce}` : "";
+            html = html.replace(new RegExp(`${_constants.DOCUMENT_SCRIPT_PLACEHOLDER_START}(.*?)${_constants.DOCUMENT_SCRIPT_PLACEHOLDER_END}`, "g"), (_scriptStr, $1) => `<script ${nonceAttr}>${decodeURIComponent($1)}</script>`);
           }
           if (html.includes(_constants.DOCUMENT_COMMENT_PLACEHOLDER_START) && html.includes(_constants.DOCUMENT_COMMENT_PLACEHOLDER_END)) {
             html = html.replace(new RegExp(`${_constants.DOCUMENT_COMMENT_PLACEHOLDER_START}(.*?)${_constants.DOCUMENT_COMMENT_PLACEHOLDER_END}`, "g"), (_scriptStr, $1) => `${decodeURIComponent($1)}`);

package/dist/cjs/router/runtime/DeferredDataScripts.node.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "default", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _reactrouterdom = require("react-router-dom");
+const _router = require("@modern-js/utils/runtime/router");
 const _runtimenode = require("@modern-js/utils/runtime-node");
 const _common = require("../../common");
 const _utils = require("./utils");
@@ -16,7 +16,7 @@ const setupFnStr = `function s(r,e){_ROUTER_DATA.r=_ROUTER_DATA.r||{},_ROUTER_DA
 const resolveFnStr = `function r(e,r,o,A){A?_ROUTER_DATA.r[e][r].reject(A):_ROUTER_DATA.r[e][r].resolve(o)};`;
 const preResolvedFnStr = `function p(e,r){return void 0!==r?Promise.reject(new Error(r.message)):Promise.resolve(e)};`;
 const DeferredDataScripts = () => {
-  const context = (0, _react.useContext)(_reactrouterdom.UNSAFE_DataRouterContext);
+  const context = (0, _react.useContext)(_router.UNSAFE_DataRouterContext);
   const { staticContext } = context || {};
   const hydratedRef = (0, _react.useRef)(false);
   (0, _react.useEffect)(() => {
@@ -91,7 +91,7 @@ const DeferredDataScripts = () => {
 };
 const DeferredDataScript = ({ data, routeId, dataKey }) => {
   return /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
-    children: typeof document === "undefined" && data && dataKey && routeId ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_reactrouterdom.Await, {
+    children: typeof document === "undefined" && data && dataKey && routeId ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_router.Await, {
       resolve: data,
       errorElement: /* @__PURE__ */ (0, _jsxruntime.jsx)(ErrorDeferredDataScript, {
         routeId,
@@ -108,7 +108,7 @@ const DeferredDataScript = ({ data, routeId, dataKey }) => {
   });
 };
 const ErrorDeferredDataScript = ({ routeId, dataKey }) => {
-  const error = (0, _reactrouterdom.useAsyncError)();
+  const error = (0, _router.useAsyncError)();
   return /* @__PURE__ */ (0, _jsxruntime.jsx)("script", {
     suppressHydrationWarning: true,
     dangerouslySetInnerHTML: {

package/dist/cjs/router/runtime/PrefetchLink.js

@@ -17,7 +17,7 @@ _export(exports, {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /* @__PURE__ */ _interop_require_wildcard._(require("react"));
-const _reactrouterdom = require("react-router-dom");
+const _router = require("@modern-js/utils/runtime/router");
 const _core = require("../../core");
 function composeEventHandlers(theirHandler, ourHandler) {
   return (event) => {
@@ -119,7 +119,7 @@ const PrefetchPageLinks = ({ pathname }) => {
   const context = (0, _react.useContext)(_core.RuntimeReactContext);
   const { routeManifest, routes } = context;
   const { routeAssets } = routeManifest;
-  const matches = Array.isArray(routes) ? (0, _reactrouterdom.matchRoutes)(routes, pathname) : [];
+  const matches = Array.isArray(routes) ? (0, _router.matchRoutes)(routes, pathname) : [];
   if (Array.isArray(matches)) {
     matches === null || matches === void 0 ? void 0 : matches.forEach((match) => loadRouteModule(match.route, routeAssets));
   }
@@ -133,8 +133,8 @@ const PrefetchPageLinks = ({ pathname }) => {
   });
 };
 const PrefetchDataLinks = ({ matches, pathname, routeManifest }) => {
-  const currentMatches = (0, _reactrouterdom.useMatches)();
-  const basename = (0, _reactrouterdom.useHref)("/");
+  const currentMatches = (0, _router.useMatches)();
+  const basename = (0, _router.useHref)("/");
   const dataHrefs = (0, _react.useMemo)(() => {
     return matches === null || matches === void 0 ? void 0 : matches.filter((match, index) => {
       if (!match.route.loader || typeof match.route.loader !== "function" || match.route.loader.length === 0) {
@@ -165,7 +165,7 @@ const createPrefetchLink = (Link2) => {
   return /* @__PURE__ */ _react.default.forwardRef(({ to, prefetch = "none", ...props }, forwardedRef) => {
     const isAbsolute = typeof to === "string" && ABSOLUTE_URL_REGEX.test(to);
     const [shouldPrefetch, prefetchHandlers] = usePrefetchBehavior(prefetch, props);
-    const resolvedPath = (0, _reactrouterdom.useResolvedPath)(to);
+    const resolvedPath = (0, _router.useResolvedPath)(to);
     const { pathname } = resolvedPath;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
       children: [
@@ -182,7 +182,7 @@ const createPrefetchLink = (Link2) => {
     });
   });
 };
-const Link = createPrefetchLink(_reactrouterdom.Link);
+const Link = createPrefetchLink(_router.Link);
 Link.displayName = "Link";
-const NavLink = createPrefetchLink(_reactrouterdom.NavLink);
+const NavLink = createPrefetchLink(_router.NavLink);
 NavLink.displayName = "NavLink";

package/dist/cjs/router/runtime/index.js

@@ -16,75 +16,74 @@ _export(exports, {
   NavLink: () => _PrefetchLink.NavLink,
   useRouteLoaderData: () => useRouteLoaderData,
   // Routers
-  createBrowserRouter: () => _reactrouterdom.createBrowserRouter,
-  createHashRouter: () => _reactrouterdom.createHashRouter,
-  createMemoryRouter: () => _reactrouterdom.createMemoryRouter,
-  RouterProvider: () => _reactrouterdom.RouterProvider,
+  createBrowserRouter: () => _router.createBrowserRouter,
+  createHashRouter: () => _router.createHashRouter,
+  createMemoryRouter: () => _router.createMemoryRouter,
+  RouterProvider: () => _router.RouterProvider,
   // Router Components
-  BrowserRouter: () => _reactrouterdom.BrowserRouter,
-  HashRouter: () => _reactrouterdom.HashRouter,
-  MemoryRouter: () => _reactrouterdom.MemoryRouter,
-  Router: () => _reactrouterdom.Router,
+  BrowserRouter: () => _router.BrowserRouter,
+  HashRouter: () => _router.HashRouter,
+  MemoryRouter: () => _router.MemoryRouter,
+  Router: () => _router.Router,
   // Components
-  Await: () => _reactrouterdom.Await,
-  Form: () => _reactrouterdom.Form,
-  Navigate: () => _reactrouterdom.Navigate,
-  Outlet: () => _reactrouterdom.Outlet,
-  Route: () => _reactrouterdom.Route,
-  Routes: () => _reactrouterdom.Routes,
-  ScrollRestoration: () => _reactrouterdom.ScrollRestoration,
+  Await: () => _router.Await,
+  Form: () => _router.Form,
+  Navigate: () => _router.Navigate,
+  Outlet: () => _router.Outlet,
+  Route: () => _router.Route,
+  Routes: () => _router.Routes,
+  ScrollRestoration: () => _router.ScrollRestoration,
   // Hooks
-  useActionData: () => _reactrouterdom.useActionData,
-  useAsyncError: () => _reactrouterdom.useAsyncError,
-  useAsyncValue: () => _reactrouterdom.useAsyncValue,
-  useBeforeUnload: () => _reactrouterdom.useBeforeUnload,
-  useFetcher: () => _reactrouterdom.useFetcher,
-  useFetchers: () => _reactrouterdom.useFetchers,
-  useFormAction: () => _reactrouterdom.useFormAction,
-  useHref: () => _reactrouterdom.useHref,
-  useInRouterContext: () => _reactrouterdom.useInRouterContext,
-  useLinkClickHandler: () => _reactrouterdom.useLinkClickHandler,
-  useLoaderData: () => _reactrouterdom.useLoaderData,
-  useLocation: () => _reactrouterdom.useLocation,
-  useMatch: () => _reactrouterdom.useMatch,
-  useMatches: () => _reactrouterdom.useMatches,
-  useNavigate: () => _reactrouterdom.useNavigate,
-  useNavigation: () => _reactrouterdom.useNavigation,
-  useNavigationType: () => _reactrouterdom.useNavigationType,
-  useOutlet: () => _reactrouterdom.useOutlet,
-  useOutletContext: () => _reactrouterdom.useOutletContext,
-  useParams: () => _reactrouterdom.useParams,
-  useResolvedPath: () => _reactrouterdom.useResolvedPath,
-  useRevalidator: () => _reactrouterdom.useRevalidator,
-  useRouteError: () => _reactrouterdom.useRouteError,
-  useRoutes: () => _reactrouterdom.useRoutes,
-  useSearchParams: () => _reactrouterdom.useSearchParams,
-  useSubmit: () => _reactrouterdom.useSubmit,
+  useActionData: () => _router.useActionData,
+  useAsyncError: () => _router.useAsyncError,
+  useAsyncValue: () => _router.useAsyncValue,
+  useBeforeUnload: () => _router.useBeforeUnload,
+  useFetcher: () => _router.useFetcher,
+  useFetchers: () => _router.useFetchers,
+  useFormAction: () => _router.useFormAction,
+  useHref: () => _router.useHref,
+  useInRouterContext: () => _router.useInRouterContext,
+  useLinkClickHandler: () => _router.useLinkClickHandler,
+  useLoaderData: () => _router.useLoaderData,
+  useLocation: () => _router.useLocation,
+  useMatch: () => _router.useMatch,
+  useMatches: () => _router.useMatches,
+  useNavigate: () => _router.useNavigate,
+  useNavigation: () => _router.useNavigation,
+  useNavigationType: () => _router.useNavigationType,
+  useOutlet: () => _router.useOutlet,
+  useOutletContext: () => _router.useOutletContext,
+  useParams: () => _router.useParams,
+  useResolvedPath: () => _router.useResolvedPath,
+  useRevalidator: () => _router.useRevalidator,
+  useRouteError: () => _router.useRouteError,
+  useRoutes: () => _router.useRoutes,
+  useSearchParams: () => _router.useSearchParams,
+  useSubmit: () => _router.useSubmit,
   // Utilities
-  createRoutesFromChildren: () => _reactrouterdom.createRoutesFromChildren,
-  createRoutesFromElements: () => _reactrouterdom.createRoutesFromElements,
-  createSearchParams: () => _reactrouterdom.createSearchParams,
-  generatePath: () => _reactrouterdom.generatePath,
-  isRouteErrorResponse: () => _reactrouterdom.isRouteErrorResponse,
-  matchPath: () => _reactrouterdom.matchPath,
-  matchRoutes: () => _reactrouterdom.matchRoutes,
-  renderMatches: () => _reactrouterdom.renderMatches,
-  resolvePath: () => _reactrouterdom.resolvePath,
-  createPath: () => _reactrouterdom.createPath,
-  unstable_useBlocker: () => _reactrouterdom.unstable_useBlocker,
-  unstable_usePrompt: () => _reactrouterdom.unstable_usePrompt,
+  createRoutesFromChildren: () => _router.createRoutesFromChildren,
+  createRoutesFromElements: () => _router.createRoutesFromElements,
+  createSearchParams: () => _router.createSearchParams,
+  generatePath: () => _router.generatePath,
+  isRouteErrorResponse: () => _router.isRouteErrorResponse,
+  matchPath: () => _router.matchPath,
+  matchRoutes: () => _router.matchRoutes,
+  renderMatches: () => _router.renderMatches,
+  resolvePath: () => _router.resolvePath,
+  createPath: () => _router.createPath,
+  unstable_useBlocker: () => _router.unstable_useBlocker,
+  unstable_usePrompt: () => _router.unstable_usePrompt,
   defer: () => _router.defer,
   json: () => _router.json,
   redirect: () => _router.redirect
 });
 const _export_star = require("@swc/helpers/_/_export_star");
-const _reactrouterdom = require("react-router-dom");
+const _router = require("@modern-js/utils/runtime/router");
 const _plugin = require("./plugin");
 _export_star._(require("./withRouter"), exports);
 const _PrefetchLink = require("./PrefetchLink");
-const _router = require("@modern-js/utils/runtime/router");
 const _default = _plugin.routerPlugin;
 const useRouteLoaderData = (routeId) => {
   const realRouteId = routeId.replace(/\[(.*?)\]/g, "($1)");
-  return (0, _reactrouterdom.useRouteLoaderData)(realRouteId);
+  return (0, _router.useRouteLoaderData)(realRouteId);
 };

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

@@ -18,7 +18,7 @@ _export(exports, {
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /* @__PURE__ */ _interop_require_default._(require("react"));
-const _reactrouterdom = require("react-router-dom");
+const _router = require("@modern-js/utils/runtime/router");
 const _hoistnonreactstatics = /* @__PURE__ */ _interop_require_default._(require("hoist-non-react-statics"));
 const _runtimebrowser = require("@modern-js/utils/runtime-browser");
 const _hooks = require("./hooks");
@@ -50,8 +50,8 @@ const routerPlugin = ({ serverBase = [], supportHtml5History = true, basename =
       return {
         init({ context }, next) {
           context.router = {
-            useMatches: _reactrouterdom.useMatches,
-            useLocation: _reactrouterdom.useLocation
+            useMatches: _router.useMatches,
+            useLocation: _router.useLocation
           };
           Object.defineProperty(context, "routes", {
             get() {
@@ -72,7 +72,7 @@ const routerPlugin = ({ serverBase = [], supportHtml5History = true, basename =
             return (props) => {
               var _window__SERVER_DATA;
               beforeCreateRouter = false;
-              routes = createRoutes ? createRoutes() : (0, _reactrouterdom.createRoutesFromElements)((0, _utils.renderRoutes)({
+              routes = createRoutes ? createRoutes() : (0, _router.createRoutesFromElements)((0, _utils.renderRoutes)({
                 routesConfig: finalRouteConfig,
                 props
               }));
@@ -87,16 +87,16 @@ const routerPlugin = ({ serverBase = [], supportHtml5History = true, basename =
                   errors: (0, _utils.deserializeErrors)(hydrationData.errors)
                 };
               }
-              const router = supportHtml5History ? (0, _reactrouterdom.createBrowserRouter)(routes, {
+              const router = supportHtml5History ? (0, _router.createBrowserRouter)(routes, {
                 basename: _basename,
                 hydrationData
-              }) : (0, _reactrouterdom.createHashRouter)(routes, {
+              }) : (0, _router.createHashRouter)(routes, {
                 basename: _basename,
                 hydrationData
               });
               return /* @__PURE__ */ (0, _jsxruntime.jsx)(App, {
                 ...props,
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reactrouterdom.RouterProvider, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_router.RouterProvider, {
                   router
                 })
               });

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

@@ -18,10 +18,10 @@ const _interop_require_default = require("@swc/helpers/_/_interop_require_defaul
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /* @__PURE__ */ _interop_require_wildcard._(require("react"));
-const _router = require("@modern-js/utils/runtime/router");
-const _server = require("react-router-dom/server");
+const _remixrouter = require("@modern-js/utils/runtime/remix-router");
+const _router = require("@modern-js/utils/runtime-node/router");
 const _hoistnonreactstatics = /* @__PURE__ */ _interop_require_default._(require("hoist-non-react-statics"));
-const _reactrouterdom = require("react-router-dom");
+const _router1 = require("@modern-js/utils/runtime/router");
 const _core = require("../../core");
 const _utils = require("./utils");
 const _fetch = require("./fetch");
@@ -70,11 +70,11 @@ const routerPlugin = ({ basename = "", routesConfig, createRoutes }) => {
           const { request, mode: ssrMode } = context.ssrContext;
           const baseUrl = request.baseUrl;
           const _basename = baseUrl === "/" ? (0, _utils.urlJoin)(baseUrl, basename) : baseUrl;
-          const routes = createRoutes ? createRoutes() : (0, _reactrouterdom.createRoutesFromElements)((0, _utils.renderRoutes)({
+          const routes = createRoutes ? createRoutes() : (0, _router1.createRoutesFromElements)((0, _utils.renderRoutes)({
             routesConfig,
             ssrMode
           }));
-          const { query } = (0, _router.createStaticHandler)(routes, {
+          const { query } = (0, _remixrouter.createStaticHandler)(routes, {
             basename: _basename
           });
           const remixRequest = createFetchRequest(request);
@@ -82,7 +82,7 @@ const routerPlugin = ({ basename = "", routesConfig, createRoutes }) => {
           if (routerContext instanceof Response) {
             return routerContext;
           }
-          const router = (0, _server.createStaticRouter)(routes, routerContext);
+          const router = (0, _router.createStaticRouter)(routes, routerContext);
           context.router = router;
           context.routerContext = routerContext;
           context.routes = routes;
@@ -104,7 +104,7 @@ const routerPlugin = ({ basename = "", routesConfig, createRoutes }) => {
               const { router, routerContext } = (0, _react.useContext)(_core.RuntimeReactContext);
               return /* @__PURE__ */ (0, _jsxruntime.jsx)(App, {
                 ...props,
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_server.StaticRouterProvider, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_router.StaticRouterProvider, {
                   router,
                   context: routerContext,
                   hydrate: false

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

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("react-router-dom/server"), exports);
+_export_star._(require("@modern-js/utils/runtime-node/router"), exports);

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

@@ -21,8 +21,9 @@ _export(exports, {
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /* @__PURE__ */ _interop_require_default._(require("react"));
-const _reactrouterdom = require("react-router-dom");
 const _router = require("@modern-js/utils/runtime/router");
+const _remixrouter = require("@modern-js/utils/runtime/remix-router");
+const _nestedroutes = require("@modern-js/utils/runtime/nested-routes");
 const _DefaultNotFound = require("./DefaultNotFound");
 const _DeferredDataScripts = /* @__PURE__ */ _interop_require_default._(require("./DeferredDataScripts"));
 function getRouteComponents(routes, { globalApp, ssrMode, props }) {
@@ -41,13 +42,13 @@ function getRouteComponents(routes, { globalApp, ssrMode, props }) {
   const routeElements = [];
   for (const route of routes) {
     if (route.type === "nested") {
-      const routeElement = (0, _router.renderNestedRoute)(route, {
+      const routeElement = (0, _nestedroutes.renderNestedRoute)(route, {
         DeferredDataComponent: ssrMode === "stream" ? _DeferredDataScripts.default : void 0,
         props
       });
       routeElements.push(routeElement);
     } else {
-      const routeElement = /* @__PURE__ */ (0, _jsxruntime.jsx)(_reactrouterdom.Route, {
+      const routeElement = /* @__PURE__ */ (0, _jsxruntime.jsx)(_router.Route, {
         path: route.path,
         element: /* @__PURE__ */ (0, _jsxruntime.jsx)(Layout, {
           Component: route.component
@@ -56,7 +57,7 @@ function getRouteComponents(routes, { globalApp, ssrMode, props }) {
       routeElements.push(routeElement);
     }
   }
-  routeElements.push(/* @__PURE__ */ (0, _jsxruntime.jsx)(_reactrouterdom.Route, {
+  routeElements.push(/* @__PURE__ */ (0, _jsxruntime.jsx)(_router.Route, {
     path: "*",
     element: /* @__PURE__ */ (0, _jsxruntime.jsx)(_DefaultNotFound.DefaultNotFound, {})
   }, "*"));
@@ -140,7 +141,7 @@ function deserializeErrors(errors) {
   const serialized = {};
   for (const [key, val] of entries) {
     if (val && val.__type === "RouteErrorResponse") {
-      serialized[key] = new _router.ErrorResponse(val.status, val.statusText, val.data, val.internal === true);
+      serialized[key] = new _remixrouter.ErrorResponse(val.status, val.statusText, val.data, val.internal === true);
     } else if (val && val.__type === "Error") {
       const error = new Error(val.message);
       error.stack = val.stack;

package/dist/cjs/router/runtime/withRouter.js

@@ -9,12 +9,12 @@ Object.defineProperty(exports, "withRouter", {
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /* @__PURE__ */ _interop_require_default._(require("react"));
-const _reactrouterdom = require("react-router-dom");
+const _router = require("@modern-js/utils/runtime/router");
 const withRouter = (Component) => {
   return (props) => {
-    const location = (0, _reactrouterdom.useLocation)();
-    const params = (0, _reactrouterdom.useParams)();
-    const navigate = (0, _reactrouterdom.useNavigate)();
+    const location = (0, _router.useLocation)();
+    const params = (0, _router.useParams)();
+    const navigate = (0, _router.useNavigate)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(Component, {
       ...props,
       location,

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

@@ -67,7 +67,7 @@ const _default = () => {
             source: {
               alias: {
                 // ensure that all packages use the same storage in @modern-js/utils/runtime-node
-                "@modern-js/utils/runtime-node": require.resolve("@modern-js/utils/runtime-node"),
+                "@modern-js/utils/runtime-node$": require.resolve("@modern-js/utils/runtime-node"),
                 "@modern-js/runtime/plugins": pluginsExportsUtils.getPath()
               },
               globalVars: (values, { target }) => {

package/dist/cjs/ssr/serverRender/renderToStream/buildTemplate.after.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "buildShellAfterTemplate", {
   get: () => buildShellAfterTemplate
 });
 const _runtimenode = require("@modern-js/utils/runtime-node");
+const _utils = require("../utils");
 const _buildTemplateshare = require("./buildTemplate.share");
 function buildShellAfterTemplate(afterAppTemplate, options) {
   const callbacks = [
@@ -18,7 +19,7 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
     return template.replace("<!--<?- SSRDataScript ?>-->", ssrDataScript);
     function buildSSRDataScript() {
       const { context: { ssrContext, initialData, __i18nData__ }, renderLevel } = options;
-      const { request, enableUnsafeCtx } = ssrContext;
+      const { request, enableUnsafeCtx, nonce } = ssrContext;
       const unsafeContext = {
         headers: request.headers
       };
@@ -39,8 +40,11 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
         },
         renderLevel
       };
+      const attrsStr = (0, _utils.attributesToString)({
+        nonce
+      });
       return `
-      <script>window._SSR_DATA = ${(0, _runtimenode.serializeJson)(SSRData)}</script>
+      <script${attrsStr}>window._SSR_DATA = ${(0, _runtimenode.serializeJson)(SSRData)}</script>
       `;
     }
   }

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "buildShellBeforeTemplate", {
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 const _reacthelmet = /* @__PURE__ */ _interop_require_default._(require("react-helmet"));
-const _reactrouterdom = require("react-router-dom");
+const _router = require("@modern-js/utils/runtime/router");
 const _helmet = /* @__PURE__ */ _interop_require_default._(require("../helmet"));
 const _utils = require("../utils");
 const _buildTemplateshare = require("./buildTemplate.share");
@@ -35,7 +35,7 @@ function getHeadTemplate(beforeEntryTemplate, context) {
       }
       const { routeAssets } = routeManifest;
       const cssChunks = [];
-      const matches = (0, _reactrouterdom.matchRoutes)(routes, routerContext.location, routerContext.basename);
+      const matches = (0, _router.matchRoutes)(routes, routerContext.location, routerContext.basename);
       matches === null || matches === void 0 ? void 0 : matches.forEach((match, index) => {
         if (!index) {
           return;

package/dist/cjs/ssr/serverRender/renderToStream/renderToPipe.js

@@ -12,13 +12,13 @@ const _common = require("../../../common");
 const _template = require("./template");
 var ShellChunkStatus;
 (function(ShellChunkStatus2) {
-  ShellChunkStatus2[ShellChunkStatus2["IDLE"] = 0] = "IDLE";
-  ShellChunkStatus2[ShellChunkStatus2["START"] = 1] = "START";
-  ShellChunkStatus2[ShellChunkStatus2["FINIESH"] = 2] = "FINIESH";
+  ShellChunkStatus2[ShellChunkStatus2["START"] = 0] = "START";
+  ShellChunkStatus2[ShellChunkStatus2["FINIESH"] = 1] = "FINIESH";
 })(ShellChunkStatus || (ShellChunkStatus = {}));
 function renderToPipe(rootElement, context, options) {
-  let shellChunkStatus = ShellChunkStatus.IDLE;
+  let shellChunkStatus = ShellChunkStatus.START;
   const { ssrContext } = context;
+  const chunkVec = [];
   const forUserPipe = (stream) => {
     return new Promise((resolve) => {
       let renderToPipeableStream;
@@ -28,6 +28,7 @@ function renderToPipe(rootElement, context, options) {
       }
       const { pipe } = renderToPipeableStream(rootElement, {
         ...options,
+        nonce: ssrContext === null || ssrContext === void 0 ? void 0 : ssrContext.nonce,
         onShellReady() {
           var _options_onShellReady;
           const { shellAfter, shellBefore } = (0, _template.getTemplates)(context, _types.RenderLevel.SERVER_RENDER);
@@ -36,16 +37,13 @@ function renderToPipe(rootElement, context, options) {
             transform(chunk, _encoding, callback) {
               try {
                 if (shellChunkStatus !== ShellChunkStatus.FINIESH) {
-                  let concatedChunk = chunk.toString();
-                  if (shellChunkStatus === ShellChunkStatus.IDLE) {
-                    concatedChunk = `${shellBefore}${concatedChunk}`;
-                    shellChunkStatus = ShellChunkStatus.START;
-                  }
-                  if (shellChunkStatus === ShellChunkStatus.START && concatedChunk.endsWith(_common.ESCAPED_SHELL_STREAM_END_MARK)) {
-                    concatedChunk = concatedChunk.replace(_common.ESCAPED_SHELL_STREAM_END_MARK, shellAfter);
+                  chunkVec.push(chunk.toString());
+                  let concatedChunk = chunkVec.join("");
+                  if (concatedChunk.endsWith(_common.ESCAPED_SHELL_STREAM_END_MARK)) {
+                    concatedChunk = concatedChunk.replace(_common.ESCAPED_SHELL_STREAM_END_MARK, "");
                     shellChunkStatus = ShellChunkStatus.FINIESH;
+                    this.push(`${shellBefore}${concatedChunk}${shellAfter}`);
                   }
-                  this.push(concatedChunk);
                 } else {
                   this.push(chunk);
                 }

package/dist/cjs/ssr/serverRender/renderToStream/renderToPipe.worker.js

@@ -11,12 +11,12 @@ const _common = require("../../../common");
 const _template = require("./template");
 var ShellChunkStatus;
 (function(ShellChunkStatus2) {
-  ShellChunkStatus2[ShellChunkStatus2["IDLE"] = 0] = "IDLE";
-  ShellChunkStatus2[ShellChunkStatus2["START"] = 1] = "START";
-  ShellChunkStatus2[ShellChunkStatus2["FINIESH"] = 2] = "FINIESH";
+  ShellChunkStatus2[ShellChunkStatus2["START"] = 0] = "START";
+  ShellChunkStatus2[ShellChunkStatus2["FINIESH"] = 1] = "FINIESH";
 })(ShellChunkStatus || (ShellChunkStatus = {}));
 function renderToPipe(rootElement, context, options) {
-  let shellChunkStatus = ShellChunkStatus.IDLE;
+  let shellChunkStatus = ShellChunkStatus.START;
+  const chunkVec = [];
   const { ssrContext } = context;
   const forUserPipe = async () => {
     let renderToReadableStream;
@@ -28,6 +28,7 @@ function renderToPipe(rootElement, context, options) {
     try {
       const readableOriginal = await renderToReadableStream(rootElement, {
         ...options,
+        nonce: ssrContext === null || ssrContext === void 0 ? void 0 : ssrContext.nonce,
         onError(error) {
           var _options_onError;
           ssrContext.logger.error("An error occurs during streaming SSR", error);
@@ -45,14 +46,13 @@ function renderToPipe(rootElement, context, options) {
               return;
             }
             if (shellChunkStatus !== ShellChunkStatus.FINIESH) {
-              let concatedChunk = new TextDecoder().decode(value);
-              if (shellChunkStatus === ShellChunkStatus.IDLE) {
-                concatedChunk = `${shellBefore}${concatedChunk}`;
-                shellChunkStatus = ShellChunkStatus.START;
-              }
-              if (shellChunkStatus === ShellChunkStatus.START && concatedChunk.endsWith(_common.ESCAPED_SHELL_STREAM_END_MARK)) {
-                concatedChunk = concatedChunk.replace(_common.ESCAPED_SHELL_STREAM_END_MARK, shellAfter);
+              const chunk = new TextDecoder().decode(value);
+              chunkVec.push(chunk);
+              let concatedChunk = chunkVec.join("");
+              if (concatedChunk.endsWith(_common.ESCAPED_SHELL_STREAM_END_MARK)) {
+                concatedChunk = concatedChunk.replace(_common.ESCAPED_SHELL_STREAM_END_MARK, "");
                 shellChunkStatus = ShellChunkStatus.FINIESH;
+                controller.enqueue(encodeForWebStream(`${shellBefore}${concatedChunk}${shellAfter}`));
               }
               controller.enqueue(encodeForWebStream(concatedChunk));
             } else {