Use Shakapacker instead of Webpacker with Rails 6

REDMINE-19438

.github/workflows/tests.yml

@@ -152,7 +152,7 @@ jobs:
     - name: Precompile
       working-directory: ${{ matrix.engine-directory }}
       run: |
-        WEBPACKER_PRECOMPILE=false bin/rake app:assets:precompile
+        WEBPACKER_PRECOMPILE=false SHAKAPACKER_PRECOMPILE=false bin/rake app:assets:precompile
 
     # Test
 

Gemfile

@@ -23,11 +23,19 @@ end
 # Required for XML serialization in Active Admin
 gem 'activemodel-serializers-xml'
 
-# Make webpacker available in specs. Host applications that want to
-# use webpacker need to add it to their Gemfile themselves. Requiring
-# webpacker in an engine file (like we normally do) would force all
-# host application to install webpacker.
-gem 'webpacker'
+if Pageflow::RailsVersion.experimental?
+  # Make shakapacker available in specs. Host applications that want to
+  # use shakapacker need to add it to their Gemfile themselves. Requiring
+  # shakapacker in an engine file (like we normally do) would force all
+  # host application to install shakapacker.
+  gem 'shakapacker'
+else
+  # Make webpacker available in specs. Host applications that want to
+  # use webpacker need to add it to their Gemfile themselves. Requiring
+  # webpacker in an engine file (like we normally do) would force all
+  # host application to install webpacker.
+  gem 'webpacker'
+end
 
 # Make tests fail on JS errors
 gem 'capybara-chromedriver-logger', git: 'https://github.com/codevise/capybara-chromedriver-logger', branch: 'fix-selenium-4-deprecation', require: false

entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb

@@ -2,22 +2,43 @@ module PageflowScrolled
   # @api private
   module PacksHelper
     def scrolled_frontend_javascript_packs_tag(entry, options)
-      javascript_packs_with_chunks_tag(
-        *scrolled_frontend_packs(entry, options)
-      )
+      if Pageflow::RailsVersion.experimental?
+        javascript_pack_tag(
+          *scrolled_frontend_packs(entry, **options),
+          defer: false
+        )
+      else
+        javascript_packs_with_chunks_tag(
+          *scrolled_frontend_packs(entry, **options)
+        )
+      end
     end
 
     def scrolled_frontend_stylesheet_packs_tag(entry, options)
-      stylesheet_packs_with_chunks_tag(
-        *scrolled_frontend_packs(entry, options),
-        media: 'all'
-      )
+      if Pageflow::RailsVersion.experimental?
+        stylesheet_pack_tag(
+          *scrolled_frontend_packs(entry, **options),
+          media: 'all'
+        )
+      else
+        stylesheet_packs_with_chunks_tag(
+          *scrolled_frontend_packs(entry, **options),
+          media: 'all'
+        )
+      end
     end
 
     def scrolled_editor_javascript_packs_tag(entry)
-      javascript_packs_with_chunks_tag(
-        *scrolled_editor_packs(entry)
-      )
+      if Pageflow::RailsVersion.experimental?
+        javascript_pack_tag(
+          *scrolled_editor_packs(entry),
+          defer: false
+        )
+      else
+        javascript_packs_with_chunks_tag(
+          *scrolled_editor_packs(entry)
+        )
+      end
     end
 
     def scrolled_frontend_packs(entry, widget_scope:)

entry_types/scrolled/app/helpers/pageflow_scrolled/themes_helper.rb

@@ -6,9 +6,11 @@ def scrolled_theme_asset_path(theme,
                                   theme_file_role: nil,
                                   theme_file_style: :resized,
                                   relative_url: false)
+      prefix = Pageflow::RailsVersion.experimental? ? 'static' : 'media'
+
       path =
         theme.files.dig(theme_file_role, theme_file_style) ||
-        asset_pack_path("media/pageflow-scrolled/themes/#{theme.name}/#{path}")
+        asset_pack_path("#{prefix}/pageflow-scrolled/themes/#{theme.name}/#{path}")
 
       if relative_url
         URI.parse(path).path

entry_types/scrolled/app/views/pageflow_scrolled/editor/entries/_head.html.erb

@@ -1,5 +1,10 @@
 <%= stylesheet_link_tag 'pageflow_paged/editor', media: 'all' %>
-<%= stylesheet_packs_with_chunks_tag 'pageflow-scrolled-frontend' %>
+
+<% if Pageflow::RailsVersion.experimental?  %>
+  <%= stylesheet_pack_tag 'pageflow-scrolled-frontend' %>
+<% else %>
+  <%= stylesheet_packs_with_chunks_tag 'pageflow-scrolled-frontend' %>
+<% end %>
 
 <%= scrolled_theme_properties_style_tag(entry.theme) %>
 <%= scrolled_theme_stylesheet_pack_tags(entry.theme) %>

entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb

@@ -30,10 +30,66 @@ def theme_plugin
       end
 
       def install_packages
-        run 'yarn add postcss-url@^8.0.0 @fontsource/source-sans-pro'
+        if Pageflow::RailsVersion.experimental?
+          run 'yarn add css-loader style-loader' \
+              ' mini-css-extract-plugin css-minimizer-webpack-plugin' \
+              ' postcss postcss-loader postcss-url' \
+              ' @fontsource/source-sans-pro'
+        else
+          run 'yarn add postcss-url@^8.0.0 @fontsource/source-sans-pro'
+        end
+      end
+
+      def webpack_config
+        return unless Pageflow::RailsVersion.experimental?
+
+        gsub_file(
+          'config/webpack/webpack.config.js',
+          "const { generateWebpackConfig } = require('shakapacker')",
+          "const { generateWebpackConfig, merge, mergeWithRules } = require('shakapacker')"
+        )
+
+        gsub_file(
+          'config/webpack/webpack.config.js',
+          'const webpackConfig = generateWebpackConfig()',
+          <<~JS
+            const webpackConfig = merge(
+              generateWebpackConfig(),
+              require('pageflow/config/webpack5'),
+              require('pageflow-scrolled/config/webpack')
+            )
+          JS
+        )
+
+        gsub_file(
+          'config/webpack/webpack.config.js',
+          'module.exports = webpackConfig',
+          <<~JS
+            // Extend file rule to include mp3 extension
+            module.exports = mergeWithRules({
+              module: {
+                rules: {
+                  test: 'replace',
+                  type: 'match'
+                },
+              },
+            })(webpackConfig, {
+              module: {
+                rules: [
+                  {
+                    test: /\.(bmp|gif|jpe?g|png|tiff|ico|avif|webp|eot|otf|ttf|woff|woff2|svg|mp3)$/,
+                    type: 'asset/resource'
+                  }
+                ]
+              }
+            })
+          JS
+        )
       end
 
       def webpack_environment
+        return if Pageflow::RailsVersion.experimental?
+
         inject_into_file('config/webpack/environment.js',
                          before: "module.exports = environment\n") do
           "environment.config.merge(require('pageflow/config/webpack'))\n" \
@@ -53,6 +109,8 @@ def webpack_environment
       end
 
       def webpacker_yml
+        return if Pageflow::RailsVersion.experimental?
+
         gsub_file('config/webpacker.yml',
                   'extract_css: false',
                   'extract_css: true')
@@ -64,6 +122,8 @@ def webpacker_yml
       end
 
       def postcss_config
+        return if Pageflow::RailsVersion.experimental?
+
         inject_into_file('postcss.config.js',
                          after: "require('postcss-import'),\n") do
           "    // Make relative urls in fontsource packages work\n" \

entry_types/scrolled/spec/support/config/webpacker.rb

@@ -1,8 +1,10 @@
-# Make sure packs are recompiled for Capybara specs when Rollup
-# outputs change
+unless Pageflow::RailsVersion.experimental?
+  # Make sure packs are recompiled for Capybara specs when Rollup
+  # outputs change
 
-Webpacker::Compiler.watched_paths << Pageflow::Engine.root.join('package/*.js')
-Webpacker::Compiler.watched_paths << PageflowScrolled::Engine.root.join('package/*.js')
+  Webpacker::Compiler.watched_paths << Pageflow::Engine.root.join('package/*.js')
+  Webpacker::Compiler.watched_paths << PageflowScrolled::Engine.root.join('package/*.js')
 
-# see https://github.com/rails/webpacker/issues/2410
-Webpacker::Compiler.watched_paths << Rails.root.join('app/javascript/**/*.js')
+  # see https://github.com/rails/webpacker/issues/2410
+  Webpacker::Compiler.watched_paths << Rails.root.join('app/javascript/**/*.js')
+end

package/config/webpack5.js

@@ -0,0 +1,14 @@
+module.exports = {
+  externals: {
+    'backbone': 'Backbone',
+    'backbone.babysitter': 'Backbone.ChildViewContainer',
+    'cocktail': 'Cocktail',
+    'jquery': 'jQuery',
+    'jquery-ui': 'jQuery',
+    'jquery.minicolors': 'jQuery',
+    'underscore': '_',
+    'backbone.marionette': 'Backbone.Marionette',
+    'iscroll': 'IScroll',
+    'wysihtml5': 'wysihtml5'
+  }
+};

pageflow.gemspec

@@ -129,7 +129,11 @@ Gem::Specification.new do |s|
   s.add_dependency 'sprockets', '< 4'
 
   # Used for Webpack build in host application
-  s.add_dependency 'webpacker', '~> 4.2'
+  if Pageflow::RailsVersion.experimental?
+    s.add_dependency 'shakapacker', '~> 7.0'
+  else
+    s.add_dependency 'webpacker', '~> 4.2'
+  end
 
   # Using translations from rails locales in javascript code.
   s.add_dependency 'i18n-js', '~> 2.1'

spec/support/pageflow/dummy/app.rb

@@ -29,7 +29,9 @@ def template_path
       end
 
       def rails_new_options
-        '--skip-test-unit --skip-bundle --database=mysql'
+        result = '--skip-test-unit --skip-bundle --database=mysql'
+        result << ' --skip-javascript' if Pageflow::RailsVersion.experimental?
+        result
       end
     end
   end

spec/support/pageflow/dummy/rails_template.rb

@@ -42,7 +42,11 @@ def source_paths
 
 # Install Webpacker
 
-rake 'webpacker:install' if ENV['PAGEFLOW_INSTALL_WEBPACKER'] == 'true'
+if Pageflow::RailsVersion.experimental?
+  rake 'shakapacker:install' if ENV['PAGEFLOW_INSTALL_WEBPACKER'] == 'true'
+else
+  rake 'webpacker:install' if ENV['PAGEFLOW_INSTALL_WEBPACKER'] == 'true'
+end
 
 # Install pageflow and the tested engine via their generators.