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 %>