@bleedingdev/modern-js-plugin-tanstack 3.2.0-ultramodern.95 → 3.2.0-ultramodern.97

package/dist/cjs/runtime/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/runtime/plugin.js

@@ -36,6 +36,7 @@ const client_namespaceObject = require("@tanstack/react-router/ssr/client");
 const external_react_namespaceObject = require("react");
 const external_basepathRewrite_js_namespaceObject = require("./basepathRewrite.js");
 const external_hooks_js_namespaceObject = require("./hooks.js");
+const external_hydrationBoundary_js_namespaceObject = require("./hydrationBoundary.js");
 const external_lifecycle_js_namespaceObject = require("./lifecycle.js");
 const external_prefetchLink_js_namespaceObject = require("./prefetchLink.js");
 const external_routeTree_js_namespaceObject = require("./routeTree.js");
@@ -223,6 +224,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',
@@ -230,8 +232,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/runtime/plugin.node.js

@@ -38,6 +38,7 @@ const server_namespaceObject = require("@tanstack/router-core/ssr/server");
 const external_react_namespaceObject = require("react");
 const external_basepathRewrite_js_namespaceObject = require("./basepathRewrite.js");
 const external_hooks_js_namespaceObject = require("./hooks.js");
+const external_hydrationBoundary_js_namespaceObject = require("./hydrationBoundary.js");
 const external_lifecycle_js_namespaceObject = require("./lifecycle.js");
 const external_routeTree_js_namespaceObject = require("./routeTree.js");
 const payloadRouter_js_namespaceObject = require("./rsc/payloadRouter.js");
@@ -296,9 +297,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/cjs/runtime/routeTree.js

@@ -520,9 +520,11 @@ function createRouteTreeFromRouteObjects(routes, options = {}) {
 }
 function getModernRouteIdsFromMatches(router) {
     const matches = router.state.matches || [];
+    const routesById = router.routesById;
     const ids = matches.map((match)=>{
-        const route = match.route;
-        return route?.options?.staticData?.modernRouteId;
+        const normalizedMatch = match;
+        const routeId = 'string' == typeof normalizedMatch.routeId ? normalizedMatch.routeId : void 0;
+        return normalizedMatch.route?.options?.staticData?.modernRouteId ?? (routeId ? routesById?.[routeId]?.options?.staticData?.modernRouteId : void 0);
     }).filter((id)=>'string' == typeof id);
     return Array.from(new Set(ids));
 }

package/dist/esm/runtime/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/runtime/plugin.mjs

@@ -7,6 +7,7 @@ import { RouterClient } from "@tanstack/react-router/ssr/client";
 import { useContext, useMemo } from "react";
 import { createModernBasepathRewrite } from "./basepathRewrite.mjs";
 import { modifyRoutes, onAfterCreateRouter, onAfterHydrateRouter, onBeforeCreateRouter, onBeforeCreateRoutes, onBeforeHydrateRouter } from "./hooks.mjs";
+import { wrapTanstackSsrHydrationBoundary } from "./hydrationBoundary.mjs";
 import { applyRouterRuntimeState } from "./lifecycle.mjs";
 import { Link } from "./prefetchLink.mjs";
 import { createRouteTreeFromRouteObjects } from "./routeTree.mjs";
@@ -194,6 +195,7 @@ const tanstackRouterPlugin = (userConfig = {})=>{
                     }) : /*#__PURE__*/ jsx(RouterProvider, {
                         router: router
                     });
+                    const HydratableRouterContent = wrapTanstackSsrHydrationBoundary(RouterContent, hasSSRBootstrap);
                     if (hasSSRBootstrap) hooks.onAfterHydrateRouter.call({
                         ...lifecycleContext,
                         phase: 'hydrate',
@@ -201,8 +203,8 @@ const tanstackRouterPlugin = (userConfig = {})=>{
                         runtimeContext: runtimeState
                     });
                     return App ? /*#__PURE__*/ jsx(App, {
-                        children: RouterContent
-                    }) : RouterContent;
+                        children: HydratableRouterContent
+                    }) : HydratableRouterContent;
                 };
                 return RouterWrapper;
             });

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

@@ -9,6 +9,7 @@ import { attachRouterServerSsrUtils } from "@tanstack/router-core/ssr/server";
 import { useContext } from "react";
 import { createModernBasepathRewrite } from "./basepathRewrite.mjs";
 import { modifyRoutes, onAfterCreateRouter, onAfterHydrateRouter, onBeforeCreateRouter, onBeforeCreateRoutes, onBeforeHydrateRouter } from "./hooks.mjs";
+import { wrapTanstackSsrHydrationBoundary } from "./hydrationBoundary.mjs";
 import { applyRouterServerPrepareResult, createRouterServerSnapshot } from "./lifecycle.mjs";
 import { createRouteTreeFromRouteObjects, getModernRouteIdsFromMatches } from "./routeTree.mjs";
 import { createTanstackRscServerPayload, handleTanstackRscRedirect } from "./rsc/payloadRouter.mjs";
@@ -267,9 +268,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/runtime/routeTree.mjs

@@ -490,9 +490,11 @@ function createRouteTreeFromRouteObjects(routes, options = {}) {
 }
 function getModernRouteIdsFromMatches(router) {
     const matches = router.state.matches || [];
+    const routesById = router.routesById;
     const ids = matches.map((match)=>{
-        const route = match.route;
-        return route?.options?.staticData?.modernRouteId;
+        const normalizedMatch = match;
+        const routeId = 'string' == typeof normalizedMatch.routeId ? normalizedMatch.routeId : void 0;
+        return normalizedMatch.route?.options?.staticData?.modernRouteId ?? (routeId ? routesById?.[routeId]?.options?.staticData?.modernRouteId : void 0);
     }).filter((id)=>'string' == typeof id);
     return Array.from(new Set(ids));
 }

package/dist/esm-node/runtime/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/runtime/plugin.mjs

@@ -8,6 +8,7 @@ import { RouterClient } from "@tanstack/react-router/ssr/client";
 import { useContext, useMemo } from "react";
 import { createModernBasepathRewrite } from "./basepathRewrite.mjs";
 import { modifyRoutes, onAfterCreateRouter, onAfterHydrateRouter, onBeforeCreateRouter, onBeforeCreateRoutes, onBeforeHydrateRouter } from "./hooks.mjs";
+import { wrapTanstackSsrHydrationBoundary } from "./hydrationBoundary.mjs";
 import { applyRouterRuntimeState } from "./lifecycle.mjs";
 import { Link } from "./prefetchLink.mjs";
 import { createRouteTreeFromRouteObjects } from "./routeTree.mjs";
@@ -195,6 +196,7 @@ const tanstackRouterPlugin = (userConfig = {})=>{
                     }) : /*#__PURE__*/ jsx(RouterProvider, {
                         router: router
                     });
+                    const HydratableRouterContent = wrapTanstackSsrHydrationBoundary(RouterContent, hasSSRBootstrap);
                     if (hasSSRBootstrap) hooks.onAfterHydrateRouter.call({
                         ...lifecycleContext,
                         phase: 'hydrate',
@@ -202,8 +204,8 @@ const tanstackRouterPlugin = (userConfig = {})=>{
                         runtimeContext: runtimeState
                     });
                     return App ? /*#__PURE__*/ jsx(App, {
-                        children: RouterContent
-                    }) : RouterContent;
+                        children: HydratableRouterContent
+                    }) : HydratableRouterContent;
                 };
                 return RouterWrapper;
             });

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

@@ -10,6 +10,7 @@ import { attachRouterServerSsrUtils } from "@tanstack/router-core/ssr/server";
 import { useContext } from "react";
 import { createModernBasepathRewrite } from "./basepathRewrite.mjs";
 import { modifyRoutes, onAfterCreateRouter, onAfterHydrateRouter, onBeforeCreateRouter, onBeforeCreateRoutes, onBeforeHydrateRouter } from "./hooks.mjs";
+import { wrapTanstackSsrHydrationBoundary } from "./hydrationBoundary.mjs";
 import { applyRouterServerPrepareResult, createRouterServerSnapshot } from "./lifecycle.mjs";
 import { createRouteTreeFromRouteObjects, getModernRouteIdsFromMatches } from "./routeTree.mjs";
 import { createTanstackRscServerPayload, handleTanstackRscRedirect } from "./rsc/payloadRouter.mjs";
@@ -268,9 +269,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/runtime/routeTree.mjs

@@ -491,9 +491,11 @@ function createRouteTreeFromRouteObjects(routes, options = {}) {
 }
 function getModernRouteIdsFromMatches(router) {
     const matches = router.state.matches || [];
+    const routesById = router.routesById;
     const ids = matches.map((match)=>{
-        const route = match.route;
-        return route?.options?.staticData?.modernRouteId;
+        const normalizedMatch = match;
+        const routeId = 'string' == typeof normalizedMatch.routeId ? normalizedMatch.routeId : void 0;
+        return normalizedMatch.route?.options?.staticData?.modernRouteId ?? (routeId ? routesById?.[routeId]?.options?.staticData?.modernRouteId : void 0);
     }).filter((id)=>'string' == typeof id);
     return Array.from(new Set(ids));
 }

package/dist/types/runtime/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

@@ -18,7 +18,7 @@
     "modern.js",
     "tanstack-router"
   ],
-  "version": "3.2.0-ultramodern.95",
+  "version": "3.2.0-ultramodern.97",
   "engines": {
     "node": ">=20"
   },
@@ -88,13 +88,13 @@
     "@swc/helpers": "^0.5.23",
     "@tanstack/react-router": "1.170.11",
     "@tanstack/router-core": "1.171.9",
-    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.2.0-ultramodern.95",
-    "@modern-js/types": "npm:@bleedingdev/modern-js-types@3.2.0-ultramodern.95",
-    "@modern-js/runtime-utils": "npm:@bleedingdev/modern-js-runtime-utils@3.2.0-ultramodern.95",
-    "@modern-js/utils": "npm:@bleedingdev/modern-js-utils@3.2.0-ultramodern.95"
+    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.2.0-ultramodern.97",
+    "@modern-js/runtime-utils": "npm:@bleedingdev/modern-js-runtime-utils@3.2.0-ultramodern.97",
+    "@modern-js/types": "npm:@bleedingdev/modern-js-types@3.2.0-ultramodern.97",
+    "@modern-js/utils": "npm:@bleedingdev/modern-js-utils@3.2.0-ultramodern.97"
   },
   "peerDependencies": {
-    "@modern-js/runtime": "3.2.0-ultramodern.95",
+    "@modern-js/runtime": "3.2.0-ultramodern.97",
     "react": "^19.2.6",
     "react-dom": "^19.2.6"
   },
@@ -109,8 +109,8 @@
     "@typescript/native-preview": "7.0.0-dev.20260527.2",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "@modern-js/app-tools": "npm:@bleedingdev/modern-js-app-tools@3.2.0-ultramodern.95",
-    "@modern-js/runtime": "npm:@bleedingdev/modern-js-runtime@3.2.0-ultramodern.95",
+    "@modern-js/app-tools": "npm:@bleedingdev/modern-js-app-tools@3.2.0-ultramodern.97",
+    "@modern-js/runtime": "npm:@bleedingdev/modern-js-runtime@3.2.0-ultramodern.97",
     "@scripts/rstest-config": "2.66.0"
   },
   "sideEffects": false,

package/src/runtime/hydrationBoundary.tsx

@@ -0,0 +1,12 @@
+import { type ReactElement, Suspense } from 'react';
+
+export function wrapTanstackSsrHydrationBoundary(
+  routerContent: ReactElement,
+  shouldWrap: boolean,
+) {
+  return shouldWrap ? (
+    <Suspense fallback={null}>{routerContent}</Suspense>
+  ) : (
+    routerContent
+  );
+}

package/src/runtime/plugin.node.tsx

@@ -39,6 +39,7 @@ import {
   onBeforeHydrateRouter as onBeforeHydrateRouterHook,
   type RouterExtendsHooks,
 } from './hooks';
+import { wrapTanstackSsrHydrationBoundary } from './hydrationBoundary';
 import {
   applyRouterServerPrepareResult,
   createRouterServerSnapshot,
@@ -564,8 +565,9 @@ export const tanstackRouterPlugin = (
               return App ? <App {...props} /> : null;
             }
 
-            const routerWrapper = (
-              <RouterProvider router={router as AnyRouter} />
+            const routerWrapper = wrapTanstackSsrHydrationBoundary(
+              <RouterProvider router={router as AnyRouter} />,
+              true,
             );
 
             return App ? <App>{routerWrapper}</App> : routerWrapper;

package/src/runtime/plugin.tsx

@@ -36,6 +36,7 @@ import {
   onBeforeHydrateRouter as onBeforeHydrateRouterHook,
   type RouterExtendsHooks,
 } from './hooks';
+import { wrapTanstackSsrHydrationBoundary } from './hydrationBoundary';
 import {
   applyRouterRuntimeState,
   type RouterLifecycleContext,
@@ -377,6 +378,10 @@ export const tanstackRouterPlugin = (
           ) : (
             <RouterProvider router={router} />
           );
+          const HydratableRouterContent = wrapTanstackSsrHydrationBoundary(
+            RouterContent,
+            hasSSRBootstrap,
+          );
           if (hasSSRBootstrap) {
             hooks.onAfterHydrateRouter.call({
               ...lifecycleContext,
@@ -386,7 +391,11 @@ export const tanstackRouterPlugin = (
             });
           }
 
-          return App ? <App>{RouterContent}</App> : RouterContent;
+          return App ? (
+            <App>{HydratableRouterContent}</App>
+          ) : (
+            HydratableRouterContent
+          );
         };
 
         return RouterWrapper;

package/src/runtime/routeTree.ts

@@ -1038,18 +1038,38 @@ export function createRouteTreeFromRouteObjects(
 
 export function getModernRouteIdsFromMatches(router: AnyRouter): string[] {
   const matches = router.state.matches || [];
+  const routesById = (
+    router as AnyRouter & {
+      routesById?: Record<
+        string,
+        {
+          options?: {
+            staticData?: { modernRouteId?: unknown };
+          };
+        }
+      >;
+    }
+  ).routesById;
   const ids = matches
     .map(match => {
-      const route = (
-        match as {
-          route?: {
-            options?: {
-              staticData?: { modernRouteId?: unknown };
-            };
+      const normalizedMatch = match as {
+        route?: {
+          options?: {
+            staticData?: { modernRouteId?: unknown };
           };
-        }
-      ).route;
-      return route?.options?.staticData?.modernRouteId;
+        };
+        routeId?: unknown;
+      };
+      const routeId =
+        typeof normalizedMatch.routeId === 'string'
+          ? normalizedMatch.routeId
+          : undefined;
+      return (
+        normalizedMatch.route?.options?.staticData?.modernRouteId ??
+        (routeId
+          ? routesById?.[routeId]?.options?.staticData?.modernRouteId
+          : undefined)
+      );
     })
     .filter((id): id is string => typeof id === 'string');
   return Array.from(new Set(ids));

package/tests/router/hydrationBoundary.test.tsx

@@ -0,0 +1,23 @@
+import { isValidElement, Suspense } from 'react';
+import { wrapTanstackSsrHydrationBoundary } from '../../src/runtime/hydrationBoundary';
+
+describe('tanstack SSR hydration boundary', () => {
+  it('wraps SSR hydration content in a Suspense boundary', () => {
+    const routerContent = <main data-testid="router" />;
+
+    const wrapped = wrapTanstackSsrHydrationBoundary(routerContent, true);
+
+    expect(isValidElement(wrapped)).toBe(true);
+    expect(wrapped.type).toBe(Suspense);
+    expect(wrapped.props.fallback).toBe(null);
+    expect(wrapped.props.children).toBe(routerContent);
+  });
+
+  it('keeps non-SSR router content unwrapped', () => {
+    const routerContent = <main data-testid="router" />;
+
+    expect(wrapTanstackSsrHydrationBoundary(routerContent, false)).toBe(
+      routerContent,
+    );
+  });
+});

package/tests/router/routeTree.test.ts

@@ -8,6 +8,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import {
   createRouteTreeFromModernRoutes,
   createRouteTreeFromRouteObjects,
+  getModernRouteIdsFromMatches,
 } from '../../src/runtime/routeTree';
 import { __setTanstackRscPayloadDecoderForTests } from '../../src/runtime/rsc/payloadRouter';
 import { createRouteObjectsFromConfig } from '../../src/runtime/utils';
@@ -181,6 +182,58 @@ describe('tanstack route tree from RouteObject[]', () => {
     ).toBeUndefined();
   });
 
+  test('resolves matched Modern route ids from TanStack route registry fallback', () => {
+    const router = {
+      state: {
+        matches: [
+          { routeId: '__root__' },
+          { routeId: '/$lang' },
+          { routeId: '/$lang/tractors' },
+          {
+            route: {
+              options: {
+                staticData: {
+                  modernRouteId: '(lang)/stores/page',
+                },
+              },
+            },
+            routeId: '/$lang/stores',
+          },
+        ],
+      },
+      routesById: {
+        __root__: {
+          options: {
+            staticData: {
+              modernRouteId: 'layout',
+            },
+          },
+        },
+        '/$lang': {
+          options: {
+            staticData: {
+              modernRouteId: '(lang)/page',
+            },
+          },
+        },
+        '/$lang/tractors': {
+          options: {
+            staticData: {
+              modernRouteId: '(lang)/tractors/page',
+            },
+          },
+        },
+      },
+    };
+
+    expect(getModernRouteIdsFromMatches(router as never)).toEqual([
+      'layout',
+      '(lang)/page',
+      '(lang)/tractors/page',
+      '(lang)/stores/page',
+    ]);
+  });
+
   test('preserves TanStack search contracts from RouteObject routes', () => {
     const rootValidateSearch = (search: unknown) => ({ root: search });
     const rootLoaderDeps = ({ search }: { search: unknown }) => ({ search });