react-on-rails-pro 16.2.0-rc.0 → 16.2.0-rc.1

package/lib/ClientSideRenderer.js

@@ -200,7 +200,30 @@ async function forAllElementsAsync(selector, callback) {
     const els = document.querySelectorAll(selector);
     await Promise.all(Array.from(els).map(callback));
 }
-export const renderOrHydrateImmediateHydratedComponents = () => forAllElementsAsync('.js-react-on-rails-component[data-immediate-hydration="true"]', renderOrHydrateComponent);
+/**
+ * Filters elements to only include those with a nextSibling.
+ *
+ * This is used to prevent a race condition during HTML streaming where
+ * the props script element exists in the DOM but its content is incomplete.
+ *
+ * Why checking for ANY nextSibling works:
+ * - During HTML streaming, the browser parses incrementally
+ * - A script element's content is everything between <script> and </script>
+ * - The browser cannot parse ANY content after a script until </script> is found
+ * - Therefore, if nextSibling exists (even whitespace or comments), the closing
+ *   tag was parsed and the content is guaranteed to be complete
+ *
+ * Elements without a nextSibling will be hydrated later when their
+ * immediate hydration script executes and calls reactOnRailsComponentLoaded().
+ *
+ * See: https://github.com/shakacode/react_on_rails/issues/2283
+ */
+async function forAllCompleteElementsAsync(selector, callback) {
+    const els = document.querySelectorAll(selector);
+    const completeEls = Array.from(els).filter((el) => el.nextSibling !== null);
+    await Promise.all(completeEls.map(callback));
+}
+export const renderOrHydrateImmediateHydratedComponents = () => forAllCompleteElementsAsync('.js-react-on-rails-component[data-immediate-hydration="true"]', renderOrHydrateComponent);
 export const renderOrHydrateAllComponents = () => forAllElementsAsync('.js-react-on-rails-component', renderOrHydrateComponent);
 function unmountAllComponents() {
     renderedRoots.forEach((root) => root.unmount());
@@ -225,7 +248,7 @@ export async function hydrateStore(storeNameOrElement) {
     }
     await storeRenderer.waitUntilHydrated();
 }
-export const hydrateImmediateHydratedStores = () => forAllElementsAsync(`[${REACT_ON_RAILS_STORE_ATTRIBUTE}][data-immediate-hydration="true"]`, hydrateStore);
+export const hydrateImmediateHydratedStores = () => forAllCompleteElementsAsync(`[${REACT_ON_RAILS_STORE_ATTRIBUTE}][data-immediate-hydration="true"]`, hydrateStore);
 export const hydrateAllStores = () => forAllElementsAsync(`[${REACT_ON_RAILS_STORE_ATTRIBUTE}]`, hydrateStore);
 function unmountAllStores() {
     storeRenderers.forEach((storeRenderer) => storeRenderer.unmount());

package/package.json

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