Add test case for re-mounting components without reloading the page

Author: diogobeda

Appraisals

@@ -17,6 +17,7 @@ end
 appraise 'shakapacker' do
   gem 'rails', '~> 7.0.x'
   gem 'shakapacker', '7.0.2'
+  gem 'turbo-rails'
 end
 
 appraise 'base' do

gemfiles/base.gemfile.lock

@@ -236,6 +236,10 @@ GEM
     thor (1.2.2)
     tilt (2.2.0)
     timeout (0.4.0)
+    turbo-rails (1.4.0)
+      actionpack (>= 6.0.0)
+      activejob (>= 6.0.0)
+      railties (>= 6.0.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     websocket (1.2.9)
@@ -267,6 +271,7 @@ DEPENDENCIES
   react-rails!
   selenium-webdriver
   test-unit (~> 2.5)
+  turbo-rails
 
 BUNDLED WITH
    2.4.9

gemfiles/shakapacker.gemfile

@@ -4,5 +4,6 @@ source "http://rubygems.org"
 
 gem "rails", "~> 7.0.x"
 gem "shakapacker", "7.0.2"
+gem "turbo-rails"
 
 gemspec path: "../"

gemfiles/shakapacker.gemfile.lock

@@ -244,6 +244,10 @@ GEM
     thor (1.2.2)
     tilt (2.2.0)
     timeout (0.4.0)
+    turbo-rails (1.5.0)
+      actionpack (>= 6.0.0)
+      activejob (>= 6.0.0)
+      railties (>= 6.0.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     websocket (1.2.9)
@@ -276,6 +280,7 @@ DEPENDENCIES
   selenium-webdriver
   shakapacker (= 7.0.2)
   test-unit (~> 2.5)
+  turbo-rails
 
 BUNDLED WITH
    2.4.9

test/dummy/app/controllers/counters_controller.rb

@@ -0,0 +1,9 @@
+class CountersController < ApplicationController
+  def index
+    @counters = [{ name: "Counter 1" }]
+  end
+
+  def create
+    @counter = { name: "Counter 2" }
+  end
+end

test/dummy/app/javascript/components/Counter.js

@@ -0,0 +1,23 @@
+var React = require("react");
+var createReactClass = require("create-react-class");
+
+module.exports = createReactClass({
+  getInitialState: function () {
+    return { count: 0 };
+  },
+  handleClick: function () {
+    this.setState({ count: this.state.count + 1 });
+  },
+  render: function () {
+    return (
+      <div>
+        <p>
+          {this.props.name} - {this.state.count}
+        </p>
+        <button type="button" onClick={this.handleClick}>
+          Increment {this.props.name}
+        </button>
+      </div>
+    );
+  },
+});

test/dummy/app/javascript/controllers/mount_counters.js

@@ -0,0 +1,26 @@
+var { Controller } = require("@hotwired/stimulus");
+var ReactRailsUJS = require("react_ujs");
+
+module.exports = class extends Controller {
+  connect() {
+    this.observeChange();
+  }
+
+  disconnect() {
+    this.observer.disconnect();
+  }
+
+  observeChange() {
+    var element = this.element;
+    var callback = function (mutationsList, _observer) {
+      mutationsList.forEach(function (mutation) {
+        if (mutation.type === "childList") {
+          ReactRailsUJS.mountComponents(element);
+        }
+      });
+    };
+
+    this.observer = new MutationObserver(callback);
+    this.observer.observe(this.element, { childList: true });
+  }
+};

test/dummy/app/javascript/packs/application.js

@@ -1,8 +1,15 @@
-var ctx = require.context("components", true)
-var ReactRailsUJS = require("react_ujs")
-ReactRailsUJS.useContext(ctx)
-var React = require("react")
+require("@hotwired/turbo-rails");
+var { Application } = require("@hotwired/stimulus");
+var MountCountersController = require("../controllers/mount_counters");
 
-window.GlobalComponent = function(props) {
-  return React.createElement("h1", null, "Global Component")
-}
+window.Stimulus = Application.start();
+Stimulus.register("mount-counters", MountCountersController);
+
+var ctx = require.context("components", true);
+var ReactRailsUJS = require("react_ujs");
+ReactRailsUJS.useContext(ctx);
+var React = require("react");
+
+window.GlobalComponent = function (props) {
+  return React.createElement("h1", null, "Global Component");
+};

test/dummy/app/views/counters/create.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream.append :counters do %>
+  <%= react_component("Counter", @counter) %>
+<% end %>

test/dummy/app/views/counters/index.html.erb

@@ -0,0 +1,10 @@
+<h2>React 18 bug reproduction</h2>
+
+<%= turbo_frame_tag :counters, data: { controller: "mount-counters" } do %>
+  <% @counters.each do |counter| %>
+    <%= react_component("Counter", counter) %>
+  <% end %>
+<% end %>
+<%= form_with(url: counters_path, method: :post, data: { turbo: true, turbo_stream: true }) do |form| %>
+  <%= form.submit "Add counter" %>
+<% end %>

test/dummy/config/routes.rb

@@ -3,6 +3,7 @@
 Dummy::Application.routes.draw do
   get "no-turbolinks", to: "pages#no_turbolinks"
   resources :pages, only: [:show]
+  resources :counters, only: [:create, :index]
   resources :server, only: [:show] do
     collection do
       get :console_example

test/dummy/package.json

@@ -6,6 +6,8 @@
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.3",
+    "@hotwired/stimulus": "^3.2.2",
+    "@hotwired/turbo-rails": "^7.3.0",
     "babel-loader": "^8.2.5",
     "babel-plugin-macros": "^3.1.0",
     "compression-webpack-plugin": "^9.2.0",
@@ -14,8 +16,8 @@
     "css-minimizer-webpack-plugin": "^2.0.0",
     "mini-css-extract-plugin": "^1.6.2",
     "pnp-webpack-plugin": "^1.7.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react_ujs": "file:.yalc/react_ujs",
     "shakapacker": "7.0.2",
     "style-loader": "^3.3.1",