[WIP] Add support for RSC

.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

Gemfile.lock

@@ -385,6 +385,11 @@ GEM
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
       selenium-webdriver (~> 4.0, < 4.11)
+    webpacker (6.0.0.rc.6)
+      activesupport (>= 5.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
     webrick (1.8.1)
     websocket (1.2.10)
     websocket-driver (0.7.6)
@@ -439,6 +444,7 @@ DEPENDENCIES
   turbolinks
   uglifier
   webdrivers (= 5.3.0)
+  webpacker (= 6.0.0.rc.6)
 
 BUNDLED WITH
    2.5.9

lib/react_on_rails/configuration.rb

@@ -17,6 +17,7 @@ def self.configuration
       # generated_assets_dirs is deprecated
       generated_assets_dir: "",
       server_bundle_js_file: "",
+      rsc_bundle_js_file: "",
       prerender: false,
       auto_load_bundle: false,
       replay_console: true,
@@ -55,7 +56,7 @@ 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,
+                  :defer_generated_component_packs, :rsc_bundle_js_file,
                   :force_load
 
     # rubocop:disable Metrics/AbcSize
@@ -71,7 +72,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,
                    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)
       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
@@ -97,6 +99,7 @@ def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender
 
       # Server rendering:
       self.server_bundle_js_file = server_bundle_js_file
+      self.rsc_bundle_js_file = rsc_bundle_js_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
@@ -241,7 +244,7 @@ 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?
       self.webpack_generated_files = files
     end
 

lib/react_on_rails/helper.rb

@@ -124,29 +124,15 @@ def react_component(component_name, options = {})
     # @option options [Boolean] :raise_on_prerender_error Set to true to raise exceptions during server-side rendering
     # Any other options are passed to the content tag, including the id.
     def stream_react_component(component_name, options = {})
-      unless ReactOnRails::Utils.react_on_rails_pro?
-        raise ReactOnRails::Error,
-              "You must use React on Rails Pro to use the stream_react_component method."
-      end
-
-      if @rorp_rendering_fibers.nil?
-        raise ReactOnRails::Error,
-              "You must call stream_view_containing_react_components to render the view containing the react component"
+      run_stream_inside_fiber do
+        internal_stream_react_component(component_name, options)
       end
+    end
 
-      rendering_fiber = Fiber.new do
-        stream = internal_stream_react_component(component_name, options)
-        stream.each_chunk do |chunk|
-          Fiber.yield chunk
-        end
+    def rsc_react_component(component_name, options = {})
+      run_stream_inside_fiber do
+        internal_rsc_react_component(component_name, options)
       end
-
-      @rorp_rendering_fibers << rendering_fiber
-
-      # return the first chunk of the fiber
-      # It contains the initial html of the component
-      # all updates will be appended to the stream sent to browser
-      rendering_fiber.resume
     end
 
     # react_component_hash is used to return multiple HTML strings for server rendering, such as for
@@ -388,6 +374,32 @@ def load_pack_for_generated_component(react_component_name, render_options)
 
     private
 
+    def run_stream_inside_fiber
+      unless ReactOnRails::Utils.react_on_rails_pro?
+        raise ReactOnRails::Error,
+              "You must use React on Rails Pro to use the stream_react_component method."
+      end
+
+      if @rorp_rendering_fibers.nil?
+        raise ReactOnRails::Error,
+              "You must call stream_view_containing_react_components to render the view containing the react component"
+      end
+
+      rendering_fiber = Fiber.new do
+        stream = yield
+        stream.each_chunk do |chunk|
+          Fiber.yield chunk
+        end
+      end
+
+      @rorp_rendering_fibers << rendering_fiber
+
+      # return the first chunk of the fiber
+      # It contains the initial html of the component
+      # all updates will be appended to the stream sent to browser
+      rendering_fiber.resume
+    end
+
     def internal_stream_react_component(component_name, options = {})
       options = options.merge(stream?: true)
       result = internal_react_component(component_name, options)
@@ -398,6 +410,15 @@ def internal_stream_react_component(component_name, options = {})
       )
     end
 
+    def internal_rsc_react_component(react_component_name, options = {})
+      options = options.merge(rsc?: true)
+      render_options = create_render_options(react_component_name, options)
+      json_stream = server_rendered_react_component(render_options)
+      json_stream.transform do |chunk|
+        chunk[:html].html_safe
+      end
+    end
+
     def generated_components_pack_path(component_name)
       "#{ReactOnRails::PackerUtils.packer_source_entry_path}/generated/#{component_name}.js"
     end
@@ -590,7 +611,7 @@ def should_raise_streaming_prerender_error?(chunk_json_result, render_options)
     end
 
     # Returns object with values that are NOT html_safe!
-    def server_rendered_react_component(render_options)
+    def server_rendered_react_component(render_options) # rubocop:disable Metrics/CyclomaticComplexity
       return { "html" => "", "consoleReplayScript" => "" } unless render_options.prerender
 
       react_component_name = render_options.react_component_name
@@ -636,6 +657,9 @@ def server_rendered_react_component(render_options)
                                                js_code: js_code)
       end
 
+      # TODO: handle errors for rsc streams
+      return result if render_options.rsc?
+
       if render_options.stream?
         result.transform do |chunk_json_result|
           if should_raise_streaming_prerender_error?(chunk_json_result, render_options)

lib/react_on_rails/packer_utils.rb

@@ -74,9 +74,10 @@ def self.bundle_js_uri_from_packer(bundle_name)
       # the webpack-dev-server is provided by the config value
       # "same_bundle_for_client_and_server" where a value of true
       # would mean that the bundle is created by the webpack-dev-server
-      is_server_bundle = bundle_name == ReactOnRails.configuration.server_bundle_js_file
+      is_bundle_running_on_server = (bundle_name == ReactOnRails.configuration.server_bundle_js_file) ||
+                                    (bundle_name == ReactOnRails.configuration.rsc_bundle_js_file)
 
-      if packer.dev_server.running? && (!is_server_bundle ||
+      if packer.dev_server.running? && (!is_bundle_running_on_server ||
         ReactOnRails.configuration.same_bundle_for_client_and_server)
         "#{packer.dev_server.protocol}://#{packer.dev_server.host_with_port}#{hashed_bundle_name}"
       else

lib/react_on_rails/react_component/render_options.rb

@@ -115,6 +115,10 @@ def stream?
         options[:stream?]
       end
 
+      def rsc?
+        options[:rsc?]
+      end
+
       private
 
       attr_reader :options

lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb

@@ -46,7 +46,7 @@ def reset_pool_if_server_bundle_was_modified
         # Note, js_code does not have to be based on React.
         # js_code MUST RETURN json stringify Object
         # Calling code will probably call 'html_safe' on return value before rendering to the view.
-        # rubocop:disable Metrics/CyclomaticComplexity
+        # rubocop:disable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
         def exec_server_render_js(js_code, render_options, js_evaluator = nil)
           js_evaluator ||= self
           if render_options.trace
@@ -56,7 +56,7 @@ def exec_server_render_js(js_code, render_options, js_evaluator = nil)
             @file_index += 1
           end
           begin
-            result = if render_options.stream?
+            result = if render_options.stream? || render_options.rsc?
                        js_evaluator.eval_streaming_js(js_code, render_options)
                      else
                        js_evaluator.eval_js(js_code, render_options)
@@ -76,13 +76,16 @@ def exec_server_render_js(js_code, render_options, js_evaluator = nil)
             raise ReactOnRails::Error, msg, err.backtrace
           end
 
-          return parse_result_and_replay_console_messages(result, render_options) unless render_options.stream?
+          unless render_options.stream? || render_options.rsc?
+            return parse_result_and_replay_console_messages(result,
+                                                            render_options)
+          end
 
           # Streamed component is returned as stream of strings.
           # We need to parse each chunk and replay the console messages.
           result.transform { |chunk| parse_result_and_replay_console_messages(chunk, render_options) }
         end
-        # rubocop:enable Metrics/CyclomaticComplexity
+        # rubocop:enable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
 
         def trace_js_code_used(msg, js_code, file_name = "tmp/server-generated.js", force: false)
           return unless ReactOnRails.configuration.trace || force
@@ -227,6 +230,8 @@ def file_url_to_string(url)
         end
 
         def parse_result_and_replay_console_messages(result_string, render_options)
+          return { html: result_string } if render_options.rsc?
+
           result = nil
           begin
             result = JSON.parse(result_string)

lib/react_on_rails/utils.rb

@@ -66,7 +66,7 @@ def self.server_bundle_path_is_http?
       server_bundle_js_file_path =~ %r{https?://}
     end
 
-    def self.server_bundle_js_file_path
+    def self.bundle_js_file_path(bundle_name)
       # Either:
       # 1. Using same bundle for both server and client, so server bundle will be hashed in manifest
       # 2. Using a different bundle (different Webpack config), so file is not hashed, and
@@ -76,28 +76,17 @@ def self.server_bundle_js_file_path
       #    a. The webpack manifest plugin would have a race condition where the same manifest.json
       #       is edited by both the webpack-dev-server
       #    b. There is no good reason to hash the server bundle name.
-      return @server_bundle_path if @server_bundle_path && !Rails.env.development?
-
-      bundle_name = ReactOnRails.configuration.server_bundle_js_file
-      @server_bundle_path = if ReactOnRails::PackerUtils.using_packer?
-                              begin
-                                bundle_js_file_path(bundle_name)
-                              rescue Object.const_get(
-                                ReactOnRails::PackerUtils.packer_type.capitalize
-                              )::Manifest::MissingEntryError
-                                File.expand_path(
-                                  File.join(ReactOnRails::PackerUtils.packer_public_output_path,
-                                            bundle_name)
-                                )
-                              end
-                            else
-                              bundle_js_file_path(bundle_name)
-                            end
-    end
-
-    def self.bundle_js_file_path(bundle_name)
       if ReactOnRails::PackerUtils.using_packer? && bundle_name != "manifest.json"
-        ReactOnRails::PackerUtils.bundle_js_uri_from_packer(bundle_name)
+        begin
+          ReactOnRails::PackerUtils.bundle_js_uri_from_packer(bundle_name)
+        rescue Object.const_get(
+          ReactOnRails::PackerUtils.packer_type.capitalize
+        )::Manifest::MissingEntryError
+          File.expand_path(
+            File.join(ReactOnRails::PackerUtils.packer_public_output_path,
+                      bundle_name)
+          )
+        end
       else
         # Default to the non-hashed name in the specified output directory, which, for legacy
         # React on Rails, this is the output directory picked up by the asset pipeline.
@@ -106,6 +95,20 @@ def self.bundle_js_file_path(bundle_name)
       end
     end
 
+    def self.server_bundle_js_file_path
+      return @server_bundle_path if @server_bundle_path && !Rails.env.development?
+
+      bundle_name = ReactOnRails.configuration.server_bundle_js_file
+      @server_bundle_path = bundle_js_file_path(bundle_name)
+    end
+
+    def self.rsc_bundle_js_file_path
+      return @rsc_bundle_path if @rsc_bundle_path && !Rails.env.development?
+
+      bundle_name = ReactOnRails.configuration.rsc_bundle_js_file
+      @rsc_bundle_path = bundle_js_file_path(bundle_name)
+    end
+
     def self.running_on_windows?
       (/cygwin|mswin|mingw|bccwin|wince|emx/ =~ RUBY_PLATFORM) != nil
     end

node_package/src/ReactOnRails.ts

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import type { Readable } from 'stream';
+import type { Readable, PassThrough } from 'stream';
 
 import * as ClientStartup from './clientStartup';
 import handleError from './handleError';
@@ -256,6 +256,14 @@ ctx.ReactOnRails = {
     return streamServerRenderedReactComponent(options);
   },
 
+  /**
+   * Used by rsc payload generation by Rails
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  serverRenderRSCReactComponent(options: RenderParams): PassThrough {
+    throw new Error('serverRenderRSCReactComponent is supported in RSC bundle only.');
+  },
+
   /**
    * Used by Rails to catch errors in rendering
    * @param options