@bleedingdev/modern-js-plugin-tanstack 3.2.0-ultramodern.96 → 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/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-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/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.96",
+  "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.96",
-    "@modern-js/runtime-utils": "npm:@bleedingdev/modern-js-runtime-utils@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/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.96",
+    "@modern-js/runtime": "3.2.0-ultramodern.97",
     "react": "^19.2.6",
     "react-dom": "^19.2.6"
   },
@@ -109,9 +109,9 @@
     "@typescript/native-preview": "7.0.0-dev.20260527.2",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "@modern-js/runtime": "npm:@bleedingdev/modern-js-runtime@3.2.0-ultramodern.96",
-    "@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.97",
+    "@modern-js/runtime": "npm:@bleedingdev/modern-js-runtime@3.2.0-ultramodern.97",
+    "@scripts/rstest-config": "2.66.0"
   },
   "sideEffects": false,
   "publishConfig": {

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/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,
+    );
+  });
+});