@modern-js/runtime 2.6.0 → 2.7.0

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

@@ -1,7 +1,8 @@
 import React from "react";
 import ReactDomServer from "react-dom/server";
-import serialize from "serialize-javascript";
+import { serializeJson } from "@modern-js/utils/serialize";
 import ReactHelmet from "react-helmet";
+import { serializeErrors } from "../../../router/runtime/utils";
 import helmetReplace from "../helmet";
 import {
   RenderLevel
@@ -72,13 +73,18 @@ class Entry {
     if ((_c = ssrContext.redirection) == null ? void 0 : _c.url) {
       return "";
     }
+    const { routerContext } = context;
+    const routerData = routerContext ? {
+      loaderData: routerContext.loaderData,
+      errors: serializeErrors(routerContext.errors)
+    } : void 0;
     let html = "";
     const templateData = buildTemplateData(
       ssrContext,
       prefetchData,
       this.result.renderLevel
     );
-    const SSRData = this.getSSRDataScript(templateData);
+    const SSRData = this.getSSRDataScript(templateData, routerData);
     for (const fragment of this.fragments) {
       if (fragment.isVariable && fragment.content === "SSRDataScript") {
         html += fragment.getValue(SSRData);
@@ -135,13 +141,18 @@ class Entry {
     }
     return html;
   }
-  getSSRDataScript(templateData) {
+  getSSRDataScript(templateData, routerData) {
+    let ssrDataScripts = `<script>window._SSR_DATA = ${serializeJson(
+      templateData
+    )}</script>`;
+    if (routerData) {
+      ssrDataScripts += `
+<script>window._ROUTER_DATA = ${serializeJson(
+        routerData
+      )}</script>`;
+    }
     return {
-      SSRDataScript: `
-        <script>window._SSR_DATA = ${serialize(templateData, {
-        isJSON: true
-      })}</script>
-      `
+      SSRDataScript: ssrDataScripts
     };
   }
 }

package/dist/types/common.d.ts

@@ -3,4 +3,6 @@ export declare const isBrowser: () => boolean;
 export interface AppConfig {
   state?: StateConfig | boolean;
   [key: string]: any;
-}
+}
+export declare const JSX_SHELL_STREAM_END_MARK = "<!--<?- SHELL_STREAM_END ?>-->";
+export declare const ESCAPED_SHELL_STREAM_END_MARK = "&lt;!--&lt;?- SHELL_STREAM_END ?&gt;--&gt;";

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Renderer } from 'react-dom';
 import type { hydrateRoot, createRoot } from 'react-dom/client';
-import { RuntimeContext, TRuntimeContext } from '../runtime-context';
+import { RuntimeContext, TRuntimeContext } from '../runtimeContext';
 import { Plugin } from './plugin';
 export type CreateAppOptions = {
   plugins: Plugin[];

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

@@ -1,8 +1,9 @@
 export { createPlugin, createRuntime, runtime, registerInit } from './plugin';
 export type { Plugin } from './plugin';
-export { defineConfig, getConfig } from './app-config';
+export { defineConfig, getConfig } from './appConfig';
 export * from './compatible';
-export type { TRuntimeContext, RuntimeContext } from '../runtime-context';
-export { RuntimeReactContext, ServerRouterContext } from '../runtime-context';
+export type { TRuntimeContext, RuntimeContext } from '../runtimeContext';
+export { RuntimeReactContext, ServerRouterContext } from '../runtimeContext';
 export * from './loader';
+export type { SSRData, SSRContainer } from './types';
 export * from '@modern-js/plugin';

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

@@ -1,2 +1 @@
-export { default as useLoader } from './useLoader';
-export type { SSRData, SSRContainer } from './useLoader';
+export { default as useLoader } from './useLoader';

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

@@ -1,17 +1,4 @@
-import { LoaderResult } from './loaderManager';
-export interface SSRData {
-  loadersData: Record<string, LoaderResult | undefined>;
-  initialData?: Record<string, unknown>;
-  storeState?: any;
-}
-export interface SSRContainer {
-  data?: SSRData;
-}
-declare global {
-  interface Window {
-    _SSR_DATA?: SSRContainer;
-  }
-}
+type LoaderFn<P = any, T = any> = (context: any, params: P) => Promise<T>;
 export interface LoaderOptions<Params = any, TData = any, TError extends Error = any> {
   /**
    * Revoke when loader excuted successfully.
@@ -44,7 +31,6 @@ export interface LoaderOptions<Params = any, TData = any, TError extends Error =
 
   static?: boolean;
 }
-type LoaderFn<P = any, T = any> = (context: any, params: P) => Promise<T>;
 declare const useLoader: <TData = any, Params = any, E = any>(loaderFn: LoaderFn<Params, TData>, options?: LoaderOptions<Params, any, any>) => {
   reload: (params?: Params | undefined) => Promise<any> | undefined;
   loading: boolean;

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

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { Setup, ToThreads, CommonAPI, PluginOptions } from '@modern-js/plugin';
-import type { RuntimeContext, TRuntimeContext } from '../runtime-context';
+import type { RuntimeContext, TRuntimeContext } from '../runtimeContext';
 export interface AppProps {}
 declare const runtimeHooks: {
   hoc: import("@modern-js/plugin").Pipeline<{
@@ -13,13 +13,13 @@ declare const runtimeHooks: {
   }, JSX.Element>;
   client: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
-    readonly context?: RuntimeContext | undefined;
+    readonly context: RuntimeContext;
     ModernRender: (App: React.ReactElement) => void;
     ModernHydrate: (App: React.ReactElement, callback?: () => void) => void;
   }, void>;
   server: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
-    readonly context?: RuntimeContext | undefined;
+    readonly context: RuntimeContext;
   }, string>;
   init: import("@modern-js/plugin").AsyncPipeline<{
     context: RuntimeContext;
@@ -52,13 +52,13 @@ export declare const createRuntime: () => import("@modern-js/plugin").Manager<{
   }, JSX.Element>;
   client: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
-    readonly context?: RuntimeContext | undefined;
+    readonly context: RuntimeContext;
     ModernRender: (App: React.ReactElement) => void;
     ModernHydrate: (App: React.ReactElement, callback?: () => void) => void;
   }, void>;
   server: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
-    readonly context?: RuntimeContext | undefined;
+    readonly context: RuntimeContext;
   }, string>;
   init: import("@modern-js/plugin").AsyncPipeline<{
     context: RuntimeContext;
@@ -84,13 +84,13 @@ export declare const runtime: import("@modern-js/plugin").Manager<{
   }, JSX.Element>;
   client: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
-    readonly context?: RuntimeContext | undefined;
+    readonly context: RuntimeContext;
     ModernRender: (App: React.ReactElement) => void;
     ModernHydrate: (App: React.ReactElement, callback?: () => void) => void;
   }, void>;
   server: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
-    readonly context?: RuntimeContext | undefined;
+    readonly context: RuntimeContext;
   }, string>;
   init: import("@modern-js/plugin").AsyncPipeline<{
     context: RuntimeContext;
@@ -111,13 +111,13 @@ export declare const createPlugin: (setup?: Setup<{
   }, JSX.Element>;
   client: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
-    readonly context?: RuntimeContext | undefined;
+    readonly context: RuntimeContext;
     ModernRender: (App: React.ReactElement) => void;
     ModernHydrate: (App: React.ReactElement, callback?: () => void) => void;
   }, void>;
   server: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
-    readonly context?: RuntimeContext | undefined;
+    readonly context: RuntimeContext;
   }, string>;
   init: import("@modern-js/plugin").AsyncPipeline<{
     context: RuntimeContext;
@@ -137,13 +137,13 @@ export declare const createPlugin: (setup?: Setup<{
   }, JSX.Element>;
   client: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
-    readonly context?: RuntimeContext | undefined;
+    readonly context: RuntimeContext;
     ModernRender: (App: React.ReactElement) => void;
     ModernHydrate: (App: React.ReactElement, callback?: () => void) => void;
   }, void>;
   server: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
-    readonly context?: RuntimeContext | undefined;
+    readonly context: RuntimeContext;
   }, string>;
   init: import("@modern-js/plugin").AsyncPipeline<{
     context: RuntimeContext;
@@ -163,13 +163,13 @@ export declare const createPlugin: (setup?: Setup<{
   }, JSX.Element>;
   client: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
-    readonly context?: RuntimeContext | undefined;
+    readonly context: RuntimeContext;
     ModernRender: (App: React.ReactElement) => void;
     ModernHydrate: (App: React.ReactElement, callback?: () => void) => void;
   }, void>;
   server: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
-    readonly context?: RuntimeContext | undefined;
+    readonly context: RuntimeContext;
   }, string>;
   init: import("@modern-js/plugin").AsyncPipeline<{
     context: RuntimeContext;
@@ -189,13 +189,13 @@ export declare const createPlugin: (setup?: Setup<{
   }, JSX.Element>;
   client: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
-    readonly context?: RuntimeContext | undefined;
+    readonly context: RuntimeContext;
     ModernRender: (App: React.ReactElement) => void;
     ModernHydrate: (App: React.ReactElement, callback?: () => void) => void;
   }, void>;
   server: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
-    readonly context?: RuntimeContext | undefined;
+    readonly context: RuntimeContext;
   }, string>;
   init: import("@modern-js/plugin").AsyncPipeline<{
     context: RuntimeContext;

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

@@ -0,0 +1,22 @@
+import type { LoaderResult } from './loader/loaderManager';
+declare global {
+  interface Window {
+    _SSR_DATA?: SSRContainer;
+    _ROUTER_DATA?: RouterSSRData;
+  }
+}
+export interface SSRData {
+  loadersData: Record<string, LoaderResult | undefined>;
+  initialData?: Record<string, unknown>;
+  storeState?: any;
+}
+export interface RouteData {
+  [routeId: string]: any;
+}
+export interface RouterSSRData {
+  loaderData: RouteData;
+  errors: RouteData | null;
+}
+export interface SSRContainer {
+  data?: SSRData;
+}

package/dist/types/index.d.ts

@@ -3,7 +3,7 @@ import type { RouterConfig } from './router';
 export type { Plugin } from './core';
 export type { AppConfig } from './common';
 export { isBrowser } from './common';
-export type { BaseRuntimeContext, RuntimeContext, BaseTRuntimeContext, TRuntimeContext } from './runtime-context';
+export type { BaseRuntimeContext, RuntimeContext, BaseTRuntimeContext, TRuntimeContext } from './runtimeContext';
 export type { RuntimeUserConfig } from './config';
 export { createApp, createPlugin, useLoader, bootstrap, RuntimeReactContext, defineConfig, registerInit, useRuntimeContext } from './core';
 export { StateConfig, RouterConfig };

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+
+/**
+ * DeferredDataScripts only renders in server side,
+ * it doesn't need to be hydrated in client side.
+ */
+declare const DeferredDataScripts: () => JSX.Element | null;
+export default DeferredDataScripts;

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

@@ -3,5 +3,7 @@ import type { SingleRouteConfig, RouterConfig } from './types';
 export type { SingleRouteConfig, RouterConfig };
 export default routerPlugin;
 export { modifyRoutes } from './plugin';
-export * from 'react-router-dom';
-export * from './withRouter';
+export * from './withRouter';
+export type { FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, FetcherWithComponents, 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, Link, NavLink, 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 { defer, json, redirect } from '@modern-js/utils/remix-router';

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

@@ -1,8 +1,27 @@
 import React from 'react';
-import type { NestedRoute, PageRoute } from '@modern-js/types';
+import { type NestedRoute, type PageRoute, type SSRMode } from '@modern-js/types';
+import { type Router, type StaticHandlerContext } from '@modern-js/utils/remix-router';
 import { RouterConfig } from './types';
-export declare function getRouteComponents(routes: (NestedRoute | PageRoute)[], globalApp?: React.ComponentType<any>): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-export declare function renderRoutes(routesConfig: RouterConfig['routesConfig']): React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | null;
+export declare function getRouteComponents(routes: (NestedRoute | PageRoute)[], {
+  globalApp,
+  ssrMode
+}: {
+  globalApp?: React.ComponentType<any>;
+  ssrMode?: SSRMode;
+}): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+export declare function renderRoutes(routesConfig: RouterConfig['routesConfig'], ssrMode?: SSRMode): React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | null;
 export declare function getLocation(serverContext: any): string;
 export declare const urlJoin: (...parts: string[]) => string;
-export declare function standardSlash(str: string): string;
+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/{runtime-context.d.ts → runtimeContext.d.ts}

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { Store } from '@modern-js-reduck/store';
+import type { StaticHandlerContext } from '@modern-js/utils/remix-router';
 import { createLoaderManager } from './core/loader/loaderManager';
 import { runtime } from './core/plugin';
 import { SSRServerContext } from './ssr/serverRender/types';
@@ -9,6 +10,7 @@ export interface BaseRuntimeContext {
   runner: ReturnType<typeof runtime.init>;
   ssrContext?: SSRServerContext;
   store?: Store;
+  routerContext?: StaticHandlerContext;
 }
 export interface RuntimeContext extends BaseRuntimeContext {
   [key: string]: any;

package/dist/types/ssr/serverRender/renderToStream/buildTemplate.after.d.ts

@@ -1,6 +1,8 @@
+import type { StaticHandlerContext } from '@modern-js/utils/remix-router';
 import { RenderLevel, SSRServerContext } from '../types';
 type BuildShellAfterTemplateOptions = {
   ssrContext: SSRServerContext;
+  routerContext: StaticHandlerContext;
   renderLevel: RenderLevel;
 };
 export declare function buildShellAfterTemplate(afterAppTemplate: string, options: BuildShellAfterTemplateOptions): string;

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.6.0",
+  "version": "2.7.0",
   "engines": {
     "node": ">=14.17.6"
   },
@@ -144,25 +144,23 @@
     "@modern-js-reduck/plugin-immutable": "^1.1.4",
     "@modern-js-reduck/react": "^1.1.4",
     "@modern-js-reduck/store": "^1.1.4",
-    "@remix-run/node": "^1.9.0",
-    "@remix-run/router": "^1.2.0",
+    "@remix-run/node": "^1.12.0",
     "@types/loadable__component": "^5.13.4",
     "@types/react-helmet": "^6.1.2",
     "@types/redux-logger": "^3.0.9",
     "@types/styled-components": "^5.1.14",
+    "esbuild": "0.15.7",
     "hoist-non-react-statics": "^3.3.2",
     "invariant": "^2.2.4",
     "react-helmet": "^6.1.0",
     "react-is": "^18",
-    "react-router-dom": "^6.6.0",
+    "react-router-dom": "^6.8.1",
     "react-side-effect": "^2.1.1",
     "redux-logger": "^3.0.6",
-    "serialize-javascript": "^6.0.0",
     "styled-components": "^5.3.1",
-    "esbuild": "0.15.7",
-    "@modern-js/plugin": "2.6.0",
-    "@modern-js/types": "2.6.0",
-    "@modern-js/utils": "2.6.0"
+    "@modern-js/plugin": "2.7.0",
+    "@modern-js/types": "2.7.0",
+    "@modern-js/utils": "2.7.0"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -178,17 +176,16 @@
     "@types/loadable__webpack-plugin": "^5.7.3",
     "@types/node": "^14",
     "@types/react-side-effect": "^1.1.1",
-    "@types/serialize-javascript": "^5.0.1",
     "jest": "^27",
     "react": "^18",
     "react-dom": "^18",
     "ts-jest": "^27.0.4",
     "typescript": "^4",
-    "@modern-js/app-tools": "2.6.0",
-    "@modern-js/core": "2.6.0",
-    "@modern-js/server-core": "2.6.0",
-    "@scripts/build": "2.6.0",
-    "@scripts/jest-config": "2.6.0"
+    "@modern-js/core": "2.7.0",
+    "@modern-js/server-core": "2.7.0",
+    "@modern-js/app-tools": "2.7.0",
+    "@scripts/build": "2.7.0",
+    "@scripts/jest-config": "2.7.0"
   },
   "sideEffects": false,
   "modernConfig": {},