Load Select2 via importmap

Gemfile

@@ -15,7 +15,7 @@ if ENV["DB"] == "mysql" || ENV["DB"] == "mariadb"
 end
 gem "pg", "~> 1.0" if ENV["DB"] == "postgresql"
 
-gem "alchemy_i18n", git: "https://github.com/AlchemyCMS/alchemy_i18n.git", branch: "main"
+gem "alchemy_i18n", github: "AlchemyCMS/alchemy_i18n", branch: "select2-module-locales"
 
 group :development, :test do
   gem "execjs", "~> 2.9.1"

app/assets/javascripts/alchemy/admin.js

@@ -1,6 +1,5 @@
 // Alchemy CMS Sprockets Manifest
 // ------------------------------
 //= require jquery3
-//= require_tree ../../../../vendor/assets/javascripts/jquery_plugins/
 //= require alchemy/alchemy.dialog
 //= require alchemy/alchemy.image_overlay

app/javascript/alchemy_admin.js

@@ -1,6 +1,7 @@
 import "handlebars"
 import "@ungap/custom-elements"
 import "@hotwired/turbo-rails"
+import "select2"
 
 import Rails from "@rails/ujs"
 

app/views/alchemy/admin/nodes/_form.html.erb

@@ -27,7 +27,7 @@
   <%= f.submit button_label %>
 <% end %>
 
-<script>
+<script type="module">
   const nodeName = document.getElementById("node_name")
   const nodeUrl = document.getElementById("node_url")
   const form = document.getElementById("node_form")

app/views/layouts/alchemy/admin.html.erb

@@ -88,7 +88,7 @@
     <div id="main_content">
       <%= yield %>
     </div>
-    <script>
+    <script type="module">
       // Setting the correct locale for select2 dropdown replacement.
       $.extend($.fn.select2.defaults, $.fn.select2.locales['<%= ::I18n.locale %>']);
     </script>

config/importmap.rb

@@ -4,6 +4,7 @@
 pin "flatpickr", to: "flatpickr.min.js", preload: true # @4.6.13
 pin "handlebars", to: "handlebars.min.js", preload: true # @4.7.8
 pin "keymaster", to: "keymaster.min.js", preload: true
+pin "select2", to: "select2.min.js", preload: true
 pin "sortablejs", to: "sortable.min.js", preload: true # @1.15.1
 pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
 pin "shoelace", to: "shoelace.min.js", preload: true

package.json

@@ -21,6 +21,7 @@
     "flatpickr": "^4.6.13",
     "handlebars": "^4.7.8",
     "keymaster": "^1.6.2",
+    "select2": "github:select2/select2#3.5.4",
     "sortablejs": "^1.15.2",
     "tinymce": "^7.3.0"
   },

rollup.config.mjs

@@ -48,6 +48,13 @@ export default [
     },
     plugins: [terser()]
   },
+  {
+    input: "node_modules/select2/select2.min.js",
+    output: {
+      file: "vendor/javascript/select2.min.js"
+    },
+    context: "window"
+  },
   {
     input: "node_modules/@ungap/custom-elements/min.js",
     output: {

spec/dummy/vendor/assets/javascripts/alchemy/admin/all.js

@@ -10,4 +10,3 @@
 //
 //= require alchemy/admin
 //= require alchemy_i18n/de
-//= require select2_locale_de

spec/javascript/alchemy_admin/components/node_select.spec.js

@@ -6,7 +6,7 @@ globalThis.$ = jQuery
 globalThis.jQuery = jQuery
 
 import "alchemy_admin/components/node_select"
-import("assets/jquery_plugins/select2")
+import("select2")
 
 describe("alchemy-node-select", () => {
   /**

spec/javascript/alchemy_admin/components/page_select.spec.js

@@ -6,7 +6,7 @@ globalThis.$ = jQuery
 globalThis.jQuery = jQuery
 
 import "alchemy_admin/components/page_select"
-import("assets/jquery_plugins/select2")
+import("select2")
 
 describe("alchemy-page-select", () => {
   /**

spec/javascript/alchemy_admin/components/select.spec.js

@@ -5,7 +5,7 @@ import { renderComponent } from "./component.helper"
 import jQuery from "jquery"
 globalThis.$ = jQuery
 globalThis.jQuery = jQuery
-import("assets/jquery_plugins/select2")
+import("select2")
 
 describe("alchemy-select", () => {
   /**

spec/javascript/alchemy_admin/components/tags_autocomplete.spec.js

@@ -6,7 +6,7 @@ globalThis.$ = jQuery
 globalThis.jQuery = jQuery
 
 import "alchemy_admin/components/tags_autocomplete"
-import("assets/jquery_plugins/select2")
+import("select2")
 
 describe("alchemy-tags-autocomplete", () => {
   /**