@bleedingdev/modern-js-runtime 3.2.0-ultramodern.96 → 3.2.0-ultramodern.98

package/dist/cjs/core/server/scriptOrder.js

@@ -0,0 +1,59 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    injectBeforeHydrationEntryScript: ()=>injectBeforeHydrationEntryScript
+});
+function getScriptTags(template) {
+    const scriptRegExp = /<script\b[^>]*\bsrc=(["'])(.*?)\1[^>]*><\/script>/g;
+    return Array.from(template.matchAll(scriptRegExp)).map((match)=>({
+            index: match.index ?? 0,
+            tag: match[0],
+            src: match[2]
+        }));
+}
+function getAssetBasename(src) {
+    const withoutQuery = src.split(/[?#]/)[0];
+    return withoutQuery.split('/').pop() || withoutQuery;
+}
+function isEntryScript(src, entryName, asyncEntry) {
+    const basename = getAssetBasename(src);
+    const prefix = asyncEntry ? `async-${entryName}` : entryName;
+    return basename === `${prefix}.js` || basename.startsWith(`${prefix}.`) || basename.startsWith(`${prefix}-`);
+}
+function injectBeforeHydrationEntryScript(template, scripts, entryName = 'index') {
+    if (!scripts) return template;
+    const scriptTags = getScriptTags(template);
+    const target = scriptTags.find((match)=>isEntryScript(match.src, entryName, false)) ?? scriptTags.find((match)=>isEntryScript(match.src, entryName, true));
+    if (!target) return template;
+    return `${template.slice(0, target.index)}${scripts}${template.slice(target.index)}`;
+}
+exports.injectBeforeHydrationEntryScript = __webpack_exports__.injectBeforeHydrationEntryScript;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "injectBeforeHydrationEntryScript"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/core/server/stream/afterTemplate.js

@@ -30,6 +30,7 @@ const node_namespaceObject = require("@modern-js/runtime-utils/node");
 const lifecycle_js_namespaceObject = require("../../../router/runtime/lifecycle.js");
 const external_constants_js_namespaceObject = require("../../constants.js");
 const external_constants_js_namespaceObject_1 = require("../constants.js");
+const external_scriptOrder_js_namespaceObject = require("../scriptOrder.js");
 const external_shared_js_namespaceObject = require("../shared.js");
 const external_utils_js_namespaceObject = require("../utils.js");
 function buildShellAfterTemplate(afterAppTemplate, options) {
@@ -58,7 +59,11 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
         const jsAssets = Array.from(new Set(assetEntries.flatMap((entry)=>(entry.assets ?? []).filter((asset)=>asset.endsWith('.js')))));
         const nonceAttr = nonce ? ` nonce="${nonce}"` : '';
         const jsChunkStr = jsAssets.filter((asset)=>!template.includes(asset)).map((asset)=>`<script src=${asset}${nonceAttr}></script>`).join(' ');
-        if (jsChunkStr) return (0, external_utils_js_namespaceObject.safeReplace)(template, '<!--<?- chunksMap.js ?>-->', jsChunkStr);
+        if (jsChunkStr) {
+            const withoutPlaceholder = (0, external_utils_js_namespaceObject.safeReplace)(template, '<!--<?- chunksMap.js ?>-->', '');
+            const withEarlyScripts = (0, external_scriptOrder_js_namespaceObject.injectBeforeHydrationEntryScript)(withoutPlaceholder, jsChunkStr, entryName);
+            return withEarlyScripts !== withoutPlaceholder ? withEarlyScripts : (0, external_utils_js_namespaceObject.safeReplace)(template, '<!--<?- chunksMap.js ?>-->', jsChunkStr);
+        }
         return template;
     }
     return (0, external_shared_js_namespaceObject.buildHtml)(afterAppTemplate, callbacks);

package/dist/cjs/core/server/string/index.js

@@ -44,6 +44,7 @@ const index_js_namespaceObject = require("../../context/index.js");
 const wrapper_js_namespaceObject = require("../../react/wrapper.js");
 const external_constants_js_namespaceObject_1 = require("../constants.js");
 const external_helmet_js_namespaceObject = require("../helmet.js");
+const external_scriptOrder_js_namespaceObject = require("../scriptOrder.js");
 const external_shared_js_namespaceObject = require("../shared.js");
 const external_tracer_js_namespaceObject = require("../tracer.js");
 const external_utils_js_namespaceObject = require("../utils.js");
@@ -96,10 +97,10 @@ const renderString = async (request, serverRoot, options)=>{
     const rootElement = (0, wrapper_js_namespaceObject.wrapRuntimeContextProvider)(serverRoot, Object.assign(runtimeContext, {
         ssr: true
     }));
-    const html = await generateHtml(rootElement, htmlTemplate, chunkSet, collectors, runtimeContext.ssrContext?.htmlModifiers || [], runtimeContext, tracer);
+    const html = await generateHtml(rootElement, htmlTemplate, chunkSet, collectors, runtimeContext.ssrContext?.htmlModifiers || [], runtimeContext, entryName, tracer);
     return html;
 };
-async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifiers, runtimeContext, { onError, onTiming }) {
+async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifiers, runtimeContext, entryName, { onError, onTiming }) {
     let html = '';
     let helmetData;
     const finalApp = collectors.reduce((pre, creator)=>creator.collect?.(pre) || pre, App);
@@ -120,7 +121,7 @@ async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifie
     const { ssrScripts, cssChunk, jsChunk } = chunkSet;
     const finalHtml = await (0, external_shared_js_namespaceObject.buildHtml)(htmlTemplate, [
         createReplaceHtml(html),
-        createReplaceChunkJs(jsChunk),
+        createReplaceChunkJs(jsChunk, entryName),
         createReplaceChunkCss(cssChunk),
         createReplaceSSRDataScript(ssrScripts),
         (0, external_helmet_js_namespaceObject.createReplaceHelemt)(helmetData),
@@ -134,8 +135,14 @@ function createReplaceHtml(html) {
 function createReplaceSSRDataScript(data) {
     return (template)=>(0, external_utils_js_namespaceObject.safeReplace)(template, external_constants_js_namespaceObject_1.SSR_DATA_PLACEHOLDER, data);
 }
-function createReplaceChunkJs(js) {
-    return (template)=>(0, external_utils_js_namespaceObject.safeReplace)(template, external_constants_js_namespaceObject_1.CHUNK_JS_PLACEHOLDER, js);
+function createReplaceChunkJs(js, entryName) {
+    return (template)=>{
+        if (!js) return (0, external_utils_js_namespaceObject.safeReplace)(template, external_constants_js_namespaceObject_1.CHUNK_JS_PLACEHOLDER, '');
+        const withoutPlaceholder = (0, external_utils_js_namespaceObject.safeReplace)(template, external_constants_js_namespaceObject_1.CHUNK_JS_PLACEHOLDER, '');
+        const withEarlyScripts = (0, external_scriptOrder_js_namespaceObject.injectBeforeHydrationEntryScript)(withoutPlaceholder, js, entryName);
+        if (withEarlyScripts !== withoutPlaceholder) return withEarlyScripts;
+        return (0, external_utils_js_namespaceObject.safeReplace)(template, external_constants_js_namespaceObject_1.CHUNK_JS_PLACEHOLDER, js);
+    };
 }
 function createReplaceChunkCss(css) {
     return (template)=>(0, external_utils_js_namespaceObject.safeReplace)(template, external_constants_js_namespaceObject_1.CHUNK_CSS_PLACEHOLDER, css);

package/dist/cjs/core/server/string/loadable.js

@@ -24,7 +24,8 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    LoadableCollector: ()=>LoadableCollector
+    LoadableCollector: ()=>LoadableCollector,
+    orderHydrationScriptChunks: ()=>orderHydrationScriptChunks
 });
 const server_namespaceObject = require("@loadable/server");
 const lifecycle_js_namespaceObject = require("../../../router/runtime/lifecycle.js");
@@ -35,6 +36,33 @@ const extname = (uri)=>{
     return `.${uri?.split('.').pop()}` || '';
 };
 const generateChunks = (chunks, ext)=>chunks.filter((chunk)=>Boolean(chunk.url)).filter((chunk)=>extname(chunk.url).slice(1) === ext);
+const dedupeChunksByUrl = (chunks)=>{
+    const seen = new Set();
+    return chunks.filter((chunk)=>{
+        if (!chunk.url || seen.has(chunk.url)) return false;
+        seen.add(chunk.url);
+        return true;
+    });
+};
+const isAsyncEntryScriptChunk = (chunk, entryName)=>{
+    if (!chunk.url?.endsWith('.js')) return false;
+    const asyncEntryName = `async-${entryName}`;
+    const filename = chunk.filename || chunk.url;
+    const basename = filename.split('/').pop() || filename;
+    return basename === `${asyncEntryName}.js` || basename.startsWith(`${asyncEntryName}.`) || basename.startsWith(`${asyncEntryName}-`);
+};
+const orderHydrationScriptChunks = ({ asyncEntryChunks, collectedChunks, matchedRouteChunks, entryName })=>{
+    const asyncEntryScriptChunks = [];
+    const asyncEntryDependencyChunks = [];
+    for (const chunk of asyncEntryChunks)if (isAsyncEntryScriptChunk(chunk, entryName)) asyncEntryScriptChunks.push(chunk);
+    else asyncEntryDependencyChunks.push(chunk);
+    return dedupeChunksByUrl([
+        ...asyncEntryDependencyChunks,
+        ...collectedChunks,
+        ...matchedRouteChunks,
+        ...asyncEntryScriptChunks
+    ]);
+};
 const checkIsInline = (chunk, enableInline)=>{
     if ('production' !== process.env.NODE_ENV) return false;
     if (enableInline instanceof RegExp) return enableInline.test(chunk.url);
@@ -85,8 +113,16 @@ class LoadableCollector {
                 `async-${entryName}`
             ]));
         } catch (e) {}
-        const chunks = [].concat(asyncChunks).concat(extractor ? extractor.getChunkAssets(extractor.chunks) : []).concat(this.getMatchedRouteChunks());
-        const scriptChunks = generateChunks(chunks, 'js');
+        const collectedChunks = extractor ? extractor.getChunkAssets(extractor.chunks) : [];
+        const matchedRouteChunks = this.getMatchedRouteChunks();
+        const orderedScriptChunks = orderHydrationScriptChunks({
+            asyncEntryChunks: asyncChunks,
+            collectedChunks,
+            matchedRouteChunks,
+            entryName
+        });
+        const chunks = [].concat(asyncChunks).concat(collectedChunks).concat(matchedRouteChunks);
+        const scriptChunks = generateChunks(orderedScriptChunks, 'js');
         const styleChunks = generateChunks(chunks, 'css');
         if (extractor) {
             this.emitLoadableScripts(extractor);
@@ -164,8 +200,10 @@ class LoadableCollector {
     }
 }
 exports.LoadableCollector = __webpack_exports__.LoadableCollector;
+exports.orderHydrationScriptChunks = __webpack_exports__.orderHydrationScriptChunks;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "LoadableCollector"
+    "LoadableCollector",
+    "orderHydrationScriptChunks"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/cjs/router/runtime/tanstack/hydrationBoundary.js

@@ -0,0 +1,43 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    wrapTanstackSsrHydrationBoundary: ()=>wrapTanstackSsrHydrationBoundary
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+function wrapTanstackSsrHydrationBoundary(routerContent, shouldWrap) {
+    return shouldWrap ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_namespaceObject.Suspense, {
+        fallback: null,
+        children: routerContent
+    }) : routerContent;
+}
+exports.wrapTanstackSsrHydrationBoundary = __webpack_exports__.wrapTanstackSsrHydrationBoundary;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "wrapTanstackSsrHydrationBoundary"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -37,6 +37,7 @@ const external_hooks_js_namespaceObject = require("../hooks.js");
 const external_lifecycle_js_namespaceObject = require("../lifecycle.js");
 const external_utils_js_namespaceObject = require("../utils.js");
 const external_basepathRewrite_js_namespaceObject = require("./basepathRewrite.js");
+const external_hydrationBoundary_js_namespaceObject = require("./hydrationBoundary.js");
 const external_prefetchLink_js_namespaceObject = require("./prefetchLink.js");
 const external_routeTree_js_namespaceObject = require("./routeTree.js");
 const client_js_namespaceObject = require("./rsc/client.js");
@@ -215,6 +216,7 @@ const tanstackRouterPlugin = (userConfig = {})=>({
                     }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_router_namespaceObject.RouterProvider, {
                         router: router
                     });
+                    const HydratableRouterContent = (0, external_hydrationBoundary_js_namespaceObject.wrapTanstackSsrHydrationBoundary)(RouterContent, hasSSRBootstrap);
                     if (hasSSRBootstrap) hooks.onAfterHydrateRouter.call({
                         ...lifecycleContext,
                         phase: 'hydrate',
@@ -222,8 +224,8 @@ const tanstackRouterPlugin = (userConfig = {})=>({
                         runtimeContext: runtimeState
                     });
                     return App ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(App, {
-                        children: RouterContent
-                    }) : RouterContent;
+                        children: HydratableRouterContent
+                    }) : HydratableRouterContent;
                 };
                 return RouterWrapper;
             });

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

@@ -38,6 +38,7 @@ const index_js_namespaceObject = require("../../../core/context/index.js");
 const external_lifecycle_js_namespaceObject = require("../lifecycle.js");
 const external_utils_js_namespaceObject = require("../utils.js");
 const external_basepathRewrite_js_namespaceObject = require("./basepathRewrite.js");
+const external_hydrationBoundary_js_namespaceObject = require("./hydrationBoundary.js");
 const external_routeTree_js_namespaceObject = require("./routeTree.js");
 function isPreloadableRouteComponent(component) {
     if (!component || 'function' != typeof component) return false;
@@ -247,9 +248,9 @@ const tanstackRouterPlugin = (userConfig = {})=>({
                         if (!router) return App ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(App, {
                             ...props
                         }) : null;
-                        const routerWrapper = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_router_namespaceObject.RouterProvider, {
+                        const routerWrapper = (0, external_hydrationBoundary_js_namespaceObject.wrapTanstackSsrHydrationBoundary)(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_router_namespaceObject.RouterProvider, {
                             router: router
-                        });
+                        }), true);
                         return App ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(App, {
                             children: routerWrapper
                         }) : routerWrapper;

package/dist/esm/core/server/scriptOrder.mjs

@@ -0,0 +1,25 @@
+function getScriptTags(template) {
+    const scriptRegExp = /<script\b[^>]*\bsrc=(["'])(.*?)\1[^>]*><\/script>/g;
+    return Array.from(template.matchAll(scriptRegExp)).map((match)=>({
+            index: match.index ?? 0,
+            tag: match[0],
+            src: match[2]
+        }));
+}
+function getAssetBasename(src) {
+    const withoutQuery = src.split(/[?#]/)[0];
+    return withoutQuery.split('/').pop() || withoutQuery;
+}
+function isEntryScript(src, entryName, asyncEntry) {
+    const basename = getAssetBasename(src);
+    const prefix = asyncEntry ? `async-${entryName}` : entryName;
+    return basename === `${prefix}.js` || basename.startsWith(`${prefix}.`) || basename.startsWith(`${prefix}-`);
+}
+function injectBeforeHydrationEntryScript(template, scripts, entryName = 'index') {
+    if (!scripts) return template;
+    const scriptTags = getScriptTags(template);
+    const target = scriptTags.find((match)=>isEntryScript(match.src, entryName, false)) ?? scriptTags.find((match)=>isEntryScript(match.src, entryName, true));
+    if (!target) return template;
+    return `${template.slice(0, target.index)}${scripts}${template.slice(target.index)}`;
+}
+export { injectBeforeHydrationEntryScript };

package/dist/esm/core/server/stream/afterTemplate.mjs

@@ -2,6 +2,7 @@ import { serializeJson } from "@modern-js/runtime-utils/node";
 import { getRouterHydrationScripts, getRouterMatchedRouteIds } from "../../../router/runtime/lifecycle.mjs";
 import { SSR_DATA_JSON_ID } from "../../constants.mjs";
 import { SSR_DATA_PLACEHOLDER } from "../constants.mjs";
+import { injectBeforeHydrationEntryScript } from "../scriptOrder.mjs";
 import { buildHtml } from "../shared.mjs";
 import { attributesToString, safeReplace } from "../utils.mjs";
 function buildShellAfterTemplate(afterAppTemplate, options) {
@@ -30,7 +31,11 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
         const jsAssets = Array.from(new Set(assetEntries.flatMap((entry)=>(entry.assets ?? []).filter((asset)=>asset.endsWith('.js')))));
         const nonceAttr = nonce ? ` nonce="${nonce}"` : '';
         const jsChunkStr = jsAssets.filter((asset)=>!template.includes(asset)).map((asset)=>`<script src=${asset}${nonceAttr}></script>`).join(' ');
-        if (jsChunkStr) return safeReplace(template, '<!--<?- chunksMap.js ?>-->', jsChunkStr);
+        if (jsChunkStr) {
+            const withoutPlaceholder = safeReplace(template, '<!--<?- chunksMap.js ?>-->', '');
+            const withEarlyScripts = injectBeforeHydrationEntryScript(withoutPlaceholder, jsChunkStr, entryName);
+            return withEarlyScripts !== withoutPlaceholder ? withEarlyScripts : safeReplace(template, '<!--<?- chunksMap.js ?>-->', jsChunkStr);
+        }
         return template;
     }
     return buildHtml(afterAppTemplate, callbacks);

package/dist/esm/core/server/string/index.mjs

@@ -6,6 +6,7 @@ import { getGlobalInternalRuntimeContext } from "../../context/index.mjs";
 import { wrapRuntimeContextProvider } from "../../react/wrapper.mjs";
 import { CHUNK_CSS_PLACEHOLDER, CHUNK_JS_PLACEHOLDER, HTML_PLACEHOLDER, SSR_DATA_PLACEHOLDER } from "../constants.mjs";
 import { createReplaceHelemt, getHelmetData } from "../helmet.mjs";
+import { injectBeforeHydrationEntryScript } from "../scriptOrder.mjs";
 import { buildHtml } from "../shared.mjs";
 import { SSRErrors, SSRTimings } from "../tracer.mjs";
 import { getSSRConfigByEntry, safeReplace } from "../utils.mjs";
@@ -58,10 +59,10 @@ const renderString = async (request, serverRoot, options)=>{
     const rootElement = wrapRuntimeContextProvider(serverRoot, Object.assign(runtimeContext, {
         ssr: true
     }));
-    const html = await generateHtml(rootElement, htmlTemplate, chunkSet, collectors, runtimeContext.ssrContext?.htmlModifiers || [], runtimeContext, tracer);
+    const html = await generateHtml(rootElement, htmlTemplate, chunkSet, collectors, runtimeContext.ssrContext?.htmlModifiers || [], runtimeContext, entryName, tracer);
     return html;
 };
-async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifiers, runtimeContext, { onError, onTiming }) {
+async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifiers, runtimeContext, entryName, { onError, onTiming }) {
     let html = '';
     let helmetData;
     const finalApp = collectors.reduce((pre, creator)=>creator.collect?.(pre) || pre, App);
@@ -82,7 +83,7 @@ async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifie
     const { ssrScripts, cssChunk, jsChunk } = chunkSet;
     const finalHtml = await buildHtml(htmlTemplate, [
         createReplaceHtml(html),
-        createReplaceChunkJs(jsChunk),
+        createReplaceChunkJs(jsChunk, entryName),
         createReplaceChunkCss(cssChunk),
         createReplaceSSRDataScript(ssrScripts),
         createReplaceHelemt(helmetData),
@@ -96,8 +97,14 @@ function createReplaceHtml(html) {
 function createReplaceSSRDataScript(data) {
     return (template)=>safeReplace(template, SSR_DATA_PLACEHOLDER, data);
 }
-function createReplaceChunkJs(js) {
-    return (template)=>safeReplace(template, CHUNK_JS_PLACEHOLDER, js);
+function createReplaceChunkJs(js, entryName) {
+    return (template)=>{
+        if (!js) return safeReplace(template, CHUNK_JS_PLACEHOLDER, '');
+        const withoutPlaceholder = safeReplace(template, CHUNK_JS_PLACEHOLDER, '');
+        const withEarlyScripts = injectBeforeHydrationEntryScript(withoutPlaceholder, js, entryName);
+        if (withEarlyScripts !== withoutPlaceholder) return withEarlyScripts;
+        return safeReplace(template, CHUNK_JS_PLACEHOLDER, js);
+    };
 }
 function createReplaceChunkCss(css) {
     return (template)=>safeReplace(template, CHUNK_CSS_PLACEHOLDER, css);

package/dist/esm/core/server/string/loadable.mjs

@@ -7,6 +7,33 @@ const extname = (uri)=>{
     return `.${uri?.split('.').pop()}` || '';
 };
 const generateChunks = (chunks, ext)=>chunks.filter((chunk)=>Boolean(chunk.url)).filter((chunk)=>extname(chunk.url).slice(1) === ext);
+const dedupeChunksByUrl = (chunks)=>{
+    const seen = new Set();
+    return chunks.filter((chunk)=>{
+        if (!chunk.url || seen.has(chunk.url)) return false;
+        seen.add(chunk.url);
+        return true;
+    });
+};
+const isAsyncEntryScriptChunk = (chunk, entryName)=>{
+    if (!chunk.url?.endsWith('.js')) return false;
+    const asyncEntryName = `async-${entryName}`;
+    const filename = chunk.filename || chunk.url;
+    const basename = filename.split('/').pop() || filename;
+    return basename === `${asyncEntryName}.js` || basename.startsWith(`${asyncEntryName}.`) || basename.startsWith(`${asyncEntryName}-`);
+};
+const orderHydrationScriptChunks = ({ asyncEntryChunks, collectedChunks, matchedRouteChunks, entryName })=>{
+    const asyncEntryScriptChunks = [];
+    const asyncEntryDependencyChunks = [];
+    for (const chunk of asyncEntryChunks)if (isAsyncEntryScriptChunk(chunk, entryName)) asyncEntryScriptChunks.push(chunk);
+    else asyncEntryDependencyChunks.push(chunk);
+    return dedupeChunksByUrl([
+        ...asyncEntryDependencyChunks,
+        ...collectedChunks,
+        ...matchedRouteChunks,
+        ...asyncEntryScriptChunks
+    ]);
+};
 const checkIsInline = (chunk, enableInline)=>{
     if ('production' !== process.env.NODE_ENV) return false;
     if (enableInline instanceof RegExp) return enableInline.test(chunk.url);
@@ -57,8 +84,16 @@ class LoadableCollector {
                 `async-${entryName}`
             ]));
         } catch (e) {}
-        const chunks = [].concat(asyncChunks).concat(extractor ? extractor.getChunkAssets(extractor.chunks) : []).concat(this.getMatchedRouteChunks());
-        const scriptChunks = generateChunks(chunks, 'js');
+        const collectedChunks = extractor ? extractor.getChunkAssets(extractor.chunks) : [];
+        const matchedRouteChunks = this.getMatchedRouteChunks();
+        const orderedScriptChunks = orderHydrationScriptChunks({
+            asyncEntryChunks: asyncChunks,
+            collectedChunks,
+            matchedRouteChunks,
+            entryName
+        });
+        const chunks = [].concat(asyncChunks).concat(collectedChunks).concat(matchedRouteChunks);
+        const scriptChunks = generateChunks(orderedScriptChunks, 'js');
         const styleChunks = generateChunks(chunks, 'css');
         if (extractor) {
             this.emitLoadableScripts(extractor);
@@ -135,4 +170,4 @@ class LoadableCollector {
         this.options = options;
     }
 }
-export { LoadableCollector };
+export { LoadableCollector, orderHydrationScriptChunks };

package/dist/esm/router/runtime/tanstack/hydrationBoundary.mjs

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+function wrapTanstackSsrHydrationBoundary(routerContent, shouldWrap) {
+    return shouldWrap ? /*#__PURE__*/ jsx(Suspense, {
+        fallback: null,
+        children: routerContent
+    }) : routerContent;
+}
+export { wrapTanstackSsrHydrationBoundary };

package/dist/esm/router/runtime/tanstack/plugin.mjs

@@ -9,6 +9,7 @@ import { onAfterCreateRouter, onAfterHydrateRouter, onBeforeCreateRouter, onBefo
 import { applyRouterRuntimeState } from "../lifecycle.mjs";
 import { createRouteObjectsFromConfig, urlJoin } from "../utils.mjs";
 import { createModernBasepathRewrite } from "./basepathRewrite.mjs";
+import { wrapTanstackSsrHydrationBoundary } from "./hydrationBoundary.mjs";
 import { Link } from "./prefetchLink.mjs";
 import { createRouteTreeFromRouteObjects } from "./routeTree.mjs";
 import { getTanstackRscSerializationAdapters } from "./rsc/client.mjs";
@@ -187,6 +188,7 @@ const tanstackRouterPlugin = (userConfig = {})=>({
                     }) : /*#__PURE__*/ jsx(RouterProvider, {
                         router: router
                     });
+                    const HydratableRouterContent = wrapTanstackSsrHydrationBoundary(RouterContent, hasSSRBootstrap);
                     if (hasSSRBootstrap) hooks.onAfterHydrateRouter.call({
                         ...lifecycleContext,
                         phase: 'hydrate',
@@ -194,8 +196,8 @@ const tanstackRouterPlugin = (userConfig = {})=>({
                         runtimeContext: runtimeState
                     });
                     return App ? /*#__PURE__*/ jsx(App, {
-                        children: RouterContent
-                    }) : RouterContent;
+                        children: HydratableRouterContent
+                    }) : HydratableRouterContent;
                 };
                 return RouterWrapper;
             });

package/dist/esm/router/runtime/tanstack/plugin.node.mjs

@@ -10,6 +10,7 @@ import { InternalRuntimeContext, getGlobalEnableRsc, getGlobalLayoutApp, getGlob
 import { applyRouterServerPrepareResult, createRouterServerSnapshot } from "../lifecycle.mjs";
 import { createRouteObjectsFromConfig, urlJoin } from "../utils.mjs";
 import { createModernBasepathRewrite } from "./basepathRewrite.mjs";
+import { wrapTanstackSsrHydrationBoundary } from "./hydrationBoundary.mjs";
 import { createRouteTreeFromRouteObjects, getModernRouteIdsFromMatches } from "./routeTree.mjs";
 function isPreloadableRouteComponent(component) {
     if (!component || 'function' != typeof component) return false;
@@ -219,9 +220,9 @@ const tanstackRouterPlugin = (userConfig = {})=>({
                         if (!router) return App ? /*#__PURE__*/ jsx(App, {
                             ...props
                         }) : null;
-                        const routerWrapper = /*#__PURE__*/ jsx(RouterProvider, {
+                        const routerWrapper = wrapTanstackSsrHydrationBoundary(/*#__PURE__*/ jsx(RouterProvider, {
                             router: router
-                        });
+                        }), true);
                         return App ? /*#__PURE__*/ jsx(App, {
                             children: routerWrapper
                         }) : routerWrapper;

package/dist/esm-node/core/server/scriptOrder.mjs

@@ -0,0 +1,26 @@
+import "node:module";
+function getScriptTags(template) {
+    const scriptRegExp = /<script\b[^>]*\bsrc=(["'])(.*?)\1[^>]*><\/script>/g;
+    return Array.from(template.matchAll(scriptRegExp)).map((match)=>({
+            index: match.index ?? 0,
+            tag: match[0],
+            src: match[2]
+        }));
+}
+function getAssetBasename(src) {
+    const withoutQuery = src.split(/[?#]/)[0];
+    return withoutQuery.split('/').pop() || withoutQuery;
+}
+function isEntryScript(src, entryName, asyncEntry) {
+    const basename = getAssetBasename(src);
+    const prefix = asyncEntry ? `async-${entryName}` : entryName;
+    return basename === `${prefix}.js` || basename.startsWith(`${prefix}.`) || basename.startsWith(`${prefix}-`);
+}
+function injectBeforeHydrationEntryScript(template, scripts, entryName = 'index') {
+    if (!scripts) return template;
+    const scriptTags = getScriptTags(template);
+    const target = scriptTags.find((match)=>isEntryScript(match.src, entryName, false)) ?? scriptTags.find((match)=>isEntryScript(match.src, entryName, true));
+    if (!target) return template;
+    return `${template.slice(0, target.index)}${scripts}${template.slice(target.index)}`;
+}
+export { injectBeforeHydrationEntryScript };

package/dist/esm-node/core/server/stream/afterTemplate.mjs

@@ -3,6 +3,7 @@ import { serializeJson } from "@modern-js/runtime-utils/node";
 import { getRouterHydrationScripts, getRouterMatchedRouteIds } from "../../../router/runtime/lifecycle.mjs";
 import { SSR_DATA_JSON_ID } from "../../constants.mjs";
 import { SSR_DATA_PLACEHOLDER } from "../constants.mjs";
+import { injectBeforeHydrationEntryScript } from "../scriptOrder.mjs";
 import { buildHtml } from "../shared.mjs";
 import { attributesToString, safeReplace } from "../utils.mjs";
 function buildShellAfterTemplate(afterAppTemplate, options) {
@@ -31,7 +32,11 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
         const jsAssets = Array.from(new Set(assetEntries.flatMap((entry)=>(entry.assets ?? []).filter((asset)=>asset.endsWith('.js')))));
         const nonceAttr = nonce ? ` nonce="${nonce}"` : '';
         const jsChunkStr = jsAssets.filter((asset)=>!template.includes(asset)).map((asset)=>`<script src=${asset}${nonceAttr}></script>`).join(' ');
-        if (jsChunkStr) return safeReplace(template, '<!--<?- chunksMap.js ?>-->', jsChunkStr);
+        if (jsChunkStr) {
+            const withoutPlaceholder = safeReplace(template, '<!--<?- chunksMap.js ?>-->', '');
+            const withEarlyScripts = injectBeforeHydrationEntryScript(withoutPlaceholder, jsChunkStr, entryName);
+            return withEarlyScripts !== withoutPlaceholder ? withEarlyScripts : safeReplace(template, '<!--<?- chunksMap.js ?>-->', jsChunkStr);
+        }
         return template;
     }
     return buildHtml(afterAppTemplate, callbacks);

package/dist/esm-node/core/server/string/index.mjs

@@ -7,6 +7,7 @@ import { getGlobalInternalRuntimeContext } from "../../context/index.mjs";
 import { wrapRuntimeContextProvider } from "../../react/wrapper.mjs";
 import { CHUNK_CSS_PLACEHOLDER, CHUNK_JS_PLACEHOLDER, HTML_PLACEHOLDER, SSR_DATA_PLACEHOLDER } from "../constants.mjs";
 import { createReplaceHelemt, getHelmetData } from "../helmet.mjs";
+import { injectBeforeHydrationEntryScript } from "../scriptOrder.mjs";
 import { buildHtml } from "../shared.mjs";
 import { SSRErrors, SSRTimings } from "../tracer.mjs";
 import { getSSRConfigByEntry, safeReplace } from "../utils.mjs";
@@ -59,10 +60,10 @@ const renderString = async (request, serverRoot, options)=>{
     const rootElement = wrapRuntimeContextProvider(serverRoot, Object.assign(runtimeContext, {
         ssr: true
     }));
-    const html = await generateHtml(rootElement, htmlTemplate, chunkSet, collectors, runtimeContext.ssrContext?.htmlModifiers || [], runtimeContext, tracer);
+    const html = await generateHtml(rootElement, htmlTemplate, chunkSet, collectors, runtimeContext.ssrContext?.htmlModifiers || [], runtimeContext, entryName, tracer);
     return html;
 };
-async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifiers, runtimeContext, { onError, onTiming }) {
+async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifiers, runtimeContext, entryName, { onError, onTiming }) {
     let html = '';
     let helmetData;
     const finalApp = collectors.reduce((pre, creator)=>creator.collect?.(pre) || pre, App);
@@ -83,7 +84,7 @@ async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifie
     const { ssrScripts, cssChunk, jsChunk } = chunkSet;
     const finalHtml = await buildHtml(htmlTemplate, [
         createReplaceHtml(html),
-        createReplaceChunkJs(jsChunk),
+        createReplaceChunkJs(jsChunk, entryName),
         createReplaceChunkCss(cssChunk),
         createReplaceSSRDataScript(ssrScripts),
         createReplaceHelemt(helmetData),
@@ -97,8 +98,14 @@ function createReplaceHtml(html) {
 function createReplaceSSRDataScript(data) {
     return (template)=>safeReplace(template, SSR_DATA_PLACEHOLDER, data);
 }
-function createReplaceChunkJs(js) {
-    return (template)=>safeReplace(template, CHUNK_JS_PLACEHOLDER, js);
+function createReplaceChunkJs(js, entryName) {
+    return (template)=>{
+        if (!js) return safeReplace(template, CHUNK_JS_PLACEHOLDER, '');
+        const withoutPlaceholder = safeReplace(template, CHUNK_JS_PLACEHOLDER, '');
+        const withEarlyScripts = injectBeforeHydrationEntryScript(withoutPlaceholder, js, entryName);
+        if (withEarlyScripts !== withoutPlaceholder) return withEarlyScripts;
+        return safeReplace(template, CHUNK_JS_PLACEHOLDER, js);
+    };
 }
 function createReplaceChunkCss(css) {
     return (template)=>safeReplace(template, CHUNK_CSS_PLACEHOLDER, css);

package/dist/esm-node/core/server/string/loadable.mjs

@@ -11,6 +11,33 @@ const extname = (uri)=>{
     return `.${uri?.split('.').pop()}` || '';
 };
 const generateChunks = (chunks, ext)=>chunks.filter((chunk)=>Boolean(chunk.url)).filter((chunk)=>extname(chunk.url).slice(1) === ext);
+const dedupeChunksByUrl = (chunks)=>{
+    const seen = new Set();
+    return chunks.filter((chunk)=>{
+        if (!chunk.url || seen.has(chunk.url)) return false;
+        seen.add(chunk.url);
+        return true;
+    });
+};
+const isAsyncEntryScriptChunk = (chunk, entryName)=>{
+    if (!chunk.url?.endsWith('.js')) return false;
+    const asyncEntryName = `async-${entryName}`;
+    const filename = chunk.filename || chunk.url;
+    const basename = filename.split('/').pop() || filename;
+    return basename === `${asyncEntryName}.js` || basename.startsWith(`${asyncEntryName}.`) || basename.startsWith(`${asyncEntryName}-`);
+};
+const orderHydrationScriptChunks = ({ asyncEntryChunks, collectedChunks, matchedRouteChunks, entryName })=>{
+    const asyncEntryScriptChunks = [];
+    const asyncEntryDependencyChunks = [];
+    for (const chunk of asyncEntryChunks)if (isAsyncEntryScriptChunk(chunk, entryName)) asyncEntryScriptChunks.push(chunk);
+    else asyncEntryDependencyChunks.push(chunk);
+    return dedupeChunksByUrl([
+        ...asyncEntryDependencyChunks,
+        ...collectedChunks,
+        ...matchedRouteChunks,
+        ...asyncEntryScriptChunks
+    ]);
+};
 const checkIsInline = (chunk, enableInline)=>{
     if ('production' !== process.env.NODE_ENV) return false;
     if (enableInline instanceof RegExp) return enableInline.test(chunk.url);
@@ -61,8 +88,16 @@ class LoadableCollector {
                 `async-${entryName}`
             ]));
         } catch (e) {}
-        const chunks = [].concat(asyncChunks).concat(extractor ? extractor.getChunkAssets(extractor.chunks) : []).concat(this.getMatchedRouteChunks());
-        const scriptChunks = generateChunks(chunks, 'js');
+        const collectedChunks = extractor ? extractor.getChunkAssets(extractor.chunks) : [];
+        const matchedRouteChunks = this.getMatchedRouteChunks();
+        const orderedScriptChunks = orderHydrationScriptChunks({
+            asyncEntryChunks: asyncChunks,
+            collectedChunks,
+            matchedRouteChunks,
+            entryName
+        });
+        const chunks = [].concat(asyncChunks).concat(collectedChunks).concat(matchedRouteChunks);
+        const scriptChunks = generateChunks(orderedScriptChunks, 'js');
         const styleChunks = generateChunks(chunks, 'css');
         if (extractor) {
             this.emitLoadableScripts(extractor);
@@ -139,4 +174,4 @@ class LoadableCollector {
         this.options = options;
     }
 }
-export { LoadableCollector };
+export { LoadableCollector, orderHydrationScriptChunks };

package/dist/esm-node/router/runtime/tanstack/hydrationBoundary.mjs

@@ -0,0 +1,10 @@
+import "node:module";
+import { jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+function wrapTanstackSsrHydrationBoundary(routerContent, shouldWrap) {
+    return shouldWrap ? /*#__PURE__*/ jsx(Suspense, {
+        fallback: null,
+        children: routerContent
+    }) : routerContent;
+}
+export { wrapTanstackSsrHydrationBoundary };

package/dist/esm-node/router/runtime/tanstack/plugin.mjs

@@ -10,6 +10,7 @@ import { onAfterCreateRouter, onAfterHydrateRouter, onBeforeCreateRouter, onBefo
 import { applyRouterRuntimeState } from "../lifecycle.mjs";
 import { createRouteObjectsFromConfig, urlJoin } from "../utils.mjs";
 import { createModernBasepathRewrite } from "./basepathRewrite.mjs";
+import { wrapTanstackSsrHydrationBoundary } from "./hydrationBoundary.mjs";
 import { Link } from "./prefetchLink.mjs";
 import { createRouteTreeFromRouteObjects } from "./routeTree.mjs";
 import { getTanstackRscSerializationAdapters } from "./rsc/client.mjs";
@@ -188,6 +189,7 @@ const tanstackRouterPlugin = (userConfig = {})=>({
                     }) : /*#__PURE__*/ jsx(RouterProvider, {
                         router: router
                     });
+                    const HydratableRouterContent = wrapTanstackSsrHydrationBoundary(RouterContent, hasSSRBootstrap);
                     if (hasSSRBootstrap) hooks.onAfterHydrateRouter.call({
                         ...lifecycleContext,
                         phase: 'hydrate',
@@ -195,8 +197,8 @@ const tanstackRouterPlugin = (userConfig = {})=>({
                         runtimeContext: runtimeState
                     });
                     return App ? /*#__PURE__*/ jsx(App, {
-                        children: RouterContent
-                    }) : RouterContent;
+                        children: HydratableRouterContent
+                    }) : HydratableRouterContent;
                 };
                 return RouterWrapper;
             });

package/dist/esm-node/router/runtime/tanstack/plugin.node.mjs

@@ -11,6 +11,7 @@ import { InternalRuntimeContext, getGlobalEnableRsc, getGlobalLayoutApp, getGlob
 import { applyRouterServerPrepareResult, createRouterServerSnapshot } from "../lifecycle.mjs";
 import { createRouteObjectsFromConfig, urlJoin } from "../utils.mjs";
 import { createModernBasepathRewrite } from "./basepathRewrite.mjs";
+import { wrapTanstackSsrHydrationBoundary } from "./hydrationBoundary.mjs";
 import { createRouteTreeFromRouteObjects, getModernRouteIdsFromMatches } from "./routeTree.mjs";
 function isPreloadableRouteComponent(component) {
     if (!component || 'function' != typeof component) return false;
@@ -220,9 +221,9 @@ const tanstackRouterPlugin = (userConfig = {})=>({
                         if (!router) return App ? /*#__PURE__*/ jsx(App, {
                             ...props
                         }) : null;
-                        const routerWrapper = /*#__PURE__*/ jsx(RouterProvider, {
+                        const routerWrapper = wrapTanstackSsrHydrationBoundary(/*#__PURE__*/ jsx(RouterProvider, {
                             router: router
-                        });
+                        }), true);
                         return App ? /*#__PURE__*/ jsx(App, {
                             children: routerWrapper
                         }) : routerWrapper;

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

@@ -0,0 +1 @@
+export declare function injectBeforeHydrationEntryScript(template: string, scripts: string, entryName?: string): string;

package/dist/types/core/server/string/loadable.d.ts

@@ -1,3 +1,4 @@
+import { type Chunk } from '@loadable/server';
 import type { ReactElement } from 'react';
 import type { TInternalRuntimeContext } from '../../context';
 import type { ChunkSet, Collector } from './types';
@@ -7,6 +8,12 @@ declare module '@loadable/server' {
         getChunkAssets: (chunks: string[]) => Chunk[];
     }
 }
+export declare const orderHydrationScriptChunks: ({ asyncEntryChunks, collectedChunks, matchedRouteChunks, entryName, }: {
+    asyncEntryChunks: Chunk[];
+    collectedChunks: Chunk[];
+    matchedRouteChunks: Chunk[];
+    entryName: string;
+}) => Chunk[];
 export interface LoadableCollectorOptions {
     nonce?: string;
     stats?: Record<string, any>;

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

@@ -0,0 +1,2 @@
+import { type ReactElement } from 'react';
+export declare function wrapTanstackSsrHydrationBoundary(routerContent: ReactElement, shouldWrap: boolean): import("react").JSX.Element;

package/package.json

@@ -17,7 +17,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "3.2.0-ultramodern.96",
+  "version": "3.2.0-ultramodern.98",
   "engines": {
     "node": ">=20"
   },
@@ -233,12 +233,12 @@
     "isbot": "5.1.40",
     "react-helmet-async": "3.0.0",
     "react-is": "^19.2.6",
-    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.2.0-ultramodern.96",
-    "@modern-js/plugin-data-loader": "npm:@bleedingdev/modern-js-plugin-data-loader@3.2.0-ultramodern.96",
-    "@modern-js/render": "npm:@bleedingdev/modern-js-render@3.2.0-ultramodern.96",
-    "@modern-js/types": "npm:@bleedingdev/modern-js-types@3.2.0-ultramodern.96",
-    "@modern-js/utils": "npm:@bleedingdev/modern-js-utils@3.2.0-ultramodern.96",
-    "@modern-js/runtime-utils": "npm:@bleedingdev/modern-js-runtime-utils@3.2.0-ultramodern.96"
+    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.2.0-ultramodern.98",
+    "@modern-js/utils": "npm:@bleedingdev/modern-js-utils@3.2.0-ultramodern.98",
+    "@modern-js/render": "npm:@bleedingdev/modern-js-render@3.2.0-ultramodern.98",
+    "@modern-js/runtime-utils": "npm:@bleedingdev/modern-js-runtime-utils@3.2.0-ultramodern.98",
+    "@modern-js/types": "npm:@bleedingdev/modern-js-types@3.2.0-ultramodern.98",
+    "@modern-js/plugin-data-loader": "npm:@bleedingdev/modern-js-plugin-data-loader@3.2.0-ultramodern.98"
   },
   "peerDependencies": {
     "react": "^19.2.6",
@@ -258,7 +258,7 @@
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "@scripts/rstest-config": "2.66.0",
-    "@modern-js/app-tools": "npm:@bleedingdev/modern-js-app-tools@3.2.0-ultramodern.96"
+    "@modern-js/app-tools": "npm:@bleedingdev/modern-js-app-tools@3.2.0-ultramodern.98"
   },
   "sideEffects": false,
   "publishConfig": {