@modern-js/runtime 2.13.4 → 2.15.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @modern-js/runtime
 
+## 2.15.0
+
+### Patch Changes
+
+- 09a3e57: chore(runtime): remove unused @testing-library/react-hooks
+
+  chore(runtime): 移除多余的 @testing-library/react-hooks
+
+  - @modern-js/plugin@2.15.0
+  - @modern-js/types@2.15.0
+  - @modern-js/utils@2.15.0
+
+## 2.14.0
+
+### Patch Changes
+
+- c921f30: fix: the streaming ssr may add repeated css assets, because the route-manifets would product all css link
+  fix: 因为 route-manifets 会生成所有 css link 信息，导致 streaming ssr 可能添加重复的 css 资源，
+- ead58c8: feat: support Comment component in Document.tsx
+  feat: 支持 Comment 组件,可以保留用户的注释到最终的 html 上
+- afe5d35: feat: add hook `modifyRoutes`
+  feat: 增加 hook `modifyRoutes`
+- 4c74ea7: fix: ssr and document integration test error
+  fix: 修复 ssr 和 document 的集测错误
+- 76ad173: feat: re-export `createPath` from react-router
+  feat: 从 react-router 导出 `createPath`
+- 394470c: fix: router missing App static property
+  fix: router 确实 App 的静态属性
+- 8b634f9: fix: 更新集测 snapshot，修复 document 功能在 node 14 下的错误
+  fix: update test snapshot, fix document error in node 14
+- 1b3afa0: fix: ssr stream test case
+  fix: 修复 ssr stream 测试用例
+- 28721cb: fix(runtime): MODERN_TARGET is not injected when using Rspack
+
+  fix(runtime): 修复 Rspack 模式未注入 MODERN_TARGET 的问题
+
+- 60a81d0: feat: add ssr.inlineScript for use inline json instead inline script when ssr
+  feat: 添加 ssr.inlineScript 用于在 ssr 模式下使用内联 json 而不是内联脚本
+- Updated dependencies [4779152]
+- Updated dependencies [9321bef]
+- Updated dependencies [9b45c58]
+- Updated dependencies [52d0cb1]
+- Updated dependencies [60a81d0]
+- Updated dependencies [dacef96]
+- Updated dependencies [16399fd]
+  - @modern-js/utils@2.14.0
+  - @modern-js/types@2.14.0
+  - @modern-js/plugin@2.14.0
+
 ## 2.13.4
 
 ### Patch Changes

package/dist/cjs/document/Comment.js

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Comment_exports = {};
+__export(Comment_exports, {
+  Comment: () => Comment
+});
+module.exports = __toCommonJS(Comment_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_constants = require("./constants");
+function Comment(props) {
+  const { comment, children } = props;
+  const commentStr = encodeURIComponent(children || comment || "");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    `${import_constants.DOCUMENT_COMMENT_PLACEHOLDER_START}`,
+    `${commentStr}`,
+    `${import_constants.DOCUMENT_COMMENT_PLACEHOLDER_END}`
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Comment
+});

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

@@ -163,7 +163,7 @@ var cli_default = () => ({
           ).join("")
         ].join("");
         if (html.includes(import_constants.DOCUMENT_SCRIPT_PLACEHOLDER_START) && html.includes(import_constants.DOCUMENT_SCRIPT_PLACEHOLDER_END)) {
-          html = html.replaceAll(
+          html = html.replace(
             new RegExp(
               `${import_constants.DOCUMENT_SCRIPT_PLACEHOLDER_START}(.*?)${import_constants.DOCUMENT_SCRIPT_PLACEHOLDER_END}`,
               "g"
@@ -171,6 +171,15 @@ var cli_default = () => ({
             (_scriptStr, $1) => `<script>${decodeURIComponent($1)}</script>`
           );
         }
+        if (html.includes(import_constants.DOCUMENT_COMMENT_PLACEHOLDER_START) && html.includes(import_constants.DOCUMENT_COMMENT_PLACEHOLDER_END)) {
+          html = html.replace(
+            new RegExp(
+              `${import_constants.DOCUMENT_COMMENT_PLACEHOLDER_START}(.*?)${import_constants.DOCUMENT_COMMENT_PLACEHOLDER_END}`,
+              "g"
+            ),
+            (_scriptStr, $1) => `${decodeURIComponent($1)}`
+          );
+        }
         const finalHtml = `<!DOCTYPE html>${html}`.replace(import_constants.DOCUMENT_META_PLACEHOLDER, metas).replace(import_constants.DOCUMENT_SSR_PLACEHOLDER, import_constants.HTML_SEPARATOR).replace(import_constants.DOCUMENT_SCRIPTS_PLACEHOLDER, scripts).replace(import_constants.DOCUMENT_LINKS_PLACEHOLDER, links).replace(
           import_constants.DOCUMENT_CHUNKSMAP_PLACEHOLDER,
           import_constants.PLACEHOLDER_REPLACER_MAP[import_constants.DOCUMENT_CHUNKSMAP_PLACEHOLDER]

package/dist/cjs/document/constants.js

@@ -18,6 +18,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var constants_exports = {};
 __export(constants_exports, {
   DOCUMENT_CHUNKSMAP_PLACEHOLDER: () => DOCUMENT_CHUNKSMAP_PLACEHOLDER,
+  DOCUMENT_COMMENT_PLACEHOLDER_END: () => DOCUMENT_COMMENT_PLACEHOLDER_END,
+  DOCUMENT_COMMENT_PLACEHOLDER_START: () => DOCUMENT_COMMENT_PLACEHOLDER_START,
   DOCUMENT_FILE_NAME: () => DOCUMENT_FILE_NAME,
   DOCUMENT_LINKS_PLACEHOLDER: () => DOCUMENT_LINKS_PLACEHOLDER,
   DOCUMENT_META_PLACEHOLDER: () => DOCUMENT_META_PLACEHOLDER,
@@ -60,6 +62,12 @@ const DOCUMENT_SCRIPT_PLACEHOLDER_START = encodeURIComponent(
 const DOCUMENT_SCRIPT_PLACEHOLDER_END = encodeURIComponent(
   "<!-- script-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,
@@ -69,6 +77,8 @@ const PLACEHOLDER_REPLACER_MAP = {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DOCUMENT_CHUNKSMAP_PLACEHOLDER,
+  DOCUMENT_COMMENT_PLACEHOLDER_END,
+  DOCUMENT_COMMENT_PLACEHOLDER_START,
   DOCUMENT_FILE_NAME,
   DOCUMENT_LINKS_PLACEHOLDER,
   DOCUMENT_META_PLACEHOLDER,

package/dist/cjs/document/index.js

@@ -21,6 +21,7 @@ __reExport(document_exports, require("./Head"), module.exports);
 __reExport(document_exports, require("./Body"), module.exports);
 __reExport(document_exports, require("./Root"), module.exports);
 __reExport(document_exports, require("./Links"), module.exports);
+__reExport(document_exports, require("./Comment"), module.exports);
 __reExport(document_exports, require("./Scripts"), module.exports);
 __reExport(document_exports, require("./Script"), module.exports);
 __reExport(document_exports, require("./constants"), module.exports);

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

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var hooks_exports = {};
+__export(hooks_exports, {
+  modifyRoutes: () => modifyRoutes
+});
+module.exports = __toCommonJS(hooks_exports);
+var import_plugin = require("@modern-js/plugin");
+const modifyRoutes = (0, import_plugin.createWaterfall)();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  modifyRoutes
+});

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

@@ -35,6 +35,7 @@ __export(runtime_exports, {
   createBrowserRouter: () => import_react_router_dom.createBrowserRouter,
   createHashRouter: () => import_react_router_dom.createHashRouter,
   createMemoryRouter: () => import_react_router_dom.createMemoryRouter,
+  createPath: () => import_react_router_dom.createPath,
   createRoutesFromChildren: () => import_react_router_dom.createRoutesFromChildren,
   createRoutesFromElements: () => import_react_router_dom.createRoutesFromElements,
   createSearchParams: () => import_react_router_dom.createSearchParams,
@@ -104,6 +105,7 @@ var runtime_default = import_plugin.routerPlugin;
   createBrowserRouter,
   createHashRouter,
   createMemoryRouter,
+  createPath,
   createRoutesFromChildren,
   createRoutesFromElements,
   createSearchParams,

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

@@ -36,6 +36,8 @@ module.exports = __toCommonJS(plugin_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_router_dom = require("react-router-dom");
 var import_hoist_non_react_statics = __toESM(require("hoist-non-react-statics"));
+var import_runtime = require("@modern-js/utils/runtime");
+var import_hooks = require("./hooks");
 var import_utils = require("./utils");
 let finalRouteConfig = {
   routes: []
@@ -62,9 +64,13 @@ const routerPlugin = ({
   const select = (pathname) => serverBase.find((baseUrl) => pathname.search(baseUrl) === 0) || "/";
   let routes = [];
   finalRouteConfig = routesConfig;
+  window._SERVER_DATA = (0, import_runtime.parsedJSONFromElement)("__MODERN_SERVER_DATA__");
   return {
     name: "@modern-js/plugin-router",
-    setup: () => {
+    registerHook: {
+      modifyRoutes: import_hooks.modifyRoutes
+    },
+    setup: (api) => {
       return {
         init({ context }, next) {
           context.router = {
@@ -92,6 +98,8 @@ const routerPlugin = ({
                   props
                 })
               );
+              const runner = api.useHookRunners();
+              routes = runner.modifyRoutes(routes);
               const baseUrl = ((_a = window._SERVER_DATA) == null ? void 0 : _a.router.baseUrl) || select(location.pathname);
               const _basename = baseUrl === "/" ? (0, import_utils.urlJoin)(baseUrl, basename) : baseUrl;
               let hydrationData = window._ROUTER_DATA;
@@ -111,7 +119,10 @@ const routerPlugin = ({
               return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.RouterProvider, { router }) });
             };
           };
-          const RouteApp = getRouteApp();
+          let RouteApp = getRouteApp();
+          if (App) {
+            RouteApp = (0, import_hoist_non_react_statics.default)(RouteApp, App);
+          }
           if (routesConfig == null ? void 0 : routesConfig.globalApp) {
             return next({
               App: (0, import_hoist_non_react_statics.default)(RouteApp, routesConfig.globalApp)

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

@@ -41,6 +41,7 @@ var import_react_router_dom = require("react-router-dom");
 var import_core = require("../../core");
 var import_utils = require("./utils");
 var import_fetch = require("./fetch");
+var import_hooks = require("./hooks");
 (0, import_fetch.installGlobals)();
 function createFetchRequest(req) {
   const origin = `${req.protocol}://${req.host}`;
@@ -75,7 +76,10 @@ const routerPlugin = ({
 }) => {
   return {
     name: "@modern-js/plugin-router",
-    setup: () => {
+    registerHook: {
+      modifyRoutes: import_hooks.modifyRoutes
+    },
+    setup: (api) => {
       return {
         async init({ context }, next) {
           if (!routesConfig && !createRoutes) {
@@ -103,6 +107,8 @@ const routerPlugin = ({
           context.routerContext = routerContext;
           context.routes = routes;
           context.routeManifest = context.ssrContext.routeManifest;
+          const runner = api.useHookRunners();
+          runner.modifyRoutes(routes);
           return next({ context });
         },
         hoc: ({ App }, next) => {

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

@@ -80,6 +80,9 @@ var cli_default = () => ({
               // ensure that all packages use the same storage in @modern-js/utils/ssr
               "@modern-js/utils/ssr": require.resolve("@modern-js/utils/ssr"),
               "@modern-js/runtime/plugins": pluginsExportsUtils.getPath()
+            },
+            globalVars: (values, { target }) => {
+              values["process.env.MODERN_TARGET"] = target === "node" || target === "service-worker" ? "node" : "browser";
             }
           },
           tools: {
@@ -91,21 +94,6 @@ var cli_default = () => ({
                   { filename: import_utils.LOADABLE_STATS_FILE }
                 ]);
               }
-              const modernVars = {
-                [`process.env.MODERN_TARGET`]: JSON.stringify(
-                  isServer || isServiceWorker ? "node" : "browser"
-                )
-              };
-              chain.plugin(CHAIN_ID.PLUGIN.DEFINE).tap((args) => {
-                const [vars, ...rest] = args;
-                return [
-                  {
-                    ...vars,
-                    ...modernVars
-                  },
-                  ...rest
-                ];
-              });
             },
             babel: babelConfig
           }

package/dist/cjs/ssr/index.js

@@ -35,14 +35,20 @@ module.exports = __toCommonJS(ssr_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_component = require("@loadable/component");
 var import_hoist_non_react_statics = __toESM(require("hoist-non-react-statics"));
+var import_runtime = require("@modern-js/utils/runtime");
 var import_types = require("./serverRender/types");
 var import_withCallback = require("./react/withCallback");
 var import_utils = require("./utils");
+var import_utils2 = require("./serverRender/utils");
 __reExport(ssr_exports, require("./react"), module.exports);
 const ssr = (config) => ({
   name: "@modern-js/plugin-ssr",
   setup: () => {
     const mockResp = (0, import_utils.mockResponse)();
+    if (config.inlineScript === false) {
+      window._SSR_DATA = (0, import_runtime.parsedJSONFromElement)(import_utils2.SSR_DATA_JSON_ID);
+      window._ROUTER_DATA = (0, import_runtime.parsedJSONFromElement)(import_utils2.ROUTER_DATA_JSON_ID);
+    }
     return {
       client: async ({ App, context, ModernRender, ModernHydrate }) => {
         var _a;

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

@@ -73,7 +73,7 @@ function getHeadTemplate(beforeEntryTemplate, context) {
           if (routeManifest2) {
             const { referenceCssAssets = [] } = routeManifest2;
             const _cssChunks = referenceCssAssets.filter(
-              (asset) => asset == null ? void 0 : asset.endsWith(".css")
+              (asset) => (asset == null ? void 0 : asset.endsWith(".css")) && !headTemplate2.includes(asset)
             );
             cssChunks.push(..._cssChunks);
           }

package/dist/cjs/ssr/serverRender/renderToString/entry.js

@@ -39,6 +39,7 @@ var import_helmet = __toESM(require("../helmet"));
 var import_types = require("../types");
 var import_time = require("../time");
 var import_prefetch = __toESM(require("../../prefetch"));
+var import_utils2 = require("../utils");
 var import_template = require("./template");
 var import_reduce = require("./reduce");
 var loadableRenderer = __toESM(require("./loadable"));
@@ -172,14 +173,14 @@ class Entry {
     return html;
   }
   getSSRDataScript(templateData, routerData) {
-    let ssrDataScripts = `<script>window._SSR_DATA = ${(0, import_serialize.serializeJson)(
-      templateData
-    )}</script>`;
+    const useInlineScript = this.pluginConfig.inlineScript !== false;
+    const ssrData = (0, import_serialize.serializeJson)(templateData);
+    let ssrDataScripts = useInlineScript ? `<script>window._SSR_DATA = ${ssrData}</script>` : `<script type="application/json" id="${import_utils2.SSR_DATA_JSON_ID}">${ssrData}</script>`;
     if (routerData) {
-      ssrDataScripts += `
-<script>window._ROUTER_DATA = ${(0, import_serialize.serializeJson)(
-        routerData
-      )}</script>`;
+      const serializedRouterData = (0, import_serialize.serializeJson)(routerData);
+      ssrDataScripts += useInlineScript ? `
+<script>window._ROUTER_DATA = ${serializedRouterData}</script>` : `
+<script type="application/json" id="${import_utils2.ROUTER_DATA_JSON_ID}">${serializedRouterData}</script>`;
     }
     return {
       SSRDataScript: ssrDataScripts

package/dist/cjs/ssr/serverRender/utils.js

@@ -18,10 +18,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var utils_exports = {};
 __export(utils_exports, {
   CSS_CHUNKS_PLACEHOLDER: () => CSS_CHUNKS_PLACEHOLDER,
+  ROUTER_DATA_JSON_ID: () => ROUTER_DATA_JSON_ID,
+  SSR_DATA_JSON_ID: () => SSR_DATA_JSON_ID,
   getLoadableScripts: () => getLoadableScripts
 });
 module.exports = __toCommonJS(utils_exports);
 const CSS_CHUNKS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
+const SSR_DATA_JSON_ID = "__MODERN_SSR_DATA__";
+const ROUTER_DATA_JSON_ID = "__MODERN_ROUTER_DATA__";
 function getLoadableScripts(extractor) {
   const check = (scripts2) => (scripts2 || "").includes("__LOADABLE_REQUIRED_CHUNKS___ext");
   const scripts = extractor.getScriptTags();
@@ -33,5 +37,7 @@ function getLoadableScripts(extractor) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CSS_CHUNKS_PLACEHOLDER,
+  ROUTER_DATA_JSON_ID,
+  SSR_DATA_JSON_ID,
   getLoadableScripts
 });

package/dist/esm/document/Comment.js

@@ -0,0 +1,14 @@
+import { Fragment, jsxs } from "react/jsx-runtime";
+import { DOCUMENT_COMMENT_PLACEHOLDER_START, DOCUMENT_COMMENT_PLACEHOLDER_END } from "./constants";
+function Comment(props) {
+    var comment = props.comment, children = props.children;
+    var commentStr = encodeURIComponent(children || comment || "");
+    return /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+            "".concat(DOCUMENT_COMMENT_PLACEHOLDER_START),
+            "".concat(commentStr),
+            "".concat(DOCUMENT_COMMENT_PLACEHOLDER_END)
+        ]
+    });
+}
+export { Comment };

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

@@ -181,7 +181,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 } 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 } from "../constants";
 var debug = createDebugger("html_genarate");
 var getDocumenByEntryName = function getDocumenByEntryName(entrypoints, entryName, fallbackDir) {
     var _entrypoints_find;
@@ -346,10 +346,15 @@ var cli_default = function() {
                                                 }).join("")
                                             ].join("");
                                             if (html.includes(DOCUMENT_SCRIPT_PLACEHOLDER_START) && html.includes(DOCUMENT_SCRIPT_PLACEHOLDER_END)) {
-                                                html = html.replaceAll(new RegExp("".concat(DOCUMENT_SCRIPT_PLACEHOLDER_START, "(.*?)").concat(DOCUMENT_SCRIPT_PLACEHOLDER_END), "g"), function(_scriptStr, $1) {
+                                                html = html.replace(new RegExp("".concat(DOCUMENT_SCRIPT_PLACEHOLDER_START, "(.*?)").concat(DOCUMENT_SCRIPT_PLACEHOLDER_END), "g"), function(_scriptStr, $1) {
                                                     return "<script>".concat(decodeURIComponent($1), "</script>");
                                                 });
                                             }
+                                            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));
+                                                });
+                                            }
                                             finalHtml = "<!DOCTYPE html>".concat(html).replace(DOCUMENT_META_PLACEHOLDER, metas).replace(DOCUMENT_SSR_PLACEHOLDER, HTML_SEPARATOR).replace(DOCUMENT_SCRIPTS_PLACEHOLDER, scripts).replace(DOCUMENT_LINKS_PLACEHOLDER, links).replace(DOCUMENT_CHUNKSMAP_PLACEHOLDER, PLACEHOLDER_REPLACER_MAP[DOCUMENT_CHUNKSMAP_PLACEHOLDER]).replace(DOCUMENT_SSRDATASCRIPT_PLACEHOLDER, PLACEHOLDER_REPLACER_MAP[DOCUMENT_SSRDATASCRIPT_PLACEHOLDER]);
                                             return [
                                                 2,

package/dist/esm/document/constants.js

@@ -30,6 +30,8 @@ var DOCUMENT_LINKS_PLACEHOLDER = encodeURIComponent("<!-- chunk links placeholde
 var DOCUMENT_NO_SCRIPTE_PLACEHOLDER = encodeURIComponent("<!-- no-script -->");
 var DOCUMENT_SCRIPT_PLACEHOLDER_START = encodeURIComponent("<!-- script-start -->");
 var DOCUMENT_SCRIPT_PLACEHOLDER_END = encodeURIComponent("<!-- script-end -->");
+var DOCUMENT_COMMENT_PLACEHOLDER_START = encodeURIComponent("<!-- comment-start -->");
+var DOCUMENT_COMMENT_PLACEHOLDER_END = encodeURIComponent("<!-- comment-end -->");
 var _obj;
 var PLACEHOLDER_REPLACER_MAP = (_obj = {}, _defineProperty(_obj, DOCUMENT_NO_SCRIPTE_PLACEHOLDER, "We're sorry but react app doesn't work properly without JavaScript enabled. Please enable it to continue."), _defineProperty(_obj, DOCUMENT_SSR_PLACEHOLDER, HTML_SEPARATOR), _defineProperty(_obj, DOCUMENT_CHUNKSMAP_PLACEHOLDER, HTML_CHUNKSMAP_SEPARATOR), _defineProperty(_obj, DOCUMENT_SSRDATASCRIPT_PLACEHOLDER, HTML_SSRDATASCRIPT_SEPARATOR), _obj);
-export { DOCUMENT_CHUNKSMAP_PLACEHOLDER, DOCUMENT_FILE_NAME, DOCUMENT_LINKS_PLACEHOLDER, DOCUMENT_META_PLACEHOLDER, DOCUMENT_NO_SCRIPTE_PLACEHOLDER, DOCUMENT_SCRIPTS_PLACEHOLDER, DOCUMENT_SCRIPT_PLACEHOLDER_END, DOCUMENT_SCRIPT_PLACEHOLDER_START, DOCUMENT_SSRDATASCRIPT_PLACEHOLDER, DOCUMENT_SSR_PLACEHOLDER, DOC_EXT, HTML_CHUNKSMAP_SEPARATOR, HTML_SEPARATOR, HTML_SSRDATASCRIPT_SEPARATOR, PLACEHOLDER_REPLACER_MAP };
+export { DOCUMENT_CHUNKSMAP_PLACEHOLDER, DOCUMENT_COMMENT_PLACEHOLDER_END, DOCUMENT_COMMENT_PLACEHOLDER_START, DOCUMENT_FILE_NAME, DOCUMENT_LINKS_PLACEHOLDER, DOCUMENT_META_PLACEHOLDER, DOCUMENT_NO_SCRIPTE_PLACEHOLDER, DOCUMENT_SCRIPTS_PLACEHOLDER, DOCUMENT_SCRIPT_PLACEHOLDER_END, DOCUMENT_SCRIPT_PLACEHOLDER_START, DOCUMENT_SSRDATASCRIPT_PLACEHOLDER, DOCUMENT_SSR_PLACEHOLDER, DOC_EXT, HTML_CHUNKSMAP_SEPARATOR, HTML_SEPARATOR, HTML_SSRDATASCRIPT_SEPARATOR, PLACEHOLDER_REPLACER_MAP };

package/dist/esm/document/index.js

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

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

@@ -0,0 +1,3 @@
+import { createWaterfall } from "@modern-js/plugin";
+var modifyRoutes = createWaterfall();
+export { modifyRoutes };

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

@@ -3,6 +3,6 @@ var runtime_default = routerPlugin;
 import { modifyRoutes } from "./plugin";
 export * from "./withRouter";
 import { Link, NavLink } from "./PrefetchLink";
-import { createBrowserRouter, createHashRouter, createMemoryRouter, RouterProvider, BrowserRouter, HashRouter, MemoryRouter, Router, Await, Form, Navigate, Outlet, Route, Routes, ScrollRestoration, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit, createRoutesFromChildren, createRoutesFromElements, createSearchParams, generatePath, isRouteErrorResponse, matchPath, matchRoutes, renderMatches, resolvePath } from "react-router-dom";
+import { createBrowserRouter, createHashRouter, createMemoryRouter, RouterProvider, BrowserRouter, HashRouter, MemoryRouter, Router, Await, Form, Navigate, Outlet, Route, Routes, ScrollRestoration, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit, createRoutesFromChildren, createRoutesFromElements, createSearchParams, generatePath, isRouteErrorResponse, matchPath, matchRoutes, renderMatches, resolvePath, createPath } from "react-router-dom";
 import { defer, json, redirect } from "@modern-js/utils/universal/remix-router";
-export { Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createRoutesFromChildren, createRoutesFromElements, createSearchParams, runtime_default as default, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, modifyRoutes, redirect, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit };
+export { Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, runtime_default as default, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, modifyRoutes, redirect, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit };

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

@@ -53,6 +53,8 @@ function _objectSpreadProps(target, source) {
 import { jsx } from "react/jsx-runtime";
 import { createBrowserRouter, createHashRouter, RouterProvider, createRoutesFromElements, useMatches, useLocation } from "react-router-dom";
 import hoistNonReactStatics from "hoist-non-react-statics";
+import { parsedJSONFromElement } from "@modern-js/utils/runtime";
+import { modifyRoutes as modifyRoutesHook } from "./hooks";
 import { deserializeErrors, renderRoutes, urlJoin } from "./utils";
 var finalRouteConfig = {
     routes: []
@@ -76,9 +78,13 @@ var routerPlugin = function(param) {
     };
     var routes = [];
     finalRouteConfig = routesConfig;
+    window._SERVER_DATA = parsedJSONFromElement("__MODERN_SERVER_DATA__");
     return {
         name: "@modern-js/plugin-router",
-        setup: function() {
+        registerHook: {
+            modifyRoutes: modifyRoutesHook
+        },
+        setup: function(api) {
             return {
                 init: function init(param, next) {
                     var context = param.context;
@@ -110,6 +116,8 @@ var routerPlugin = function(param) {
                                 routesConfig: finalRouteConfig,
                                 props: props
                             }));
+                            var runner = api.useHookRunners();
+                            routes = runner.modifyRoutes(routes);
                             var baseUrl = ((_window__SERVER_DATA = window._SERVER_DATA) === null || _window__SERVER_DATA === void 0 ? void 0 : _window__SERVER_DATA.router.baseUrl) || select(location.pathname);
                             var _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
                             var hydrationData = window._ROUTER_DATA;
@@ -133,6 +141,9 @@ var routerPlugin = function(param) {
                         };
                     };
                     var RouteApp = getRouteApp();
+                    if (App) {
+                        RouteApp = hoistNonReactStatics(RouteApp, App);
+                    }
                     if (routesConfig === null || routesConfig === void 0 ? void 0 : routesConfig.globalApp) {
                         return next({
                             App: hoistNonReactStatics(RouteApp, routesConfig.globalApp)

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

@@ -236,6 +236,7 @@ import { createRoutesFromElements } from "react-router-dom";
 import { RuntimeReactContext } from "../../core";
 import { renderRoutes, urlJoin } from "./utils";
 import { installGlobals } from "./fetch";
+import { modifyRoutes as modifyRoutesHook } from "./hooks";
 installGlobals();
 function createFetchRequest(req) {
     var origin = "".concat(req.protocol, "://").concat(req.host);
@@ -301,12 +302,15 @@ var routerPlugin = function(param) {
     var _param_basename = param.basename, basename = _param_basename === void 0 ? "" : _param_basename, routesConfig = param.routesConfig, createRoutes = param.createRoutes;
     return {
         name: "@modern-js/plugin-router",
-        setup: function() {
+        registerHook: {
+            modifyRoutes: modifyRoutesHook
+        },
+        setup: function(api) {
             return {
                 init: function init(param, next) {
                     var context = param.context;
                     return _asyncToGenerator(function() {
-                        var _context_ssrContext, request, ssrMode, baseUrl, _basename, routes, query, remixRequest, routerContext, router;
+                        var _context_ssrContext, request, ssrMode, baseUrl, _basename, routes, query, remixRequest, routerContext, router, runner;
                         return __generator(this, function(_state) {
                             switch(_state.label){
                                 case 0:
@@ -346,6 +350,8 @@ var routerPlugin = function(param) {
                                     context.routerContext = routerContext;
                                     context.routes = routes;
                                     context.routeManifest = context.ssrContext.routeManifest;
+                                    runner = api.useHookRunners();
+                                    runner.modifyRoutes(routes);
                                     return [
                                         2,
                                         next({

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

@@ -1,65 +1,3 @@
-function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _arrayWithHoles(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-function _defineProperty(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _iterableToArray(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _objectSpread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _defineProperty(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function _toArray(arr) {
-    return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
-}
-function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-function _unsupportedIterableToArray(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
 import path from "path";
 import { getEntryOptions, SERVER_RENDER_FUNCTION_NAME, LOADABLE_STATS_FILE, isUseSSRBundle, createRuntimeExportsUtils, isSSGEntry } from "@modern-js/utils";
 var PLUGIN_IDENTIFIER = "ssr";
@@ -126,6 +64,10 @@ var cli_default = function() {
                                 // ensure that all packages use the same storage in @modern-js/utils/ssr
                                 "@modern-js/utils/ssr": require.resolve("@modern-js/utils/ssr"),
                                 "@modern-js/runtime/plugins": pluginsExportsUtils.getPath()
+                            },
+                            globalVars: function(values, param) {
+                                var target = param.target;
+                                values["process.env.MODERN_TARGET"] = target === "node" || target === "service-worker" ? "node" : "browser";
                             }
                         },
                         tools: {
@@ -140,13 +82,6 @@ var cli_default = function() {
                                         }
                                     ]);
                                 }
-                                var modernVars = _defineProperty({}, "process.env.MODERN_TARGET", JSON.stringify(isServer || isServiceWorker ? "node" : "browser"));
-                                chain.plugin(CHAIN_ID.PLUGIN.DEFINE).tap(function(args) {
-                                    var _args = _toArray(args), vars = _args[0], rest = _args.slice(1);
-                                    return [
-                                        _objectSpread({}, vars, modernVars)
-                                    ].concat(_toConsumableArray(rest));
-                                });
                             },
                             babel: babelConfig
                         }

package/dist/esm/ssr/index.js

@@ -177,14 +177,20 @@ var __generator = this && this.__generator || function(thisArg, body) {
 import { jsx } from "react/jsx-runtime";
 import { loadableReady } from "@loadable/component";
 import hoistNonReactStatics from "hoist-non-react-statics";
+import { parsedJSONFromElement } from "@modern-js/utils/runtime";
 import { RenderLevel } from "./serverRender/types";
 import { WithCallback } from "./react/withCallback";
 import { formatClient, mockResponse, isReact18 } from "./utils";
+import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID } from "./serverRender/utils";
 var ssr = function(config) {
     return {
         name: "@modern-js/plugin-ssr",
         setup: function() {
             var mockResp = mockResponse();
+            if (config.inlineScript === false) {
+                window._SSR_DATA = parsedJSONFromElement(SSR_DATA_JSON_ID);
+                window._ROUTER_DATA = parsedJSONFromElement(ROUTER_DATA_JSON_ID);
+            }
             return {
                 client: function() {
                     var _ref = _asyncToGenerator(function(param) {

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

@@ -83,7 +83,7 @@ function getHeadTemplate(beforeEntryTemplate, context) {
                         var _cssChunks;
                         var _routeManifest2_referenceCssAssets = routeManifest2.referenceCssAssets, referenceCssAssets = _routeManifest2_referenceCssAssets === void 0 ? [] : _routeManifest2_referenceCssAssets;
                         var _cssChunks1 = referenceCssAssets.filter(function(asset) {
-                            return asset === null || asset === void 0 ? void 0 : asset.endsWith(".css");
+                            return (asset === null || asset === void 0 ? void 0 : asset.endsWith(".css")) && !headTemplate2.includes(asset);
                         });
                         (_cssChunks = cssChunks).push.apply(_cssChunks, _toConsumableArray(_cssChunks1));
                     }

package/dist/esm/ssr/serverRender/renderToString/entry.js

@@ -178,6 +178,7 @@ import helmetReplace from "../helmet";
 import { RenderLevel } from "../types";
 import { time } from "../time";
 import prefetch from "../../prefetch";
+import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID } from "../utils";
 import { toFragments } from "./template";
 import { reduce } from "./reduce";
 import * as loadableRenderer from "./loadable";
@@ -402,9 +403,12 @@ var Entry = /*#__PURE__*/ function() {
         {
             key: "getSSRDataScript",
             value: function getSSRDataScript(templateData, routerData) {
-                var ssrDataScripts = "<script>window._SSR_DATA = ".concat(serializeJson(templateData), "</script>");
+                var useInlineScript = this.pluginConfig.inlineScript !== false;
+                var ssrData = serializeJson(templateData);
+                var ssrDataScripts = useInlineScript ? "<script>window._SSR_DATA = ".concat(ssrData, "</script>") : '<script type="application/json" id="'.concat(SSR_DATA_JSON_ID, '">').concat(ssrData, "</script>");
                 if (routerData) {
-                    ssrDataScripts += "\n<script>window._ROUTER_DATA = ".concat(serializeJson(routerData), "</script>");
+                    var serializedRouterData = serializeJson(routerData);
+                    ssrDataScripts += useInlineScript ? "\n<script>window._ROUTER_DATA = ".concat(serializedRouterData, "</script>") : '\n<script type="application/json" id="'.concat(ROUTER_DATA_JSON_ID, '">').concat(serializedRouterData, "</script>");
                 }
                 return {
                     SSRDataScript: ssrDataScripts

package/dist/esm/ssr/serverRender/utils.js

@@ -1,4 +1,6 @@
 var CSS_CHUNKS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
+var SSR_DATA_JSON_ID = "__MODERN_SSR_DATA__";
+var ROUTER_DATA_JSON_ID = "__MODERN_ROUTER_DATA__";
 function getLoadableScripts(extractor) {
     var check = function(scripts2) {
         return (scripts2 || "").includes("__LOADABLE_REQUIRED_CHUNKS___ext");
@@ -11,4 +13,4 @@ function getLoadableScripts(extractor) {
         return "".concat(i, "</script>");
     }).join("");
 }
-export { CSS_CHUNKS_PLACEHOLDER, getLoadableScripts };
+export { CSS_CHUNKS_PLACEHOLDER, ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID, getLoadableScripts };

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

@@ -0,0 +1,17 @@
+import { Fragment, jsxs } from "react/jsx-runtime";
+import {
+  DOCUMENT_COMMENT_PLACEHOLDER_START,
+  DOCUMENT_COMMENT_PLACEHOLDER_END
+} from "./constants";
+function Comment(props) {
+  const { comment, children } = props;
+  const commentStr = encodeURIComponent(children || comment || "");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    `${DOCUMENT_COMMENT_PLACEHOLDER_START}`,
+    `${commentStr}`,
+    `${DOCUMENT_COMMENT_PLACEHOLDER_END}`
+  ] });
+}
+export {
+  Comment
+};

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

@@ -16,7 +16,9 @@ import {
   DOCUMENT_SSRDATASCRIPT_PLACEHOLDER,
   DOCUMENT_SCRIPT_PLACEHOLDER_START,
   DOCUMENT_SCRIPT_PLACEHOLDER_END,
-  HTML_SEPARATOR
+  HTML_SEPARATOR,
+  DOCUMENT_COMMENT_PLACEHOLDER_START,
+  DOCUMENT_COMMENT_PLACEHOLDER_END
 } from "../constants";
 const debug = createDebugger("html_genarate");
 const getDocumenByEntryName = function(entrypoints, entryName, fallbackDir) {
@@ -143,7 +145,7 @@ var cli_default = () => ({
           ).join("")
         ].join("");
         if (html.includes(DOCUMENT_SCRIPT_PLACEHOLDER_START) && html.includes(DOCUMENT_SCRIPT_PLACEHOLDER_END)) {
-          html = html.replaceAll(
+          html = html.replace(
             new RegExp(
               `${DOCUMENT_SCRIPT_PLACEHOLDER_START}(.*?)${DOCUMENT_SCRIPT_PLACEHOLDER_END}`,
               "g"
@@ -151,6 +153,15 @@ var cli_default = () => ({
             (_scriptStr, $1) => `<script>${decodeURIComponent($1)}</script>`
           );
         }
+        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)}`
+          );
+        }
         const finalHtml = `<!DOCTYPE html>${html}`.replace(DOCUMENT_META_PLACEHOLDER, metas).replace(DOCUMENT_SSR_PLACEHOLDER, HTML_SEPARATOR).replace(DOCUMENT_SCRIPTS_PLACEHOLDER, scripts).replace(DOCUMENT_LINKS_PLACEHOLDER, links).replace(
           DOCUMENT_CHUNKSMAP_PLACEHOLDER,
           PLACEHOLDER_REPLACER_MAP[DOCUMENT_CHUNKSMAP_PLACEHOLDER]

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

@@ -24,6 +24,12 @@ const DOCUMENT_SCRIPT_PLACEHOLDER_START = encodeURIComponent(
 const DOCUMENT_SCRIPT_PLACEHOLDER_END = encodeURIComponent(
   "<!-- script-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,
@@ -32,6 +38,8 @@ const PLACEHOLDER_REPLACER_MAP = {
 };
 export {
   DOCUMENT_CHUNKSMAP_PLACEHOLDER,
+  DOCUMENT_COMMENT_PLACEHOLDER_END,
+  DOCUMENT_COMMENT_PLACEHOLDER_START,
   DOCUMENT_FILE_NAME,
   DOCUMENT_LINKS_PLACEHOLDER,
   DOCUMENT_META_PLACEHOLDER,

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

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

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

@@ -0,0 +1,5 @@
+import { createWaterfall } from "@modern-js/plugin";
+const modifyRoutes = createWaterfall();
+export {
+  modifyRoutes
+};

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

@@ -54,7 +54,8 @@ import {
   matchPath,
   matchRoutes,
   renderMatches,
-  resolvePath
+  resolvePath,
+  createPath
 } from "react-router-dom";
 import { defer, json, redirect } from "@modern-js/utils/universal/remix-router";
 export {
@@ -75,6 +76,7 @@ export {
   createBrowserRouter,
   createHashRouter,
   createMemoryRouter,
+  createPath,
   createRoutesFromChildren,
   createRoutesFromElements,
   createSearchParams,

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

@@ -8,6 +8,8 @@ import {
   useLocation
 } from "react-router-dom";
 import hoistNonReactStatics from "hoist-non-react-statics";
+import { parsedJSONFromElement } from "@modern-js/utils/runtime";
+import { modifyRoutes as modifyRoutesHook } from "./hooks";
 import { deserializeErrors, renderRoutes, urlJoin } from "./utils";
 let finalRouteConfig = {
   routes: []
@@ -34,9 +36,13 @@ const routerPlugin = ({
   const select = (pathname) => serverBase.find((baseUrl) => pathname.search(baseUrl) === 0) || "/";
   let routes = [];
   finalRouteConfig = routesConfig;
+  window._SERVER_DATA = parsedJSONFromElement("__MODERN_SERVER_DATA__");
   return {
     name: "@modern-js/plugin-router",
-    setup: () => {
+    registerHook: {
+      modifyRoutes: modifyRoutesHook
+    },
+    setup: (api) => {
       return {
         init({ context }, next) {
           context.router = {
@@ -64,6 +70,8 @@ const routerPlugin = ({
                   props
                 })
               );
+              const runner = api.useHookRunners();
+              routes = runner.modifyRoutes(routes);
               const baseUrl = ((_a = window._SERVER_DATA) == null ? void 0 : _a.router.baseUrl) || select(location.pathname);
               const _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
               let hydrationData = window._ROUTER_DATA;
@@ -83,7 +91,10 @@ const routerPlugin = ({
               return /* @__PURE__ */ jsx(App, { ...props, children: /* @__PURE__ */ jsx(RouterProvider, { router }) });
             };
           };
-          const RouteApp = getRouteApp();
+          let RouteApp = getRouteApp();
+          if (App) {
+            RouteApp = hoistNonReactStatics(RouteApp, App);
+          }
           if (routesConfig == null ? void 0 : routesConfig.globalApp) {
             return next({
               App: hoistNonReactStatics(RouteApp, routesConfig.globalApp)

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

@@ -10,6 +10,7 @@ import { createRoutesFromElements } from "react-router-dom";
 import { RuntimeReactContext } from "../../core";
 import { renderRoutes, urlJoin } from "./utils";
 import { installGlobals } from "./fetch";
+import { modifyRoutes as modifyRoutesHook } from "./hooks";
 installGlobals();
 function createFetchRequest(req) {
   const origin = `${req.protocol}://${req.host}`;
@@ -44,7 +45,10 @@ const routerPlugin = ({
 }) => {
   return {
     name: "@modern-js/plugin-router",
-    setup: () => {
+    registerHook: {
+      modifyRoutes: modifyRoutesHook
+    },
+    setup: (api) => {
       return {
         async init({ context }, next) {
           if (!routesConfig && !createRoutes) {
@@ -72,6 +76,8 @@ const routerPlugin = ({
           context.routerContext = routerContext;
           context.routes = routes;
           context.routeManifest = context.ssrContext.routeManifest;
+          const runner = api.useHookRunners();
+          runner.modifyRoutes(routes);
           return next({ context });
         },
         hoc: ({ App }, next) => {

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

@@ -55,6 +55,9 @@ var cli_default = () => ({
               // ensure that all packages use the same storage in @modern-js/utils/ssr
               "@modern-js/utils/ssr": require.resolve("@modern-js/utils/ssr"),
               "@modern-js/runtime/plugins": pluginsExportsUtils.getPath()
+            },
+            globalVars: (values, { target }) => {
+              values["process.env.MODERN_TARGET"] = target === "node" || target === "service-worker" ? "node" : "browser";
             }
           },
           tools: {
@@ -66,21 +69,6 @@ var cli_default = () => ({
                   { filename: LOADABLE_STATS_FILE }
                 ]);
               }
-              const modernVars = {
-                [`process.env.MODERN_TARGET`]: JSON.stringify(
-                  isServer || isServiceWorker ? "node" : "browser"
-                )
-              };
-              chain.plugin(CHAIN_ID.PLUGIN.DEFINE).tap((args) => {
-                const [vars, ...rest] = args;
-                return [
-                  {
-                    ...vars,
-                    ...modernVars
-                  },
-                  ...rest
-                ];
-              });
             },
             babel: babelConfig
           }

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

@@ -1,15 +1,21 @@
 import { jsx } from "react/jsx-runtime";
 import { loadableReady } from "@loadable/component";
 import hoistNonReactStatics from "hoist-non-react-statics";
+import { parsedJSONFromElement } from "@modern-js/utils/runtime";
 import {
   RenderLevel
 } from "./serverRender/types";
 import { WithCallback } from "./react/withCallback";
 import { formatClient, mockResponse, isReact18 } from "./utils";
+import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID } from "./serverRender/utils";
 const ssr = (config) => ({
   name: "@modern-js/plugin-ssr",
   setup: () => {
     const mockResp = mockResponse();
+    if (config.inlineScript === false) {
+      window._SSR_DATA = parsedJSONFromElement(SSR_DATA_JSON_ID);
+      window._ROUTER_DATA = parsedJSONFromElement(ROUTER_DATA_JSON_ID);
+    }
     return {
       client: async ({ App, context, ModernRender, ModernHydrate }) => {
         var _a;

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

@@ -44,7 +44,7 @@ function getHeadTemplate(beforeEntryTemplate, context) {
           if (routeManifest2) {
             const { referenceCssAssets = [] } = routeManifest2;
             const _cssChunks = referenceCssAssets.filter(
-              (asset) => asset == null ? void 0 : asset.endsWith(".css")
+              (asset) => (asset == null ? void 0 : asset.endsWith(".css")) && !headTemplate2.includes(asset)
             );
             cssChunks.push(..._cssChunks);
           }

package/dist/esm-node/ssr/serverRender/renderToString/entry.js

@@ -9,6 +9,7 @@ import {
 } from "../types";
 import { time } from "../time";
 import prefetch from "../../prefetch";
+import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID } from "../utils";
 import { toFragments } from "./template";
 import { reduce } from "./reduce";
 import * as loadableRenderer from "./loadable";
@@ -142,14 +143,14 @@ class Entry {
     return html;
   }
   getSSRDataScript(templateData, routerData) {
-    let ssrDataScripts = `<script>window._SSR_DATA = ${serializeJson(
-      templateData
-    )}</script>`;
+    const useInlineScript = this.pluginConfig.inlineScript !== false;
+    const ssrData = serializeJson(templateData);
+    let ssrDataScripts = useInlineScript ? `<script>window._SSR_DATA = ${ssrData}</script>` : `<script type="application/json" id="${SSR_DATA_JSON_ID}">${ssrData}</script>`;
     if (routerData) {
-      ssrDataScripts += `
-<script>window._ROUTER_DATA = ${serializeJson(
-        routerData
-      )}</script>`;
+      const serializedRouterData = serializeJson(routerData);
+      ssrDataScripts += useInlineScript ? `
+<script>window._ROUTER_DATA = ${serializedRouterData}</script>` : `
+<script type="application/json" id="${ROUTER_DATA_JSON_ID}">${serializedRouterData}</script>`;
     }
     return {
       SSRDataScript: ssrDataScripts

package/dist/esm-node/ssr/serverRender/utils.js

@@ -1,4 +1,6 @@
 const CSS_CHUNKS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
+const SSR_DATA_JSON_ID = "__MODERN_SSR_DATA__";
+const ROUTER_DATA_JSON_ID = "__MODERN_ROUTER_DATA__";
 function getLoadableScripts(extractor) {
   const check = (scripts2) => (scripts2 || "").includes("__LOADABLE_REQUIRED_CHUNKS___ext");
   const scripts = extractor.getScriptTags();
@@ -9,5 +11,7 @@ function getLoadableScripts(extractor) {
 }
 export {
   CSS_CHUNKS_PLACEHOLDER,
+  ROUTER_DATA_JSON_ID,
+  SSR_DATA_JSON_ID,
   getLoadableScripts
 };

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function Comment(props: {
+  comment?: string;
+  children?: 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_COMMENT_PLACEHOLDER_START: string;
+export declare const DOCUMENT_COMMENT_PLACEHOLDER_END: string;
 export declare const PLACEHOLDER_REPLACER_MAP: {
   [x: string]: string;
 };

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

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

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

@@ -0,0 +1,3 @@
+import { RouteObject } from 'react-router-dom';
+declare const modifyRoutes: import("@modern-js/plugin").Waterfall<RouteObject[]>;
+export { modifyRoutes };

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

@@ -7,5 +7,5 @@ export * from './withRouter';
 export { Link, NavLink } from './PrefetchLink';
 export type { LinkProps, NavLinkProps } from './PrefetchLink';
 export type { FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, FetcherWithComponents, BrowserRouterProps, HashRouterProps, HistoryRouterProps, FormProps, ScrollRestorationProps, SubmitFunction, ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_BlockerFunction, DataRouteMatch, DataRouteObject, Fetcher, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, To } from 'react-router-dom';
-export { createBrowserRouter, createHashRouter, createMemoryRouter, RouterProvider, BrowserRouter, HashRouter, MemoryRouter, Router, Await, Form, Navigate, Outlet, Route, Routes, ScrollRestoration, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit, createRoutesFromChildren, createRoutesFromElements, createSearchParams, generatePath, isRouteErrorResponse, matchPath, matchRoutes, renderMatches, resolvePath } from 'react-router-dom';
+export { createBrowserRouter, createHashRouter, createMemoryRouter, RouterProvider, BrowserRouter, HashRouter, MemoryRouter, Router, Await, Form, Navigate, Outlet, Route, Routes, ScrollRestoration, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit, createRoutesFromChildren, createRoutesFromElements, createSearchParams, generatePath, isRouteErrorResponse, matchPath, matchRoutes, renderMatches, resolvePath, createPath } from 'react-router-dom';
 export { defer, json, redirect } from '@modern-js/utils/universal/remix-router';

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

@@ -1,3 +1,5 @@
 import type { ChunkExtractor } from '@loadable/server';
 export declare const CSS_CHUNKS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
+export declare const SSR_DATA_JSON_ID = "__MODERN_SSR_DATA__";
+export declare const ROUTER_DATA_JSON_ID = "__MODERN_ROUTER_DATA__";
 export declare function getLoadableScripts(extractor: ChunkExtractor): string;

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.13.4",
+  "version": "2.15.0",
   "engines": {
     "node": ">=14.17.6"
   },
@@ -158,9 +158,9 @@
     "react-side-effect": "^2.1.1",
     "redux-logger": "^3.0.6",
     "styled-components": "^5.3.1",
-    "@modern-js/plugin": "2.13.4",
-    "@modern-js/types": "2.13.4",
-    "@modern-js/utils": "2.13.4"
+    "@modern-js/plugin": "2.15.0",
+    "@modern-js/types": "2.15.0",
+    "@modern-js/utils": "2.15.0"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -170,7 +170,6 @@
     "@types/cookie": "0.5.1",
     "@remix-run/web-fetch": "^4.1.3",
     "@testing-library/react": "^13.4.0",
-    "@testing-library/react-hooks": "^8.0.1",
     "@types/invariant": "^2.2.30",
     "@types/jest": "^29",
     "@types/loadable__webpack-plugin": "^5.7.3",
@@ -181,11 +180,11 @@
     "react-dom": "^18",
     "ts-jest": "^29.0.5",
     "typescript": "^4",
-    "@modern-js/app-tools": "2.13.4",
-    "@modern-js/core": "2.13.4",
-    "@modern-js/server-core": "2.13.4",
-    "@scripts/build": "2.13.4",
-    "@scripts/jest-config": "2.13.4"
+    "@modern-js/app-tools": "2.15.0",
+    "@modern-js/core": "2.15.0",
+    "@modern-js/server-core": "2.15.0",
+    "@scripts/build": "2.15.0",
+    "@scripts/jest-config": "2.15.0"
   },
   "sideEffects": false,
   "modernConfig": {},