deps: Migrate from webpacker to jsbundling-rails.

.gitignore

@@ -23,20 +23,18 @@
 public/system/products
 public/system/users
 
-# Precompiled assets
-public/assets
+# Asset compilation artifacts
+/app/assets/builds/*
+!/app/assets/builds/.keep
+/public/assets/
+
+node_modules
+
+.env*
+!.env*.example
 
 .project
 
 /coverage
 
-/public/packs
-/public/packs-test
-/node_modules
-/yarn-error.log
-yarn-debug.log*
-.yarn-integrity
-/spec/test_files/
-
-.env*
-!.env*.example
+/spec/test_files/

Dockerfile.development

@@ -5,7 +5,7 @@ RUN apk update \
     && apk upgrade \
     && apk add \
         build-base shared-mime-info mariadb-dev sqlite-dev yaml-dev tzdata imagemagick \
-        nodejs yarn \
+        nodejs npm \
         git vimdiff \
     && rm -rfv /var/cache/apk/*
 
@@ -18,8 +18,8 @@ WORKDIR /tap
 COPY Gemfile Gemfile.lock ./
 RUN --mount=type=cache,target=vendor/cache bundle install && bundle cache
 
-COPY package.json yarn.lock ./
-RUN --mount=type=cache,target=/usr/local/share/.cache/yarn yarn install
+COPY package.json package-lock.json* ./
+RUN --mount=type=cache,target=/root/.npm npm i
 RUN mv node_modules /node_modules
 
 
@@ -31,8 +31,8 @@ COPY --chmod=755 <<EOF /run-test.sh
 #!/bin/sh
 set -eu
 
-[ -e node_modules ] && rm -rf node_modules
-ln -s /node_modules node_modules
+#[ -e node_modules ] && rm -rf node_modules
+#ln -s /node_modules node_modules
 
 bundle exec rake db:create
 bundle exec rake db:schema:load
@@ -54,7 +54,7 @@ set -eu
 ln -s /node_modules node_modules
 
 bundle exec rake db:migrate
-bundle exec rails server -b 0.0.0.0 -p 80 || true
+./bin/dev || true
 
 echo "Rails exited, sleeping indefinitely so dev shells don't die."
 sleep inf

Dockerfile.production

@@ -4,7 +4,7 @@ RUN apk update \
     && apk upgrade \
     && apk add \
         build-base shared-mime-info mariadb-dev sqlite-dev yaml-dev tzdata imagemagick \
-        nodejs yarn \
+        nodejs npm \
     && rm -rfv /var/cache/apk/*
 
 # These are equivalent to always setting --deployment, --path, and --without when relevant.
@@ -24,28 +24,27 @@ COPY Gemfile Gemfile.lock ./
 RUN --mount=type=cache,target=vendor/cache bundle install && bundle cache
 RUN bundle exec bootsnap precompile --gemfile
 
-COPY package.json yarn.lock ./
-RUN --mount=type=cache,target=/usr/local/share/.cache/yarn yarn install --frozen-lockfile
+COPY package.json package-lock.json* ./
+RUN --mount=type=cache,target=/root/.npm npm ci
 
 COPY --parents \
     ./app/ \
     ./bin/ \
+    ./config.ru \
     ./config/ \
     ./db/ \
     ./lib/ \
+    ./log/.keep \
     ./public/ \
-    ./spec/ \
-    ./.browserslistrc \
     ./Rakefile \
-    ./babel.config.js \
-    ./config.ru \
-    ./postcss.config.js \
+    ./webpack.config.js \
     ./
-RUN mkdir -p ./log/
 
-RUN bundle exec bootsnap precompile app/ lib/
+RUN TAP_SECRET_KEY_BASE=1 bundle exec bootsnap precompile app/ lib/
+RUN TAP_SECRET_KEY_BASE=1 bundle exec rake javascript:build
 RUN TAP_SECRET_KEY_BASE=1 ./bin/rails assets:precompile
 
+
 FROM base AS runner
 
 COPY --from=builder "${BUNDLE_PATH}" "${BUNDLE_PATH}"

Gemfile

@@ -21,8 +21,7 @@ gem "listen"
 # Sass
 gem "sassc-rails"
 
-# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
-gem "webpacker"
+gem "jsbundling-rails"
 
 # Not sure why
 gem "net-imap", require: false
@@ -118,6 +117,9 @@ group :development do
   gem "rubocop-rails"
   gem "rubocop-rspec"
   gem "rubocop-rspec_rails"
+
+  # For ./bin/dev
+  gem "foreman"
 end
 
 # Development/Test shared dependencies

Gemfile.lock

@@ -165,6 +165,8 @@ GEM
     ffi (1.17.2-x86_64-linux-musl)
     font-awesome-sass (5.15.1)
       sassc (>= 1.11)
+    foreman (0.90.0)
+      thor (~> 1.4)
     friendly_id (5.6.0)
       activerecord (>= 4.0.0)
     globalid (1.3.0)
@@ -184,6 +186,8 @@ GEM
       pp (>= 0.6.0)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
+    jsbundling-rails (1.3.1)
+      railties (>= 6.0.0)
     json (2.18.0)
     jwt (3.1.2)
       base64
@@ -297,8 +301,6 @@ GEM
       base64 (>= 0.1.0)
       logger (>= 1.6.0)
       rack (>= 3.0.0, < 4)
-    rack-proxy (0.7.7)
-      rack
     rack-session (2.1.1)
       base64 (>= 0.1.0)
       rack (>= 3.0.0)
@@ -415,7 +417,6 @@ GEM
     sdoc (2.6.5)
       rdoc (>= 5.0)
     securerandom (0.4.1)
-    semantic_range (3.1.0)
     sentry-rails (6.2.0)
       railties (>= 5.2.0)
       sentry-ruby (~> 6.2.0)
@@ -472,11 +473,6 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.4)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     websocket-driver (0.8.0)
       base64
       websocket-extensions (>= 0.1.0)
@@ -519,9 +515,11 @@ DEPENDENCIES
   factory_bot_rails
   faker
   font-awesome-sass (~> 5.15)
+  foreman
   friendly_id
   httparty
   identicon (= 0.0.5)
+  jsbundling-rails
   kt-paperclip
   listen
   mysql2
@@ -551,7 +549,6 @@ DEPENDENCIES
   tzinfo-data
   vanilla_nested
   webmock
-  webpacker
   will_paginate
   will_paginate-bulma
 

Makefile

@@ -26,7 +26,7 @@ seed:
 	$(dc) exec development bundle exec rake db:seed
 
 webpack:
-	$(dc) exec development bundle exec rake webpacker:compile
+	$(dc) exec development bundle exec rake javascript:build
 
 lint:
 	$(dc) up --build -t1 -d development

Procfile.dev

@@ -0,0 +1,2 @@
+rails: env RUBY_DEBUG_OPEN=true ./bin/rails server --binding=0.0.0.0 --port=3000
+webpack: npm run watch

README.md

@@ -38,10 +38,10 @@ See the `Makefile` for all commands.
 > Note: the tool versions in nix are not entirely correct.
 
 1. Install gems: `bundle install`
-2. Migrate the db using `bundle exec rails db:migrate`
-3. Seed the db using `bundle exec rails db:seed`
-4. Run `rake webpacker:compile`
-5. Start Tap by running `bundle exec rails s`
+1. Install npm packages: `npm i`
+2. Initialize and migrate the db: `bundle exec rails db:migrate`
+3. Seed the db: `bundle exec rails db:seed`
+5. Start Tap: `./bin/dev`
 
 ## Deploy to production
 

app/assets/config/manifest.js

@@ -1,2 +1,3 @@
 //= link_tree ../images
 //= link application.css
+//= link_tree ../builds

app/assets/javascript/application.js

@@ -0,0 +1,28 @@
+import "@hotwired/turbo-rails";
+import "chartkick/chart.js";
+import "vanilla-nested";
+import * as PetiteVue from "petite-vue";
+import Quagga from "@ericblade/quagga2";
+import Rails from "@rails/ujs";
+
+// Start petite-vue on page and frame load
+document.addEventListener("turbo:load", () => PetiteVue.createApp().mount());
+document.addEventListener("turbo:frame-load", () => PetiteVue.createApp().mount());
+
+// Globally mount Quagga
+window.Quagga = Quagga;
+
+Rails.start();
+
+// Register a service worker
+import "./pwa";
+
+// Globally mount some utils
+import "./utils/filepicker";
+import "./utils/modal";
+import "./utils/remove";
+import "./utils/scanner";
+import "./utils/submit";
+
+// Script that only runs for koelkast user
+import "./mqtt"

app/views/layouts/application.html.erb

@@ -12,16 +12,7 @@
     <%= stylesheet_link_tag "application", media: "all", 'data-turbo-track': "reload", defer: true %>
 
     <!-- JS -->
-    <%= javascript_pack_tag "application",                 "data-turbo-track": "reload" %>
-    <%= javascript_pack_tag "dependencies/chartkick",      "data-turbo-track": "reload" %>
-    <%= javascript_pack_tag "dependencies/petite-vue",     "data-turbo-track": "reload", defer: true %>
-    <%= javascript_pack_tag "dependencies/rails",          "data-turbo-track": "reload" %>
-    <%= javascript_pack_tag "dependencies/turbo",          "data-turbo-track": "reload", defer: true %>
-    <%= javascript_pack_tag "dependencies/vanilla-nested", "data-turbo-track": "reload" %>
-    <% if current_user and ! current_user.koelkast %>
-      <!-- Only needed when logged in -->
-      <%= javascript_pack_tag "dependencies/quagga", "data-turbo-track": "reload", defer: true %>
-    <% end %>
+    <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
 
     <!-- Icons -->
     <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
@@ -79,14 +70,13 @@
 
   <% if current_user and current_user.koelkast %>
     <!-- Only needed for koelkast -->
-    <%= javascript_pack_tag "mqtt" %>
     <div id="data-successful_order_items" style="display:none;">
       <% if ! flash[:successful_order_items].nil? %>
         <%= raw flash[:successful_order_items].to_json %>
       <% else %>
         []
       <% end %>
-    </script>
+    </div>
   <% end %>
   </body>
 </html>