[WIP] Add support for RSC

.github/workflows/main.yml

@@ -28,7 +28,7 @@ jobs:
     - name: Setup Node
       uses: actions/setup-node@v4
       with:
-        node-version: ${{ matrix.versions == 'oldest' && '16' || '20' }}
+        node-version: ${{ matrix.versions == 'oldest' && '18' || '20' }}
     - name: Print system information
       run: |
         echo "Linux release: "; cat /etc/issue
@@ -104,7 +104,7 @@ jobs:
     - name: Setup Node
       uses: actions/setup-node@v4
       with:
-        node-version: ${{ matrix.versions == 'oldest' && '16' || '20' }}
+        node-version: ${{ matrix.versions == 'oldest' && '18' || '20' }}
     - name: Print system information
       run: |
         echo "Linux release: "; cat /etc/issue

.github/workflows/package-js-tests.yml

@@ -20,7 +20,7 @@ jobs:
     - name: Setup Node
       uses: actions/setup-node@v4
       with:
-        node-version: ${{ matrix.versions == 'oldest' && '16' || '20' }}
+        node-version: ${{ matrix.versions == 'oldest' && '18' || '20' }}
     - name: Print system information
       run: |
         echo "Linux release: "; cat /etc/issue
@@ -43,3 +43,6 @@ jobs:
         sudo yarn global add yalc
     - name: Run JS unit tests for Renderer package
       run: yarn test
+    # TODO: Remove this once we made these tests compatible with React 19
+    - name: Run JS unit tests for Renderer package with React 18 (for tests not compatible with React 19)
+      run: yarn test:react-18

.github/workflows/rspec-package-specs.yml

@@ -47,6 +47,9 @@ jobs:
         git config user.email "[email protected]"
         git config user.name "Your Name"
         git commit -am "stop generators from complaining about uncommitted code"
+    - name: Set packer version environment variable
+      run: |
+        echo "CI_PACKER_VERSION=${{ matrix.versions == 'oldest' && 'old' || 'new' }}" >> $GITHUB_ENV
     - name: Run rspec tests
       run: bundle exec rspec spec/react_on_rails
     - name: Store test results

jest.config.js

@@ -2,4 +2,15 @@ module.exports = {
   preset: 'ts-jest/presets/js-with-ts',
   testEnvironment: 'jsdom',
   setupFiles: ['<rootDir>/node_package/tests/jest.setup.js'],
+  // TODO: Remove this once we made RSCClientRoot compatible with React 19
+  moduleNameMapper: process.env.USE_REACT_18
+    ? {
+        '^react$': '<rootDir>/node_modules/react-18',
+        '^react/(.*)$': '<rootDir>/node_modules/react-18/$1',
+        '^react-dom$': '<rootDir>/node_modules/react-dom-18',
+        '^react-dom/(.*)$': '<rootDir>/node_modules/react-dom-18/$1',
+      }
+    : {
+        'react-server-dom-webpack/client': '<rootDir>/node_package/tests/emptyForTesting.js',
+      },
 };

knip.ts

@@ -4,7 +4,14 @@ const config: KnipConfig = {
   // ! at the end means files are used in production
   workspaces: {
     '.': {
-      entry: ['node_package/src/ReactOnRails.ts!', 'node_package/src/ReactOnRails.node.ts!'],
+      entry: [
+        'node_package/src/ReactOnRails.ts!',
+        'node_package/src/ReactOnRails.node.ts!',
+        'node_package/src/ReactOnRailsRSC.ts!',
+        'node_package/src/RSCWebpackLoader.ts!',
+        'node_package/src/registerServerComponent.ts!',
+        'node_package/src/RSCClientRoot.ts!',
+      ],
       project: ['node_package/src/**/*.[jt]s!', 'node_package/tests/**/*.[jt]s'],
       babel: {
         config: ['node_package/babel.config.js'],
@@ -24,6 +31,11 @@ const config: KnipConfig = {
         // though we don't actually use its rules anywhere.
         'eslint-plugin-jsx-a11y',
         'eslint-plugin-react',
+        'react-server-dom-webpack',
+        'cross-fetch',
+        'jsdom',
+        'react-18',
+        'react-dom-18',
       ],
     },
     'spec/dummy': {

lib/react_on_rails/configuration.rb

@@ -9,6 +9,8 @@ def self.configure
   end
 
   DEFAULT_GENERATED_ASSETS_DIR = File.join(%w[public webpack], Rails.env).freeze
+  DEFAULT_REACT_CLIENT_MANIFEST_FILE = "react-client-manifest.json"
+  DEFAULT_COMPONENT_REGISTRY_TIMEOUT = 5000
 
   def self.configuration
     @configuration ||= Configuration.new(
@@ -17,6 +19,8 @@ def self.configuration
       # generated_assets_dirs is deprecated
       generated_assets_dir: "",
       server_bundle_js_file: "",
+      rsc_bundle_js_file: "",
+      react_client_manifest_file: DEFAULT_REACT_CLIENT_MANIFEST_FILE,
       prerender: false,
       auto_load_bundle: false,
       replay_console: true,
@@ -41,7 +45,11 @@ def self.configuration
       make_generated_server_bundle_the_entrypoint: false,
       defer_generated_component_packs: true,
       # forces the loading of React components
-      force_load: false
+      force_load: false,
+      # Maximum time in milliseconds to wait for client-side component registration after page load.
+      # If exceeded, an error will be thrown for server-side rendered components not registered on the client.
+      # Set to 0 to disable the timeout and wait indefinitely for component registration.
+      component_registry_timeout: DEFAULT_COMPONENT_REGISTRY_TIMEOUT
     )
   end
 
@@ -56,8 +64,8 @@ class Configuration
                   :server_render_method, :random_dom_id, :auto_load_bundle,
                   :same_bundle_for_client_and_server, :rendering_props_extension,
                   :make_generated_server_bundle_the_entrypoint,
-                  :defer_generated_component_packs,
-                  :force_load
+                  :defer_generated_component_packs, :force_load, :rsc_bundle_js_file,
+                  :react_client_manifest_file, :component_registry_timeout
 
     # rubocop:disable Metrics/AbcSize
     def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender: nil,
@@ -72,7 +80,8 @@ def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender
                    same_bundle_for_client_and_server: nil,
                    i18n_dir: nil, i18n_yml_dir: nil, i18n_output_format: nil, i18n_yml_safe_load_options: nil,
                    random_dom_id: nil, server_render_method: nil, rendering_props_extension: nil,
-                   components_subdirectory: nil, auto_load_bundle: nil, force_load: nil)
+                   components_subdirectory: nil, auto_load_bundle: nil, force_load: nil,
+                   rsc_bundle_js_file: nil, react_client_manifest_file: nil, component_registry_timeout: nil)
       self.node_modules_location = node_modules_location.present? ? node_modules_location : Rails.root
       self.generated_assets_dirs = generated_assets_dirs
       self.generated_assets_dir = generated_assets_dir
@@ -96,9 +105,12 @@ def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender
       self.raise_on_prerender_error = raise_on_prerender_error
       self.skip_display_none = skip_display_none
       self.rendering_props_extension = rendering_props_extension
+      self.component_registry_timeout = component_registry_timeout
 
       # Server rendering:
       self.server_bundle_js_file = server_bundle_js_file
+      self.rsc_bundle_js_file = rsc_bundle_js_file
+      self.react_client_manifest_file = react_client_manifest_file
       self.same_bundle_for_client_and_server = same_bundle_for_client_and_server
       self.server_renderer_pool_size = self.development_mode ? 1 : server_renderer_pool_size
       self.server_renderer_timeout = server_renderer_timeout # seconds
@@ -126,10 +138,19 @@ def setup_config_values
       error_if_using_packer_and_generated_assets_dir_not_match_public_output_path
       # check_deprecated_settings
       adjust_precompile_task
+      check_component_registry_timeout
     end
 
     private
 
+    def check_component_registry_timeout
+      self.component_registry_timeout = DEFAULT_COMPONENT_REGISTRY_TIMEOUT if component_registry_timeout.nil?
+
+      return if component_registry_timeout.is_a?(Integer) && component_registry_timeout >= 0
+
+      raise ReactOnRails::Error, "component_registry_timeout must be a positive integer"
+    end
+
     def check_autobundling_requirements
       raise_missing_components_subdirectory if auto_load_bundle && !components_subdirectory.present?
       return unless components_subdirectory.present?
@@ -243,6 +264,8 @@ def ensure_webpack_generated_files_exists
 
       files = ["manifest.json"]
       files << server_bundle_js_file if server_bundle_js_file.present?
+      files << rsc_bundle_js_file if rsc_bundle_js_file.present?
+      files << react_client_manifest_file if react_client_manifest_file.present?
 
       self.webpack_generated_files = files
     end