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

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: {})