react-on-rails 16.2.0-test.6 → 16.2.0

package/lib/ClientRenderer.js

@@ -51,11 +51,48 @@ function renderElement(el, railsContext) {
     try {
         const domNode = document.getElementById(domNodeId);
         if (domNode) {
+            // Check if this component was already rendered by a previous call
+            // This prevents hydration errors when reactOnRailsPageLoaded() is called multiple times
+            // (e.g., for asynchronously loaded content)
+            const existing = renderedRoots.get(domNodeId);
+            if (existing) {
+                // Only skip if it's the exact same DOM node and it's still connected to the document.
+                // If the node was replaced (e.g., via innerHTML or Turbo), we need to unmount the old
+                // root and re-render to the new node to prevent memory leaks and ensure rendering works.
+                const sameNode = existing.domNode === domNode && existing.domNode.isConnected;
+                if (sameNode) {
+                    if (trace) {
+                        console.log(`Skipping already rendered component: ${name} (dom id: ${domNodeId})`);
+                    }
+                    return;
+                }
+                // DOM node was replaced (e.g., via async HTML injection) - clean up the old root
+                try {
+                    if (supportsRootApi &&
+                        existing.root &&
+                        typeof existing.root === 'object' &&
+                        'unmount' in existing.root) {
+                        existing.root.unmount();
+                    }
+                    else {
+                        unmountComponentAtNode(existing.domNode);
+                    }
+                }
+                catch (unmountError) {
+                    // Ignore unmount errors for replaced nodes
+                    if (trace) {
+                        console.log(`Error unmounting replaced component: ${name}`, unmountError);
+                    }
+                }
+                renderedRoots.delete(domNodeId);
+            }
             const componentObj = ComponentRegistry.get(name);
             if (delegateToRenderer(componentObj, props, railsContext, domNodeId, trace)) {
                 return;
             }
-            // Hydrate if available and was server rendered
+            // Hydrate if the DOM node has content (server-rendered HTML)
+            // Since we skip already-rendered components above, this check now correctly
+            // identifies only server-rendered content, not previously client-rendered content
             const shouldHydrate = !!domNode.innerHTML;
             const reactElementOrRouterResult = createReactOutput({
                 componentObj,
@@ -140,7 +177,6 @@ function unmountAllComponents() {
             }
             else {
                 // React 16-17 legacy API
-                // eslint-disable-next-line @typescript-eslint/no-deprecated
                 unmountComponentAtNode(domNode);
             }
         }

package/lib/pageLifecycle.js

@@ -50,7 +50,16 @@ function initializePageEventListeners() {
         return;
     }
     isPageLifecycleInitialized = true;
-    if (document.readyState !== 'loading') {
+    // Important: replacing this condition with `document.readyState !== 'loading'` is not valid
+    // As the core ReactOnRails needs to ensure that all component bundles are loaded and executed before hydrating them
+    // If the `document.readyState === 'interactive'`, it doesn't guarantee that deferred scripts are executed
+    // the `readyState` can be `'interactive'` while the deferred scripts are still being executed
+    // Which will lead to the error `"Could not find component registered with name <component name>"`
+    // It will happen if this line is reached before the component chunk is executed on browser and reached the line
+    // ReactOnRails.register({ Component });
+    // ReactOnRailsPro is resellient against that type of race conditions, but it won't wait for that state anyway
+    // As it immediately hydrates the components at the page as soon as its html and bundle is loaded on the browser
+    if (document.readyState === 'complete') {
         setupPageNavigationListeners();
     }
     else {

package/lib/reactApis.cjs

@@ -25,25 +25,38 @@ if (exports.supportsRootApi) {
         reactDomClient = ReactDOM;
     }
 }
-/* eslint-disable @typescript-eslint/no-deprecated,@typescript-eslint/no-non-null-assertion,react/no-deprecated --
- * while we need to support React 16
- */
+// Cast ReactDOM to include legacy APIs for React 16/17 compatibility
+// These methods exist at runtime but are removed from @types/react-dom@19
+const legacyReactDOM = ReactDOM;
+// Validate legacy APIs exist at runtime when needed (React < 18)
+if (!exports.supportsRootApi) {
+    if (typeof legacyReactDOM.hydrate !== 'function') {
+        throw new Error('React legacy hydrate API not available. Expected React 16/17.');
+    }
+    if (typeof legacyReactDOM.render !== 'function') {
+        throw new Error('React legacy render API not available. Expected React 16/17.');
+    }
+    if (typeof legacyReactDOM.unmountComponentAtNode !== 'function') {
+        throw new Error('React legacy unmountComponentAtNode API not available. Expected React 16/17.');
+    }
+}
+/* eslint-disable @typescript-eslint/no-non-null-assertion -- reactDomClient is always defined when supportsRootApi is true */
 exports.reactHydrate = exports.supportsRootApi
     ? reactDomClient.hydrateRoot
-    : (domNode, reactElement) => ReactDOM.hydrate(reactElement, domNode);
+    : (domNode, reactElement) => legacyReactDOM.hydrate(reactElement, domNode);
 function reactRender(domNode, reactElement) {
     if (exports.supportsRootApi) {
         const root = reactDomClient.createRoot(domNode);
         root.render(reactElement);
         return root;
     }
-    // eslint-disable-next-line react/no-render-return-value
-    return ReactDOM.render(reactElement, domNode);
+    return legacyReactDOM.render(reactElement, domNode);
 }
 exports.unmountComponentAtNode = exports.supportsRootApi
     ? // not used if we use root API
-        () => false
-    : ReactDOM.unmountComponentAtNode;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        (_container) => false
+    : (container) => legacyReactDOM.unmountComponentAtNode(container);
 const ensureReactUseAvailable = () => {
     if (!('use' in React) || typeof React.use !== 'function') {
         throw new Error('React.use is not defined. Please ensure you are using React 19 to use server components.');

package/lib/serverRenderReactComponent.js

@@ -49,6 +49,7 @@ function processPromise(result, renderingReturnsPromises) {
         if (isValidElement(promiseResult)) {
             return processReactElement(promiseResult);
         }
+        // promiseResult is string | ServerRenderHashRenderedHtml (both are FinalHtmlResult)
         return promiseResult;
     });
 }

package/lib/types/index.d.ts

@@ -68,8 +68,8 @@ interface ServerRenderResult {
     routeError?: Error;
     error?: Error;
 }
-type CreateReactOutputSyncResult = ServerRenderResult | ReactElement<unknown>;
-type CreateReactOutputAsyncResult = Promise<string | ServerRenderHashRenderedHtml | ReactElement<unknown>>;
+type CreateReactOutputSyncResult = ServerRenderResult | ReactElement;
+type CreateReactOutputAsyncResult = Promise<string | ServerRenderHashRenderedHtml | ReactElement>;
 type CreateReactOutputResult = CreateReactOutputSyncResult | CreateReactOutputAsyncResult;
 type RenderFunctionSyncResult = ReactComponent | ServerRenderResult;
 type RenderFunctionAsyncResult = Promise<string | ServerRenderHashRenderedHtml | ReactComponent>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-on-rails",
-  "version": "16.2.0-test.6",
+  "version": "16.2.0",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
   "main": "lib/ReactOnRails.full.js",
   "type": "module",
@@ -48,13 +48,7 @@
   },
   "peerDependencies": {
     "react": ">= 16",
-    "react-dom": ">= 16",
-    "react-on-rails-rsc": "19.0.2"
-  },
-  "peerDependenciesMeta": {
-    "react-on-rails-rsc": {
-      "optional": true
-    }
+    "react-dom": ">= 16"
   },
   "files": [
     "lib/**/*.js",