(WIP) feat: window._SSR_DATA support ssr.inlineScript in ssr stream mode

biome.json

@@ -16,7 +16,8 @@
       "packages/generator/sandpack-react/src/templates/**",
       "tests/integration/swc/fixtures/minify-css/src/bootstrap.css",
       "tests/integration/swc/fixtures/config-function/src/bootstrap.css",
-      "packages/runtime/plugin-garfish/type.d.ts"
+      "packages/runtime/plugin-garfish/type.d.ts",
+      "packages/runtime/plugin-runtime/static/**"
     ]
   },
   "css": {
@@ -112,7 +113,8 @@
       "tests/integration/ssr/fixtures/preload/**/*",
       "tests/integration/swc/fixtures/transform-fail/src/App.jsx",
       "tests/integration/module/plugins/vue/**/*",
-      "packages/module/plugin-module-node-polyfill/src/globals.js"
+      "packages/module/plugin-module-node-polyfill/src/globals.js",
+      "packages/runtime/plugin-runtime/static/**"
     ]
   }
 }

packages/runtime/plugin-runtime/package.json

@@ -29,6 +29,7 @@
       "jsnext:source": "./src/index.ts",
       "default": "./dist/esm/index.js"
     },
+    "./package.json": "./package.json",
     "./types": "./types/index.d.ts",
     "./types/index": "./types/index.d.ts",
     "./types/router": "./types/router.d.ts",
@@ -178,7 +179,8 @@
     "dev": "modern-lib build --watch",
     "prepublishOnly": "only-allow-pnpm",
     "new": "modern-lib new",
-    "build": "modern-lib build",
+    "build": "modern-lib build && pnpm run gen-static",
+    "gen-static": "ts-node ./scripts/gen-static.ts",
     "test": "jest"
   },
   "dependencies": {
@@ -235,6 +237,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "ts-jest": "^29.1.0",
+    "ts-node": "^10.9.1",
     "typescript": "^5",
     "webpack": "^5.95.0"
   },

packages/runtime/plugin-runtime/scripts/gen-static.ts

@@ -0,0 +1,26 @@
+import path from 'path';
+import { fs } from '@modern-js/utils';
+import {
+  modernInline,
+  runRouterDataFnStr,
+  runWindowFnStr,
+} from '../src/router/runtime/constants';
+
+(async () => {
+  const targetDir = path.join(__dirname, '../static');
+  await fs.ensureDir(targetDir);
+
+  const modernDefineInitPath = path.join(targetDir, 'modern-inline.js');
+  await fs.writeFile(modernDefineInitPath, modernInline, 'utf-8');
+
+  const runRouterDataFilePath = path.join(
+    targetDir,
+    'modern-run-router-data-fn.js',
+  );
+  await fs.writeFile(runRouterDataFilePath, runRouterDataFnStr, 'utf-8');
+
+  const runWindowFilePath = path.join(targetDir, 'modern-run-window-fn.js');
+  await fs.writeFile(runWindowFilePath, runWindowFnStr, 'utf-8');
+
+  console.info('Generate static files successfully');
+})();

packages/runtime/plugin-runtime/src/core/server/requestHandler.ts

@@ -16,7 +16,7 @@ import { getGlobalRunner } from '../plugin/runner';
 import { createRoot } from '../react';
 import type { SSRServerContext } from '../types';
 import { CHUNK_CSS_PLACEHOLDER } from './constants';
-import { getSSRConfigByEntry, getSSRMode } from './utils';
+import { getSSRConfigByEntry, getSSRInlineScript, getSSRMode } from './utils';
 
 export type { RequestHandlerConfig as HandleRequestConfig } from '@modern-js/app-tools';
 
@@ -102,6 +102,7 @@ function createSSRContext(
   );
 
   const ssrMode = getSSRMode(ssrConfig);
+  const inlineScript = getSSRInlineScript(ssrConfig);
 
   const loaderFailureMode =
     typeof ssrConfig === 'object' ? ssrConfig.loaderFailureMode : undefined;
@@ -137,6 +138,7 @@ function createSSRContext(
     },
     reporter,
     mode: ssrMode,
+    inlineScript,
     onError,
     onTiming,
     loaderFailureMode,

packages/runtime/plugin-runtime/src/core/server/stream/afterTemplate.ts

@@ -1,6 +1,6 @@
 import { serializeJson } from '@modern-js/runtime-utils/node';
 import type { HeadersData } from '@modern-js/runtime-utils/universal/request';
-import type { RenderLevel } from '../../constants';
+import { type RenderLevel, SSR_DATA_JSON_ID } from '../../constants';
 import type { RuntimeContext } from '../../context';
 import type { SSRContainer } from '../../types';
 import { SSR_DATA_PLACEHOLDER } from '../constants';
@@ -103,9 +103,16 @@ function createReplaceSSRData(options: {
   };
   const attrsStr = attributesToString({ nonce });
 
-  const ssrDataScript = `
-    <script${attrsStr}>window._SSR_DATA = ${serializeJson(ssrData)}</script>
-    `;
+  const inlineScript =
+    typeof ssrConfig === 'boolean' ? true : ssrConfig?.inlineScript !== false;
+  const useInlineScript = inlineScript !== false;
+  const serializeSSRData = serializeJson(ssrData);
+
+  const ssrDataScript = useInlineScript
+    ? `
+    <script${attrsStr}>window._SSR_DATA = ${serializeSSRData}</script>
+    `
+    : `<script type="application/json" id="${SSR_DATA_JSON_ID}">${serializeSSRData}</script>`;
 
   return (template: string) =>
     safeReplace(template, SSR_DATA_PLACEHOLDER, ssrDataScript);

packages/runtime/plugin-runtime/src/core/server/utils.ts

@@ -79,3 +79,11 @@ export function getSSRMode(ssrConfig?: SSRConfig): 'string' | 'stream' | false {
 
   return ssrConfig?.mode === 'stream' ? 'stream' : 'string';
 }
+
+export function getSSRInlineScript(ssrConfig?: SSRConfig): boolean {
+  if (typeof ssrConfig === 'object') {
+    return ssrConfig.inlineScript === undefined ? true : ssrConfig.inlineScript;
+  }
+
+  return true;
+}

packages/runtime/plugin-runtime/src/core/types.ts

@@ -69,4 +69,5 @@ export type SSRServerContext = Pick<
   loaderFailureMode?: 'clientRender' | 'errorBoundary';
   onError?: (e: unknown) => void;
   onTiming?: (name: string, dur: number) => void;
+  inlineScript?: boolean;
 };