@modern-js/runtime 2.21.1 → 2.22.1

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

@@ -8,7 +8,7 @@ import { serializeErrors } from "./utils";
 var setupFnStr = "function s(r,e){_ROUTER_DATA.r=_ROUTER_DATA.r||{},_ROUTER_DATA.r[r]=_ROUTER_DATA.r[r]||{};return new Promise((function(A,R){_ROUTER_DATA.r[r][e]={resolve:A,reject:R}}))};";
 var resolveFnStr = "function r(e,r,o,A){A?_ROUTER_DATA.r[e][r].reject(A):_ROUTER_DATA.r[e][r].resolve(o)};";
 var preResolvedFnStr = "function p(e,r){return void 0!==r?Promise.reject(new Error(r.message)):Promise.resolve(e)};";
-var DeferredDataScripts = function() {
+var DeferredDataScripts = function(props) {
   var context = useContext(DataRouterContext);
   var staticContext = (context || {}).staticContext;
   var hydratedRef = useRef(false);
@@ -38,6 +38,7 @@ var DeferredDataScripts = function() {
       var deferredKeyPromiseStr = deferredKeys.map(function(key) {
         if (pendingKeys.has(key)) {
           deferredDataScripts.push(/* @__PURE__ */ _jsx(DeferredDataScript, {
+            nonce: props === null || props === void 0 ? void 0 : props.nonce,
             data: deferredData.data[key],
             dataKey: key,
             routeId: routeId
@@ -73,6 +74,7 @@ var DeferredDataScripts = function() {
     children: [
       !hydratedRef.current && /* @__PURE__ */ _jsx("script", {
         async: true,
+        nonce: props === null || props === void 0 ? void 0 : props.nonce,
         suppressHydrationWarning: true,
         dangerouslySetInnerHTML: {
           __html: deferredScripts[0]
@@ -84,17 +86,19 @@ var DeferredDataScripts = function() {
   });
 };
 var DeferredDataScript = function(param) {
-  var data = param.data, routeId = param.routeId, dataKey = param.dataKey;
+  var data = param.data, routeId = param.routeId, dataKey = param.dataKey, nonce = param.nonce;
   return /* @__PURE__ */ _jsx(Suspense, {
     children: typeof document === "undefined" && data && dataKey && routeId ? /* @__PURE__ */ _jsx(Await, {
       resolve: data,
       errorElement: /* @__PURE__ */ _jsx(ErrorDeferredDataScript, {
         routeId: routeId,
-        dataKey: dataKey
+        dataKey: dataKey,
+        nonce: nonce
       }),
       children: function(data2) {
         return /* @__PURE__ */ _jsx("script", {
           async: true,
+          nonce: nonce,
           suppressHydrationWarning: true,
           dangerouslySetInnerHTML: {
             __html: "_ROUTER_DATA.r(".concat(JSON.stringify(routeId), ", ").concat(JSON.stringify(dataKey), ", ").concat(serializeJson(data2), ");")
@@ -105,9 +109,10 @@ var DeferredDataScript = function(param) {
   });
 };
 var ErrorDeferredDataScript = function(param) {
-  var routeId = param.routeId, dataKey = param.dataKey;
+  var routeId = param.routeId, dataKey = param.dataKey, nonce = param.nonce;
   var error = useAsyncError();
   return /* @__PURE__ */ _jsx("script", {
+    nonce: nonce,
     suppressHydrationWarning: true,
     dangerouslySetInnerHTML: {
       __html: "_ROUTER_DATA.r(".concat(JSON.stringify(routeId), ", ").concat(JSON.stringify(dataKey), ", ").concat(void 0, ", ").concat(serializeJson({

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

@@ -1,9 +1,11 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from "react";
 import { createBrowserRouter, createHashRouter, RouterProvider, createRoutesFromElements, useMatches, useLocation } from "@modern-js/utils/runtime/router";
 import hoistNonReactStatics from "hoist-non-react-statics";
 import { parsedJSONFromElement } from "@modern-js/utils/runtime-browser";
+import { RuntimeReactContext } from "../../core";
 import { modifyRoutes as modifyRoutesHook } from "./hooks";
 import { deserializeErrors, renderRoutes, urlJoin } from "./utils";
 export var finalRouteConfig = {
@@ -83,6 +85,8 @@ export var routerPlugin = function(param) {
                 basename: _basename,
                 hydrationData: hydrationData
               });
+              var runtimeContext = useContext(RuntimeReactContext);
+              runtimeContext.remixRouter = router;
               return /* @__PURE__ */ _jsx(App, _object_spread_props(_object_spread({}, props), {
                 children: /* @__PURE__ */ _jsx(RouterProvider, {
                   router: router
@@ -102,6 +106,22 @@ export var routerPlugin = function(param) {
           return next({
             App: RouteApp
           });
+        },
+        pickContext: function(param2, next) {
+          var context = param2.context, pickedContext = param2.pickedContext;
+          var remixRouter = context.remixRouter;
+          var router = {
+            navigate: remixRouter.navigate,
+            get location() {
+              return remixRouter.state.location;
+            }
+          };
+          return next({
+            context: context,
+            pickedContext: _object_spread_props(_object_spread({}, pickedContext), {
+              router: router
+            })
+          });
         }
       };
     }

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

@@ -87,7 +87,7 @@ export var routerPlugin = function(param) {
         init: function init(param2, next) {
           var context = param2.context;
           return _async_to_generator(function() {
-            var _context_ssrContext, request, ssrMode, baseUrl, _basename, routes, query, remixRequest, routerContext, router, runner;
+            var _context_ssrContext, request, ssrMode, nonce, baseUrl, _basename, routes, query, remixRequest, routerContext, router, runner;
             return _ts_generator(this, function(_state) {
               switch (_state.label) {
                 case 0:
@@ -99,12 +99,15 @@ export var routerPlugin = function(param) {
                       })
                     ];
                   }
-                  _context_ssrContext = context.ssrContext, request = _context_ssrContext.request, ssrMode = _context_ssrContext.mode;
+                  _context_ssrContext = context.ssrContext, request = _context_ssrContext.request, ssrMode = _context_ssrContext.mode, nonce = _context_ssrContext.nonce;
                   baseUrl = request.baseUrl;
                   _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
                   routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
                     routesConfig: routesConfig,
-                    ssrMode: ssrMode
+                    ssrMode: ssrMode,
+                    props: {
+                      nonce: nonce
+                    }
                   }));
                   query = createStaticHandler(routes, {
                     basename: _basename
@@ -123,7 +126,7 @@ export var routerPlugin = function(param) {
                     ];
                   }
                   router = createStaticRouter(routes, routerContext);
-                  context.router = router;
+                  context.remixRouter = router;
                   context.routerContext = routerContext;
                   context.routes = routes;
                   context.routeManifest = context.ssrContext.routeManifest;
@@ -148,10 +151,10 @@ export var routerPlugin = function(param) {
           }
           var getRouteApp = function() {
             return function(props) {
-              var _useContext = useContext(RuntimeReactContext), router = _useContext.router, routerContext = _useContext.routerContext;
+              var _useContext = useContext(RuntimeReactContext), remixRouter = _useContext.remixRouter, routerContext = _useContext.routerContext;
               return /* @__PURE__ */ _jsx(App, _object_spread_props(_object_spread({}, props), {
                 children: /* @__PURE__ */ _jsx(StaticRouterProvider, {
-                  router: router,
+                  router: remixRouter,
                   context: routerContext,
                   hydrate: false
                 })
@@ -167,6 +170,22 @@ export var routerPlugin = function(param) {
           return next({
             App: RouteApp
           });
+        },
+        pickContext: function(param2, next) {
+          var context = param2.context, pickedContext = param2.pickedContext;
+          var remixRouter = context.remixRouter;
+          var router = {
+            navigate: remixRouter.navigate,
+            get location() {
+              return remixRouter.state.location;
+            }
+          };
+          return next({
+            context: context,
+            pickedContext: _object_spread_props(_object_spread({}, pickedContext), {
+              router: router
+            })
+          });
         }
       };
     }

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

@@ -1,3 +1,5 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import path from "path";
 import { getEntryOptions, SERVER_RENDER_FUNCTION_NAME, LOADABLE_STATS_FILE, isUseSSRBundle, createRuntimeExportsUtils, isSSGEntry } from "@modern-js/utils";
 var PLUGIN_IDENTIFIER = "ssr";
@@ -137,11 +139,17 @@ export default function() {
           };
         },
         modifyEntryRuntimePlugins: function modifyEntryRuntimePlugins(param) {
-          var entrypoint = param.entrypoint, plugins = param.plugins;
+          var entrypoint = param.entrypoint, plugins = param.plugins, bundlerConfigs = param.bundlerConfigs;
           if (ssrConfigMap.get(entrypoint.entryName)) {
+            var _bundlerConfigs_find, _bundlerConfigs_find_output;
+            var chunkLoadingGlobal = (_bundlerConfigs_find = bundlerConfigs === null || bundlerConfigs === void 0 ? void 0 : bundlerConfigs.find(function(config) {
+              return config.name === "client";
+            })) === null || _bundlerConfigs_find === void 0 ? void 0 : (_bundlerConfigs_find_output = _bundlerConfigs_find.output) === null || _bundlerConfigs_find_output === void 0 ? void 0 : _bundlerConfigs_find_output.chunkLoadingGlobal;
             plugins.push({
               name: PLUGIN_IDENTIFIER,
-              options: JSON.stringify(ssrConfigMap.get(entrypoint.entryName))
+              options: JSON.stringify(_object_spread_props(_object_spread({}, ssrConfigMap.get(entrypoint.entryName) || {}), {
+                chunkLoadingGlobal: chunkLoadingGlobal
+              }))
             });
           }
           return {

package/dist/esm/ssr/index.js

@@ -29,6 +29,9 @@ export var ssr = function(config) {
                   context: context
                 }));
               } else if (renderLevel === RenderLevel.SERVER_RENDER) {
+                var loadableReadyOptions = {
+                  chunkLoadingGlobal: config.chunkLoadingGlobal
+                };
                 if (isReact18()) {
                   loadableReady(function() {
                     var SSRApp = function() {
@@ -41,13 +44,13 @@ export var ssr = function(config) {
                     };
                     SSRApp = hoistNonReactStatics(SSRApp, App);
                     ModernHydrate(/* @__PURE__ */ _jsx(SSRApp, {}));
-                  });
+                  }, loadableReadyOptions);
                 } else {
                   loadableReady(function() {
                     ModernHydrate(/* @__PURE__ */ _jsx(App, {
                       context: hydrateContext
                     }), callback);
-                  });
+                  }, loadableReadyOptions);
                 }
               } else {
                 console.warn("unknow render level: ".concat(renderLevel, ", execute render()"));

package/dist/esm-node/cli/index.js

@@ -40,6 +40,14 @@ export default () => ({
             globalVars: {
               "process.env.IS_REACT18": process.env.IS_REACT18
             }
+          },
+          tools: {
+            styledComponents: {
+              // https://github.com/styled-components/babel-plugin-styled-components/issues/287
+              topLevelImportPaths: [
+                "@modern-js/runtime/styled"
+              ]
+            }
           }
         };
       },

package/dist/esm-node/document/Html.js

@@ -25,7 +25,7 @@ function findTargetElement(tag, children) {
   return findTargetElement(tag, nextChildren);
 }
 export function Html(props) {
-  const { children } = props;
+  const { children, ...rest } = props;
   const hasSetHead = Boolean(findTargetChild("Head", children));
   const hasSetScripts = Boolean(findTargetElement("Scripts", children));
   const hasSetLinks = Boolean(findTargetElement("Links", children));
@@ -58,6 +58,7 @@ export function Html(props) {
     });
   }
   return /* @__PURE__ */ _jsx("html", {
+    ...rest,
     children: /* @__PURE__ */ _jsxs(DocumentStructureContext.Provider, {
       value: {
         hasSetHead,

package/dist/esm-node/document/Style.js

@@ -0,0 +1,14 @@
+import { jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DOCUMENT_STYLE_PLACEHOLDER_START, DOCUMENT_STYLE_PLACEHOLDER_END } from "./constants";
+export function Style(props) {
+  const { content, children } = props;
+  const contentStr = children || content;
+  const contentIIFE = encodeURIComponent(`(${contentStr})()`);
+  return /* @__PURE__ */ _jsxs(_Fragment, {
+    children: [
+      `${DOCUMENT_STYLE_PLACEHOLDER_START}`,
+      `${contentIIFE}`,
+      `${DOCUMENT_STYLE_PLACEHOLDER_END}`
+    ]
+  });
+}

package/dist/esm-node/document/cli/index.js

@@ -4,7 +4,7 @@ import ReactDomServer from "react-dom/server";
 import { build } from "esbuild";
 import { createDebugger, findExists, fs } from "@modern-js/utils";
 import { DocumentContext } from "../DocumentContext";
-import { DOCUMENT_SCRIPTS_PLACEHOLDER, DOCUMENT_LINKS_PLACEHOLDER, DOCUMENT_FILE_NAME, DOCUMENT_META_PLACEHOLDER, PLACEHOLDER_REPLACER_MAP, DOC_EXT, DOCUMENT_SSR_PLACEHOLDER, DOCUMENT_CHUNKSMAP_PLACEHOLDER, DOCUMENT_SSRDATASCRIPT_PLACEHOLDER, DOCUMENT_SCRIPT_PLACEHOLDER_START, DOCUMENT_SCRIPT_PLACEHOLDER_END, HTML_SEPARATOR, DOCUMENT_COMMENT_PLACEHOLDER_START, DOCUMENT_COMMENT_PLACEHOLDER_END } from "../constants";
+import { DOCUMENT_SCRIPTS_PLACEHOLDER, DOCUMENT_LINKS_PLACEHOLDER, DOCUMENT_FILE_NAME, DOCUMENT_META_PLACEHOLDER, PLACEHOLDER_REPLACER_MAP, DOC_EXT, DOCUMENT_SSR_PLACEHOLDER, DOCUMENT_CHUNKSMAP_PLACEHOLDER, DOCUMENT_SSRDATASCRIPT_PLACEHOLDER, DOCUMENT_SCRIPT_PLACEHOLDER_START, DOCUMENT_SCRIPT_PLACEHOLDER_END, HTML_SEPARATOR, DOCUMENT_COMMENT_PLACEHOLDER_START, DOCUMENT_COMMENT_PLACEHOLDER_END, DOCUMENT_STYLE_PLACEHOLDER_START, DOCUMENT_STYLE_PLACEHOLDER_END } from "../constants";
 const debug = createDebugger("html_genarate");
 export const getDocumenByEntryName = function(entrypoints, entryName, fallbackDir) {
   var _entrypoints_find;
@@ -126,6 +126,9 @@ export default () => {
             const nonceAttr = nonce ? `nonce=${nonce}` : "";
             html = html.replace(new RegExp(`${DOCUMENT_SCRIPT_PLACEHOLDER_START}(.*?)${DOCUMENT_SCRIPT_PLACEHOLDER_END}`, "g"), (_scriptStr, $1) => `<script ${nonceAttr}>${decodeURIComponent($1)}</script>`);
           }
+          if (html.includes(DOCUMENT_STYLE_PLACEHOLDER_START) && html.includes(DOCUMENT_STYLE_PLACEHOLDER_END)) {
+            html = html.replace(new RegExp(`${DOCUMENT_STYLE_PLACEHOLDER_START}(.*?)${DOCUMENT_STYLE_PLACEHOLDER_END}`, "g"), (_styleStr, $1) => `<style>${decodeURIComponent($1)}</style>`);
+          }
           if (html.includes(DOCUMENT_COMMENT_PLACEHOLDER_START) && html.includes(DOCUMENT_COMMENT_PLACEHOLDER_END)) {
             html = html.replace(new RegExp(`${DOCUMENT_COMMENT_PLACEHOLDER_START}(.*?)${DOCUMENT_COMMENT_PLACEHOLDER_END}`, "g"), (_scriptStr, $1) => `${decodeURIComponent($1)}`);
           }

package/dist/esm-node/document/constants.js

@@ -17,6 +17,8 @@ export const DOCUMENT_LINKS_PLACEHOLDER = encodeURIComponent("<!-- chunk links p
 export const DOCUMENT_NO_SCRIPTE_PLACEHOLDER = encodeURIComponent("<!-- no-script -->");
 export const DOCUMENT_SCRIPT_PLACEHOLDER_START = encodeURIComponent("<!-- script-start -->");
 export const DOCUMENT_SCRIPT_PLACEHOLDER_END = encodeURIComponent("<!-- script-end -->");
+export const DOCUMENT_STYLE_PLACEHOLDER_START = encodeURIComponent("<!-- style-start -->");
+export const DOCUMENT_STYLE_PLACEHOLDER_END = encodeURIComponent("<!-- style-end -->");
 export const DOCUMENT_COMMENT_PLACEHOLDER_START = encodeURIComponent("<!-- comment-start -->");
 export const DOCUMENT_COMMENT_PLACEHOLDER_END = encodeURIComponent("<!-- comment-end -->");
 export const PLACEHOLDER_REPLACER_MAP = {

package/dist/esm-node/document/index.js

@@ -6,6 +6,7 @@ export * from "./Body";
 export * from "./Root";
 export * from "./Links";
 export * from "./Comment";
+export * from "./Style";
 export * from "./Scripts";
 export * from "./Script";
 export * from "./constants";

package/dist/esm-node/router/runtime/DeferredDataScripts.node.js

@@ -7,7 +7,7 @@ import { serializeErrors } from "./utils";
 const setupFnStr = `function s(r,e){_ROUTER_DATA.r=_ROUTER_DATA.r||{},_ROUTER_DATA.r[r]=_ROUTER_DATA.r[r]||{};return new Promise((function(A,R){_ROUTER_DATA.r[r][e]={resolve:A,reject:R}}))};`;
 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 DeferredDataScripts = (props) => {
   const context = useContext(DataRouterContext);
   const { staticContext } = context || {};
   const hydratedRef = useRef(false);
@@ -36,6 +36,7 @@ const DeferredDataScripts = () => {
       const deferredKeyPromiseStr = deferredKeys.map((key) => {
         if (pendingKeys.has(key)) {
           deferredDataScripts.push(/* @__PURE__ */ _jsx(DeferredDataScript, {
+            nonce: props === null || props === void 0 ? void 0 : props.nonce,
             data: deferredData.data[key],
             dataKey: key,
             routeId
@@ -71,6 +72,7 @@ const DeferredDataScripts = () => {
     children: [
       !hydratedRef.current && /* @__PURE__ */ _jsx("script", {
         async: true,
+        nonce: props === null || props === void 0 ? void 0 : props.nonce,
         suppressHydrationWarning: true,
         dangerouslySetInnerHTML: {
           __html: deferredScripts[0]
@@ -81,16 +83,18 @@ const DeferredDataScripts = () => {
     ]
   });
 };
-const DeferredDataScript = ({ data, routeId, dataKey }) => {
+const DeferredDataScript = ({ data, routeId, dataKey, nonce }) => {
   return /* @__PURE__ */ _jsx(Suspense, {
     children: typeof document === "undefined" && data && dataKey && routeId ? /* @__PURE__ */ _jsx(Await, {
       resolve: data,
       errorElement: /* @__PURE__ */ _jsx(ErrorDeferredDataScript, {
         routeId,
-        dataKey
+        dataKey,
+        nonce
       }),
       children: (data2) => /* @__PURE__ */ _jsx("script", {
         async: true,
+        nonce,
         suppressHydrationWarning: true,
         dangerouslySetInnerHTML: {
           __html: `_ROUTER_DATA.r(${JSON.stringify(routeId)}, ${JSON.stringify(dataKey)}, ${serializeJson(data2)});`
@@ -99,9 +103,10 @@ const DeferredDataScript = ({ data, routeId, dataKey }) => {
     }) : null
   });
 };
-const ErrorDeferredDataScript = ({ routeId, dataKey }) => {
+const ErrorDeferredDataScript = ({ routeId, dataKey, nonce }) => {
   const error = useAsyncError();
   return /* @__PURE__ */ _jsx("script", {
+    nonce,
     suppressHydrationWarning: true,
     dangerouslySetInnerHTML: {
       __html: `_ROUTER_DATA.r(${JSON.stringify(routeId)}, ${JSON.stringify(dataKey)}, ${void 0}, ${serializeJson({

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

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from "react";
 import { createBrowserRouter, createHashRouter, RouterProvider, createRoutesFromElements, useMatches, useLocation } from "@modern-js/utils/runtime/router";
 import hoistNonReactStatics from "hoist-non-react-statics";
 import { parsedJSONFromElement } from "@modern-js/utils/runtime-browser";
+import { RuntimeReactContext } from "../../core";
 import { modifyRoutes as modifyRoutesHook } from "./hooks";
 import { deserializeErrors, renderRoutes, urlJoin } from "./utils";
 export let finalRouteConfig = {
@@ -75,6 +77,8 @@ export const routerPlugin = ({ serverBase = [], supportHtml5History = true, base
                 basename: _basename,
                 hydrationData
               });
+              const runtimeContext = useContext(RuntimeReactContext);
+              runtimeContext.remixRouter = router;
               return /* @__PURE__ */ _jsx(App, {
                 ...props,
                 children: /* @__PURE__ */ _jsx(RouterProvider, {
@@ -95,6 +99,22 @@ export const routerPlugin = ({ serverBase = [], supportHtml5History = true, base
           return next({
             App: RouteApp
           });
+        },
+        pickContext: ({ context, pickedContext }, next) => {
+          const { remixRouter } = context;
+          const router = {
+            navigate: remixRouter.navigate,
+            get location() {
+              return remixRouter.state.location;
+            }
+          };
+          return next({
+            context,
+            pickedContext: {
+              ...pickedContext,
+              router
+            }
+          });
         }
       };
     }

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

@@ -49,12 +49,15 @@ export const routerPlugin = ({ basename = "", routesConfig, createRoutes }) => {
               context
             });
           }
-          const { request, mode: ssrMode } = context.ssrContext;
+          const { request, mode: ssrMode, nonce } = context.ssrContext;
           const baseUrl = request.baseUrl;
           const _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
           const routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
             routesConfig,
-            ssrMode
+            ssrMode,
+            props: {
+              nonce
+            }
           }));
           const { query } = createStaticHandler(routes, {
             basename: _basename
@@ -65,7 +68,7 @@ export const routerPlugin = ({ basename = "", routesConfig, createRoutes }) => {
             return routerContext;
           }
           const router = createStaticRouter(routes, routerContext);
-          context.router = router;
+          context.remixRouter = router;
           context.routerContext = routerContext;
           context.routes = routes;
           context.routeManifest = context.ssrContext.routeManifest;
@@ -83,11 +86,11 @@ export const routerPlugin = ({ basename = "", routesConfig, createRoutes }) => {
           }
           const getRouteApp = () => {
             return (props) => {
-              const { router, routerContext } = useContext(RuntimeReactContext);
+              const { remixRouter, routerContext } = useContext(RuntimeReactContext);
               return /* @__PURE__ */ _jsx(App, {
                 ...props,
                 children: /* @__PURE__ */ _jsx(StaticRouterProvider, {
-                  router,
+                  router: remixRouter,
                   context: routerContext,
                   hydrate: false
                 })
@@ -103,6 +106,22 @@ export const routerPlugin = ({ basename = "", routesConfig, createRoutes }) => {
           return next({
             App: RouteApp
           });
+        },
+        pickContext: ({ context, pickedContext }, next) => {
+          const { remixRouter } = context;
+          const router = {
+            navigate: remixRouter.navigate,
+            get location() {
+              return remixRouter.state.location;
+            }
+          };
+          return next({
+            context,
+            pickedContext: {
+              ...pickedContext,
+              router
+            }
+          });
         }
       };
     }

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

@@ -114,11 +114,16 @@ export default () => {
             imports
           };
         },
-        modifyEntryRuntimePlugins({ entrypoint, plugins }) {
+        modifyEntryRuntimePlugins({ entrypoint, plugins, bundlerConfigs }) {
           if (ssrConfigMap.get(entrypoint.entryName)) {
+            var _bundlerConfigs_find, _bundlerConfigs_find_output;
+            const chunkLoadingGlobal = (_bundlerConfigs_find = bundlerConfigs === null || bundlerConfigs === void 0 ? void 0 : bundlerConfigs.find((config) => config.name === "client")) === null || _bundlerConfigs_find === void 0 ? void 0 : (_bundlerConfigs_find_output = _bundlerConfigs_find.output) === null || _bundlerConfigs_find_output === void 0 ? void 0 : _bundlerConfigs_find_output.chunkLoadingGlobal;
             plugins.push({
               name: PLUGIN_IDENTIFIER,
-              options: JSON.stringify(ssrConfigMap.get(entrypoint.entryName))
+              options: JSON.stringify({
+                ...ssrConfigMap.get(entrypoint.entryName) || {},
+                chunkLoadingGlobal
+              })
             });
           }
           return {

package/dist/esm-node/ssr/index.js

@@ -39,6 +39,9 @@ export const ssr = (config) => {
                 context
               }));
             } else if (renderLevel === RenderLevel.SERVER_RENDER) {
+              const loadableReadyOptions = {
+                chunkLoadingGlobal: config.chunkLoadingGlobal
+              };
               if (isReact18()) {
                 loadableReady(() => {
                   let SSRApp = () => /* @__PURE__ */ _jsx(WithCallback, {
@@ -49,13 +52,13 @@ export const ssr = (config) => {
                   });
                   SSRApp = hoistNonReactStatics(SSRApp, App);
                   ModernHydrate(/* @__PURE__ */ _jsx(SSRApp, {}));
-                });
+                }, loadableReadyOptions);
               } else {
                 loadableReady(() => {
                   ModernHydrate(/* @__PURE__ */ _jsx(App, {
                     context: hydrateContext
                   }), callback);
-                });
+                }, loadableReadyOptions);
               }
             } else {
               console.warn(`unknow render level: ${renderLevel}, execute render()`);

package/dist/types/document/Style.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function Style(props: {
+  children?: string;
+  content?: string;
+}): JSX.Element;

package/dist/types/document/constants.d.ts

@@ -12,6 +12,8 @@ export declare const DOCUMENT_LINKS_PLACEHOLDER: string;
 export declare const DOCUMENT_NO_SCRIPTE_PLACEHOLDER: string;
 export declare const DOCUMENT_SCRIPT_PLACEHOLDER_START: string;
 export declare const DOCUMENT_SCRIPT_PLACEHOLDER_END: string;
+export declare const DOCUMENT_STYLE_PLACEHOLDER_START: string;
+export declare const DOCUMENT_STYLE_PLACEHOLDER_END: string;
 export declare const DOCUMENT_COMMENT_PLACEHOLDER_START: string;
 export declare const DOCUMENT_COMMENT_PLACEHOLDER_END: string;
 export declare const PLACEHOLDER_REPLACER_MAP: {

package/dist/types/document/index.d.ts

@@ -6,6 +6,7 @@ export * from './Body';
 export * from './Root';
 export * from './Links';
 export * from './Comment';
+export * from './Style';
 export * from './Scripts';
 export * from './Script';
 export * from './constants';

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

@@ -3,5 +3,7 @@
  * DeferredDataScripts only renders in server side,
  * it doesn't need to be hydrated in client side.
  */
-declare const DeferredDataScripts: () => JSX.Element | null;
+declare const DeferredDataScripts: (props?: {
+  nonce?: string;
+}) => JSX.Element | null;
 export default DeferredDataScripts;

package/dist/types/runtimeContext.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Store } from '@modern-js-reduck/store';
-import type { StaticHandlerContext } from '@modern-js/utils/runtime/remix-router';
+import { type StaticHandlerContext, type Router, type RouterState } from '@modern-js/utils/runtime/remix-router';
 import { createLoaderManager } from './core/loader/loaderManager';
 import { runtime } from './core/plugin';
 import { RouteManifest } from './router/runtime/types';
@@ -24,6 +24,10 @@ export interface BaseTRuntimeContext {
   request?: SSRServerContext['request'];
   response?: SSRServerContext['response'];
   store?: Store;
+  router?: {
+    navigate: Router['navigate'];
+    location: RouterState['location'];
+  };
 }
 export interface TRuntimeContext extends BaseTRuntimeContext {
   [key: string]: any;

package/dist/types/ssr/serverRender/types.d.ts

@@ -7,6 +7,7 @@ export type ModernSSRReactComponent = React.ComponentType<any>;
 export { RuntimeContext, RenderLevel };
 export type SSRPluginConfig = {
   crossorigin?: boolean | 'anonymous' | 'use-credentials';
+  chunkLoadingGlobal?: string;
 } & Exclude<ServerUserConfig['ssr'], boolean>;
 export type ServerRenderOptions = {
   App: ModernSSRReactComponent;

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.21.1",
+  "version": "2.22.1",
   "engines": {
     "node": ">=14.17.6"
   },
@@ -169,9 +169,9 @@
     "redux-logger": "^3.0.6",
     "styled-components": "^5.3.1",
     "@swc/helpers": "0.5.1",
-    "@modern-js/plugin": "2.21.1",
-    "@modern-js/types": "2.21.1",
-    "@modern-js/utils": "2.21.1"
+    "@modern-js/plugin": "2.22.1",
+    "@modern-js/types": "2.22.1",
+    "@modern-js/utils": "2.22.1"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -191,11 +191,12 @@
     "react-dom": "^18",
     "ts-jest": "^29.1.0",
     "typescript": "^5",
-    "@modern-js/app-tools": "2.21.1",
-    "@modern-js/core": "2.21.1",
-    "@modern-js/server-core": "2.21.1",
-    "@scripts/jest-config": "2.21.1",
-    "@scripts/build": "2.21.1"
+    "webpack": "^5.82.1",
+    "@modern-js/app-tools": "2.22.1",
+    "@modern-js/core": "2.22.1",
+    "@modern-js/server-core": "2.22.1",
+    "@scripts/build": "2.22.1",
+    "@scripts/jest-config": "2.22.1"
   },
   "sideEffects": false,
   "modernConfig": {},