react_on_rails_pro 16.2.0.beta.20 → 16.2.0.rc.0

data/docs/react-server-components/create-without-ssr.md

@@ -40,12 +40,12 @@ end
 > After enabling RSC support, you must add the `'use client';` directive at the top of your JavaScript entry points (packs) that are not yet migrated to support Server Components.
 >
 > This directive tells React that these files should be treated as client components. You don't need to add this directive to all JavaScript files - only the entry points. Any file imported by a file marked with `'use client';` will automatically be treated as a client component as well. Without this directive, React will assume these files contain Server Components, which will cause errors if the components use client-side features like:
+>
 > - `useState` or other state hooks
 > - `useEffect` or other effect hooks
 > - Event handlers (onClick, onChange, etc.)
 > - Browser APIs
 
-
 For example:
 
 ```js
@@ -55,7 +55,6 @@ For example:
 // ... existing code ...
 ```
 
-
 3. Create a new Webpack configuration to generate React Server Components bundles (RSC bundles) (usually named `rsc-bundle.js`).
 
 RSC bundle is a clone of the server bundle `server-bundle.js` but we just add the RSC loader `react-on-rails-rsc/WebpackLoader` to the used loaders.
@@ -63,6 +62,7 @@ RSC bundle is a clone of the server bundle `server-bundle.js` but we just add th
 You can check the [How React Server Components work](how-react-server-components-work.md) for more information about the RSC loader (It's better to read it after reading this article).
 
 Create a new file `config/webpack/rscWebpackConfig.js`:
+
 ```js
 // use the same config as serverWebpackConfig.js but add the RSC loader
 const serverWebpackConfig = require('./serverWebpackConfig');
@@ -95,7 +95,7 @@ const configureRsc = () => {
   const rules = rscConfig.module.rules;
   rules.forEach((rule) => {
     if (Array.isArray(rule.use)) {
-      // Ensure this loader runs before the JS loader (Babel loader in this case) to properly exclude client components from the RSC bundle.  
+      // Ensure this loader runs before the JS loader (Babel loader in this case) to properly exclude client components from the RSC bundle.
       // If your project uses a different JS loader, insert it before that loader instead.
       const babelLoader = extractLoader(rule, 'babel-loader');
       if (babelLoader) {
@@ -240,13 +240,13 @@ async function ReactServerComponent() {
     uptime: Math.floor(os.uptime() / 3600), // Convert to hours
     totalMemory: Math.floor(os.totalmem() / (1024 * 1024 * 1024)), // Convert to GB
     freeMemory: Math.floor(os.freemem() / (1024 * 1024 * 1024)), // Convert to GB
-    cpus: os.cpus().length
+    cpus: os.cpus().length,
   };
 
   return (
     <div className="server-component-demo">
       <h2>React Server Component Demo</h2>
-      
+
       <section>
         <h3>Date Calculations (using moment.js)</h3>
         <p>Date Range: {formattedDateRange}</p>
@@ -277,16 +277,17 @@ async function ReactServerComponent() {
       </section>
 
       <div className="note">
-        <p><strong>Note:</strong> The heavy libraries (moment.js, lodash) and Node.js 
-        modules (os) used in this component stay on the server and are not shipped 
-        to the client, reducing the client bundle size significantly.</p>
+        <p>
+          <strong>Note:</strong> The heavy libraries (moment.js, lodash) and Node.js modules (os) used in this
+          component stay on the server and are not shipped to the client, reducing the client bundle size
+          significantly.
+        </p>
       </div>
     </div>
   );
 }
 
 export default ReactServerComponent;
-
 ```
 
 ## Create a React Server Component Page
@@ -318,7 +319,7 @@ If you didn't enable `auto_load_bundle`, you need to register the React Server C
 
 ```js
 // client/app/packs/server-bundle.js
-import registerServerComponent from 'react-on-rails/registerServerComponent/server';
+import registerServerComponent from 'react-on-rails-pro/registerServerComponent/server';
 import ReactServerComponentPage from './components/ReactServerComponentPage';
 
 registerServerComponent({
@@ -328,22 +329,22 @@ registerServerComponent({
 
 ```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: 'rsc_payload/' },
-  'ReactServerComponentPage',
-);
+registerServerComponent({ rscPayloadGenerationUrlPath: 'rsc_payload/' }, 'ReactServerComponentPage');
 ```
 
 As you can see, server components are not registered using the `ReactOnRails.register` function. Instead, we use the `registerServerComponent` function to register the server component. Also, `registerServerComponent` has different options for the client bundle and the server bundle.
+
 - For the server bundle, the component itself is passed to the `registerServerComponent` function, so the component is bundled into the server bundle.
 - For the client bundle, we pass the component name as an argument to the `registerServerComponent` function, so the component is not bundled into the client bundle.
 
 As you can see at [How React Server Components work](how-react-server-components-work.md):
+
 - Server components are rendered on the client using the rsc payload not the component itself.
 
 And as you can see at [React Server Components Rendering Flow](./rendering-flow.md):
+
 - In the future, the server bundle will use the RSC payload to render the server component on the server side as well.
 
 The `rscPayloadGenerationUrlPath` option will be explained in detail later in this document. For now, just know that it specifies the base URL path for React Server Component requests.
@@ -361,7 +362,6 @@ end
 
 This will add the `/rsc_payload` path to the routes. This is the base URL path that will receive requests from the client to render the React Server Components. `rsc_payload_route` is explained in the [How React Server Components work](how-react-server-components-work.md) document.
 
-
 ## Add Route to the React Server Component Page
 
 Add the following route to the `config/routes.rb` file:
@@ -380,7 +380,7 @@ This route will be used to render the React Server Component Page.
 Create a new file `app/views/pages/react_server_component_without_ssr.html.erb`:
 
 ```erb
-<%= react_component("ReactServerComponentPage", 
+<%= react_component("ReactServerComponentPage",
     prerender: false,
     trace: true,
     id: "ReactServerComponentPage-react-component-0") %>
@@ -417,6 +417,7 @@ Also, by looking at the console, we can see the log
 ```
 [SERVER] Hello from ReactServerComponent
 ```
+
 The `[SERVER]` prefix indicates that the component was executed on the server side. The absence of any client-side logs confirms that no client-side rendering or hydration occurred. This demonstrates a key characteristic of React Server Components - they run exclusively on the server without requiring any JavaScript execution in the browser, leading to improved performance and reduced client-side bundle sizes.
 
 ## How the React Server Component Page is Rendered on Browser?
@@ -445,4 +446,3 @@ The RSC payload format and how React processes it is explained in detail in the
 ## Next Steps
 
 Now that you understand the basics of React Server Components, you can proceed to the next article: [Add Streaming and Interactivity to RSC Page](./add-streaming-and-interactivity.md) to learn how to enhance your RSC page with streaming capabilities and client-side interactivity.
-

data/docs/react-server-components/glossary.md

@@ -1,7 +1,9 @@
 # React Server Components Glossary
 
 ### RSC (React Server Component)
+
 A React architecture that allows components to execute exclusively on the server while streaming results to the client. Benefits include:
+
 - Reduced client-side JavaScript
 - Direct access to server resources
 - Improved initial page load
@@ -10,18 +12,21 @@ A React architecture that allows components to execute exclusively on the server
 ## Types of Components
 
 ### Server Components
+
 Components that run exclusively on the server (not included in the client bundle). They can:
+
 - Directly access server-side resources (databases, filesystems)
 - Keep dependencies server-side
 - Perform async operations
 - Cannot contain state or browser-only APIs
 
 For example:
+
 ```jsx
-import fetch from "node-fetch";
+import fetch from 'node-fetch';
 
 async function ServerComponent() {
-  const data = await (await fetch("https://jsonplaceholder.org/posts/1")).json();
+  const data = await (await fetch('https://jsonplaceholder.org/posts/1')).json();
   const databaseData = await getDatabaseData();
   return (
     <div>
@@ -33,11 +38,12 @@ async function ServerComponent() {
 }
 ```
 
-
 ### Client Components
+
 Components marked with `'use client'` directive that run on client. They can contain state, effects, and event handlers. These components get hydrated in the browser.
 
 For example:
+
 ```jsx
 function ClientComponent() {
   const [count, setCount] = useState(0);
@@ -53,6 +59,7 @@ function ClientComponent() {
 Note: Server components can import client components, but client components cannot import server components. However, server components can be passed as props to client components.
 
 For example:
+
 ```jsx
 function ParentServerComponent() {
   return <ClientComponent serverComponent={<ServerComponent />} />;
@@ -62,33 +69,43 @@ function ParentServerComponent() {
 ## Bundle Related
 
 ### React Server Components Bundle (RSC Bundle) (usually `rsc-bundle.js`)
+
 A new server-side bundle introduced by React Server Components. It contains server components and their dependencies only. It doesn't include client components. It should be the same as the `server_bundle.js` bundle. But it uses the `react-on-rails-rsc/WebpackLoader` loader to trim the client components from the bundle.
 
 ### Client Bundle
+
 The JavaScript bundle that runs in the browser, containing client components and their dependencies. This bundle is responsible for hydration and client-side interactivity.
 
 ## Concepts
 
 ### Flight Format (RSC Format)
+
 The wire format used by React Server Components to stream component data from server to client. It's a compact binary format that represents the component tree and its data.
 
 ### Hydration
+
 The process where React attaches event handlers and state to server-rendered HTML in the browser. With RSC, hydration happens selectively only for Client Components.
 
 ### RSC Payload (Flight Payload)
+
 The serialized output of server components that gets streamed to the client. Contains:
+
 - React render tree of the server component
 - References to client components that need hydration
 - Data for client components
 
 ### Selective Hydration
+
 A feature where client components can hydrate independently and in parallel, allowing for:
+
 - Progressive interactivity
 - Prioritized hydration of visible components
 - Better performance on slower devices
 
 ### Streaming
+
 The ability to progressively send server component renders to the client before all data is ready. Benefits include:
+
 - Faster Time to First Byte (TTFB)
 - Progressive rendering of content
 - Better user experience during slow data fetches
@@ -96,7 +113,9 @@ The ability to progressively send server component renders to the client before
 ## Technical
 
 ### Client Component Manifest
+
 A JSON file mapping component paths to their corresponding JavaScript chunks. Used by RSC to determine which client-side code to load for hydration.
 
 ### RSC URL Path
+
 The endpoint path where RSC requests are handled, defaulting to "rsc_payload/" in the React on Rails Pro configuration.

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