@modern-js/runtime 2.22.0 → 2.22.1

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

@@ -52,6 +52,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;
   },
@@ -81,6 +87,8 @@ 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 = {

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.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

@@ -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.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

@@ -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.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

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/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.22.0",
+  "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.22.0",
-    "@modern-js/types": "2.22.0",
-    "@modern-js/utils": "2.22.0"
+    "@modern-js/plugin": "2.22.1",
+    "@modern-js/types": "2.22.1",
+    "@modern-js/utils": "2.22.1"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -192,11 +192,11 @@
     "ts-jest": "^29.1.0",
     "typescript": "^5",
     "webpack": "^5.82.1",
-    "@modern-js/app-tools": "2.22.0",
-    "@modern-js/core": "2.22.0",
-    "@modern-js/server-core": "2.22.0",
-    "@scripts/build": "2.22.0",
-    "@scripts/jest-config": "2.22.0"
+    "@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": {},