react-on-rails-pro 16.7.0-rc.0 → 16.7.0-rc.2

package/README.md

@@ -97,4 +97,4 @@ See the [full installation guide](https://reactonrails.com/docs/pro/installation
 
 ## License
 
-Commercial software. No license required for evaluation, development, testing, or CI/CD. A paid license is required for production deployments. Contact [justin@shakacode.com](mailto:justin@shakacode.com) for licensing.
+Commercial software. No license required for evaluation, development, testing, or CI/CD. A paid license is required for production deployments. Contact [ShakaCode](https://pro.reactonrails.com/contact) for licensing.

package/lib/tanstack-router/clientHydrate.d.ts

@@ -1,9 +1,9 @@
-import { type ReactElement } from 'react';
+import * as React from 'react';
 import type { TanStackHistory, TanStackRouter, TanStackRouterOptions } from './types.ts';
 import type { RailsContext } from 'react-on-rails/types';
 export declare function clientHydrateTanStackApp(options: TanStackRouterOptions, props: Record<string, unknown>, railsContext: RailsContext & {
     serverSide: false;
 }, RouterProvider: React.ComponentType<{
     router: TanStackRouter;
-}>, createBrowserHistory: () => TanStackHistory): ReactElement;
+}>, createBrowserHistory: () => TanStackHistory): React.ReactElement;
 //# sourceMappingURL=clientHydrate.d.ts.map

package/lib/tanstack-router/clientHydrate.js

@@ -1,17 +1,6 @@
-import { Suspense, createElement, useEffect, useRef } from 'react';
-function RouteChunkPreloadGate({ preloadPromise, preloadSettledRef, isHydrating, children, }) {
-    // During SSR hydration (first render), skip the suspension gate to avoid a
-    // hydration mismatch: the server rendered RouterProvider content directly,
-    // so throwing a promise here would cause Suspense to render the null fallback
-    // instead of matching the server HTML. After hydration completes (the
-    // post-mount effect sets didTriggerPostHydrationLoadRef), the gate activates
-    // normally for any subsequent re-renders.
-    if (!isHydrating && preloadPromise && !preloadSettledRef.current) {
-        // eslint-disable-next-line @typescript-eslint/only-throw-error -- Suspense boundaries intentionally suspend on thrown Promise.
-        throw preloadPromise;
-    }
-    return children;
-}
+import * as React from 'react';
+/* eslint-disable import/prefer-default-export, no-underscore-dangle */
+const { createElement, useEffect, useRef } = React;
 function extractDehydratedData(dehydratedRouter) {
     if (!dehydratedRouter || typeof dehydratedRouter !== 'object') {
         return undefined;
@@ -94,8 +83,10 @@ railsContext: _railsContext, RouterProvider, createBrowserHistory, }) {
     const routerRef = useRef(null);
     const didTriggerPostHydrationLoadRef = useRef(false);
     const didSetSsrFlagRef = useRef(false);
+    const latestEffectRunIdRef = useRef(0); // 0 = no post-hydration effect run yet.
+    // Set during render-phase SSR init; awaited in runPostHydrationLoad before
+    // router.load() so post-hydration navigation waits for matched lazy chunks.
     const routeChunkPreloadPromiseRef = useRef(null);
-    const routeChunkPreloadSettledRef = useRef(true);
     const hydrationCallbackPromiseRef = useRef(null);
     const didWarnPrivateInternalsRef = useRef(false);
     const warnedMissingSsrMatchIdsRef = useRef(new Set());
@@ -154,15 +145,6 @@ railsContext: _railsContext, RouterProvider, createBrowserHistory, }) {
             // throwing loadPromise (which would cause Suspense suspension).
             const rawMatches = hydrationRouter.matchRoutes(hydrationRouter.state.location);
             routeChunkPreloadPromiseRef.current = preloadMatchedRouteChunks(router, rawMatches);
-            if (routeChunkPreloadPromiseRef.current) {
-                routeChunkPreloadSettledRef.current = false;
-                void routeChunkPreloadPromiseRef.current.finally(() => {
-                    routeChunkPreloadSettledRef.current = true;
-                });
-            }
-            else {
-                routeChunkPreloadSettledRef.current = true;
-            }
             const ssrMatches = dehydratedState?.ssrRouter?.matches;
             const matches = ssrMatches?.length
                 ? applyDehydratedMatchData(rawMatches, ssrMatches, warnMissingSsrMatch)
@@ -230,6 +212,21 @@ railsContext: _railsContext, RouterProvider, createBrowserHistory, }) {
             return undefined;
         }
         didTriggerPostHydrationLoadRef.current = true;
+        const effectRunId = latestEffectRunIdRef.current + 1;
+        latestEffectRunIdRef.current = effectRunId;
+        // Dev-mode sanity check: router.ssr should still hold the value we wrote
+        // during render-phase init. Our window-safety argument (parent re-renders
+        // are safe because router.ssr blocks Transitioner navigation) depends on
+        // a private TanStack Router API. If that API is renamed or removed in a
+        // future version, this warning surfaces the breakage before it manifests
+        // as a hard-to-diagnose navigation race.
+        if (process.env.NODE_ENV === 'development' && didSetSsrFlagRef.current && router.ssr == null) {
+            console.warn('react-on-rails-pro/tanstack-router: router.ssr was unexpectedly ' +
+                'cleared between render-phase init and the post-hydration effect. ' +
+                'TanStack Router\'s private "ssr" API may have changed — verify ' +
+                '@tanstack/react-router is within the supported range ' +
+                '(>=1.139.0 <2.0.0).');
+        }
         let cancelled = false;
         const runPostHydrationLoad = async () => {
             if (hydrationCallbackPromiseRef.current) {
@@ -244,9 +241,10 @@ railsContext: _railsContext, RouterProvider, createBrowserHistory, }) {
                     return;
                 }
             }
-            if (cancelled) {
-                return;
-            }
+            // No final cancellation check is needed for the no-await fast path:
+            // without pending hydration or preload promises, cleanup cannot run between
+            // the checks above and this call. If unmount happens after router.load()
+            // starts, the cleanup's cancelLoad() call handles the in-flight load.
             await router.load();
         };
         void runPostHydrationLoad()
@@ -256,45 +254,51 @@ railsContext: _railsContext, RouterProvider, createBrowserHistory, }) {
             }
         })
             .finally(() => {
-            // Always clear temporary router.ssr set by this module, regardless of
-            // cancellation state. In React 18 StrictMode, the effect cleanup sets
-            // cancelled=true and didTriggerPostHydrationLoadRef prevents re-trigger
-            // on re-mount — if we skip cleanup here the SSR flag stays set
-            // permanently, blocking the Transitioner from ever calling router.load().
-            // The didSetSsrFlagRef guard ensures we only clear values this module
-            // created, preserving user-provided router.ssr from createRouter().
-            if (didSetSsrFlagRef.current) {
+            // Invariant: temporary router.ssr is cleared by exactly one path:
+            //   1. this finally block after the post-hydration load settles/cancels;
+            //   2. this effect cleanup's deferred continuation when unmount happens
+            //      before that settle.
+            // didSetSsrFlagRef is the shared latch, preserving user-provided
+            // router.ssr from createRouter(). latestEffectRunIdRef prevents stale
+            // StrictMode passive-effect finally blocks from racing a remount. Today
+            // React runs passive cleanup/setup inside one synchronous
+            // flushPassiveEffects() call, so queued promise continuations cannot
+            // drain between the cleanup and the re-setup.
+            if (latestEffectRunIdRef.current === effectRunId && didSetSsrFlagRef.current) {
                 router.ssr = undefined;
                 didSetSsrFlagRef.current = false;
             }
         });
         return () => {
             cancelled = true;
-            if (didSetSsrFlagRef.current) {
-                router.ssr = undefined;
-                didSetSsrFlagRef.current = false;
-            }
+            didTriggerPostHydrationLoadRef.current = false;
+            // Defer the unmount clear so React 18 StrictMode's passive cleanup/setup
+            // replay can increment latestEffectRunIdRef before this continuation runs.
+            void Promise.resolve().then(() => {
+                if (latestEffectRunIdRef.current === effectRunId && didSetSsrFlagRef.current) {
+                    router.ssr = undefined;
+                    didSetSsrFlagRef.current = false;
+                }
+            });
             const cancellableRouter = router;
             if (typeof cancellableRouter.cancelLoad === 'function') {
                 cancellableRouter.cancelLoad();
             }
         };
     }, [hasSsrPayload, router]);
-    // Always use RouterProvider directly — matching the server-rendered tree.
-    // RouterClient is NOT used because it wraps RouterProvider in <Await> which
-    // introduces a Suspense boundary that doesn't exist in the server HTML,
-    // causing React hydration mismatch errors.
-    //
-    // RouteChunkPreloadGate blocks re-renders until matched lazy chunks finish
-    // preloading (when preload support is available). During the initial SSR
-    // hydration render, the gate is skipped to match the server-rendered tree
-    // and avoid a hydration mismatch. After the post-mount effect runs
-    // (didTriggerPostHydrationLoadRef becomes true), the gate activates normally.
-    let app = createElement(Suspense, { fallback: null }, createElement(RouteChunkPreloadGate, {
-        preloadPromise: routeChunkPreloadPromiseRef.current,
-        preloadSettledRef: routeChunkPreloadSettledRef,
-        isHydrating: hasSsrPayload && !didTriggerPostHydrationLoadRef.current,
-    }, createElement(RouterProvider, { router })));
+    // Render RouterProvider directly — matching the server-rendered tree
+    // (AppWrapper > RouterProvider). Any extra Suspense boundary here produces
+    // a shape mismatch during hydration and React bails to full client-side
+    // rendering. The old RouteChunkPreloadGate also suspended re-renders during
+    // chunk preload; that behavior is intentionally not replicated here because
+    // chunk-preload sequencing is enforced by runPostHydrationLoad before
+    // router.load(). A consequence is that any parent-triggered re-render
+    // landing in the window between render-phase preload init and
+    // runPostHydrationLoad completion now reaches RouterProvider unguarded —
+    // safe because router.ssr blocks Transitioner-initiated navigation across
+    // that window, and the route components themselves throw their own
+    // Suspense promises if a chunk is still loading.
+    let app = createElement(RouterProvider, { router });
     if (options.AppWrapper) {
         const wrapperProps = { ...incomingProps };
         delete wrapperProps.__tanstackRouterDehydratedState;

package/lib/wrapServerComponentRenderer/client.d.ts

@@ -1,3 +1,4 @@
+import 'react-on-rails-rsc/client.browser';
 import { ReactComponentOrRenderFunction, RenderFunction } from 'react-on-rails/types';
 /**
  * Wraps a client component with the necessary RSC context and handling for client-side operations.

package/lib/wrapServerComponentRenderer/client.js

@@ -12,6 +12,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * For licensing terms, please see:
  * https://github.com/shakacode/react_on_rails/blob/master/REACT-ON-RAILS-PRO-LICENSE.md
  */
+// Side-effect import: keeps `react-on-rails-rsc/client.browser` in the webpack
+// module graph for the client bundle so RSCWebpackPlugin (which scans every
+// parsed module for this exact resource) can detect the client runtime and
+// emit `react-client-manifest.json`. Without this direct import, the plugin
+// relies on a 3-level transitive chain
+// (`wrapServerComponentRenderer/client` → `getReactServerComponent.client`
+// → `react-on-rails-rsc/client.browser`). Any tooling that severs that chain
+// (tree-shaking, transpilers, NormalModuleReplacement, custom externals)
+// silently drops the manifest and breaks RSC hydration on the renderer.
+import 'react-on-rails-rsc/client.browser';
 import * as React from 'react';
 import * as ReactDOMClient from 'react-dom/client';
 import isRenderFunction from 'react-on-rails/isRenderFunction';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-on-rails-pro",
-  "version": "16.7.0-rc.0",
+  "version": "16.7.0-rc.2",
   "description": "React on Rails Pro package with React Server Components support",
   "main": "lib/ReactOnRails.full.js",
   "type": "module",
@@ -48,7 +48,7 @@
     "./ServerComponentFetchError": "./lib/ServerComponentFetchError.js"
   },
   "dependencies": {
-    "react-on-rails": "16.7.0-rc.0"
+    "react-on-rails": "16.7.0-rc.2"
   },
   "peerDependencies": {
     "react": ">= 16",