react_on_rails 14.0.4 → 15.0.0.alpha.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 990382215a33db46c9f5b8bdf0e5db38fba4e6233da6ff1a5f3840428ac9e092
-  data.tar.gz: 21e052cfea0a8121d8c6ebd4fd3f4688ced23ef7b0b40df653889f6388f95834
+  metadata.gz: 7d60051000fbd817b3499b1de6f13c9abeaf5627bee250c50bf0d748ce3532a5
+  data.tar.gz: 4eccfe81e12b647503fa6e690c514d4d14d6704ab1e5c7f64282cafa7709d6e2
 SHA512:
-  metadata.gz: 4c37af672c59bf60b452af1684a25fdc75caf8a48a115a84179816a16a9933120628b4e516dd593f60550d6ecd3df8a4ee8e5ba4a670c2bd5cc9d43dfeea870b
-  data.tar.gz: ddda7ad407c195b32d15fcbad434e34b9fa0e5003666ddded2953c369a0081f1f14a9fd3b03bf8ba5678b97ac09402a1fdfe123815a0c4a895caabeb518c548b
+  metadata.gz: 99004f6792fe209d21474c7b5b311ac8a02cce27740b69164e44079983a5852895aa99ed12530043ba64ad6920d189cb6b19ce3957aca83b6bab06f75bf702ee
+  data.tar.gz: 2be5eb3178a913c90c7b4e640812bccc479245d0052d95751317f543c80e7bf9429f9fd61cbc1c5edb917aafbead33502c75fb63fd8ab183480aaa44124f3dc5

data/CHANGELOG.md

@@ -18,6 +18,26 @@ 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
 - Improved dependency management by integrating package_json. [PR 1639](https://github.com/shakacode/react_on_rails/pull/1639) by [vaukalak](https://github.com/vaukalak).
@@ -25,7 +45,6 @@ Changes since the last non-beta release.
 #### Changed
 - Update outdated GitHub Actions to use Node.js 20.0 versions instead [PR 1623](https://github.com/shakacode/react_on_rails/pull/1623) by [adriangohjw](https://github.com/adriangohjw).
 
-
 ### [14.0.3] - 2024-06-28
 
 #### Fixed
@@ -1148,7 +1167,9 @@ Best done with Object destructing:
 ##### Fixed
 - Fix several generator-related issues.
 
-[Unreleased]: https://github.com/shakacode/react_on_rails/compare/14.0.3...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
 [14.0.1]: https://github.com/shakacode/react_on_rails/compare/14.0.0...14.0.1

data/Gemfile.development_dependencies

@@ -22,6 +22,8 @@ gem "sprockets", "~> 4.0"
 
 gem "amazing_print"
 
+gem "turbo-rails"
+
 group :development, :test do
   gem "package_json"
   gem "listen"

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    react_on_rails (14.0.3)
+    react_on_rails (14.0.5)
       addressable
       connection_pool
       execjs (~> 2.5)
@@ -369,6 +369,10 @@ GEM
     tins (1.33.0)
       bigdecimal
       sync
+    turbo-rails (2.0.6)
+      actionpack (>= 6.0.0)
+      activejob (>= 6.0.0)
+      railties (>= 6.0.0)
     turbolinks (5.2.1)
       turbolinks-source (~> 5.2)
     turbolinks-source (5.2.0)
@@ -431,6 +435,7 @@ DEPENDENCIES
   spring (~> 4.0)
   sprockets (~> 4.0)
   sqlite3 (~> 1.6)
+  turbo-rails
   turbolinks
   uglifier
   webdrivers (= 5.3.0)

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/configuration.rb

@@ -39,7 +39,9 @@ module ReactOnRails
       i18n_output_format: nil,
       components_subdirectory: nil,
       make_generated_server_bundle_the_entrypoint: false,
-      defer_generated_component_packs: true
+      defer_generated_component_packs: true,
+      # forces the loading of React components
+      force_load: false
     )
   end
 
@@ -53,7 +55,8 @@ module ReactOnRails
                   :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,
+                  :force_load
 
     # rubocop:disable Metrics/AbcSize
     def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender: nil,
@@ -68,7 +71,7 @@ module ReactOnRails
                    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)
+                   components_subdirectory: nil, auto_load_bundle: nil, force_load: 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
@@ -106,6 +109,7 @@ module ReactOnRails
       self.auto_load_bundle = auto_load_bundle
       self.make_generated_server_bundle_the_entrypoint = make_generated_server_bundle_the_entrypoint
       self.defer_generated_component_packs = defer_generated_component_packs
+      self.force_load = force_load
     end
     # rubocop:enable Metrics/AbcSize
 

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 = {})
@@ -441,6 +538,14 @@ module ReactOnRails
                                                 "data-trace" => (render_options.trace ? true : nil),
                                                 "data-dom-id" => render_options.dom_id)
 
+      if render_options.force_load
+        component_specification_tag.concat(
+          content_tag(:script, %(
+ReactOnRails.reactOnRailsComponentLoaded('#{render_options.dom_id}');
+          ).html_safe)
+        )
+      end
+
       load_pack_for_generated_component(react_component_name, render_options)
       # Create the HTML rendering part
       result = server_rendered_react_component(render_options)
@@ -465,6 +570,25 @@ module ReactOnRails
       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
@@ -512,16 +636,18 @@ module ReactOnRails
                                                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,10 +87,18 @@ 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
 
+      def force_load
+        retrieve_configuration_value_for(:force_load)
+      end
+
       def to_s
         "{ react_component_name = #{react_component_name}, options = #{options}, request_digest = #{request_digest}"
       end
@@ -103,6 +111,10 @@ module ReactOnRails
         options[key] = value
       end
 
+      def stream?
+        options[:stream?]
+      end
+
       private
 
       attr_reader :options
@@ -120,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.4"
+  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.4
+  version: 15.0.0.alpha.1
 platform: ruby
 authors:
 - Justin Gordon
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-07-03 00:00:00.000000000 Z
+date: 2024-11-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: addressable