should force load react-components which send over turbo-stream

Author: theforestvn88

Gemfile.development_dependencies

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

lib/react_on_rails/configuration.rb

@@ -39,7 +39,9 @@ def self.configuration
       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 @@ 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,
+                  :force_load
 
     # rubocop:disable Metrics/AbcSize
     def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender: nil,
@@ -68,7 +71,7 @@ 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)
+                   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 @@ def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender
       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
 

lib/react_on_rails/helper.rb

@@ -441,6 +441,14 @@ def internal_react_component(react_component_name, options = {})
                                                 "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)

lib/react_on_rails/react_component/render_options.rb

@@ -91,6 +91,10 @@ 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

node_package/src/ReactOnRails.ts

@@ -133,6 +133,10 @@ ctx.ReactOnRails = {
     ClientStartup.reactOnRailsPageLoaded();
   },
 
+  reactOnRailsComponentLoaded(domId: string): void {
+    ClientStartup.reactOnRailsComponentLoaded(domId);
+  },
+
   /**
    * Returns CSRF authenticity token inserted by Rails csrf_meta_tags
    * @returns String or null

node_package/src/clientStartup.ts

@@ -218,6 +218,25 @@ export function reactOnRailsPageLoaded(): void {
   forEachReactOnRailsComponentRender(context, railsContext);
 }
 
+export function reactOnRailsComponentLoaded(domId: string): void {
+  debugTurbolinks(`reactOnRailsComponentLoaded ${domId}`);
+
+  const railsContext = parseRailsContext();
+
+  // If no react on rails components
+  if (!railsContext) return;
+
+  const context = findContext();
+  if (supportsRootApi) {
+    context.roots = [];
+  }
+
+  const el = document.querySelector(`[data-dom-id=${domId}]`);
+  if (!el) return;
+
+  render(el, context, railsContext);
+}
+
 function unmount(el: Element): void {
   const domNodeId = domNodeIdForEl(el);
   const domNode = document.getElementById(domNodeId);

node_package/src/types/index.ts

@@ -126,6 +126,7 @@ export interface ReactOnRails {
   setOptions(newOptions: {traceTurbolinks: boolean}): void;
   reactHydrateOrRender(domNode: Element, reactElement: ReactElement, hydrate: boolean): RenderReturnType;
   reactOnRailsPageLoaded(): void;
+  reactOnRailsComponentLoaded(domId: string): void;
   authenticityToken(): string | null;
   authenticityHeaders(otherHeaders: { [id: string]: string }): AuthenticityHeaders;
   option(key: string): string | number | boolean | undefined;

spec/dummy/app/controllers/pages_controller.rb

@@ -36,6 +36,12 @@ def data
       }.merge(xss_payload)
     }
 
+    @app_props_hello_from_turbo_stream = {
+      helloTurboStreamData: {
+        name: "Mrs. Client Side Rendering From Turbo Stream"
+      }.merge(xss_payload)
+    }
+
     @app_props_hello_again = {
       helloWorldData: {
         name: "Mrs. Client Side Hello Again"

spec/dummy/app/views/pages/turbo_frame_tag_hello_world.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag 'hello-turbo-stream' do %>
+    <%= button_to "send me hello-turbo-stream component", turbo_stream_send_hello_world_path %>
+<% end %>

spec/dummy/app/views/pages/turbo_stream_send_hello_world.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream.update 'hello-turbo-stream' do %>
+    <%= react_component("HelloTurboStream", props: @app_props_hello_from_turbo_stream, force_load: true) %>
+<% end %>

spec/dummy/client/app/packs/client-bundle.js

@@ -2,13 +2,21 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import 'jquery';
 import 'jquery-ujs';
+import '@hotwired/turbo-rails';
 
 import ReactOnRails from 'react-on-rails';
 
 import SharedReduxStore from '../stores/SharedReduxStore';
 
+import HelloTurboStream from '../startup/HelloTurboStream';
+
 ReactOnRails.setOptions({
   traceTurbolinks: true,
+  turbo: true
+});
+
+ReactOnRails.register({
+  HelloTurboStream
 });
 
 ReactOnRails.registerStore({

spec/dummy/client/app/startup/HelloTurboStream.jsx

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import RailsContext from '../components/RailsContext';
+
+import css from '../components/HelloWorld.module.scss';
+
+const HelloTurboStream = ({ helloTurboStreamData, railsContext }) => {
+  const [name, setName] = useState(helloTurboStreamData.name);
+  const nameDomRef = useRef(null);
+
+  const handleChange = () => {
+    setName(nameDomRef.current.value);
+  };
+
+  return (
+    <div>
+      <h3 className={css.brightColor}>Hello, {name}!</h3>
+      {railsContext && <RailsContext {...{ railsContext }} />}
+    </div>
+  );
+};
+
+HelloTurboStream.propTypes = {
+  helloTurboStreamData: PropTypes.shape({
+    name: PropTypes.string,
+  }).isRequired,
+  railsContext: PropTypes.object,
+};
+
+export default HelloTurboStream;

spec/dummy/config/routes.rb

@@ -41,4 +41,6 @@
   get "image_example" => "pages#image_example"
   get "context_function_return_jsx" => "pages#context_function_return_jsx"
   get "pure_component_wrapped_in_function" => "pages#pure_component_wrapped_in_function"
+  get "turbo_frame_tag_hello_world" => "pages#turbo_frame_tag_hello_world"
+  post "turbo_stream_send_hello_world" => "pages#turbo_stream_send_hello_world"
 end

spec/dummy/package.json

@@ -12,6 +12,7 @@
     "@babel/preset-env": "7",
     "@babel/preset-react": "^7.10.4",
     "@babel/runtime": "7.17.9",
+    "@hotwired/turbo-rails": "^8.0.4",
     "@rescript/react": "^0.10.3",
     "babel-loader": "8.2.4",
     "babel-plugin-macros": "^3.1.0",

spec/dummy/spec/helpers/react_on_rails_helper_spec.rb

@@ -288,6 +288,26 @@ class PlainReactOnRailsHelper
       it { is_expected.not_to include '<span id="App-react-component-0"></span>' }
       it { is_expected.to include '<div id="App-react-component-0"></div>' }
     end
+
+    describe "'force_load' tag option" do
+      let(:force_load_script) do
+        %(
+ReactOnRails.reactOnRailsComponentLoaded('App-react-component-0');
+        ).html_safe
+      end
+
+      context "with 'force_load' == true" do
+        subject { react_component("App", force_load: true) }
+
+        it { is_expected.to include force_load_script }
+      end
+
+      context "without 'force_load' tag option" do
+        subject { react_component("App") }
+
+        it { is_expected.not_to include force_load_script }
+      end
+    end
   end
 
   describe "#redux_store" do

spec/dummy/spec/system/integration_spec.rb

@@ -97,6 +97,16 @@ def finished_all_ajax_requests?
   end
 end
 
+describe "TurboStream send react component", :js do
+  subject { page }
+
+  it "force load hello-world component immediately" do
+    visit "/turbo_frame_tag_hello_world"
+    click_on "send me hello-turbo-stream component"
+    expect(page).to have_text "Hello, Mrs. Client Side Rendering From Turbo Stream!"
+  end
+end
+
 describe "Pages/client_side_log_throw", :ignore_js_errors, :js do
   subject { page }
 

spec/react_on_rails/react_component/render_options_spec.rb

@@ -9,6 +9,7 @@
     replay_console
     raise_on_prerender_error
     random_dom_id
+    force_load
   ].freeze
 
   def the_attrs(react_component_name: "App", options: {})