react_on_rails 14.0.5 → 15.0.0.alpha.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ca8ba0235b9256e1b24f5afc2c874f258cf239d78ad6490e86ce4d918b26ecf4
-  data.tar.gz: 54796b7b8067b98180bf0e41eb20c4d6bb0a4ea54594af8365eb95c74158d1b7
+  metadata.gz: 7d60051000fbd817b3499b1de6f13c9abeaf5627bee250c50bf0d748ce3532a5
+  data.tar.gz: 4eccfe81e12b647503fa6e690c514d4d14d6704ab1e5c7f64282cafa7709d6e2
 SHA512:
-  metadata.gz: c081c9e1b626d9c986f212c2c351fd1774fddaa9be301ae05d6c890b41c30f21871acb56002001b2bf64584da3932457ffc9da522463f3d49f7b73dd62852032
-  data.tar.gz: 005f0dc9f274c6ba9edc8784efb679e6ba5bc7610b708c7c072f4301f4fe25d3a4bf887ad2e9449284f2bbce346dfec54f0e7bd54192ab8d3532c7d5b3004267
+  metadata.gz: 99004f6792fe209d21474c7b5b311ac8a02cce27740b69164e44079983a5852895aa99ed12530043ba64ad6920d189cb6b19ce3957aca83b6bab06f75bf702ee
+  data.tar.gz: 2be5eb3178a913c90c7b4e640812bccc479245d0052d95751317f543c80e7bf9429f9fd61cbc1c5edb917aafbead33502c75fb63fd8ab183480aaa44124f3dc5

data/CHANGELOG.md

@@ -18,6 +18,25 @@ Please follow the recommendations outlined at [keepachangelog.com](http://keepac
 ### [Unreleased]
 Changes since the last non-beta release.
 
+#### Added(https://github.com/AbanoubGhadban).
+- Added streaming server rendering support:
+  - [PR #1633](https://github.com/shakacode/react_on_rails/pull/1633) by [AbanoubGhadban](https://github.com/AbanoubGhadban).
+    - New `stream_react_component` helper for adding streamed components to views
+    - New `streamServerRenderedReactComponent` function in the react-on-rails package that uses React 18's `renderToPipeableStream` API
+    - Enables progressive page loading and improved performance for server-rendered React components
+  - Added support for replaying console logs that occur during server rendering of streamed React components. This enables debugging of server-side rendering issues by capturing and displaying console output on the client and on the server output. [PR #1647](https://github.com/shakacode/react_on_rails/pull/1647) by [AbanoubGhadban](https://github.com/AbanoubGhadban).
+  - Added support for handling errors happening during server rendering of streamed React components. It handles errors that happen during the initial render and errors that happen inside suspense boundaries. [PR #1648](https://github.com/shakacode/react_on_rails/pull/1648) by [AbanoubGhadban](https://github.com/AbanoubGhadban).
+
+#### Changed
+- Console replay script generation now awaits the render request promise before generating, allowing it to capture console logs from asynchronous operations. This requires using a version of the Node renderer that supports replaying async console logs. [PR #1649](https://github.com/shakacode/react_on_rails/pull/1649) by [AbanoubGhadban](https://github.com/AbanoubGhadban).
+
+#### Fixed
+- Incorrect type and confusing name for `ReactOnRails.registerStore`, use `registerStoreGenerators` instead. [PR 1651](https://github.com/shakacode/react_on_rails/pull/1651) by [alexeyr-ci](https://github.com/alexeyr-ci).
+
+### [14.0.5] - 2024-08-20
+#### Fixed
+- Should force load react-components which send over turbo-stream [PR #1620](https://github.com/shakacode/react_on_rails/pull/1620) by [theforestvn88](https://github.com/theforestvn88).
+
 ### [14.0.4] - 2024-07-02
 
 #### Improved
@@ -1148,7 +1167,8 @@ Best done with Object destructing:
 ##### Fixed
 - Fix several generator-related issues.
 
-[Unreleased]: https://github.com/shakacode/react_on_rails/compare/14.0.4...master
+[Unreleased]: https://github.com/shakacode/react_on_rails/compare/14.0.5...master
+[14.0.5]: https://github.com/shakacode/react_on_rails/compare/14.0.4...14.0.5
 [14.0.4]: https://github.com/shakacode/react_on_rails/compare/14.0.3...14.0.4
 [14.0.3]: https://github.com/shakacode/react_on_rails/compare/14.0.2...14.0.3
 [14.0.2]: https://github.com/shakacode/react_on_rails/compare/14.0.1...14.0.2

data/Gemfile.lock

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

data/README.md

@@ -17,6 +17,7 @@
 [![Linting](https://github.com/shakacode/react_on_rails/actions/workflows/lint-js-and-ruby.yml/badge.svg)](https://github.com/shakacode/react_on_rails/actions/workflows/lint-js-and-ruby.yml)
 
 # News
+* [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/) supports the latest features of React 18, including [React Server Components](https://react.dev/reference/rsc/server-components) and [streaming](https://react.dev/reference/react-dom/server/renderToPipeableStream). Contact [Justin Gordon](mailto:justin@shakacode.com) for more information.
 * ShakaCode now maintains the official successor to `rails/webpacker`, [`shakapacker`](https://github.com/shakacode/shakapacker).
 * Project is updated to support Rails 7 and Shakapacker v6+!
 

data/SUMMARY.md

@@ -17,6 +17,7 @@ Here is the new link:
   + [How React on Rails Works](docs/outdated/how-react-on-rails-works.md)
   + [Client vs. Server Rendering](./docs/guides/client-vs-server-rendering.md)
   + [React Server Rendering](./docs/guides/react-server-rendering.md)
+  + [🚀 Next-Gen Server Rendering: Streaming with React 18's Latest APIs](./docs/guides/streaming-server-rendering.md)
   + [Render-Functions and the RailsContext](docs/guides/render-functions-and-railscontext.md)
   + [Caching and Performance: React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
   + [Deployment](docs/guides/deployment.md).

data/lib/react_on_rails/helper.rb

@@ -91,6 +91,64 @@ module ReactOnRails
       end
     end
 
+    # Streams a server-side rendered React component using React's `renderToPipeableStream`.
+    # Supports React 18 features like Suspense, concurrent rendering, and selective hydration.
+    # Enables progressive rendering and improved performance for large components.
+    #
+    # Note: This function can only be used with React on Rails Pro.
+    # The view that uses this function must be rendered using the
+    # `stream_view_containing_react_components` method from the React on Rails Pro gem.
+    #
+    # Example of an async React component that can benefit from streaming:
+    #
+    # const AsyncComponent = async () => {
+    #   const data = await fetchData();
+    #   return <div>{data}</div>;
+    # };
+    #
+    # function App() {
+    #   return (
+    #     <Suspense fallback={<div>Loading...</div>}>
+    #       <AsyncComponent />
+    #     </Suspense>
+    #   );
+    # }
+    #
+    # @param [String] component_name Name of your registered component
+    # @param [Hash] options Options for rendering
+    # @option options [Hash] :props Props to pass to the react component
+    # @option options [String] :dom_id DOM ID of the component container
+    # @option options [Hash] :html_options Options passed to content_tag
+    # @option options [Boolean] :prerender Set to false to disable server-side rendering
+    # @option options [Boolean] :trace Set to true to add extra debugging information to the HTML
+    # @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"
+      end
+
+      rendering_fiber = Fiber.new do
+        stream = internal_stream_react_component(component_name, options)
+        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
+
     # react_component_hash is used to return multiple HTML strings for server rendering, such as for
     # adding meta-tags to a page.
     # It is exactly like react_component except for the following:
@@ -330,6 +388,16 @@ module ReactOnRails
 
     private
 
+    def internal_stream_react_component(component_name, options = {})
+      options = options.merge(stream?: true)
+      result = internal_react_component(component_name, options)
+      build_react_component_result_for_server_streamed_content(
+        rendered_html_stream: result[:result],
+        component_specification_tag: result[:tag],
+        render_options: result[:render_options]
+      )
+    end
+
     def generated_components_pack_path(component_name)
       "#{ReactOnRails::PackerUtils.packer_source_entry_path}/generated/#{component_name}.js"
     end
@@ -361,6 +429,32 @@ module ReactOnRails
       prepend_render_rails_context(result)
     end
 
+    def build_react_component_result_for_server_streamed_content(
+      rendered_html_stream:,
+      component_specification_tag:,
+      render_options:
+    )
+      is_first_chunk = true
+      rendered_html_stream.transform do |chunk_json_result|
+        if is_first_chunk
+          is_first_chunk = false
+          build_react_component_result_for_server_rendered_string(
+            server_rendered_html: chunk_json_result["html"],
+            component_specification_tag: component_specification_tag,
+            console_script: chunk_json_result["consoleReplayScript"],
+            render_options: render_options
+          )
+        else
+          result_console_script = render_options.replay_console ? chunk_json_result["consoleReplayScript"] : ""
+          # No need to prepend component_specification_tag or add rails context again
+          # as they're already included in the first chunk
+          compose_react_component_html_with_spec_and_console(
+            "", chunk_json_result["html"], result_console_script
+          )
+        end
+      end
+    end
+
     def build_react_component_result_for_server_rendered_hash(
       server_rendered_html: required("server_rendered_html"),
       component_specification_tag: required("component_specification_tag"),
@@ -397,27 +491,30 @@ module ReactOnRails
 
     def compose_react_component_html_with_spec_and_console(component_specification_tag, rendered_output, console_script)
       # IMPORTANT: Ensure that we mark string as html_safe to avoid escaping.
-      <<~HTML.html_safe
+      html_content = <<~HTML
         #{rendered_output}
               #{component_specification_tag}
               #{console_script}
       HTML
+      html_content.strip.html_safe
     end
 
-    # prepend the rails_context if not yet applied
-    def prepend_render_rails_context(render_value)
-      return render_value if @rendered_rails_context
+    def rails_context_if_not_already_rendered
+      return "" if @rendered_rails_context
 
       data = rails_context(server_side: false)
 
       @rendered_rails_context = true
 
-      rails_context_content = content_tag(:script,
-                                          json_safe_and_pretty(data).html_safe,
-                                          type: "application/json",
-                                          id: "js-react-on-rails-context")
+      content_tag(:script,
+                  json_safe_and_pretty(data).html_safe,
+                  type: "application/json",
+                  id: "js-react-on-rails-context")
+    end
 
-      "#{rails_context_content}\n#{render_value}".html_safe
+    # prepend the rails_context if not yet applied
+    def prepend_render_rails_context(render_value)
+      "#{rails_context_if_not_already_rendered}\n#{render_value}".strip.html_safe
     end
 
     def internal_react_component(react_component_name, options = {})
@@ -473,6 +570,25 @@ ReactOnRails.reactOnRailsComponentLoaded('#{render_options.dom_id}');
       props.is_a?(String) ? props : props.to_json
     end
 
+    def raise_prerender_error(json_result, react_component_name, props, js_code)
+      raise ReactOnRails::PrerenderError.new(
+        component_name: react_component_name,
+        props: sanitized_props_string(props),
+        err: nil,
+        js_code: js_code,
+        console_messages: json_result["consoleReplayScript"]
+      )
+    end
+
+    def should_raise_streaming_prerender_error?(chunk_json_result, render_options)
+      chunk_json_result["hasErrors"] &&
+        (if chunk_json_result["isShellReady"]
+           render_options.raise_non_shell_server_rendering_errors
+         else
+           render_options.raise_on_prerender_error
+         end)
+    end
+
     # Returns object with values that are NOT html_safe!
     def server_rendered_react_component(render_options)
       return { "html" => "", "consoleReplayScript" => "" } unless render_options.prerender
@@ -520,16 +636,18 @@ ReactOnRails.reactOnRailsComponentLoaded('#{render_options.dom_id}');
                                                js_code: js_code)
       end
 
-      if result["hasErrors"] && render_options.raise_on_prerender_error
-        # We caught this exception on our backtrace handler
-        raise ReactOnRails::PrerenderError.new(component_name: react_component_name,
-                                               # Sanitize as this might be browser logged
-                                               props: sanitized_props_string(props),
-                                               err: nil,
-                                               js_code: js_code,
-                                               console_messages: result["consoleReplayScript"])
-
+      if render_options.stream?
+        result.transform do |chunk_json_result|
+          if should_raise_streaming_prerender_error?(chunk_json_result, render_options)
+            raise_prerender_error(chunk_json_result, react_component_name, props, js_code)
+          end
+          # It doesn't make any transformation, it listens and raises error if a chunk has errors
+          chunk_json_result
+        end
+      elsif result["hasErrors"] && render_options.raise_on_prerender_error
+        raise_prerender_error(result, react_component_name, props, js_code)
       end
+
       result
     end
 

data/lib/react_on_rails/react_component/render_options.rb

@@ -87,6 +87,10 @@ module ReactOnRails
         retrieve_configuration_value_for(:raise_on_prerender_error)
       end
 
+      def raise_non_shell_server_rendering_errors
+        retrieve_react_on_rails_pro_config_value_for(:raise_non_shell_server_rendering_errors)
+      end
+
       def logging_on_server
         retrieve_configuration_value_for(:logging_on_server)
       end
@@ -107,6 +111,10 @@ module ReactOnRails
         options[key] = value
       end
 
+      def stream?
+        options[:stream?]
+      end
+
       private
 
       attr_reader :options
@@ -124,6 +132,14 @@ module ReactOnRails
           ReactOnRails.configuration.public_send(key)
         end
       end
+
+      def retrieve_react_on_rails_pro_config_value_for(key)
+        options.fetch(key) do
+          return nil unless ReactOnRails::Utils.react_on_rails_pro?
+
+          ReactOnRailsPro.configuration.public_send(key)
+        end
+      end
     end
   end
 end

data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb

@@ -46,7 +46,7 @@ module ReactOnRails
         # 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, Metrics/AbcSize, Metrics/PerceivedComplexity
+        # rubocop:disable Metrics/CyclomaticComplexity
         def exec_server_render_js(js_code, render_options, js_evaluator = nil)
           js_evaluator ||= self
           if render_options.trace
@@ -56,7 +56,11 @@ module ReactOnRails
             @file_index += 1
           end
           begin
-            json_string = js_evaluator.eval_js(js_code, render_options)
+            result = if render_options.stream?
+                       js_evaluator.eval_streaming_js(js_code, render_options)
+                     else
+                       js_evaluator.eval_js(js_code, render_options)
+                     end
           rescue StandardError => err
             msg = <<~MSG
               Error evaluating server bundle. Check your webpack configuration.
@@ -71,26 +75,14 @@ module ReactOnRails
             end
             raise ReactOnRails::Error, msg, err.backtrace
           end
-          result = nil
-          begin
-            result = JSON.parse(json_string)
-          rescue JSON::ParserError => e
-            raise ReactOnRails::JsonParseError.new(parse_error: e, json: json_string)
-          end
 
-          if render_options.logging_on_server
-            console_script = result["consoleReplayScript"]
-            console_script_lines = console_script.split("\n")
-            console_script_lines = console_script_lines[2..-2]
-            re = /console\.(?:log|error)\.apply\(console, \["\[SERVER\] (?<msg>.*)"\]\);/
-            console_script_lines&.each do |line|
-              match = re.match(line)
-              Rails.logger.info { "[react_on_rails] #{match[:msg]}" } if match
-            end
-          end
-          result
+          return parse_result_and_replay_console_messages(result, render_options) unless render_options.stream?
+
+          # 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, Metrics/AbcSize, Metrics/PerceivedComplexity
+        # rubocop:enable Metrics/CyclomaticComplexity
 
         def trace_js_code_used(msg, js_code, file_name = "tmp/server-generated.js", force: false)
           return unless ReactOnRails.configuration.trace || force
@@ -233,6 +225,28 @@ module ReactOnRails
           msg = "file_url_to_string #{url} failed\nError is: #{e}"
           raise ReactOnRails::Error, msg
         end
+
+        def parse_result_and_replay_console_messages(result_string, render_options)
+          result = nil
+          begin
+            result = JSON.parse(result_string)
+          rescue JSON::ParserError => e
+            raise ReactOnRails::JsonParseError.new(parse_error: e, json: result_string)
+          end
+
+          if render_options.logging_on_server
+            console_script = result["consoleReplayScript"]
+            console_script_lines = console_script.split("\n")
+            # Regular expression to match console.log or console.error calls with SERVER prefix
+            re = /console\.(?:log|error)\.apply\(console, \["\[SERVER\] (?<msg>.*)"\]\);/
+            console_script_lines&.each do |line|
+              match = re.match(line)
+              # Log matched messages to Rails logger with react_on_rails prefix
+              Rails.logger.info { "[react_on_rails] #{match[:msg]}" } if match
+            end
+          end
+          result
+        end
       end
       # rubocop:enable Metrics/ClassLength
     end

data/lib/react_on_rails/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ReactOnRails
-  VERSION = "14.0.5"
+  VERSION = "15.0.0.alpha.1"
 end

data/tsconfig.json

@@ -8,6 +8,7 @@
     "noImplicitAny": true,
     "outDir": "node_package/lib",
     "strict": true,
+    "incremental": true,
     "target": "es5"
   },
   "include": ["node_package/src/**/*"]

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: react_on_rails
 version: !ruby/object:Gem::Version
-  version: 14.0.5
+  version: 15.0.0.alpha.1
 platform: ruby
 authors:
 - Justin Gordon
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-08-21 00:00:00.000000000 Z
+date: 2024-11-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: addressable