[WIP] Add support for RSC

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    react_on_rails (14.0.5)
+    react_on_rails (15.0.0.alpha.1)
       addressable
       connection_pool
       execjs (~> 2.5)

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
@@ -375,19 +361,46 @@ def load_pack_for_generated_component(react_component_name, render_options)
       return unless render_options.auto_load_bundle
 
       ReactOnRails::PackerUtils.raise_nested_entries_disabled unless ReactOnRails::PackerUtils.nested_entries?
-      if Rails.env.development?
-        is_component_pack_present = File.exist?(generated_components_pack_path(react_component_name))
-        raise_missing_autoloaded_bundle(react_component_name) unless is_component_pack_present
-      end
-      append_javascript_pack_tag("generated/#{react_component_name}",
-                                 defer: ReactOnRails.configuration.defer_generated_component_packs)
-      append_stylesheet_pack_tag("generated/#{react_component_name}")
+      append_javascript_pack_tag("client-bundle")
+      # if Rails.env.development?
+      #   is_component_pack_present = File.exist?(generated_components_pack_path(react_component_name))
+      #   raise_missing_autoloaded_bundle(react_component_name) unless is_component_pack_present
+      # end
+      # append_javascript_pack_tag("generated/#{react_component_name}",
+      #                            defer: ReactOnRails.configuration.defer_generated_component_packs)
+      # append_stylesheet_pack_tag("generated/#{react_component_name}")
     end
 
     # rubocop:enable Metrics/AbcSize, Metrics/CyclomaticComplexity
 
     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 +411,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
@@ -636,6 +658,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/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

@@ -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,7 +76,7 @@ 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?
+          return parse_result_and_replay_console_messages(result, render_options) unless render_options.stream? || render_options.rsc?
 
           # Streamed component is returned as stream of strings.
           # We need to parse each chunk and replay the console messages.
@@ -231,6 +231,7 @@ def parse_result_and_replay_console_messages(result_string, render_options)
           begin
             result = JSON.parse(result_string)
           rescue JSON::ParserError => e
+            return { html: result_string }
             raise ReactOnRails::JsonParseError.new(parse_error: e, json: result_string)
           end
 

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,36 +76,49 @@ 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.
-        # For Shakapacker, this is the public output path defined in the (shaka/web)packer.yml file.
+        # For Webpacker, this is the public output path defined in the webpacker.yml file.
         File.join(generated_assets_full_path, bundle_name)
       end
     end
 
+    def self.server_bundle_js_file_path
+      # 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
+      #    bundle_js_path will throw so the default path is used without a hash.
+      # 3. The third option of having the server bundle hashed and a different configuration than
+      #    the client bundle is not supported for 2 reasons:
+      #    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 = 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?
+
+      # TODO: make it configurable
+      bundle_name = "rsc-bundle.js"
+      @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,15 @@ ctx.ReactOnRails = {
     return streamServerRenderedReactComponent(options);
   },
 
+  /**
+   * Used by server rendering by Rails
+   * @param options
+   */
+  // 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

node_package/src/ReactOnRailsRSC.ts

@@ -0,0 +1,94 @@
+import type { ReactElement } from 'react';
+// @ts-expect-error will define this module types later
+import { renderToReadableStream } from 'react-server-dom-webpack/server.edge';
+import { PassThrough } from 'stream';
+import fs from 'fs';
+
+import { RenderParams } from './types';
+import ComponentRegistry from './ComponentRegistry';
+import createReactOutput from './createReactOutput';
+import { isPromise, isServerRenderHash } from './isServerRenderResult';
+import ReactOnRails from './ReactOnRails';
+
+(async () => {
+  try {
+    // @ts-expect-error AsyncLocalStorage is not in the node types
+    globalThis.AsyncLocalStorage = (await import('node:async_hooks')).AsyncLocalStorage;
+  } catch (e) {
+    console.log('AsyncLocalStorage not found');
+  }
+})();
+
+const stringToStream = (str: string) => {
+  const stream = new PassThrough();
+  stream.push(str);
+  stream.push(null);
+  return stream;
+};
+
+const getBundleConfig = () => {
+  const bundleConfig = JSON.parse(fs.readFileSync('./public/webpack/development/react-client-manifest.json', 'utf8'));
+  // remove file:// from keys
+  const newBundleConfig: { [key: string]: any } = {};
+  for (const [key, value] of Object.entries(bundleConfig)) {
+    newBundleConfig[key.replace('file://', '')] = value;
+  }
+  return newBundleConfig;
+}
+
+ReactOnRails.serverRenderRSCReactComponent = (options: RenderParams) => {
+  const { name, domNodeId, trace, props, railsContext, throwJsErrors } = options;
+
+  let renderResult: null | PassThrough = null;
+
+  try {
+    const componentObj = ComponentRegistry.get(name);
+    if (componentObj.isRenderer) {
+      throw new Error(`\
+Detected a renderer while server rendering component '${name}'. \
+See https://github.com/shakacode/react_on_rails#renderer-functions`);
+    }
+
+    const reactRenderingResult = createReactOutput({
+      componentObj,
+      domNodeId,
+      trace,
+      props,
+      railsContext,
+    });
+
+    if (isServerRenderHash(reactRenderingResult) || isPromise(reactRenderingResult)) {
+      throw new Error('Server rendering of streams is not supported for server render hashes or promises.');
+    }
+
+    renderResult = new PassThrough();
+    let finalValue = "";
+    const streamReader = renderToReadableStream(reactRenderingResult, getBundleConfig()).getReader();
+    const decoder = new TextDecoder();
+    const processStream = async () => {
+      const { done, value } = await streamReader.read();
+      if (done) {
+        renderResult?.push(null);
+        // @ts-expect-error value is not typed
+        debugConsole.log('value', finalValue);
+        return;
+      }
+
+      finalValue += decoder.decode(value);
+      renderResult?.push(value);
+      processStream();
+    }
+    processStream();
+  } catch (e: unknown) {
+    if (throwJsErrors) {
+      throw e;
+    }
+
+    renderResult = stringToStream(`Error: ${e}`);
+  }
+
+  return renderResult;
+};
+
+export * from './types';
+export default ReactOnRails;

node_package/src/types/index.ts

@@ -1,5 +1,5 @@
 import type { ReactElement, ReactNode, Component, ComponentType } from 'react';
-import type { Readable } from 'stream';
+import type { Readable, PassThrough } from 'stream';
 
 // Don't import redux just for the type definitions
 // See https://github.com/shakacode/react_on_rails/issues/1321
@@ -171,6 +171,7 @@ export interface ReactOnRails {
   getComponent(name: string): RegisteredComponent;
   serverRenderReactComponent(options: RenderParams): null | string | Promise<RenderResult>;
   streamServerRenderedReactComponent(options: RenderParams): Readable;
+  serverRenderRSCReactComponent(options: RenderParams): PassThrough;
   handleError(options: ErrorOptions): string | undefined;
   buildConsoleReplay(): string;
   registeredComponents(): Map<string, RegisteredComponent>;

package.json

@@ -2,7 +2,12 @@
   "name": "react-on-rails",
   "version": "15.0.0-alpha.1",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
-  "main": "node_package/lib/ReactOnRails.js",
+  "exports": {
+    ".": {
+      "rsc-server": "./node_package/lib/ReactOnRailsRSC.js",
+      "default": "./node_package/lib/ReactOnRails.js"
+    }
+  },
   "directories": {
     "doc": "docs"
   },
@@ -41,6 +46,7 @@
     "prop-types": "^15.8.1",
     "react": "18.3.0-canary-670811593-20240322",
     "react-dom": "18.3.0-canary-670811593-20240322",
+    "react-server-dom-webpack": "18.3.0-canary-670811593-20240322",
     "react-transform-hmr": "^1.0.4",
     "redux": "^4.2.1",
     "ts-jest": "^29.1.0",