Use importmaps to import javascript (#39)

* Switch to importmap and get rid of webpack

* Load jquery without importmap.
Fixes rails/jquery-rails#291

Gemfile

@@ -6,8 +6,7 @@ ruby '2.7.7'
 gem 'rails', '~> 6.1.7'
 gem 'rails-i18n', '~> 6.0'
 gem 'sass-rails', '>= 6'
-gem 'webpacker', '~> 5.0'
-gem 'turbolinks', '~> 5'
+gem 'importmap-rails', '~> 1.1'
 gem 'jbuilder', '~> 2.7'
 gem 'bootsnap', '>= 1.4.4', require: false
 gem 'puma', '~> 6.0'
@@ -48,3 +47,5 @@ gem 'base32'
 gem 'sd_notify'
 gem 'net-http'
 gem 'net-ftp'
+gem 'bootstrap', '~> 5.1.3'
+gem 'jquery-rails'

Gemfile.lock

@@ -62,11 +62,17 @@ GEM
       zeitwerk (~> 2.3)
     addressable (2.8.1)
       public_suffix (>= 2.0.2, < 6.0)
+    autoprefixer-rails (10.4.7.0)
+      execjs (~> 2)
     base32 (0.3.4)
     bcrypt (3.1.18)
     bindex (0.8.1)
     bootsnap (1.15.0)
       msgpack (~> 1.2)
+    bootstrap (5.1.3)
+      autoprefixer-rails (>= 9.1.0)
+      popper_js (>= 2.9.3, < 3)
+      sassc-rails (>= 2.0.0)
     builder (3.2.4)
     byebug (11.1.3)
     capybara (3.38.0)
@@ -83,6 +89,7 @@ GEM
     crass (1.0.6)
     date (3.3.3)
     erubi (1.12.0)
+    execjs (2.8.1)
     ffi (1.15.5)
     globalid (1.0.1)
       activesupport (>= 5.0)
@@ -97,9 +104,16 @@ GEM
       railties (>= 5.1)
     i18n (1.12.0)
       concurrent-ruby (~> 1.0)
+    importmap-rails (1.1.5)
+      actionpack (>= 6.0.0)
+      railties (>= 6.0.0)
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
+    jquery-rails (4.5.1)
+      rails-dom-testing (>= 1, < 3)
+      railties (>= 4.2.0)
+      thor (>= 0.14, < 2.0)
     listen (3.8.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
@@ -138,15 +152,14 @@ GEM
     nokogiri (1.14.0)
       mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
+    popper_js (2.11.6)
     public_suffix (5.0.1)
     puma (6.0.2)
       nio4r (~> 2.0)
     racc (1.6.2)
     rack (2.2.6.2)
     rack-mini-profiler (2.3.4)
       rack (>= 1.2.0)
-    rack-proxy (0.7.6)
-      rack
     rack-test (2.0.2)
       rack (>= 1.3)
     rails (6.1.7.1)
@@ -208,7 +221,6 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    semantic_range (3.0.0)
     simple_form (5.1.0)
       actionpack (>= 5.2)
       activemodel (>= 5.2)
@@ -230,9 +242,6 @@ GEM
     time (0.2.1)
       date
     timeout (0.3.1)
-    turbolinks (5.2.1)
-      turbolinks-source (~> 5.2)
-    turbolinks-source (5.2.0)
     tzinfo (2.0.5)
       concurrent-ruby (~> 1.0)
     uri (0.12.0)
@@ -245,11 +254,6 @@ GEM
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
       selenium-webdriver (~> 4.0)
-    webpacker (5.4.3)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     websocket (1.2.9)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
@@ -270,10 +274,13 @@ DEPENDENCIES
   base32
   bcrypt (~> 3.1.7)
   bootsnap (>= 1.4.4)
+  bootstrap (~> 5.1.3)
   byebug
   capybara (>= 3.26)
   haml-rails (~> 2.0)
+  importmap-rails (~> 1.1)
   jbuilder (~> 2.7)
+  jquery-rails
   listen (~> 3.3)
   midi-smtp-server (~> 3.0)
   mysql2 (>= 0.5)
@@ -291,11 +298,9 @@ DEPENDENCIES
   simple_form
   spring
   sqlite3 (~> 1.4)
-  turbolinks (~> 5)
   tzinfo-data
   web-console (>= 4.1.0)
   webdrivers
-  webpacker (~> 5.0)
   whenever (~> 0.9)
   will_paginate (~> 3.0)
   will_paginate-bootstrap-style

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

app/assets/stylesheets/application.scss

@@ -1,8 +1,4 @@
-/*
- = require scaffold
-*/
-
-@import "bootstrap/scss/bootstrap";
+@import 'bootstrap';
 
 .simple_form label:first-child {
   width: 160px;

app/javascript/application.js

@@ -0,0 +1,3 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+import "popper"
+import "bootstrap"

app/javascript/application_legacy.js

@@ -0,0 +1 @@
+//= require jquery

app/views/layouts/application.haml

@@ -5,7 +5,8 @@
     %title=h "Sharedlists: " + controller.controller_name
     = stylesheet_link_tag 'application'
     = csrf_meta_tag
-    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
+    = javascript_importmap_tags
+    = javascript_include_tag "application_legacy"
   %body
     %nav{:class => "navbar navbar-expand-lg navbar-light bg-light"}
       .container-fluid

bin/importmap

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+
+require_relative "../config/application"
+require "importmap/commands"

config/importmap.rb

@@ -0,0 +1,5 @@
+# Pin npm packages by running ./bin/importmap
+
+pin "application", preload: true
+pin "popper", to: 'popper.js', preload: true
+pin "bootstrap", to: 'bootstrap.min.js', preload: true

config/initializers/assets.rb

@@ -11,4 +11,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 bootstrap.min.js popper.js )