Merge pull request #13849 from rioug/10298-upgrade-to-shakapaker_v7

Upgrade to shakapaker v7

Gemfile

@@ -18,7 +18,7 @@ gem 'activemerchant'
 gem 'angular-rails-templates'
 gem 'ransack', '~> 4.1.0'
 gem 'responders'
-gem 'shakapacker', '6.6.0'
+gem 'shakapacker', '7.2.3'
 
 # Indirect dependency but we access it directly in JS specs.
 # It turns out to be hard to upgrade but please do if you can.

Gemfile.lock

@@ -553,6 +553,7 @@ GEM
       webfinger (~> 2.0)
     orm_adapter (0.5.0)
     ostruct (0.6.1)
+    package_json (0.2.0)
     pagy (9.4.0)
     paper_trail (17.0.0)
       activerecord (>= 7.1)
@@ -815,8 +816,9 @@ GEM
     sd_notify (0.1.1)
     securerandom (0.4.1)
     semantic_range (3.1.0)
-    shakapacker (6.6.0)
+    shakapacker (7.2.3)
       activesupport (>= 5.2)
+      package_json
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
       semantic_range (>= 2.3.0)
@@ -1083,7 +1085,7 @@ DEPENDENCIES
   rubocop-rspec_rails
   sd_notify
   select2-rails!
-  shakapacker (= 6.6.0)
+  shakapacker (= 7.2.3)
   shoulda-matchers
   sidekiq
   sidekiq-scheduler

Procfile

@@ -1,5 +1,5 @@
 # Foreman Procfile. Start all dev server processes with: `foreman start`
 
 rails:      DEV_CACHING=true bundle exec rails s -p 3000
-webpack:    ./bin/webpacker-dev-server
+webpack:    ./bin/shakacker-dev-server
 sidekiq:    DEV_CACHING=true bundle exec sidekiq -q mailers -q default

Procfile.docker

@@ -1,5 +1,5 @@
 # Foreman Procfile for Docker env. Start all dev server processes with: `bundle exec foreman start -f Procfile.docker`
 
-webpack:    WEBPACKER_DEV_SERVER_HOST=0.0.0.0 ./bin/webpacker-dev-server
+webpack:    SHAKAPACKER_DEV_SERVER_HOST=0.0.0.0 ./bin/shakapacker-dev-server
 sidekiq:    DEV_CACHING=true bundle exec sidekiq -q mailers -q default
-rails:      WEBPACKER_DEV_SERVER_HOST=0.0.0.0 DEV_CACHING=true bundle exec rails s -p 3000 -b 0.0.0.0
+rails:      SHAKAPACKER_DEV_SERVER_HOST=0.0.0.0 DEV_CACHING=true bundle exec rails s -p 3000 -b 0.0.0.0

app/helpers/application_helper.rb

@@ -74,6 +74,6 @@ module ApplicationHelper
 
   # Update "v1" to invalidate existing cache key
   def cache_key_with_locale(key, locale)
-    Array.wrap(key) + ["v1", locale.to_s, I18nDigests.for_locale(locale)]
+    Array.wrap(key) + ["v2", locale.to_s, I18nDigests.for_locale(locale)]
   end
 end

app/views/admin/producer_properties/_form.html.haml

@@ -1,6 +1,6 @@
 %fieldset.no-border-top
   .add_producer_properties
-  = image_pack_tag 'spinner.gif', :plugin => 'spree', :style => 'display:none;', :id => 'busy_indicator'
+  = image_pack_tag 'images/spinner.gif', :plugin => 'spree', :style => 'display:none;', :id => 'busy_indicator'
   %table.index.sortable{"data-sortable-link" => main_app.update_positions_admin_enterprise_producer_properties_url(@enterprise)}
     %thead
       %tr

app/views/components/_spinner.html.haml

@@ -1,2 +1,2 @@
 = cache do
-  %img.spinner{ src: image_pack_path("spinning-circles.svg"), style: "max-width: 100%" }
+  %img.spinner{ src: image_pack_path("images/spinning-circles.svg"), style: "max-width: 100%" }

app/views/home/_tagline.html.haml

@@ -3,7 +3,7 @@
     .row
       .small-12.text-center.columns
         %h1
-          %img{src: image_pack_path("logo-white-notext.png"), title: Spree::Config.site_name}
+          %img{src: image_pack_path("images/logo-white-notext.png"), title: Spree::Config.site_name}
           %br/
           %a.button.transparent{href: "/shops"}
             = t :home_shop

app/views/layouts/darkswarm.html.haml

@@ -13,7 +13,7 @@
     - else
       = favicon_link_tag "/favicon-staging.ico"
     %link{href: "https://fonts.googleapis.com/css?family=Roboto:400,300italic,400italic,300,700,700italic|Oswald:300,400,700", rel: "stylesheet", type: "text/css"}
-    %link{href: asset_pack_path("static/OFN-v2.woff"), rel: "preload", as: "font", crossorigin: "anonymous"}
+    %link{href: asset_pack_path("static/fonts/OFN-v2.woff"), rel: "preload", as: "font", crossorigin: "anonymous"}
     = render "layouts/matomo_tag"
     = language_meta_tags
 

app/views/layouts/registration.html.haml

@@ -20,7 +20,7 @@
 
     = csrf_meta_tags
 
-  %body.off-canvas{ style: "background-image: url(#{image_pack_path('tile-wide.png')})", "data-turbo": "false" }
+  %body.off-canvas{ style: "background-image: url(#{image_pack_path('images/tile-wide.png')})", "data-turbo": "false" }
     .off-canvas-wrap{offcanvas: true}
       .inner-wrap
 

app/views/producers/_fat.html.haml

@@ -41,7 +41,7 @@
 
         %p.word-wrap{"ng-if" => "::producer.whatsapp_phone"}
           %a{"ng-href" => "{{::producer.whatsapp_url}}", target: "_blank"}
-            %img{ src: image_pack_path("social-logos/whatsapp.svg") }
+            %img{ src: image_pack_path("images/social-logos/whatsapp.svg") }
             %span{"ng-bind" => "::producer.whatsapp_phone"}
 
         %p.word-wrap{"ng-if" => "::producer.email_address"}

app/views/registration/steps/_limit_reached.html.haml

@@ -6,7 +6,7 @@
         %h4= t(".message")
   .row
     .small-12.medium-3.large-2.columns.text-right.hide-for-small-only
-      %img{:src => image_pack_path("potatoes.png") }
+      %img{:src => image_pack_path("images/potatoes.png") }
     .small-12.medium-9.large-10.columns
       %p
         = t(".text")

app/views/shared/_footer.html.haml

@@ -4,7 +4,7 @@
       .row
         .small-12.columns.text-center
           .logo
-            %img{src: image_pack_path("logo-white-notext.png") }
+            %img{src: image_pack_path("images/logo-white-notext.png") }
       .row
         .small-12.medium-8.medium-offset-2.columns.text-center
           .alert-box

app/views/shared/menu/_cart.html.haml

@@ -4,6 +4,6 @@
       %span
         = t '.cart'
       %span.count
-        %img{ src: image_pack_path("menu/icn-cart.svg") }
+        %img{ src: image_pack_path("images/menu/icn-cart.svg") }
         %span
           {{ Cart.total_item_count() }}

app/views/shared/menu/_mobile_menu.html.haml

@@ -2,7 +2,7 @@
   %nav.tab-bar.show-for-medium-down
     %section.left
       %a.left-off-canvas-toggle.menu-icon
-        = image_pack_tag "menu/btn-menu-mobile.png"
+        = image_pack_tag "images/menu/btn-menu-mobile.png"
 
     %section.left
       .ofn-logo
@@ -18,7 +18,7 @@
           %span
             = t '.cart'
           %span.count
-            = image_pack_tag "menu/icn-cart.svg"
+            = image_pack_tag "images/menu/icn-cart.svg"
             %span
               {{ Cart.total_item_count() }}
 

app/views/shared/menu/_signed_in.html.haml

@@ -1,7 +1,7 @@
 %li.user-menu.has-dropdown.not-click
 
   %a{href: "#", class: "top-bar--menu-item-with-icon"}
-    %img{ src: image_pack_path("menu/icn-profile.svg") }
+    %img{ src: image_pack_path("images/menu/icn-profile.svg") }
     %span
       = t '.profile'
 

app/views/shared/menu/_signed_out.html.haml

@@ -1,6 +1,6 @@
 = cache_with_locale do
   %li#login-link{ "data-controller": "login-modal" }
     %a{"auth": "login", "data-action": "click->login-modal#call" }
-      %img{ src: image_pack_path("menu/icn-login.svg") }
+      %img{ src: image_pack_path("images/menu/icn-login.svg") }
       %span
         = t 'label_login'

app/views/shop/products/_searchbar.haml

@@ -9,7 +9,7 @@
                 "ng-debounce" => "200",
                 "disable-enter-with-blur" => true}
           %a.clear{ type: 'button', "focus-search": true, "ng-show": 'query', "ng-click": 'clearQuery()' }
-            = image_pack_tag "icn-close.png"
+            = image_pack_tag "images/icn-close.png"
 
         .hide-for-large-up
           %button{ type: 'button', "ng-click": 'toggleFilterSidebar()' }

app/views/shopping_shared/tabs/_contact.html.haml

@@ -27,7 +27,7 @@
               %br
             - if current_distributor.whatsapp_phone.present?
               %a{href: current_distributor.whatsapp_url, target: "_blank" }
-                %img{ src: image_pack_path("social-logos/whatsapp.svg") }
+                %img{ src: image_pack_path("images/social-logos/whatsapp.svg") }
                 = current_distributor.whatsapp_phone
                 %br
             - if current_distributor.website.present?

app/views/spree/admin/payments/source_forms/_gateway.html.haml

@@ -41,5 +41,5 @@
         %a.info.cvvLink{href: "/content/cvv", target: "_blank"}
           (#{t(:what_is_this)})
     .nine.columns
-      = image_pack_tag 'credit_cards/credit_card.gif', class: 'credit-card-image'
+      = image_pack_tag 'images/credit_cards/credit_card.gif', class: 'credit-card-image'
     .clear

app/views/spree/admin/product_properties/index.html.haml

@@ -12,7 +12,7 @@
 = form_for @product, url: admin_product_url(@product, @url_filters), method: :put do |f|
   %fieldset.no-border-top
     .add_product_properties
-    = image_pack_tag 'select2-spinner.gif', plugin: 'spree', style: 'display:none;', id: 'busy_indicator'
+    = image_pack_tag 'images/select2-spinner.gif', plugin: 'spree', style: 'display:none;', id: 'busy_indicator'
 
     %table.index.sortable{"data-sortable-link" => update_positions_admin_product_product_properties_url}
       %thead

app/views/spree/admin/states/index.html.haml

@@ -11,6 +11,6 @@
   - databaseurl = "#{admin_states_path(format: :js)}?country_id="
   %select#country.observe_field.select2.fullwidth{"data-base-url" => databaseurl, "data-update" => "#state-list"}
     = options_from_collection_for_select(@countries, :id, :name, @country.id)
-= image_pack_tag 'select2-spinner.gif', plugin: 'spree', style: 'display:none;', id: 'busy_indicator'
+= image_pack_tag 'images/select2-spinner.gif', plugin: 'spree', style: 'display:none;', id: 'busy_indicator'
 #state-list
   = render partial: 'state_list'

bin/shakapacker

@@ -0,0 +1,13 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= "development"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", __FILE__)
+
+require "bundler/setup"
+require "shakapacker"
+require "shakapacker/webpack_runner"
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Shakapacker::WebpackRunner.run(ARGV)
+end

bin/shakapacker-dev-server

@@ -0,0 +1,13 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= "development"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", __FILE__)
+
+require "bundler/setup"
+require "shakapacker"
+require "shakapacker/dev_server_runner"
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Shakapacker::DevServerRunner.run(ARGV)
+end

bin/webpacker

@@ -1,14 +0,0 @@
-#!/usr/bin/env ruby
-
-require "pathname"
-require "bundler/setup"
-require "webpacker"
-require "webpacker/webpack_runner"
-
-ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
-ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", Pathname.new(__FILE__).realpath)
-
-APP_ROOT = File.expand_path("..", __dir__)
-Dir.chdir(APP_ROOT) do
-  Webpacker::WebpackRunner.run(ARGV)
-end

bin/webpacker-dev-server

@@ -1,17 +0,0 @@
-#!/usr/bin/env ruby
-
-ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
-
-require "pathname"
-ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
-  Pathname.new(__FILE__).realpath)
-
-require "bundler/setup"
-
-require "webpacker"
-require "webpacker/dev_server_runner"
-
-APP_ROOT = File.expand_path("..", __dir__)
-Dir.chdir(APP_ROOT) do
-  Webpacker::DevServerRunner.run(ARGV)
-end

compose.yaml

@@ -53,9 +53,9 @@ services:
       OFN_REDIS_URL: redis://redis/
       OFN_REDIS_JOBS_URL: redis://redis
       OFN_REDIS_TEST_URL: redis://redis/3
-      WEBPACKER_DEV_SERVER_HOST: webpack
-      WEBPACKER_DEV_SERVER_PORT: 3035
-      WEBPACKER_DEV_SERVER_PUBLIC: localhost:3035
+      SHAKAPACKER_DEV_SERVER_HOST: webpack
+      SHAKAPACKER_DEV_SERVER_PORT: 3035
+      SHAKAPACKER_DEV_SERVER_PUBLIC: localhost:3035
 
     command: >
       sh -lc 'rm -f tmp/pids/server.pid;
@@ -89,7 +89,7 @@ services:
     build: .
     command: >
       sh -lc 'until [ -f /bundles/.Gemfile.lock.sha ] && sha256sum -c /bundles/.Gemfile.lock.sha >/dev/null 2>&1; do sleep 0.5; done;
-              exec ./bin/webpacker-dev-server'
+              exec ./bin/shakapacker-dev-server'
     ports:
       - "3035:3035"
     volumes:
@@ -102,7 +102,7 @@ services:
       retries: 30
 
     environment:
-      WEBPACKER_DEV_SERVER_HOST: 0.0.0.0
+      SHAKAPACKER_DEV_SERVER_HOST: 0.0.0.0
 volumes:
   gems:
   postgres:

config/shakapacker.yml

@@ -32,7 +32,6 @@ development:
 
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
-    https: false
     host: localhost
     port: 3035
     # Hot Module Replacement updates modules while the application is running without a full reload
@@ -51,8 +50,6 @@ development:
     compress: true
     # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
     allowed_hosts: "all"
-    #TODO Old config
-    #pretty: false
     pretty: true
     headers:
       'Access-Control-Allow-Origin': '*'

config/webpack/webpack.config.js

@@ -1,4 +1,6 @@
-const { webpackConfig, merge } = require("shakapacker")
+const { generateWebpackConfig, merge } = require("shakapacker")
+
+const webpackConfig = generateWebpackConfig()
 
 const options = {
   resolve: {

package.json

@@ -17,8 +17,6 @@
     "@stimulus-components/rails-nested-form": "*",
     "babel-loader": "^8.2.2",
     "cable_ready": "5.0.6",
-    "coffee-loader": "^5.0.0",
-    "coffeescript": "^2.7.0",
     "compression-webpack-plugin": "^9.0.0",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.4",
@@ -43,7 +41,7 @@
     "sass-embedded": "^1.96.0",
     "sass-loader": "^16.0.6",
     "select2": "*",
-    "shakapacker": "6.6.0",
+    "shakapacker": "7.2.3",
     "shortcut-buttons-flatpickr": "*",
     "stimulus": "*",
     "stimulus-autocomplete": "*",

spec/helpers/application_helper_spec.rb

@@ -87,13 +87,13 @@ RSpec.describe ApplicationHelper do
     it "appends locale and digest to a single key" do
       expect(
         helper.cache_key_with_locale("single-key", "en")
-      ).to eq(["single-key", "v1", "en", en_digest])
+      ).to eq(["single-key", "v2", "en", en_digest])
     end
 
     it "appends locale and digest to multiple keys" do
       expect(
         helper.cache_key_with_locale(["array", "of", "keys"], "es")
-      ).to eq(["array", "of", "keys", "v1", "es", es_digest])
+      ).to eq(["array", "of", "keys", "v2", "es", es_digest])
     end
   end
 end