Migrate to Turbo Mount

Gemfile

@@ -35,6 +35,9 @@ gem "tzinfo-data", platforms: %i[ windows jruby ]
 # Reduces boot times through caching; required in config/boot.rb
 gem "bootsnap", require: false
 
+# Use React, Vue, Svelte, and other components with Hotwire
+gem "turbo-mount", "~> 0.3.0"
+
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
   gem "debug", platforms: %i[ mri windows ]

Gemfile.lock

@@ -215,6 +215,8 @@ GEM
       railties (>= 7.0.0)
     thor (1.3.1)
     timeout (0.4.1)
+    turbo-mount (0.3.0)
+      railties (>= 6.0.0)
     turbo-rails (2.0.5)
       actionpack (>= 6.0.0)
       activejob (>= 6.0.0)
@@ -251,6 +253,7 @@ DEPENDENCIES
   sqlite3 (~> 1.4)
   stimulus-rails
   tailwindcss-rails
+  turbo-mount (~> 0.3.0)
   turbo-rails
   tzinfo-data
   web-console

app/javascript/application.js

@@ -1,3 +1,4 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
+import "turbo-mount-initializer"

app/javascript/turbo-mount-initializer.js

@@ -0,0 +1,11 @@
+import { TurboMount } from "turbo-mount";
+import { registerComponent } from "turbo-mount/react";
+import { Workbook } from "@fortune-sheet/react";
+
+const turboMount = new TurboMount();
+
+// to register a component use:
+registerComponent(turboMount, "Workbook", Workbook);
+
+// to override the default controller use:
+// registerComponent(turboMount, "Hello", Hello, HelloController); // where HelloController is a Stimulus controller extended from TurboMountController

app/views/palettes/_demo.html.erb

@@ -33,9 +33,5 @@
             ]
           }]
 %>
-<%= turbo_frame_tag("demo") do %>
-  <div data-controller="workbook"
-       data-workbook-props-value="<%= { data: }.to_json %>"
-       class="w-full max-w-full overflow-hidden h-64 relative"
-  ></div>
-<% end %>
+
+<%= turbo_mount("Workbook", props: {data:}, class: "w-full max-w-full overflow-hidden h-64 relative") %>

config/importmap.rb

@@ -27,3 +27,6 @@
 # pin "lodash" # @4.17.21
 # fixes isPlainObject import error:
 pin "lodash", to: "https://cdn.skypack.dev/lodash@4.17.21"
+pin "turbo-mount", to: "turbo-mount.min.js"
+pin "turbo-mount-initializer"
+pin "turbo-mount/react", to: "turbo-mount/react.min.js"