diff --git a/Gemfile b/Gemfile
index d1f31c3..55823e3 100644
--- a/Gemfile
+++ b/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
diff --git a/Gemfile.lock b/Gemfile.lock
index d43a13b..2654e49 100644
--- a/Gemfile.lock
+++ b/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,6 +289,7 @@ PLATFORMS
DEPENDENCIES
capybara
clapton!
+ importmap-rails
minitest
puma
rspec
@@ -289,6 +297,7 @@ DEPENDENCIES
ruby-openai
selenium-webdriver
sqlite3 (~> 1.4)
+ turbo-rails
BUNDLED WITH
2.5.17
diff --git a/README.md b/README.md
index 733886d..cadf40f 100644
--- a/README.md
+++ b/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
diff --git a/app/helpers/clapton/clapton_helper.rb b/app/helpers/clapton/clapton_helper.rb
index a9af95d..df7ebaf 100644
--- a/app/helpers/clapton/clapton_helper.rb
+++ b/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
-
-
- 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
+
+
+ HTML
+ html.html_safe
+ end
end
def clapton_tag
diff --git a/test/dummy/app/assets/config/manifest.js b/test/dummy/app/assets/config/manifest.js
index 5918193..ddd546a 100644
--- a/test/dummy/app/assets/config/manifest.js
+++ b/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
diff --git a/test/dummy/app/components/sample_component.rb b/test/dummy/app/components/sample_component.rb
index 2927882..52e2411 100644
--- a/test/dummy/app/components/sample_component.rb
+++ b/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))
diff --git a/test/dummy/app/javascript/application.js b/test/dummy/app/javascript/application.js
new file mode 100644
index 0000000..e524d16
--- /dev/null
+++ b/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"
diff --git a/test/dummy/bin/importmap b/test/dummy/bin/importmap
new file mode 100755
index 0000000..36502ab
--- /dev/null
+++ b/test/dummy/bin/importmap
@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+
+require_relative "../config/application"
+require "importmap/commands"
diff --git a/test/dummy/config/importmap.rb b/test/dummy/config/importmap.rb
new file mode 100644
index 0000000..d5ae7aa
--- /dev/null
+++ b/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"
diff --git a/test/dummy/vendor/javascript/.keep b/test/dummy/vendor/javascript/.keep
new file mode 100644
index 0000000..e69de29