@modern-js/runtime 2.22.0 → 2.22.2-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @modern-js/runtime
 
+## 2.22.1
+
+### Patch Changes
+
+- e2848a2: fix: support nonce in streaming SSR
+  fix: 在 streaming SSR 中支持 nonce
+- 9b69987: feat: support Style component to use style with some <> special chartset
+  feat: 支持 Style 组件,用于渲染含 <> 等特殊字符
+- Updated dependencies [25b490a]
+- Updated dependencies [e2848a2]
+- Updated dependencies [d4045ed]
+  - @modern-js/types@2.22.1
+  - @modern-js/utils@2.22.1
+  - @modern-js/plugin@2.22.1
+
 ## 2.22.0
 
 ### Minor Changes

package/dist/cjs/document/Html.js

@@ -37,7 +37,7 @@ function findTargetElement(tag, children) {
   return findTargetElement(tag, nextChildren);
 }
 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));
@@ -70,6 +70,7 @@ function Html(props) {
     });
   }
   return /* @__PURE__ */ (0, _jsxruntime.jsx)("html", {
+    ...rest,
     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_DocumentStructureContext.DocumentStructureContext.Provider, {
       value: {
         hasSetHead,

package/dist/cjs/document/Style.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Style", {
+  enumerable: true,
+  get: function() {
+    return Style;
+  }
+});
+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 _constants = require("./constants");
+function Style(props) {
+  const { content, children } = props;
+  const contentStr = children || content;
+  const contentIIFE = encodeURIComponent(`(${contentStr})()`);
+  return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    children: [
+      `${_constants.DOCUMENT_STYLE_PLACEHOLDER_START}`,
+      `${contentIIFE}`,
+      `${_constants.DOCUMENT_STYLE_PLACEHOLDER_END}`
+    ]
+  });
+}

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

@@ -146,6 +146,9 @@ const _default = () => {
             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_STYLE_PLACEHOLDER_START) && html.includes(_constants.DOCUMENT_STYLE_PLACEHOLDER_END)) {
+            html = html.replace(new RegExp(`${_constants.DOCUMENT_STYLE_PLACEHOLDER_START}(.*?)${_constants.DOCUMENT_STYLE_PLACEHOLDER_END}`, "g"), (_styleStr, $1) => `<style>${decodeURIComponent($1)}</style>`);
+          }
           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/document/constants.js

@@ -19,9 +19,6 @@ _export(exports, {
   HTML_SEPARATOR: function() {
     return HTML_SEPARATOR;
   },
-  HTML_CHUNKSMAP_SEPARATOR: function() {
-    return HTML_CHUNKSMAP_SEPARATOR;
-  },
   HTML_SSRDATASCRIPT_SEPARATOR: function() {
     return HTML_SSRDATASCRIPT_SEPARATOR;
   },
@@ -52,6 +49,12 @@ _export(exports, {
   DOCUMENT_SCRIPT_PLACEHOLDER_END: function() {
     return DOCUMENT_SCRIPT_PLACEHOLDER_END;
   },
+  DOCUMENT_STYLE_PLACEHOLDER_START: function() {
+    return DOCUMENT_STYLE_PLACEHOLDER_START;
+  },
+  DOCUMENT_STYLE_PLACEHOLDER_END: function() {
+    return DOCUMENT_STYLE_PLACEHOLDER_END;
+  },
   DOCUMENT_COMMENT_PLACEHOLDER_START: function() {
     return DOCUMENT_COMMENT_PLACEHOLDER_START;
   },
@@ -62,6 +65,7 @@ _export(exports, {
     return PLACEHOLDER_REPLACER_MAP;
   }
 });
+const _constants = require("@modern-js/utils/universal/constants");
 const DOC_EXT = [
   "jsx",
   "tsx",
@@ -70,10 +74,9 @@ const DOC_EXT = [
 ];
 const DOCUMENT_META_PLACEHOLDER = encodeURIComponent("<%= meta %>");
 const HTML_SEPARATOR = "<!--<?- html ?>-->";
-const HTML_CHUNKSMAP_SEPARATOR = "<!--<?- chunksMap.js ?>-->";
 const HTML_SSRDATASCRIPT_SEPARATOR = "<!--<?- SSRDataScript ?>-->";
 const DOCUMENT_SSR_PLACEHOLDER = encodeURIComponent(HTML_SEPARATOR);
-const DOCUMENT_CHUNKSMAP_PLACEHOLDER = encodeURIComponent(HTML_CHUNKSMAP_SEPARATOR);
+const DOCUMENT_CHUNKSMAP_PLACEHOLDER = encodeURIComponent(_constants.HTML_CHUNKSMAP_SEPARATOR);
 const DOCUMENT_SSRDATASCRIPT_PLACEHOLDER = encodeURIComponent(HTML_SSRDATASCRIPT_SEPARATOR);
 const DOCUMENT_FILE_NAME = "Document";
 const DOCUMENT_SCRIPTS_PLACEHOLDER = encodeURIComponent("<!-- chunk scripts placeholder -->");
@@ -81,11 +84,13 @@ const DOCUMENT_LINKS_PLACEHOLDER = encodeURIComponent("<!-- chunk links placehol
 const DOCUMENT_NO_SCRIPTE_PLACEHOLDER = encodeURIComponent("<!-- no-script -->");
 const DOCUMENT_SCRIPT_PLACEHOLDER_START = encodeURIComponent("<!-- script-start -->");
 const DOCUMENT_SCRIPT_PLACEHOLDER_END = encodeURIComponent("<!-- script-end -->");
+const DOCUMENT_STYLE_PLACEHOLDER_START = encodeURIComponent("<!-- style-start -->");
+const DOCUMENT_STYLE_PLACEHOLDER_END = encodeURIComponent("<!-- style-end -->");
 const DOCUMENT_COMMENT_PLACEHOLDER_START = encodeURIComponent("<!-- comment-start -->");
 const DOCUMENT_COMMENT_PLACEHOLDER_END = encodeURIComponent("<!-- comment-end -->");
 const PLACEHOLDER_REPLACER_MAP = {
   [DOCUMENT_NO_SCRIPTE_PLACEHOLDER]: `We're sorry but react app doesn't work properly without JavaScript enabled. Please enable it to continue.`,
   [DOCUMENT_SSR_PLACEHOLDER]: HTML_SEPARATOR,
-  [DOCUMENT_CHUNKSMAP_PLACEHOLDER]: HTML_CHUNKSMAP_SEPARATOR,
+  [DOCUMENT_CHUNKSMAP_PLACEHOLDER]: _constants.HTML_CHUNKSMAP_SEPARATOR,
   [DOCUMENT_SSRDATASCRIPT_PLACEHOLDER]: HTML_SSRDATASCRIPT_SEPARATOR
 };

package/dist/cjs/document/index.js

@@ -11,6 +11,7 @@ _export_star._(require("./Body"), exports);
 _export_star._(require("./Root"), exports);
 _export_star._(require("./Links"), exports);
 _export_star._(require("./Comment"), exports);
+_export_star._(require("./Style"), exports);
 _export_star._(require("./Scripts"), exports);
 _export_star._(require("./Script"), exports);
 _export_star._(require("./constants"), exports);

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

@@ -17,7 +17,7 @@ const _utils = require("./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 = (0, _react.useContext)(_router.UNSAFE_DataRouterContext);
   const { staticContext } = context || {};
   const hydratedRef = (0, _react.useRef)(false);
@@ -46,6 +46,7 @@ const DeferredDataScripts = () => {
       const deferredKeyPromiseStr = deferredKeys.map((key) => {
         if (pendingKeys.has(key)) {
           deferredDataScripts.push(/* @__PURE__ */ (0, _jsxruntime.jsx)(DeferredDataScript, {
+            nonce: props === null || props === void 0 ? void 0 : props.nonce,
             data: deferredData.data[key],
             dataKey: key,
             routeId
@@ -81,6 +82,7 @@ const DeferredDataScripts = () => {
     children: [
       !hydratedRef.current && /* @__PURE__ */ (0, _jsxruntime.jsx)("script", {
         async: true,
+        nonce: props === null || props === void 0 ? void 0 : props.nonce,
         suppressHydrationWarning: true,
         dangerouslySetInnerHTML: {
           __html: deferredScripts[0]
@@ -91,16 +93,18 @@ const DeferredDataScripts = () => {
     ]
   });
 };
-const DeferredDataScript = ({ data, routeId, dataKey }) => {
+const DeferredDataScript = ({ data, routeId, dataKey, nonce }) => {
   return /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
     children: typeof document === "undefined" && data && dataKey && routeId ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_router.Await, {
       resolve: data,
       errorElement: /* @__PURE__ */ (0, _jsxruntime.jsx)(ErrorDeferredDataScript, {
         routeId,
-        dataKey
+        dataKey,
+        nonce
       }),
       children: (data2) => /* @__PURE__ */ (0, _jsxruntime.jsx)("script", {
         async: true,
+        nonce,
         suppressHydrationWarning: true,
         dangerouslySetInnerHTML: {
           __html: `_ROUTER_DATA.r(${JSON.stringify(routeId)}, ${JSON.stringify(dataKey)}, ${(0, _runtimenode.serializeJson)(data2)});`
@@ -109,9 +113,10 @@ const DeferredDataScript = ({ data, routeId, dataKey }) => {
     }) : null
   });
 };
-const ErrorDeferredDataScript = ({ routeId, dataKey }) => {
+const ErrorDeferredDataScript = ({ routeId, dataKey, nonce }) => {
   const error = (0, _router.useAsyncError)();
   return /* @__PURE__ */ (0, _jsxruntime.jsx)("script", {
+    nonce,
     suppressHydrationWarning: true,
     dangerouslySetInnerHTML: {
       __html: `_ROUTER_DATA.r(${JSON.stringify(routeId)}, ${JSON.stringify(dataKey)}, ${void 0}, ${(0, _runtimenode.serializeJson)({

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

@@ -105,7 +105,22 @@ const routerPlugin = ({ serverBase = [], supportHtml5History = true, basename =
                 hydrationData
               });
               const runtimeContext = (0, _react.useContext)(_core.RuntimeReactContext);
-              runtimeContext.remixRouter = router;
+              Object.defineProperty(runtimeContext, "remixRouter", {
+                get() {
+                  return router;
+                }
+              });
+              const originSubscribe = router.subscribe;
+              router.subscribe = (listener) => {
+                const wrapedListener = (...args) => {
+                  const blockRoute = runtimeContext.unstable_blockRoute;
+                  if (blockRoute) {
+                    return;
+                  }
+                  return listener(...args);
+                };
+                return originSubscribe(wrapedListener);
+              };
               return /* @__PURE__ */ (0, _jsxruntime.jsx)(App, {
                 ...props,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_router.RouterProvider, {

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

@@ -73,12 +73,15 @@ 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 === "/" ? (0, _utils.urlJoin)(baseUrl, basename) : baseUrl;
           const routes = createRoutes ? createRoutes() : (0, _router1.createRoutesFromElements)((0, _utils.renderRoutes)({
             routesConfig,
-            ssrMode
+            ssrMode,
+            props: {
+              nonce
+            }
           }));
           const { query } = (0, _remixrouter.createStaticHandler)(routes, {
             basename: _basename

package/dist/esm/document/Html.js

@@ -1,3 +1,6 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Body } from "./Body";
 import { DocumentStructureContext } from "./DocumentStructureContext";
@@ -44,7 +47,9 @@ function findTargetElement(tag, children) {
   return findTargetElement(tag, nextChildren);
 }
 export function Html(props) {
-  var children = props.children;
+  var children = props.children, rest = _object_without_properties(props, [
+    "children"
+  ]);
   var hasSetHead = Boolean(findTargetChild("Head", children));
   var hasSetScripts = Boolean(findTargetElement("Scripts", children));
   var hasSetLinks = Boolean(findTargetElement("Links", children));
@@ -78,7 +83,7 @@ export function Html(props) {
       })
     });
   }
-  return /* @__PURE__ */ _jsx("html", {
+  return /* @__PURE__ */ _jsx("html", _object_spread_props(_object_spread({}, rest), {
     children: /* @__PURE__ */ _jsxs(DocumentStructureContext.Provider, {
       value: {
         hasSetHead: hasSetHead,
@@ -94,5 +99,5 @@ export function Html(props) {
         children
       ]
     })
-  });
+  }));
 }

package/dist/esm/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) {
+  var content = props.content, children = props.children;
+  var contentStr = children || content;
+  var contentIIFE = encodeURIComponent("(".concat(contentStr, ")()"));
+  return /* @__PURE__ */ _jsxs(_Fragment, {
+    children: [
+      "".concat(DOCUMENT_STYLE_PLACEHOLDER_START),
+      "".concat(contentIIFE),
+      "".concat(DOCUMENT_STYLE_PLACEHOLDER_END)
+    ]
+  });
+}

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

@@ -8,7 +8,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";
 var debug = createDebugger("html_genarate");
 export var getDocumenByEntryName = function getDocumenByEntryName2(entrypoints, entryName, fallbackDir) {
   var _entrypoints_find;
@@ -180,6 +180,11 @@ export default function() {
                           return "<script ".concat(nonceAttr, ">").concat(decodeURIComponent($1), "</script>");
                         });
                       }
+                      if (html.includes(DOCUMENT_STYLE_PLACEHOLDER_START) && html.includes(DOCUMENT_STYLE_PLACEHOLDER_END)) {
+                        html = html.replace(new RegExp("".concat(DOCUMENT_STYLE_PLACEHOLDER_START, "(.*?)").concat(DOCUMENT_STYLE_PLACEHOLDER_END), "g"), function(_styleStr, $1) {
+                          return "<style>".concat(decodeURIComponent($1), "</style>");
+                        });
+                      }
                       if (html.includes(DOCUMENT_COMMENT_PLACEHOLDER_START) && html.includes(DOCUMENT_COMMENT_PLACEHOLDER_END)) {
                         html = html.replace(new RegExp("".concat(DOCUMENT_COMMENT_PLACEHOLDER_START, "(.*?)").concat(DOCUMENT_COMMENT_PLACEHOLDER_END), "g"), function(_scriptStr, $1) {
                           return "".concat(decodeURIComponent($1));

package/dist/esm/document/constants.js

@@ -1,4 +1,5 @@
 import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { HTML_CHUNKSMAP_SEPARATOR } from "@modern-js/utils/universal/constants";
 export var DOC_EXT = [
   "jsx",
   "tsx",
@@ -7,7 +8,6 @@ export var DOC_EXT = [
 ];
 export var DOCUMENT_META_PLACEHOLDER = encodeURIComponent("<%= meta %>");
 export var HTML_SEPARATOR = "<!--<?- html ?>-->";
-export var HTML_CHUNKSMAP_SEPARATOR = "<!--<?- chunksMap.js ?>-->";
 export var HTML_SSRDATASCRIPT_SEPARATOR = "<!--<?- SSRDataScript ?>-->";
 export var DOCUMENT_SSR_PLACEHOLDER = encodeURIComponent(HTML_SEPARATOR);
 export var DOCUMENT_CHUNKSMAP_PLACEHOLDER = encodeURIComponent(HTML_CHUNKSMAP_SEPARATOR);
@@ -18,6 +18,8 @@ export var DOCUMENT_LINKS_PLACEHOLDER = encodeURIComponent("<!-- chunk links pla
 export var DOCUMENT_NO_SCRIPTE_PLACEHOLDER = encodeURIComponent("<!-- no-script -->");
 export var DOCUMENT_SCRIPT_PLACEHOLDER_START = encodeURIComponent("<!-- script-start -->");
 export var DOCUMENT_SCRIPT_PLACEHOLDER_END = encodeURIComponent("<!-- script-end -->");
+export var DOCUMENT_STYLE_PLACEHOLDER_START = encodeURIComponent("<!-- style-start -->");
+export var DOCUMENT_STYLE_PLACEHOLDER_END = encodeURIComponent("<!-- style-end -->");
 export var DOCUMENT_COMMENT_PLACEHOLDER_START = encodeURIComponent("<!-- comment-start -->");
 export var DOCUMENT_COMMENT_PLACEHOLDER_END = encodeURIComponent("<!-- comment-end -->");
 var _obj;

package/dist/esm/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/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,5 +1,6 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 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";
@@ -86,7 +87,25 @@ export var routerPlugin = function(param) {
                 hydrationData: hydrationData
               });
               var runtimeContext = useContext(RuntimeReactContext);
-              runtimeContext.remixRouter = router;
+              Object.defineProperty(runtimeContext, "remixRouter", {
+                get: function get() {
+                  return router;
+                }
+              });
+              var originSubscribe = router.subscribe;
+              router.subscribe = function(listener) {
+                var wrapedListener = function() {
+                  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                    args[_key] = arguments[_key];
+                  }
+                  var blockRoute = runtimeContext.unstable_blockRoute;
+                  if (blockRoute) {
+                    return;
+                  }
+                  return listener.apply(void 0, _to_consumable_array(args));
+                };
+                return originSubscribe(wrapedListener);
+              };
               return /* @__PURE__ */ _jsx(App, _object_spread_props(_object_spread({}, props), {
                 children: /* @__PURE__ */ _jsx(RouterProvider, {
                   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

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

@@ -1,3 +1,4 @@
+import { HTML_CHUNKSMAP_SEPARATOR } from "@modern-js/utils/universal/constants";
 export const DOC_EXT = [
   "jsx",
   "tsx",
@@ -6,7 +7,6 @@ export const DOC_EXT = [
 ];
 export const DOCUMENT_META_PLACEHOLDER = encodeURIComponent("<%= meta %>");
 export const HTML_SEPARATOR = "<!--<?- html ?>-->";
-export const HTML_CHUNKSMAP_SEPARATOR = "<!--<?- chunksMap.js ?>-->";
 export const HTML_SSRDATASCRIPT_SEPARATOR = "<!--<?- SSRDataScript ?>-->";
 export const DOCUMENT_SSR_PLACEHOLDER = encodeURIComponent(HTML_SEPARATOR);
 export const DOCUMENT_CHUNKSMAP_PLACEHOLDER = encodeURIComponent(HTML_CHUNKSMAP_SEPARATOR);
@@ -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

@@ -78,7 +78,22 @@ export const routerPlugin = ({ serverBase = [], supportHtml5History = true, base
                 hydrationData
               });
               const runtimeContext = useContext(RuntimeReactContext);
-              runtimeContext.remixRouter = router;
+              Object.defineProperty(runtimeContext, "remixRouter", {
+                get() {
+                  return router;
+                }
+              });
+              const originSubscribe = router.subscribe;
+              router.subscribe = (listener) => {
+                const wrapedListener = (...args) => {
+                  const blockRoute = runtimeContext.unstable_blockRoute;
+                  if (blockRoute) {
+                    return;
+                  }
+                  return listener(...args);
+                };
+                return originSubscribe(wrapedListener);
+              };
               return /* @__PURE__ */ _jsx(App, {
                 ...props,
                 children: /* @__PURE__ */ _jsx(RouterProvider, {