react_on_rails_pro 16.2.0.test.6 → 16.2.0

data/docs/react-server-components/how-react-server-components-work.md

@@ -30,7 +30,7 @@ export default function HomePage() {
       <Footer />
     </div>
   );
-};
+}
 ```
 
 It replaces all exports of the file with the client references.
@@ -38,26 +38,27 @@ It replaces all exports of the file with the client references.
 > [!NOTE]
 > The code shown below represents internal implementation details of how React Server Components work under the hood. You don't need to understand these details to use React Server Components effectively in your application. This section is included for those interested in the technical implementation.
 
-
 ```js
-import { registerClientReference } from "react-server-dom-webpack/server";
+import { registerClientReference } from 'react-server-dom-webpack/server';
 
 export const Header = registerClientReference(
   function () {
     throw new Error(
-      "Attempted to call Header() from the server but Header is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component."
+      "Attempted to call Header() from the server but Header is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.",
     );
   },
-  "file:///path/to/src/HomePage.jsx",
-  "Header"
+  'file:///path/to/src/HomePage.jsx',
+  'Header',
 );
 
 export default registerClientReference(
-  function() {
-    throw new Error("Attempted to call the default export of file:///path/to/src/HomePage.jsx from the serverbut it's on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of aClient Component.");
+  function () {
+    throw new Error(
+      "Attempted to call the default export of file:///path/to/src/HomePage.jsx from the serverbut it's on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of aClient Component.",
+    );
   },
-  "file:///path/to/src/HomePage.jsx",
-  "default"
+  'file:///path/to/src/HomePage.jsx',
+  'default',
 );
 ```
 
@@ -114,10 +115,12 @@ If you want to change the file name of the `react-client-manifest.json` file, yo
 ```js
 const { RSCWebpackPlugin } = require('react-on-rails-rsc/WebpackPlugin');
 
-config.plugins.push(new RSCWebpackPlugin({
-  isServer: false,
-  clientManifestFilename: 'client-components-webpack-manifest.json',
-}));
+config.plugins.push(
+  new RSCWebpackPlugin({
+    isServer: false,
+    clientManifestFilename: 'client-components-webpack-manifest.json',
+  }),
+);
 ```
 
 And because React on Rails Pro uploads the `react-client-manifest.json` file to the renderer while uploading the server bundle and it expects it to be named `react-client-manifest.json`, you need to tell React on Rails Pro that the name is changed to `client-components-webpack-manifest.json`.
@@ -192,6 +195,7 @@ The interesting part is how the RSC payload references the client components. Le
 ```
 
 The RSC payload references client components by including:
+
 1. The webpack module ID of the client component (e.g. "./app/javascript/components/ToggleContainer.jsx")
 2. The webpack chunk IDs that contain the component code (e.g. ["client25","js/client25.js"])
 3. The export name being referenced (e.g. "default")
@@ -222,11 +226,14 @@ In this case, ensure you pass the correct path to `registerServerComponent` func
 
 ```js
 // client/app/packs/client-bundle.js
-import registerServerComponent from 'react-on-rails/registerServerComponent/client';
+import registerServerComponent from 'react-on-rails-pro/registerServerComponent/client';
 
-registerServerComponent({
-  rscPayloadGenerationUrlPath: "flight-payload",
-}, "ReactServerComponentPage")
+registerServerComponent(
+  {
+    rscPayloadGenerationUrlPath: 'flight-payload',
+  },
+  'ReactServerComponentPage',
+);
 ```
 
 Or if you enabled the `auto_load_bundle` option to make React on Rails automatically register react components, you can pass the path to the `rsc_payload_generation_url_path` config in React on Rails Pro configuration.

data/docs/react-server-components/inside-client-components.md

@@ -1,4 +1,3 @@
-
 # Using React Server Components Inside Client Components
 
 React on Rails now supports rendering React Server Components (RSC) directly inside React Client Components. This guide explains how to use this feature effectively in your applications.
@@ -33,7 +32,7 @@ Now, you can render server components directly inside client components using th
 
 ```tsx
 'use client';
-import RSCRoute from 'react-on-rails/RSCRoute';
+import RSCRoute from 'react-on-rails-pro/RSCRoute';
 
 export default function ClientComponent() {
   return (
@@ -52,13 +51,13 @@ Register your server components in your Server and RSC bundles:
 
 ```tsx
 // packs/server_bundle.tsx
-import registerServerComponent from 'react-on-rails/registerServerComponent/server.rsc';
+import registerServerComponent from 'react-on-rails-pro/registerServerComponent/server';
 import MyServerComponent from './components/MyServerComponent';
 import AnotherServerComponent from './components/AnotherServerComponent';
 
 registerServerComponent({
   MyServerComponent,
-  AnotherServerComponent
+  AnotherServerComponent,
 });
 ```
 
@@ -73,7 +72,7 @@ Create a client component that uses `RSCRoute` to render server components:
 // components/MyClientComponent.tsx
 'use client';
 import { useState } from 'react';
-import RSCRoute from 'react-on-rails/RSCRoute';
+import RSCRoute from 'react-on-rails-pro/RSCRoute';
 
 export default function MyClientComponent({ user }) {
   return (
@@ -90,31 +89,33 @@ export default function MyClientComponent({ user }) {
 Create client and server versions of your component wrapped with `wrapServerComponentRenderer`:
 
 #### Client version:
+
 ```tsx
 // components/MyClientComponent.client.tsx
 'use client';
-import ReactOnRails from 'react-on-rails';
-import wrapServerComponentRenderer from 'react-on-rails/wrapServerComponentRenderer/client';
+import ReactOnRails from 'react-on-rails-pro';
+import wrapServerComponentRenderer from 'react-on-rails-pro/wrapServerComponentRenderer/client';
 import MyClientComponent from './MyClientComponent';
 
 const WrappedComponent = wrapServerComponentRenderer(MyClientComponent);
 
 ReactOnRails.register({
-  MyClientComponent: WrappedComponent
+  MyClientComponent: WrappedComponent,
 });
 ```
 
 #### Server version:
+
 ```tsx
 // components/MyClientComponent.server.tsx
-import ReactOnRails from 'react-on-rails';
-import wrapServerComponentRenderer from 'react-on-rails/wrapServerComponentRenderer/server';
+import ReactOnRails from 'react-on-rails-pro';
+import wrapServerComponentRenderer from 'react-on-rails-pro/wrapServerComponentRenderer/server';
 import MyClientComponent from './MyClientComponent';
 
 const WrappedComponent = wrapServerComponentRenderer(MyClientComponent);
 
 ReactOnRails.register({
-  MyClientComponent: WrappedComponent
+  MyClientComponent: WrappedComponent,
 });
 ```
 
@@ -134,7 +135,7 @@ ReactOnRails.register({
 ```tsx
 'use client';
 import { useState } from 'react';
-import RSCRoute from 'react-on-rails/RSCRoute';
+import RSCRoute from 'react-on-rails-pro/RSCRoute';
 
 export default function ClientComponent() {
   const [count, setCount] = useState(0);
@@ -158,7 +159,7 @@ export default function ClientComponent() {
 ```tsx
 'use client';
 import { Routes, Route, Link } from 'react-router-dom';
-import RSCRoute from 'react-on-rails/RSCRoute';
+import RSCRoute from 'react-on-rails-pro/RSCRoute';
 import AnotherClientComponent from './AnotherClientComponent';
 
 export default function AppRouter({ user }) {
@@ -190,7 +191,7 @@ The framework supports nesting client and server components to arbitrary depth:
 ```tsx
 'use client';
 import { Routes, Route } from 'react-router-dom';
-import RSCRoute from 'react-on-rails/RSCRoute';
+import RSCRoute from 'react-on-rails-pro/RSCRoute';
 import ServerRouteLayout from './ServerRouteLayout';
 import ClientRouteLayout from './ClientRouteLayout';
 
@@ -276,7 +277,7 @@ When using server components inside client components:
 ```tsx
 'use client';
 import { Suspense } from 'react';
-import RSCRoute from 'react-on-rails/RSCRoute';
+import RSCRoute from 'react-on-rails-pro/RSCRoute';
 
 export default function ClientComponent({ user }) {
   return (
@@ -295,17 +296,17 @@ export default function ClientComponent({ user }) {
 'use client';
 import { useState } from 'react';
 import { Suspense } from 'react';
-import RSCRoute from 'react-on-rails/RSCRoute';
+import RSCRoute from 'react-on-rails-pro/RSCRoute';
 
 export default function ClientComponent({ user }) {
   const [showServerComponent, setShowServerComponent] = useState(false);
-  
+
   return (
     <div>
       <button onClick={() => setShowServerComponent(!showServerComponent)}>
         {showServerComponent ? 'Hide' : 'Show'} Server Component
       </button>
-      
+
       {showServerComponent && (
         <Suspense fallback={<div>Loading...</div>}>
           <RSCRoute componentName="ServerComponent" componentProps={{ user }} />

data/docs/react-server-components/purpose-and-benefits.md

@@ -3,6 +3,7 @@
 ## Why RSC with Streaming?
 
 ### Waterfall Loading Pattern Benefits
+
 React Server Components with streaming is beneficial for most applications, but it's especially powerful for applications with waterfall loading patterns where data dependencies chain together. For example, when you need to load a user profile before loading their posts, or fetch categories before products. Here's why:
 
 ### How RSC Fixes Waterfall Server Rendering Issues:
@@ -26,25 +27,26 @@ When a user visits the page, they'll experience the following sequence:
 React Server Components significantly reduce client-side JavaScript by:
 
 1. **Server-Only Code Elimination:**
-    - Dependencies used only in server components never ship to the client
-    - Database queries, API calls, and their libraries stay server-side
-    - Heavy data processing utilities remain on the server
-    - Server-only NPM packages don't impact client bundle
+   - Dependencies used only in server components never ship to the client
+   - Database queries, API calls, and their libraries stay server-side
+   - Heavy data processing utilities remain on the server
+   - Server-only NPM packages don't impact client bundle
 
 2. **Concrete Examples:**
-    - Routing logic can stay server-side
-    - Data fetching libraries (like React Query) are often unnecessary
-    - Large formatting libraries (e.g., date-fns, numeral) can be server-only
-    - Image processing utilities stay on server
-    - Markdown parsers run server-side only
-    - Heavy validation libraries remain server-side
+   - Routing logic can stay server-side
+   - Data fetching libraries (like React Query) are often unnecessary
+   - Large formatting libraries (e.g., date-fns, numeral) can be server-only
+   - Image processing utilities stay on server
+   - Markdown parsers run server-side only
+   - Heavy validation libraries remain server-side
 
 For example, a typical dashboard might see:
+
 ```jsx
 // Before: All code shipped to client
 import { format } from 'date-fns'; // ~30KB
-import { marked } from 'marked';    // ~35KB
-import numeral from 'numeral';      // ~25KB
+import { marked } from 'marked'; // ~35KB
+import numeral from 'numeral'; // ~25KB
 
 // After: With RSC, these imports stay server-side
 // Client bundle reduced by ~90KB
@@ -89,12 +91,14 @@ For example, in a typical page layout:
 ```
 
 With selective hydration:
+
 - Navigation could become interactive while Comments are still loading
 - If user tries to click a Sidebar button, it gets priority hydration
 - Each component hydrates independently when ready
 - No waiting for all components to load before any become interactive
 
 This approach significantly improves the user experience by:
+
 - Reducing Time to Interactive (TTI) for important components
 - Providing faster response to user interactions
 - Maintaining smooth performance even on slower devices or networks
@@ -102,10 +106,10 @@ This approach significantly improves the user experience by:
 
 For a deeper dive into selective hydration, see our [Selective Hydration in Streamed Components](./selective-hydration-in-streamed-components.md) guide.
 
-
 ### Comparison with Other Approaches:
 
 1. **Full Server Rendering:**
+
 - ❌ Delays First Byte until entire page is rendered
 - ❌ All-or-nothing approach to hydration
 - ❌ Must wait for all JavaScript before any interactivity
@@ -113,6 +117,7 @@ For a deeper dive into selective hydration, see our [Selective Hydration in Stre
 - ✅ Complete initial HTML
 
 2. **Client-side Lazy Loading:**
+
 - ❌ Empty initial HTML for lazy components
 - ❌ Must wait for hydration to load
 - ❌ Poor SEO for lazy content
@@ -121,6 +126,7 @@ For a deeper dive into selective hydration, see our [Selective Hydration in Stre
 - ✅ Reduces initial bundle size
 
 3. **RSC with Streaming:**
+
 - ✅ Immediate First Byte
 - ✅ Progressive HTML streaming
 - ✅ SEO-friendly for all content
@@ -132,6 +138,7 @@ For a deeper dive into selective hydration, see our [Selective Hydration in Stre
 ### 1. Enable RSC Support
 
 Add to your Rails initializer, it makes the magic happen 🪄:
+
 ```ruby
 # config/initializers/react_on_rails_pro.rb
 ReactOnRailsPro.configure do |config|
@@ -142,13 +149,14 @@ end
 ### 2. Update Webpack Configuration
 
 Create RSC bundle and make it use the RSC loader:
+
 ```javascript
 // config/webpack/rscWebpackConfig.mjs
 const rscConfig = serverWebpackConfig();
 
 // Configure RSC entry point
 rscConfig.entry = {
-  'rsc-bundle': rscConfig.entry['server-bundle']
+  'rsc-bundle': rscConfig.entry['server-bundle'],
 };
 
 // Add RSC loader
@@ -181,6 +189,7 @@ export default function App() {
 ```
 
 #### 2. Identify Server Component Candidates:
+
 - Data fetching components
 - Non-interactive UI
 - Static content sections
@@ -236,6 +245,7 @@ async function LazyLoadedSection() {
 ```
 
 This migration approach allows you to:
+
 - Maintain existing functionality while migrating
 - Incrementally improve performance
 - Test changes in isolation

data/docs/react-server-components/rendering-flow.md

@@ -7,18 +7,21 @@ This document explains the rendering flow of React Server Components (RSC) in Re
 In a React Server Components project, there are three distinct types of bundles:
 
 ### RSC Bundle (rsc-bundle.js)
+
 - Contains only server components and references to client components
 - Generated using the RSC Webpack Loader which transforms client components into references
 - Used specifically for generating RSC payloads
 - Configured with `react-server` condition to enable RSC-specific code paths that tell the runtime that this bundle is used for RSC payload generation.
 
 ### Server Bundle (server-bundle.js)
+
 - Contains both server and client components in their full form
 - Used for traditional server-side rendering (SSR)
 - Enables HTML generation of any components
 - Does not transform client components into references
 
 ### Client Bundle
+
 - Split into multiple chunks based on client components
 - Each file with `'use client'` directive becomes an entry point
 - Code splitting occurs automatically for client components
@@ -50,6 +53,7 @@ When a request is made to a page using React Server Components, the following op
    - Client components are hydrated progressively without requiring a separate HTTP request
 
 This approach offers significant advantages:
+
 - Eliminates double rendering of server components
 - Reduces HTTP requests by embedding the RSC payload within the initial HTML response
 - Provides faster interactivity through streamlined rendering and hydration
@@ -61,7 +65,7 @@ sequenceDiagram
     participant NodeRenderer
     participant RSCBundle
     participant ServerBundle
-    
+
     Note over Browser,ServerBundle: 1. Initial Request
     Browser->>RailsView: Request page
     RailsView->>NodeRenderer: stream_react_component
@@ -69,10 +73,10 @@ sequenceDiagram
     ServerBundle->>RSCBundle: generateRSCPayload(component, props)
     RSCBundle-->>ServerBundle: RSC payload with:<br/>- Server components<br/>- Client component refs
     ServerBundle-->>NodeRenderer: Generate HTML using RSC payload
-    
+
     Note over Browser,ServerBundle: 2. Single Response
     NodeRenderer-->>Browser: Stream HTML with embedded RSC payload
-    
+
     Note over Browser: 3. Client Hydration
     Browser->>Browser: Process embedded RSC payload
     loop For each client component

data/docs/react-server-components/server-side-rendering.md

@@ -1,6 +1,7 @@
 # SSR React Server Components
 
 Before reading this document, please read:
+
 1. [Create React Server Component without SSR](./create-without-ssr.md)
 2. [Add Streaming and Interactivity to RSC Page](./add-streaming-and-interactivity.md)
 
@@ -13,7 +14,7 @@ Let's make React on Rails server-side render the React Server Component Page we
 Update the `react_server_component_without_ssr.html.erb` view to pass `prerender: true` to the `react_component` helper.
 
 ```erb
-<%= react_component("ReactServerComponentPage", 
+<%= react_component("ReactServerComponentPage",
     prerender: true,
     trace: true,
     id: "ReactServerComponentPage-react-component-0") %>
@@ -37,33 +38,33 @@ To enable streaming SSR for React Server Components, we need to:
 
 1. Create a new view called `react_server_component_ssr.html.erb` with the following content:
 
-    ```erb
-    # app/views/pages/react_server_component_ssr.html.erb
-    <%= stream_react_component("ReactServerComponentPage",
-        id: "ReactServerComponentPage-react-component-0") %>
-    
-    <h1>React Server Component with SSR</h1>
-    ```
+   ```erb
+   # app/views/pages/react_server_component_ssr.html.erb
+   <%= stream_react_component("ReactServerComponentPage",
+       id: "ReactServerComponentPage-react-component-0") %>
+
+   <h1>React Server Component with SSR</h1>
+   ```
 
 2. Ensure our controller includes `ReactOnRailsPro::Stream` and use the `stream_view_containing_react_components` helper to render the view:
 
-    ```ruby
-    # app/controllers/pages_controller.rb
-    class PagesController < ApplicationController
-      include ReactOnRailsPro::Stream
-    
-      def react_server_component_ssr
-        stream_view_containing_react_components(template: "pages/react_server_component_ssr")
-      end
-    end
-    ```
+   ```ruby
+   # app/controllers/pages_controller.rb
+   class PagesController < ApplicationController
+     include ReactOnRailsPro::Stream
+
+     def react_server_component_ssr
+       stream_view_containing_react_components(template: "pages/react_server_component_ssr")
+     end
+   end
+   ```
 
 3. Add the route to `config/routes.rb`:
 
-    ```ruby
-    # config/routes.rb
-    get "/react_server_component_ssr", to: "pages#react_server_component_ssr"
-    ```
+   ```ruby
+   # config/routes.rb
+   get "/react_server_component_ssr", to: "pages#react_server_component_ssr"
+   ```
 
 Now, when you visit the page, you should see the entire React Server Component page rendered in the browser. And if you viewed the page source, you should see the HTML being streamed to the browser.