From 90247bdc5499aed74d2b6b2d076014ceb7e0ca64 Mon Sep 17 00:00:00 2001 From: Philipp Rothmann Date: Fri, 27 Jan 2023 11:16:53 +0100 Subject: [PATCH 1/7] init importmap --- Gemfile | 2 ++ Gemfile.lock | 6 +++++- app/javascript/application.js | 1 + bin/importmap | 4 ++++ config/importmap.rb | 3 +++ vendor/javascript/.keep | 0 6 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 app/javascript/application.js create mode 100755 bin/importmap create mode 100644 config/importmap.rb create mode 100644 vendor/javascript/.keep diff --git a/Gemfile b/Gemfile index 42ac26db..4d71513f 100644 --- a/Gemfile +++ b/Gemfile @@ -126,3 +126,5 @@ group :test do gem 'rswag-specs' gem 'hashie', '~> 3.4.6', require: false # https://github.com/westfieldlabs/apivore/issues/114 end + +gem "importmap-rails", "~> 1.1" diff --git a/Gemfile.lock b/Gemfile.lock index f55e3397..88fa2944 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -255,6 +255,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) @@ -628,6 +631,7 @@ DEPENDENCIES i18n-js (~> 3.0.0.rc8) i18n-spec ice_cube + importmap-rails (~> 1.1) inherited_resources jquery-rails kaminari @@ -686,4 +690,4 @@ DEPENDENCIES whenever BUNDLED WITH - 2.4.3 + 2.4.5 diff --git a/app/javascript/application.js b/app/javascript/application.js new file mode 100644 index 00000000..beff742e --- /dev/null +++ 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/bin/importmap b/bin/importmap new file mode 100755 index 00000000..36502ab1 --- /dev/null +++ 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 new file mode 100644 index 00000000..9d849852 --- /dev/null +++ b/config/importmap.rb @@ -0,0 +1,3 @@ +# Pin npm packages by running ./bin/importmap + +pin "application", preload: true diff --git a/vendor/javascript/.keep b/vendor/javascript/.keep new file mode 100644 index 00000000..e69de29b From 27030cf73d13a6a0cbee3a5da00ddec9238014ec Mon Sep 17 00:00:00 2001 From: Philipp Rothmann Date: Fri, 27 Jan 2023 11:18:14 +0100 Subject: [PATCH 2/7] add importmap tags to head --- app/views/layouts/_header.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml index 974ce8f2..207850d0 100644 --- a/app/views/layouts/_header.html.haml +++ b/app/views/layouts/_header.html.haml @@ -8,7 +8,7 @@ = csrf_meta_tags = stylesheet_link_tag "application", :media => "all" //%link(href="images/favicon.ico" rel="shortcut icon") - + = javascript_importmap_tags = yield(:head) = foodcoop_css_tag From 3a7c1ade557754968039a361cd44ce757b8a6170 Mon Sep 17 00:00:00 2001 From: Philipp Rothmann Date: Fri, 27 Jan 2023 12:01:10 +0100 Subject: [PATCH 3/7] add manifest.js --- app/assets/config/manifest.js | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 app/assets/config/manifest.js diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js new file mode 100644 index 00000000..33237892 --- /dev/null +++ b/app/assets/config/manifest.js @@ -0,0 +1,5 @@ +//= link_tree ../images +//= link_directory ../stylesheets .css +//= link_tree ../../javascript .js +//= link_tree ../javascripts .js +//= link_tree ../../../vendor/javascript .js From 045503f49828df55371d83a78bddd9725f668c1f Mon Sep 17 00:00:00 2001 From: Philipp Rothmann Date: Fri, 27 Jan 2023 12:26:49 +0100 Subject: [PATCH 4/7] add jquery to precompile assets --- config/initializers/assets.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index fe48fc34..8082bb6f 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -9,4 +9,4 @@ Rails.application.config.assets.version = '1.0' # 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( jquery.min.js ) From 69518f2bae44fb8fc6d79e43c2734bba732b4323 Mon Sep 17 00:00:00 2001 From: Philipp Rothmann Date: Fri, 27 Jan 2023 12:27:42 +0100 Subject: [PATCH 5/7] comment out yield javascript for debugging should be readded later again and might require this fix to load inline javascript only after the modules are already loaded: https://stackoverflow.com/questions/71876873/rails-7-7-0-2-3-importmap-jquery-is-not-defined-in-view --- app/views/layouts/_header.html.haml | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml index 207850d0..a842d713 100644 --- a/app/views/layouts/_header.html.haml +++ b/app/views/layouts/_header.html.haml @@ -8,10 +8,10 @@ = csrf_meta_tags = stylesheet_link_tag "application", :media => "all" //%link(href="images/favicon.ico" rel="shortcut icon") - = javascript_importmap_tags = yield(:head) = foodcoop_css_tag + %body = yield @@ -19,10 +19,13 @@ Javascripts \================================================== / Placed at the end of the document so the pages load faster - = javascript_include_tag "application" - :javascript - I18n.defaultLocale = "#{I18n.default_locale}"; - I18n.locale = "#{I18n.locale}"; - I18n.fallbacks = true; - = yield(:javascript) + = javascript_importmap_tags + + -# = javascript_include_tag "application" + + -# :javascript + -# I18n.defaultLocale = "#{I18n.default_locale}"; + -# I18n.locale = "#{I18n.locale}"; + -# I18n.fallbacks = true; + -# = yield(:javascript) = raw FoodsoftConfig[:webstats_tracking_code] From 2e7e8828bf01923563803be38f27f30a7a970e08 Mon Sep 17 00:00:00 2001 From: Philipp Rothmann Date: Thu, 9 Feb 2023 11:48:17 +0100 Subject: [PATCH 6/7] kind of works with importmaps --- app/assets/config/manifest.js | 5 ----- .../{application.js => application_legacy.js} | 0 app/views/layouts/_header.html.haml | 13 ++++++------- config/importmap.rb | 3 +-- config/initializers/assets.rb | 2 +- 5 files changed, 8 insertions(+), 15 deletions(-) delete mode 100644 app/assets/config/manifest.js rename app/assets/javascripts/{application.js => application_legacy.js} (100%) diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js deleted file mode 100644 index 33237892..00000000 --- a/app/assets/config/manifest.js +++ /dev/null @@ -1,5 +0,0 @@ -//= link_tree ../images -//= link_directory ../stylesheets .css -//= link_tree ../../javascript .js -//= link_tree ../javascripts .js -//= link_tree ../../../vendor/javascript .js diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application_legacy.js similarity index 100% rename from app/assets/javascripts/application.js rename to app/assets/javascripts/application_legacy.js diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml index a842d713..66e14355 100644 --- a/app/views/layouts/_header.html.haml +++ b/app/views/layouts/_header.html.haml @@ -20,12 +20,11 @@ \================================================== / Placed at the end of the document so the pages load faster = javascript_importmap_tags + = javascript_include_tag "application_legacy" - -# = javascript_include_tag "application" - - -# :javascript - -# I18n.defaultLocale = "#{I18n.default_locale}"; - -# I18n.locale = "#{I18n.locale}"; - -# I18n.fallbacks = true; - -# = yield(:javascript) + :javascript + I18n.defaultLocale = "#{I18n.default_locale}"; + I18n.locale = "#{I18n.locale}"; + I18n.fallbacks = true; + = yield(:javascript) = raw FoodsoftConfig[:webstats_tracking_code] diff --git a/config/importmap.rb b/config/importmap.rb index 9d849852..050818ab 100644 --- a/config/importmap.rb +++ b/config/importmap.rb @@ -1,3 +1,2 @@ # Pin npm packages by running ./bin/importmap - -pin "application", preload: true +pin "application", preload: true \ No newline at end of file diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index 8082bb6f..e1c4d5fa 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -9,4 +9,4 @@ Rails.application.config.assets.version = '1.0' # 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( jquery.min.js ) +Rails.application.config.assets.precompile += %w( application_legacy.js jquery.min.js ) From 666e7934a68ba9f652513227472fff5a2e042a03 Mon Sep 17 00:00:00 2001 From: Philipp Rothmann Date: Fri, 27 Jan 2023 11:16:53 +0100 Subject: [PATCH 7/7] 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 Co-authored-by: FGU --- Gemfile | 2 ++ Gemfile.lock | 6 +++++- .../javascripts/{application.js => application_legacy.js} | 0 app/javascript/application.js | 1 + app/views/layouts/_header.html.haml | 6 ++++-- bin/importmap | 4 ++++ config/importmap.rb | 2 ++ config/initializers/assets.rb | 2 +- vendor/javascript/.keep | 0 9 files changed, 19 insertions(+), 4 deletions(-) rename app/assets/javascripts/{application.js => application_legacy.js} (100%) create mode 100644 app/javascript/application.js create mode 100755 bin/importmap create mode 100644 config/importmap.rb create mode 100644 vendor/javascript/.keep diff --git a/Gemfile b/Gemfile index 42ac26db..4d71513f 100644 --- a/Gemfile +++ b/Gemfile @@ -126,3 +126,5 @@ group :test do gem 'rswag-specs' gem 'hashie', '~> 3.4.6', require: false # https://github.com/westfieldlabs/apivore/issues/114 end + +gem "importmap-rails", "~> 1.1" diff --git a/Gemfile.lock b/Gemfile.lock index f55e3397..88fa2944 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -255,6 +255,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) @@ -628,6 +631,7 @@ DEPENDENCIES i18n-js (~> 3.0.0.rc8) i18n-spec ice_cube + importmap-rails (~> 1.1) inherited_resources jquery-rails kaminari @@ -686,4 +690,4 @@ DEPENDENCIES whenever BUNDLED WITH - 2.4.3 + 2.4.5 diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application_legacy.js similarity index 100% rename from app/assets/javascripts/application.js rename to app/assets/javascripts/application_legacy.js diff --git a/app/javascript/application.js b/app/javascript/application.js new file mode 100644 index 00000000..beff742e --- /dev/null +++ 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 index 974ce8f2..66e14355 100644 --- a/app/views/layouts/_header.html.haml +++ b/app/views/layouts/_header.html.haml @@ -8,10 +8,10 @@ = csrf_meta_tags = stylesheet_link_tag "application", :media => "all" //%link(href="images/favicon.ico" rel="shortcut icon") - = yield(:head) = foodcoop_css_tag + %body = yield @@ -19,7 +19,9 @@ 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 new file mode 100755 index 00000000..36502ab1 --- /dev/null +++ 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 new file mode 100644 index 00000000..050818ab --- /dev/null +++ b/config/importmap.rb @@ -0,0 +1,2 @@ +# Pin npm packages by running ./bin/importmap +pin "application", preload: true \ No newline at end of file diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index fe48fc34..e1c4d5fa 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -9,4 +9,4 @@ Rails.application.config.assets.version = '1.0' # 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 new file mode 100644 index 00000000..e69de29b