feat: merge Initialisation Code

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

@@ -1,8 +1,7 @@
 import path from 'path';
 import { fs } from '@modern-js/utils';
 import {
-  defineRunInlineAndRouterDataInit,
-  initRouterDataAttrs,
+  modernInline,
   runRouterDataFnStr,
   runWindowFnStr,
 } from '../src/router/runtime/constants';
@@ -11,18 +10,8 @@ import {
   const targetDir = path.join(__dirname, '../static');
   await fs.ensureDir(targetDir);
 
-  const modernDefineInitPath = path.join(targetDir, 'modern-define-init.js');
-  await fs.writeFile(
-    modernDefineInitPath,
-    defineRunInlineAndRouterDataInit,
-    'utf-8',
-  );
-
-  const initRouterDataFilePath = path.join(
-    targetDir,
-    'router-data-attr-init-inline.js',
-  );
-  await fs.writeFile(initRouterDataFilePath, initRouterDataAttrs, 'utf-8');
+  const modernDefineInitPath = path.join(targetDir, 'modern-inline.js');
+  await fs.writeFile(modernDefineInitPath, modernInline, 'utf-8');
 
   const runRouterDataFilePath = path.join(
     targetDir,

packages/runtime/plugin-runtime/src/router/runtime/DeferredDataScripts.node.tsx

@@ -5,13 +5,8 @@ import type {
 } from '@modern-js/runtime-utils/remix-router';
 import { Await, useAsyncError } from '@modern-js/runtime-utils/router';
 import { Suspense, useEffect, useMemo, useRef } from 'react';
-import { ROUTER_DATA_JSON_ID } from 'src/core/constants';
-import {
-  defineRunInlineAndRouterDataInit,
-  initRouterDataAttrs,
-  runRouterDataFnStr,
-  runWindowFnStr,
-} from './constants';
+import { ROUTER_DATA_JSON_ID } from '../../core/constants';
+import { modernInline, runRouterDataFnStr, runWindowFnStr } from './constants';
 import { serializeErrors } from './utils';
 
 /**
@@ -37,8 +32,6 @@ const DeferredDataScripts = (props?: {
     | [
         string,
         string,
-        { fnName: string; fnArgs: any[]; fnRun: string; fnScriptSrc: string },
-        string,
         { fnName: string; fnArgs: any[]; fnRun: string; fnScriptSrc: string }[],
         JSX.Element[],
       ]
@@ -54,19 +47,11 @@ const DeferredDataScripts = (props?: {
       errors: serializeErrors(staticContext.errors),
     };
 
-    const initialScript0 = defineRunInlineAndRouterDataInit;
-
     // <script type="application/json" id="${ROUTER_DATA_JSON_ID}">${serializedRouterData}</script>
-    const initialScript1 = inlineScript ? '' : `${serializeJson(_ROUTER_DATA)}`;
+    const initialScript0 = inlineScript ? '' : `${serializeJson(_ROUTER_DATA)}`;
 
-    const initialScript2 = {
-      fnName: 'initRouterData',
-      fnArgs: [ROUTER_DATA_JSON_ID],
-      fnRun: runWindowFnStr,
-      fnScriptSrc: 'modern-run-window-fn',
-    };
+    const initialScript1 = modernInline;
 
-    const initialScript3 = initRouterDataAttrs;
     const deferredDataScripts: JSX.Element[] = [];
     const initialScripts = Object.entries(activeDeferreds).map(
       ([routeId, deferredData]) => {
@@ -133,8 +118,6 @@ const DeferredDataScripts = (props?: {
     return [
       initialScript0,
       initialScript1,
-      initialScript2,
-      initialScript3,
       initialScripts,
       deferredDataScripts,
     ];
@@ -148,41 +131,24 @@ const DeferredDataScripts = (props?: {
     <>
       {!hydratedRef.current && (
         <>
-          <script
-            async
-            nonce={props?.nonce}
-            data-script-src="modern-define-init"
-            suppressHydrationWarning
-            dangerouslySetInnerHTML={{ __html: deferredScripts[0] }}
-          />
           {/* json or empty string */}
-          {deferredScripts[1].length !== 0 && (
+          {deferredScripts[0].length !== 0 && (
             <script
               type="application/json"
               id={ROUTER_DATA_JSON_ID}
               nonce={props?.nonce}
               suppressHydrationWarning
-              dangerouslySetInnerHTML={{ __html: deferredScripts[1] }}
+              dangerouslySetInnerHTML={{ __html: deferredScripts[0] }}
             />
           )}
-          {/* run init _ROUTER_DATA */}
           <script
             async
             nonce={props?.nonce}
-            data-script-src={deferredScripts[2].fnScriptSrc}
-            data-fn-name={deferredScripts[2].fnName}
-            data-fn-args={JSON.stringify(deferredScripts[2].fnArgs)}
-            suppressHydrationWarning
-            dangerouslySetInnerHTML={{ __html: deferredScripts[2].fnRun }}
-          />
-          <script
-            async
-            nonce={props?.nonce}
-            data-script-src="router-data-attr-init-inline"
+            data-script-src="modern-define-init"
             suppressHydrationWarning
-            dangerouslySetInnerHTML={{ __html: deferredScripts[3] }}
+            dangerouslySetInnerHTML={{ __html: deferredScripts[1] }}
           />
-          {deferredScripts[4].map(({ fnName, fnRun, fnArgs, fnScriptSrc }) => (
+          {deferredScripts[2].map(({ fnName, fnRun, fnArgs, fnScriptSrc }) => (
             <script
               async
               key={fnName}
@@ -198,7 +164,7 @@ const DeferredDataScripts = (props?: {
           ))}
         </>
       )}
-      {!hydratedRef.current && deferredScripts[5]}
+      {!hydratedRef.current && deferredScripts[3]}
     </>
   );
 };

packages/runtime/plugin-runtime/src/router/runtime/constants.ts

@@ -1,3 +1,5 @@
+import { ROUTER_DATA_JSON_ID } from '../../core/constants';
+
 /**
  * setup promises for deferred data
  * original function:
@@ -51,7 +53,7 @@ const preResolvedFnStr = `function p(e,r){return void 0!==r?Promise.reject(new E
       Object.assign(_ROUTER_DATA.loaderData[routeIdJsonStr], source);
     };
    */
-export const initRouterDataAttrs = `_ROUTER_DATA.s = ${setupFnStr}_ROUTER_DATA.r = ${resolveFnStr}_ROUTER_DATA.p = ${preResolvedFnStr}function mergeData(a,e){e=e.reduce(function(a,{key:e,routerDataFnName:r,routerDataFnArgs:t}){return{...a,[e]:_ROUTER_DATA[r](...t)}},{});Object.assign(_ROUTER_DATA.loaderData[a],e)}`;
+const initRouterDataAttrs = `_ROUTER_DATA.s = ${setupFnStr}_ROUTER_DATA.r = ${resolveFnStr}_ROUTER_DATA.p = ${preResolvedFnStr}function mergeData(a,e){e=e.reduce(function(a,{key:e,routerDataFnName:r,routerDataFnArgs:t}){return{...a,[e]:_ROUTER_DATA[r](...t)}},{});Object.assign(_ROUTER_DATA.loaderData[a],e)}`;
 
 /**
     function runWindowFn() {
@@ -70,9 +72,12 @@ export const initRouterDataAttrs = `_ROUTER_DATA.s = ${setupFnStr}_ROUTER_DATA.r
           _ROUTER_DATA = {};
         }
       }
+
+      initRouterData();
+      ${initRouterDataAttrs}
     }
    */
-export const defineRunInlineAndRouterDataInit = `function runWindowFn(){window[document.currentScript.getAttribute("data-fn-name")](...JSON.parse(document.currentScript.getAttribute("data-fn-args")))}function runRouterDataFn(){_ROUTER_DATA[document.currentScript.getAttribute("data-fn-name")](...JSON.parse(document.currentScript.getAttribute("data-fn-args")))}function initRouterData(e){var r=document.getElementById(e);if(r)try{_ROUTER_DATA=JSON.parse(r.textContent)}catch(r){console.error("parse ".concat(e," error"),t),_ROUTER_DATA={}}}`;
+export const modernInline = `function runWindowFn(){window[document.currentScript.getAttribute("data-fn-name")](...JSON.parse(document.currentScript.getAttribute("data-fn-args")))}function runRouterDataFn(){_ROUTER_DATA[document.currentScript.getAttribute("data-fn-name")](...JSON.parse(document.currentScript.getAttribute("data-fn-args")))}function initRouterData(e){var r=document.getElementById(e);if(r)try{_ROUTER_DATA=JSON.parse(r.textContent)}catch(r){console.error("parse ".concat(e," error"),t),_ROUTER_DATA={}}};initRouterData('${ROUTER_DATA_JSON_ID}');${initRouterDataAttrs}`;
 
 export const runRouterDataFnStr = `runRouterDataFn();`;