Upgrade JS stack

Author: n-rodriguez

Gemfile

@@ -6,7 +6,7 @@ ruby '3.1.2'
 gem 'rails', '~> 6.1'
 gem 'pg'
 gem 'puma'
-gem 'webpacker'
+gem 'shakapacker'
 gem 'bootsnap'
 gem 'haml'
 gem 'draper'

Gemfile.lock

@@ -156,6 +156,11 @@ GEM
       rack (>= 1.4)
     ruby2_keywords (0.0.5)
     semantic_range (3.0.0)
+    shakapacker (6.2.1)
+      activesupport (>= 5.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
     sprockets (4.0.3)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
@@ -169,11 +174,6 @@ GEM
     tilt (2.0.10)
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
-    webpacker (5.4.3)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -192,8 +192,8 @@ DEPENDENCIES
   pg
   puma
   rails (~> 6.1)
+  shakapacker
   sqlite3
-  webpacker
 
 RUBY VERSION
    ruby 3.1.2p20

app/frontend/assets/javascripts/my_app/datatables/cities_datatable.coffee

@@ -1,4 +1,4 @@
-import { DatatableBase } from '@jbox-web/datatables-factory/src/index.coffee'
+import { DatatableBase } from '@jbox-web/datatables-factory'
 
 class CitiesDatatable extends DatatableBase
 

app/frontend/assets/javascripts/my_app/datatables/posts_datatable.coffee

@@ -1,4 +1,4 @@
-import { DatatableBase } from '@jbox-web/datatables-factory/src/index.coffee'
+import { DatatableBase } from '@jbox-web/datatables-factory'
 
 class PostsDatatable extends DatatableBase
 

app/frontend/assets/javascripts/my_app/datatables/transactions_datatable.coffee

@@ -1,4 +1,4 @@
-import { DatatableBase } from '@jbox-web/datatables-factory/src/index.coffee'
+import { DatatableBase } from '@jbox-web/datatables-factory'
 
 class TransactionsDatatable extends DatatableBase
 

app/frontend/assets/javascripts/my_app/datatables/users_datatable.coffee

@@ -1,4 +1,4 @@
-import { DatatableBase } from '@jbox-web/datatables-factory/src/index.coffee'
+import { DatatableBase } from '@jbox-web/datatables-factory'
 
 class UsersDatatable extends DatatableBase
 

app/frontend/packs/application.coffee

@@ -12,11 +12,11 @@ require 'popper.js'
 require 'bootstrap'
 
 # Load Rails UJS
-import {} from 'jquery-ujs'
+import Rails from '@rails/ujs'
+Rails.start()
 
-# Load Turbolinks
-import Turbolinks from 'turbolinks'
-Turbolinks.start()
+# Load Turbo(links)
+import "@hotwired/turbo-rails"
 
 # Load Select2
 require 'select2/dist/js/select2.full.js'
@@ -42,13 +42,13 @@ $.extend $.fn.dataTable.defaults,
   order:      []
 
 # Load DatatablesFactory
-import { DatatableBase } from '@jbox-web/datatables-factory/src/index.coffee'
+import { DatatableBase } from '@jbox-web/datatables-factory'
 
 # Close context_menu when click outside
 $(document).on('click', DatatableBase.clean_context_menu)
 
 # Load datatables
-$(document).on('turbolinks:load', DatatableBase.load_datatables)
+$(document).on('turbo:load', DatatableBase.load_datatables)
 
 # Load application JS
 import { MyApp, Datatables } from 'my_app/index.coffee'

app/helpers/common/font_awesome_helper.rb

@@ -33,7 +33,7 @@ module FontAwesomeHelper
     #   # => <li><i class="fa fa-check fa-li"></i> Bulleted list item</li>
     def fa_icon(names = 'flag', original_options = {})
       options = original_options.deep_dup
-      classes = [(options.delete(:icon_style) { 'fas' } || 'fas')]
+      classes = [options.delete(:icon_style) { 'fa-solid' } || 'fa-solid']
       classes.concat Private.icon_names(names)
       classes.concat Array(options.delete(:class))
       text = options.delete(:text)

babel.config.js

@@ -1,4 +1,6 @@
-module.exports = function(api) {
+const { moduleExists } = require('shakapacker')
+
+module.exports = function config(api) {
   var validEnv = ['development', 'test', 'production']
   var currentEnv = api.env()
   var isDevelopmentEnv = api.env('development')
@@ -28,45 +30,21 @@ module.exports = function(api) {
       (isProductionEnv || isDevelopmentEnv) && [
         '@babel/preset-env',
         {
-          forceAllTransforms: true,
           useBuiltIns: 'entry',
-          corejs: 3,
-          modules: false,
+          corejs: '3.8',
+          modules: 'auto',
+          bugfixes: true,
+          loose: true,
           exclude: ['transform-typeof-symbol']
         }
       ]
     ].filter(Boolean),
     plugins: [
       'babel-plugin-macros',
-      '@babel/plugin-syntax-dynamic-import',
-      isTestEnv && 'babel-plugin-dynamic-import-node',
-      '@babel/plugin-transform-destructuring',
-      [
-        '@babel/plugin-proposal-class-properties',
-        {
-          loose: true
-        }
-      ],
-      [
-        '@babel/plugin-proposal-object-rest-spread',
-        {
-          useBuiltIns: true
-        }
-      ],
-      [
-        '@babel/plugin-transform-runtime',
-        {
-          helpers: false
-        }
-      ],
-      [
-        '@babel/plugin-transform-regenerator',
-        {
-          async: false
-        }
-      ],
+      ['@babel/plugin-proposal-class-properties', { loose: true }],
+      ['@babel/plugin-transform-runtime', { helpers: false }],
       [
-        require('babel-plugin-module-resolver').default,
+        'babel-plugin-module-resolver',
         {
           root: [
             './app/frontend/assets/javascripts',

bin/webpack renamed to bin/webpacker

@@ -7,6 +7,7 @@ require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
   Pathname.new(__FILE__).realpath)
 
+require "rubygems"
 require "bundler/setup"
 
 require "webpacker"

bin/webpack-dev-server renamed to bin/webpacker-dev-server

@@ -7,6 +7,7 @@ require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
   Pathname.new(__FILE__).realpath)
 
+require "rubygems"
 require "bundler/setup"
 
 require "webpacker"

config/webpack/development.js

@@ -0,0 +1,17 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /datatables\.net.*/,
+        use: [
+          {
+            loader: require.resolve('imports-loader'),
+            options: {
+              additionalCode: 'var define = false;',
+            },
+          },
+        ],
+      }
+    ]
+  }
+}

config/webpack/environment.js

@@ -0,0 +1,17 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: require.resolve('jquery'),
+        use: [
+          {
+            loader: require.resolve('expose-loader'),
+            options: {
+              exposes: ['$', 'jQuery', 'jquery'],
+            },
+          },
+        ],
+      }
+    ]
+  }
+}