introduce importmaps

This commit introduces importmaps. They allow to use modern javacript ESM within rails without webpack, yarn etc. see https://github.com/rails/importmap-rails for more details. Co-authored-by: Philipp Rothmann <[email protected]> Co-authored-by: FGU <[email protected]>
foodcoops · Jun 9, 2023 · 51b5c10 · 51b5c10
1 parent 8b0e03f
commit 51b5c10
Show file tree

Hide file tree

Showing 9 changed files with 17 additions and 3 deletions.
diff --git a/Gemfile b/Gemfile
@@ -125,3 +125,4 @@ group :test do
 end
 
 gem "terser", "~> 1.1"
+gem "importmap-rails", "~> 1.1"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -254,6 +254,9 @@ GEM
     i18n-spec (0.6.0)
       iso
     ice_cube (0.16.4)
+    importmap-rails (1.1.5)
+      actionpack (>= 6.0.0)
+      railties (>= 6.0.0)
     inherited_resources (1.13.1)
       actionpack (>= 5.2, < 7.1)
       has_scope (~> 0.6)
@@ -623,6 +626,7 @@ DEPENDENCIES
   i18n-js (~> 3.0.0.rc8)
   i18n-spec
   ice_cube
+  importmap-rails (~> 1.1)
   inherited_resources
   jquery-rails
   kaminari

diff --git a/app/assets/javascripts/application.js → app/assets/javascripts/application_legacy.js b/app/assets/javascripts/application.js → app/assets/javascripts/application_legacy.js
diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -0,0 +1 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml
@@ -8,18 +8,20 @@
     = csrf_meta_tags
     = stylesheet_link_tag "application", :media => "all"
     //%link(href="images/favicon.ico" rel="shortcut icon")
-
     = yield(:head)
     = foodcoop_css_tag
 
+
   %body
     = yield
 
     /
       Javascripts
       \==================================================
     / Placed at the end of the document so the pages load faster
-    = javascript_include_tag "application"
+    = javascript_importmap_tags
+    = javascript_include_tag "application_legacy"
+
     :javascript
       I18n.defaultLocale = "#{I18n.default_locale}";
       I18n.locale = "#{I18n.locale}";

diff --git a/bin/importmap b/bin/importmap
@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+
+require_relative "../config/application"
+require "importmap/commands"
diff --git a/config/importmap.rb b/config/importmap.rb
@@ -0,0 +1,2 @@
+# Pin npm packages by running ./bin/importmap
+pin "application", preload: true
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
@@ -9,4 +9,4 @@
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in the app/assets
 # folder are already added.
-# Rails.application.config.assets.precompile += %w( admin.js admin.css )
+Rails.application.config.assets.precompile += %w( application_legacy.js jquery.min.js )
diff --git a/vendor/javascript/.keep b/vendor/javascript/.keep
Original file line number	Diff line number	Diff line change
Expand Up		@@ -125,3 +125,4 @@ group :test do
		end

		gem "terser", "~> 1.1"
		gem "importmap-rails", "~> 1.1"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Pin npm packages by running ./bin/importmap
		pin "application", preload: true