Fix core package behavior: render all components after page load

Corrected misunderstanding of core vs pro behavior:

**Core Package (MIT):**
- Waits for FULL page load before rendering
- Then renders/hydrates ALL components at once
- Simple, synchronous approach
- Added renderAllComponents() and renderAllStores() functions

**Pro Package (Commercial):**
- Can hydrate BEFORE page load (immediate_hydration: true)
- Can hydrate on-demand with async component loading
- More advanced lifecycle management with unmounting

Updated ClientRenderer.ts:
- Added renderAllComponents() to render all components after page load
- Added renderAllStores() to initialize all stores
- Kept reactOnRailsComponentLoaded() for individual component rendering

Updated clientStartup.ts:
- Now calls renderAllComponents() when page is fully loaded
- Correct comments explaining core vs pro behavior

This matches the original React on Rails behavior where core package
renders all components after page load, and pro package adds advanced
features like immediate hydration and on-demand rendering.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: AbanoubGhadban

packages/react-on-rails/src/ClientRenderer.ts

@@ -126,6 +126,33 @@ export function renderComponent(domId: string): void {
   renderElement(el, railsContext);
 }
 
+/**
+ * Render all stores on the page.
+ */
+export function renderAllStores(): void {
+  const railsContext = getRailsContext();
+  if (!railsContext) return;
+  forEachStore(railsContext);
+}
+
+/**
+ * Render all components on the page.
+ * Core package renders all components after page load.
+ */
+export function renderAllComponents(): void {
+  const railsContext = getRailsContext();
+  if (!railsContext) return;
+
+  // Initialize all stores first
+  forEachStore(railsContext);
+
+  // Render all components
+  const componentElements = document.querySelectorAll('.js-react-on-rails-component');
+  for (let i = 0; i < componentElements.length; i += 1) {
+    renderElement(componentElements[i], railsContext);
+  }
+}
+
 /**
  * Public API function that can be called to render a component after it has been loaded.
  * This is the function that should be exported and used by the Rails integration.

packages/react-on-rails/src/clientStartup.ts

@@ -1,12 +1,13 @@
-// Core package provides simple synchronous startup
-// Pro package features like immediate hydration and unmounting are not available in core
+// Core package: Renders all components after full page load
+// Pro package: Can hydrate before page load (immediate_hydration) and supports on-demand rendering
+import { renderAllComponents } from './ClientRenderer.ts';
 import { onPageLoaded } from './pageLifecycle.ts';
 import { debugTurbolinks } from './turbolinksUtils.ts';
 
 export async function reactOnRailsPageLoaded() {
   debugTurbolinks('reactOnRailsPageLoaded');
-  // Core package: Components are rendered on-demand via reactOnRailsComponentLoaded
-  // Pro package provides automatic hydration of all components
+  // Core package: Render all components after page is fully loaded
+  renderAllComponents();
 }
 
 export function clientStartup() {
@@ -24,7 +25,7 @@ export function clientStartup() {
   // eslint-disable-next-line no-underscore-dangle
   globalThis.__REACT_ON_RAILS_EVENT_HANDLERS_RAN_ONCE__ = true;
 
-  // Core package: Components are rendered on-demand when Rails calls reactOnRailsComponentLoaded
-  // Pro package provides immediate hydration and automatic rendering on page load
+  // Core package: Wait for full page load, then render all components
+  // Pro package: Can start hydration immediately (immediate_hydration: true) or wait for page load
   onPageLoaded(reactOnRailsPageLoaded);
 }