@modern-js/runtime 2.20.0 → 2.21.0

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

@@ -1,5 +1,5 @@
 import ReactHelmet from "react-helmet";
-import { matchRoutes } from "react-router-dom";
+import { matchRoutes } from "@modern-js/utils/runtime/router";
 import helmetReplace from "../helmet";
 import { CSS_CHUNKS_PLACEHOLDER } from "../utils";
 import { HEAD_REG_EXP, buildTemplate } from "./buildTemplate.share";

package/dist/esm-node/ssr/serverRender/renderToStream/renderToPipe.js

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

package/dist/esm-node/ssr/serverRender/renderToStream/renderToPipe.worker.js

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

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

@@ -8,7 +8,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 { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID, attributesToString } from "../utils";
 import { toFragments } from "./template";
 import { reduce } from "./reduce";
 import * as loadableRenderer from "./loadable";
@@ -99,7 +99,8 @@ class Entry {
         host: this.host,
         result: this.result,
         entryName: this.entryName,
-        config: this.pluginConfig
+        config: this.pluginConfig,
+        nonce: this.nonce
       };
       html = reduce(App, renderContext, [
         styledComponentRenderer.toHtml,
@@ -119,11 +120,14 @@ class Entry {
   getSSRDataScript(templateData, routerData) {
     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>`;
+    const attrsStr = attributesToString({
+      nonce: this.nonce
+    });
+    let ssrDataScripts = useInlineScript ? `<script${attrsStr}>window._SSR_DATA = ${ssrData}</script>` : `<script type="application/json" id="${SSR_DATA_JSON_ID}">${ssrData}</script>`;
     if (routerData) {
       const serializedRouterData = serializeJson(routerData);
       ssrDataScripts += useInlineScript ? `
-<script>window._ROUTER_DATA = ${serializedRouterData}</script>` : `
+<script${attrsStr}>window._ROUTER_DATA = ${serializedRouterData}</script>` : `
 <script type="application/json" id="${ROUTER_DATA_JSON_ID}">${serializedRouterData}</script>`;
     }
     return {
@@ -139,8 +143,9 @@ class Entry {
     _define_property(this, "fragments", void 0);
     _define_property(this, "pluginConfig", void 0);
     _define_property(this, "host", void 0);
+    _define_property(this, "nonce", void 0);
     const { ctx, config } = options;
-    const { entryName, template, request: { host } } = ctx;
+    const { entryName, template, request: { host }, nonce } = ctx;
     this.fragments = toFragments(template, entryName);
     this.entryName = entryName;
     this.host = host;
@@ -148,6 +153,7 @@ class Entry {
     this.pluginConfig = config;
     this.metrics = ctx.metrics;
     this.logger = ctx.logger;
+    this.nonce = nonce;
     this.result = {
       renderLevel: RenderLevel.CLIENT_RENDER,
       html: "",

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

@@ -1,6 +1,6 @@
 import { ChunkExtractor } from "@loadable/server";
 import { isCrossOrigin } from "../../utils";
-import { getLoadableScripts } from "../utils";
+import { attributesToString, getLoadableScripts } from "../utils";
 const extname = (uri) => {
   if (typeof uri !== "string" || !uri.includes(".")) {
     return "";
@@ -8,7 +8,7 @@ const extname = (uri) => {
   return `.${uri === null || uri === void 0 ? void 0 : uri.split(".").pop()}` || "";
 };
 export const toHtml = (jsx, renderer, next) => {
-  const { stats, result: { chunksMap }, host, config = {} } = renderer;
+  const { stats, result: { chunksMap }, host, config = {}, nonce } = renderer;
   if (!stats || chunksMap.js) {
     return next(jsx);
   }
@@ -24,12 +24,15 @@ export const toHtml = (jsx, renderer, next) => {
   for (const v of chunks) {
     const fileType = extname(v.url).slice(1);
     if (fileType === "js") {
-      const props = [];
+      const attributes = {
+        nonce
+      };
       const { crossorigin } = config;
       if (crossorigin && isCrossOrigin(v.url, host)) {
-        props.push(`crossorigin="${crossorigin === true ? "anonymous" : crossorigin}"`);
+        attributes.crossorigin = crossorigin === true ? "anonymous" : crossorigin;
       }
-      chunksMap[fileType] += `<script src="${v.url}" ${props.join(" ")}></script>`;
+      const attrsStr = attributesToString(attributes);
+      chunksMap[fileType] += `<script${attrsStr} src="${v.url}"></script>`;
     } else if (fileType === "css") {
       chunksMap[fileType] += `<link href="${v.url}" rel="stylesheet" />`;
     }

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

@@ -9,3 +9,8 @@ export function getLoadableScripts(extractor) {
   }
   return scripts.split("</script>").slice(0, 2).map((i) => `${i}</script>`).join("");
 }
+export function attributesToString(attributes) {
+  return Object.entries(attributes).reduce((str, [key, value]) => {
+    return value === void 0 ? str : `${str} ${key}="${value}"`;
+  }, "");
+}

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

@@ -1,5 +1,3 @@
 import type { CliPlugin, AppTools } from '@modern-js/app-tools';
-
 declare const _default: () => CliPlugin<AppTools>;
-
 export default _default;

package/dist/types/core/loader/loaderManager.d.ts

@@ -35,7 +35,6 @@ type ManagerOption = {
  * Create loaders manager. It's returned instance will add to context
  * @param initialDataMap used to initialing loader data
  */
-
 export declare const createLoaderManager: (initialDataMap: Record<string, LoaderResult>, managerOptions?: ManagerOption) => {
   hasPendingLoaders: () => boolean;
   awaitPendingLoaders: () => Promise<Record<string, LoaderResult>>;

package/dist/types/core/loader/useLoader.d.ts

@@ -7,28 +7,23 @@ export interface LoaderOptions<Params = any, TData = any, TError extends Error =
   /**
    * Revoke when loader ended with error
    */
-
   onError?: (error: TError) => void;
   /**
    * initialData to display once loader is ready.
    */
-
   initialData?: TData;
   /**
    * whether skip loader
    * if true, the loader will not exec.
    */
-
   skip?: boolean;
   /**
    * User params, it will pass to loader's second parameter.
    */
-
   params?: Params;
   /**
    * whether loader can exec on build phase.
    */
-
   static?: boolean;
 }
 declare const useLoader: <TData = any, Params = any, E = any>(loaderFn: LoaderFn<Params, TData>, options?: LoaderOptions<Params, any, any>) => {

package/dist/types/core/plugin.d.ts

@@ -30,16 +30,12 @@ declare const runtimeHooks: {
   }, TRuntimeContext>;
 };
 /** All hooks of runtime plugin. */
-
 export type RuntimeHooks = typeof runtimeHooks;
 /** All hook callbacks of runtime plugin. */
-
 export type RuntimeHookCallbacks = ToThreads<RuntimeHooks>;
 /** All apis for runtime plugin. */
-
 export type PluginAPI = CommonAPI<RuntimeHooks>;
 /** Plugin options of a runtime plugin. */
-
 export type Plugin = PluginOptions<RuntimeHooks, Setup<RuntimeHooks>>;
 export declare const createRuntime: () => import("@modern-js/plugin").Manager<{
   hoc: import("@modern-js/plugin").Pipeline<{
@@ -71,7 +67,6 @@ export declare const createRuntime: () => import("@modern-js/plugin").Manager<{
 /**
  * register init hook. It would be revoked both ssr and csr.
  */
-
 declare const registerInit: (App: React.ComponentType, _init: (context: RuntimeContext) => any | Promise<any>) => void;
 export declare const runtime: import("@modern-js/plugin").Manager<{
   hoc: import("@modern-js/plugin").Pipeline<{
@@ -178,7 +173,7 @@ export declare const createPlugin: (setup?: Setup<{
     context: RuntimeContext;
     pickedContext: TRuntimeContext;
   }, TRuntimeContext>;
-}, Record<string, never>>, Record<string, unknown>> | undefined) => import("@modern-js/plugin").Plugin<{
+}, Record<string, never>>> | undefined) => import("@modern-js/plugin").Plugin<{
   hoc: import("@modern-js/plugin").Pipeline<{
     App: React.ComponentType<any>;
   }, React.ComponentType<any>>;

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

@@ -1,7 +1,5 @@
 import type { CliPlugin, AppTools } from '@modern-js/app-tools';
 import { Entrypoint } from '@modern-js/types/cli';
 export declare const getDocumenByEntryName: (entrypoints: Entrypoint[], entryName: string, fallbackDir?: string) => string | undefined;
-
 declare const _default: () => CliPlugin<AppTools>;
-
 export default _default;

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

@@ -1,5 +1,3 @@
 import type { CliPlugin, AppTools } from '@modern-js/app-tools';
-
 declare const _default: () => CliPlugin<AppTools>;
-
 export default _default;

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

@@ -1,3 +1,2 @@
 declare const _default: () => null;
-
 export default _default;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-
 /**
  * DeferredDataScripts only renders in server side,
  * it doesn't need to be hydrated in client side.

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LinkProps as RouterLinkProps, NavLinkProps as RouterNavLinkProps } from 'react-router-dom';
+import { LinkProps as RouterLinkProps, NavLinkProps as RouterNavLinkProps } from '@modern-js/utils/runtime/router';
 export declare function composeEventHandlers<EventType extends React.SyntheticEvent | Event>(theirHandler: ((event: EventType) => any) | undefined, ourHandler: (event: EventType) => any): (event: EventType) => any;
 /**
  * Modified from https://github.com/remix-run/remix/blob/9a0601bd704d2f3ee622e0ddacab9b611eb0c5bc/packages/remix-react/components.tsx#L218
@@ -9,7 +9,6 @@ export declare function composeEventHandlers<EventType extends React.SyntheticEv
  * Copyright 2021 Remix Software Inc.
  * https://github.com/remix-run/remix/blob/2b5e1a72fc628d0408e27cf4d72e537762f1dc5b/LICENSE.md
  */
-
 /**
  * Defines the prefetching behavior of the link:
  *
@@ -17,7 +16,6 @@ export declare function composeEventHandlers<EventType extends React.SyntheticEv
  * - "render": Fetched when the link is rendered
  * - "none": Never fetched
  */
-
 type PrefetchBehavior = 'intent' | 'render' | 'none';
 export interface LinkProps extends RouterLinkProps {
   prefetch?: PrefetchBehavior;

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

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

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

@@ -1,4 +1,4 @@
-import { useRouteLoaderData as useRouteData } from 'react-router-dom';
+import { useRouteLoaderData as useRouteData } from '@modern-js/utils/runtime/router';
 import { routerPlugin } from './plugin';
 import type { SingleRouteConfig, RouterConfig } from './types';
 export type { SingleRouteConfig, RouterConfig };
@@ -8,6 +8,5 @@ export * from './withRouter';
 export { Link, NavLink } from './PrefetchLink';
 export type { LinkProps, NavLinkProps } from './PrefetchLink';
 export declare const useRouteLoaderData: typeof useRouteData;
-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, useRoutes, useSearchParams, useSubmit, createRoutesFromChildren, createRoutesFromElements, createSearchParams, generatePath, isRouteErrorResponse, matchPath, matchRoutes, renderMatches, resolvePath, createPath, unstable_useBlocker, unstable_usePrompt } from 'react-router-dom';
-export { defer, json, redirect } from '@modern-js/utils/runtime/router';
+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 '@modern-js/utils/runtime/router';
+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, useRoutes, useSearchParams, useSubmit, createRoutesFromChildren, createRoutesFromElements, createSearchParams, generatePath, isRouteErrorResponse, matchPath, matchRoutes, renderMatches, resolvePath, createPath, unstable_useBlocker, unstable_usePrompt, defer, json, redirect } from '@modern-js/utils/runtime/router';

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

@@ -1 +1 @@
-export * from 'react-router-dom/server';
+export * from '@modern-js/utils/runtime-node/router';

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { RouteProps, RouteObject } from 'react-router-dom';
+import type { RouteProps, RouteObject } from '@modern-js/utils/runtime/router';
 import { PageRoute, NestedRoute } from '@modern-js/types';
 declare global {
   interface Window {
@@ -18,12 +18,10 @@ export type SingleRouteConfig = RouteProps & {
   /**
    * layout component
    */
-
   layout?: React.ComponentType;
   /**
    * component would be rendered when route macthed.
    */
-
   component?: React.ComponentType;
 };
 export type RouterConfig = {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type NestedRoute, type PageRoute, type SSRMode } from '@modern-js/types';
-import { type Router, type StaticHandlerContext } from '@modern-js/utils/runtime/router';
+import { type StaticHandlerContext, type Router } from '@modern-js/utils/runtime/remix-router';
 import { RouterConfig } from './types';
 export declare function getRouteComponents(routes: (NestedRoute | PageRoute)[], {
   globalApp,
@@ -27,11 +27,9 @@ export declare function standardSlash(str: string): string;
  * forked from https://github.com/remix-run/remix/blob/main/packages/remix-server-runtime/errors.ts
  * license at https://github.com/remix-run/remix/blob/main/LICENSE.md
  */
-
 export declare function serializeErrors(errors: StaticHandlerContext['errors']): StaticHandlerContext['errors'];
 /**
  * forked from https://github.com/remix-run/remix/blob/main/packages/remix-react/errors.ts
  * license at https://github.com/remix-run/remix/blob/main/LICENSE.md
  */
-
 export declare function deserializeErrors(errors: Router['state']['errors']): Router['state']['errors'];

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from '@modern-js/utils/runtime/router';
 export interface WithRouterProps {
   location: ReturnType<typeof useLocation>;
   params: Record<string, string>;

package/dist/types/runtimeContext.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Store } from '@modern-js-reduck/store';
-import type { StaticHandlerContext } from '@modern-js/utils/runtime/router';
+import type { StaticHandlerContext } from '@modern-js/utils/runtime/remix-router';
 import { createLoaderManager } from './core/loader/loaderManager';
 import { runtime } from './core/plugin';
 import { RouteManifest } from './router/runtime/types';

package/dist/types/ssr/cli/index.d.ts

@@ -1,5 +1,3 @@
 import type { CliPlugin, AppTools } from '@modern-js/app-tools';
-
 declare const _default: () => CliPlugin<AppTools>;
-
 export default _default;

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

@@ -1,4 +1,4 @@
 export type InjectTemplate = {
-  shellBefore?: string;
-  shellAfter?: string;
+  shellBefore: string;
+  shellAfter: string;
 };

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

@@ -14,6 +14,7 @@ export default class Entry {
   private readonly fragments;
   private readonly pluginConfig;
   private readonly host;
+  private readonly nonce?;
   constructor(options: EntryOptions);
   renderToHtml(context: RuntimeContext): Promise<string>;
   private prefetch;

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

@@ -19,6 +19,7 @@ export interface RenderEntry {
   result: RenderResult;
   stats: Record<string, any>;
   config: SSRPluginConfig;
+  nonce?: string;
 }
 export type RenderHandler = (jsx: React.ReactElement, renderer: RenderEntry, next: (jsx: React.ReactElement) => string) => string;
 export type RenderResult = {

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

@@ -2,4 +2,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;
+export declare function getLoadableScripts(extractor: ChunkExtractor): string;
+export declare function attributesToString(attributes: Record<string, any>): string;

package/dist/types/state/cli/index.d.ts

@@ -1,5 +1,3 @@
 import type { CliPlugin, AppTools } from '@modern-js/app-tools';
-
 declare const _default: () => CliPlugin<AppTools>;
-
 export default _default;

package/dist/types/state/types.d.ts

@@ -11,7 +11,6 @@ export type PluginOptions = Parameters<typeof createStore>[0] & {
    * Default: false
    * When it's true, will remove immer plugin
    */
-
   disableImmer?: boolean;
   devtools?: any;
 };

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.20.0",
+  "version": "2.21.0",
   "engines": {
     "node": ">=14.17.6"
   },
@@ -88,6 +88,11 @@
       "jsnext:source": "./src/router/runtime/server.ts",
       "types": "./dist/types/router/runtime/server.d.ts",
       "default": "./dist/esm/router/runtime/server.js"
+    },
+    "./loadable-bundler-plugin": {
+      "jsnext:source": "./src/ssr/cli/loadable-bundler-plugin.ts",
+      "types": "./dist/types/ssr/cli/loadable-bundler-plugin.d.ts",
+      "default": "./dist/cjs/ssr/cli/loadable-bundler-plugin.js"
     }
   },
   "typesVersions": {
@@ -130,23 +135,26 @@
       ],
       "router/server": [
         "./dist/types/router/runtime/server.d.ts"
+      ],
+      "loadable-bundler-plugin": [
+        "./dist/types/ssr/cli/loadable-bundler-plugin.d.ts"
       ]
     }
   },
   "dependencies": {
-    "@babel/core": "^7.18.0",
-    "@babel/types": "^7.18.0",
+    "@babel/core": "^7.21.8",
+    "@babel/types": "^7.21.5",
     "cookie": "0.5.0",
     "@loadable/babel-plugin": "^5.13.2",
     "@loadable/component": "^5.15.0",
     "@loadable/server": "^5.15.1",
     "@loadable/webpack-plugin": "5.15.2",
-    "@modern-js-reduck/plugin-auto-actions": "^1.1.4",
-    "@modern-js-reduck/plugin-devtools": "^1.1.4",
-    "@modern-js-reduck/plugin-effects": "^1.1.4",
-    "@modern-js-reduck/plugin-immutable": "^1.1.4",
-    "@modern-js-reduck/react": "^1.1.4",
-    "@modern-js-reduck/store": "^1.1.4",
+    "@modern-js-reduck/plugin-auto-actions": "^1.1.10",
+    "@modern-js-reduck/plugin-devtools": "^1.1.10",
+    "@modern-js-reduck/plugin-effects": "^1.1.10",
+    "@modern-js-reduck/plugin-immutable": "^1.1.10",
+    "@modern-js-reduck/react": "^1.1.10",
+    "@modern-js-reduck/store": "^1.1.10",
     "@remix-run/node": "^1.12.0",
     "@types/loadable__component": "^5.13.4",
     "@types/react-helmet": "^6.1.2",
@@ -157,14 +165,13 @@
     "invariant": "^2.2.4",
     "react-helmet": "^6.1.0",
     "react-is": "^18",
-    "react-router-dom": "^6.8.1",
     "react-side-effect": "^2.1.1",
     "redux-logger": "^3.0.6",
     "styled-components": "^5.3.1",
     "@swc/helpers": "0.5.1",
-    "@modern-js/plugin": "2.20.0",
-    "@modern-js/types": "2.20.0",
-    "@modern-js/utils": "2.20.0"
+    "@modern-js/plugin": "2.21.0",
+    "@modern-js/types": "2.21.0",
+    "@modern-js/utils": "2.21.0"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -182,13 +189,13 @@
     "jest": "^29",
     "react": "^18",
     "react-dom": "^18",
-    "ts-jest": "^29.0.5",
-    "typescript": "^4",
-    "@modern-js/app-tools": "2.20.0",
-    "@modern-js/core": "2.20.0",
-    "@modern-js/server-core": "2.20.0",
-    "@scripts/build": "2.20.0",
-    "@scripts/jest-config": "2.20.0"
+    "ts-jest": "^29.1.0",
+    "typescript": "^5",
+    "@modern-js/app-tools": "2.21.0",
+    "@modern-js/core": "2.21.0",
+    "@modern-js/server-core": "2.21.0",
+    "@scripts/build": "2.21.0",
+    "@scripts/jest-config": "2.21.0"
   },
   "sideEffects": false,
   "modernConfig": {},