Merge with importmap-rails

Gemfile

@@ -13,6 +13,8 @@ group :development, :test do
   gem 'minitest'
   gem 'capybara'
   gem 'selenium-webdriver'
+  gem "importmap-rails"
+  gem "turbo-rails"
 end
 
 # To use a debugger

Gemfile.lock

@@ -115,6 +115,10 @@ GEM
       activesupport (>= 6.1)
     i18n (1.14.6)
       concurrent-ruby (~> 1.0)
+    importmap-rails (2.0.3)
+      actionpack (>= 6.0.0)
+      activesupport (>= 6.0.0)
+      railties (>= 6.0.0)
     json (2.7.2)
     listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
@@ -252,6 +256,9 @@ GEM
     sqlite3 (1.7.3-x86_64-linux)
     thor (1.3.2)
     timeout (0.4.1)
+    turbo-rails (2.0.11)
+      actionpack (>= 6.0.0)
+      railties (>= 6.0.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     uri (0.13.1)
@@ -282,13 +289,15 @@ PLATFORMS
 DEPENDENCIES
   capybara
   clapton!
+  importmap-rails
   minitest
   puma
   rspec
   rspec-rails
   ruby-openai
   selenium-webdriver
   sqlite3 (~> 1.4)
+  turbo-rails
 
 BUNDLED WITH
    2.5.17

README.md

@@ -349,6 +349,15 @@ module ApplicationCable
 end
 ```
 
+### Using with importmap-rails
+
+Use `clapton_javascript_tag` instead of `javascript_importmap_tags`.
+
+```diff
+- <%= javascript_importmap_tags %>
++ <%= clapton_javascript_tag %>
+```
+
 ### Events
 
 #### clapton:render

app/helpers/clapton/clapton_helper.rb

@@ -1,11 +1,10 @@
 module Clapton
   module ClaptonHelper
 
-    def clapton_javascript_tag
+    def clapton_javascript_tag(entry_point = "application", importmap: nil)
       all_components = Dir.glob(Rails.root.join("app", "components", "**", "*.rb"))
-      tags = <<~HTML
-        <script type="importmap">
-          {
+      clapton_json = JSON.parse <<~JSON
+      {
             "imports": {
               "client": "/clapton/client.js",
               "components": "/clapton/components.js",
@@ -15,10 +14,25 @@ def clapton_javascript_tag
               end.join(",\n") }
             }
           }
-        </script>
-        <script type="module" src="/clapton/client.js"></script>
-      HTML
-      tags.html_safe
+      JSON
+      if defined?(javascript_importmap_tags)
+        importmap ||= Rails.application.importmap
+        json = { imports: JSON.parse(importmap.to_json(resolver: self))["imports"].merge(clapton_json["imports"]) }
+        safe_join [
+          javascript_inline_importmap_tag(json.to_json),
+          javascript_importmap_module_preload_tags(importmap, entry_point:),
+          javascript_import_module_tag(entry_point),
+          tag.script(type: "module", src: "/clapton/client.js"),
+        ], "\n"
+      else
+        html = <<~HTML
+          <script type="importmap">
+            #{clapton_json.to_json}
+          </script>
+          <script type="module" src="/clapton/client.js"></script>
+        HTML
+        html.html_safe
+      end
     end
 
     def clapton_tag

test/dummy/app/assets/config/manifest.js

@@ -1,2 +1,4 @@
 //= link_tree ../images
 //= link_directory ../stylesheets .css
+//= link_tree ../../javascript .js
+//= link_tree ../../../vendor/javascript .js

test/dummy/app/components/sample_component.rb

@@ -3,6 +3,7 @@ def render
     box = c(:box, { class: "sample-component" })
     text = Clapton::Text.new(@state.message)
     box
+      .add(c(:a, "/tasks").add(c(:text, "Tasks")))
       .add(Clapton::BlockQuote.new.add(text))
       .add(c(:bq).add(text))
       .add(Clapton::Box.new.add(text))

test/dummy/app/javascript/application.js

@@ -0,0 +1,2 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+import "@hotwired/turbo-rails"

test/dummy/bin/importmap

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+
+require_relative "../config/application"
+require "importmap/commands"

test/dummy/config/importmap.rb

@@ -0,0 +1,4 @@
+# Pin npm packages by running ./bin/importmap
+
+pin "application"
+pin "@hotwired/turbo-rails", to: "turbo.min.js"