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