Use esbuild instead of webpacker (#1957)

This migrates our asset pipeline from webpacker to the much simpler esbuild. jQuery is still globally defined but now we also globally attach all the jQuery plugins so there's no conflict.

The signature changes to javascript_pack_tag -> javascript_tag were all changed.  Similarly with images and css.  `bin/setup` has been changed to compile for any environment. Tests autocompile but a helper script is given for dev to just recompile and not download new packages.

.gitignore

@@ -11,6 +11,8 @@
 /apps/*/public/packs
 /apps/*/public/packs-test
 /apps/*/vendor/bundle/
+/apps/*/app/assets/builds/
+!/apps/*/app/assets/builds/.keep
 /*/.bundle
 
 # files used for deployment should not be versioned

apps/dashboard/Gemfile

@@ -45,6 +45,10 @@ gem 'mocha', '~> 1.1', group: :test
 gem 'autoprefixer-rails', '~> 10.2.5'
 gem 'dotiw'
 gem 'local_time', '~> 1.0.3'
+gem 'zip_tricks', '~> 5.5'
+
+gem 'jsbundling-rails', '~> 1.0'
+gem 'cssbundling-rails', '~> 1.1'
 
 # OOD specific gems
 gem 'ood_support', '~> 0.0.2'
@@ -58,5 +62,3 @@ gem "sinatra-contrib", require: false
 gem "erubi", require: false
 gem "dalli", require: false
 
-gem 'webpacker', '~> 5.4'
-gem 'zip_tricks', '~> 5.5'

apps/dashboard/Gemfile.lock

@@ -90,6 +90,8 @@ GEM
     coffee-script-source (1.12.2)
     concurrent-ruby (1.1.10)
     crass (1.0.6)
+    cssbundling-rails (1.1.0)
+      railties (>= 6.0.0)
     dalli (3.2.1)
     dotenv (2.7.6)
     dotenv-rails (2.7.6)
@@ -108,6 +110,8 @@ GEM
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
+    jsbundling-rails (1.0.2)
+      railties (>= 6.0.0)
     local_time (1.0.3)
       coffee-rails
     lograge (0.12.0)
@@ -151,8 +155,6 @@ GEM
     rack (2.2.3)
     rack-protection (2.2.0)
       rack
-    rack-proxy (0.7.2)
-      rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rails (6.1.4.7)
@@ -196,7 +198,6 @@ GEM
       childprocess (>= 0.5, < 5.0)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2)
-    semantic_range (3.0.0)
     sinatra (2.2.0)
       mustermann (~> 1.0)
       rack (~> 2.2)
@@ -220,11 +221,6 @@ GEM
     timecop (0.9.5)
     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)
@@ -244,11 +240,13 @@ DEPENDENCIES
   byebug
   capybara
   climate_control (~> 0.2)
+  cssbundling-rails (~> 1.1)
   dalli
   dotenv-rails (~> 2.1)
   dotiw
   erubi
   jbuilder (~> 2.0)
+  jsbundling-rails (~> 1.0)
   local_time (~> 1.0.3)
   mocha (~> 1.1)
   ood_appkit (~> 2.1.0)
@@ -262,7 +260,6 @@ DEPENDENCIES
   sinatra
   sinatra-contrib
   timecop (~> 0.9)
-  webpacker (~> 5.4)
   zip_tricks (~> 5.5)
 
 BUNDLED WITH

apps/dashboard/app/assets/config/manifest.js

@@ -0,0 +1,4 @@
+
+
+//= link_tree ../images
+//= link_tree ../builds

apps/dashboard/app/helpers/dashboard_helper.rb

@@ -12,7 +12,7 @@ def logo_image_tag(url)
       uri.query_values = (uri.query_values || {}).merge({timestamp: Time.now.to_i})
       tag.img(src: uri, alt: "logo", height: Configuration.logo_height, class: 'py-2')
     else # default logo image
-      image_pack_tag("OpenOnDemand_stack_RGB.svg", alt: "logo", height: "85", class: 'py-2')
+      image_tag("OpenOnDemand_stack_RGB.svg", alt: "logo", height: "85", class: 'py-2')
     end
   end
 

apps/dashboard/app/javascript/packs/application.js

@@ -4,7 +4,7 @@
 // a relevant structure within app/javascript and only use these pack files to reference
 // that code so it'll be compiled.
 //
-// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// To reference this file, add <%= javascript_include_tag 'application' %> to the appropriate
 // layout file, like app/views/layouts/application.html.erb
 //
 // Uncomment to copy all static images under ../images to the output folder and reference
@@ -14,32 +14,35 @@
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
 
-import 'jquery';
-import 'jquery-ujs'
-
-// lot's of inline scripts and stuff rely on jquery just being available
-window.jQuery = jQuery;
-window.$ = $;
+import jQuery from 'jquery';
+import 'jquery-ujs';
+import datatables from 'datatables.net';
+import datatablesBs4 from 'datatables.net-bs4/js/dataTables.bootstrap4';
+import datatablesSelect from 'datatables.net-select';
 
 import Rails from '@rails/ujs';
-Rails.start();
 
 // Import popper.js for Bootstrap 4
-import 'popper.js'
+import 'popper.js';
 
 // Import Bootstrap 4
-import 'bootstrap/dist/js/bootstrap'
+import 'bootstrap/dist/js/bootstrap';
+
+// FIXME: confim modals don't work in esbuild.
+// import 'data-confirm-modal';
 
-// confim modals
-import 'data-confirm-modal';
+import { setNavbarColor } from './config';
 
-// Import application stylesheets
-import '../stylesheets/application'
+// lot's of inline scripts and stuff rely on jquery just being available
+window.jQuery = jQuery;
+window.$ = jQuery;
 
-import '../images/OpenOnDemand_powered_by_RGB.svg';
-import '../images/OpenOnDemand_stack_RGB.svg';
+// these plugins don't automatically load, so this loads them.
+datatables(window, jQuery);
+datatablesBs4(window, jQuery);
+datatablesSelect(window, jQuery);
 
-import { setNavbarColor } from './config';
+Rails.start();
 
 jQuery(function(){
 

apps/dashboard/app/javascript/packs/apps.js

@@ -1,8 +1,5 @@
 'use strict';
 
-import 'datatables.net'
-import 'datatables.net-bs4/js/dataTables.bootstrap4'
-
 jQuery(function() {
   $('#all-apps-table').DataTable({
     stateSave: true

apps/dashboard/app/javascript/packs/dashboard.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import _ from 'lodash';
+window._ = _;
 
 function promiseLoginToXDMoD(xdmodUrl){
   return new Promise(function(resolve, reject){

apps/dashboard/app/javascript/packs/editor.js

@@ -154,7 +154,10 @@ jQuery(function () {
           url: apiUrl,
           type: 'PUT',
           data: editor.getValue(),
-          contentType: 'text/plain',
+          headers: {
+            'Content-Type': 'text/plain',
+            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
+          },
           success: function (data) {
             toggleSaveSpinner();
             toggleSaveConfirmed();

apps/dashboard/app/javascript/packs/files/data_table.js

@@ -1,7 +1,3 @@
-import 'datatables.net';
-import 'datatables.net-bs4/js/dataTables.bootstrap4';
-import 'datatables.net-select';
-import 'datatables.net-select-bs4';
 import Handlebars from 'handlebars';
 import {EVENTNAME as SWAL_EVENTNAME} from './sweet_alert.js';
 
@@ -198,11 +194,6 @@ class DataTable {
                     data: null,
                     orderable: false,
                     defaultContent: '<input type="checkbox">',
-                    render: function (data, type, row, meta) {
-                        var api = new $.fn.dataTable.Api(meta.settings);
-                        let selected = api.rows(meta.row, { selected: true }).count() > 0;
-                        return `<input type="checkbox" ${selected ? 'checked' : ''}> ${selected ? 'checked' : ''}`;
-                    }
                 },
                 { data: 'type', render: (data, type, row, meta) => data == 'd' ? '<span title="directory" class="fa fa-folder" style="color: gold"><span class="sr-only"> dir</span></span>' : '<span title="file" class="fa fa-file" style="color: lightgrey"><span class="sr-only"> file</span></span>' }, // type
                 { name: 'name', data: 'name', className: 'text-break', render: (data, type, row, meta) => `<a class="${row.type} name ${row.type == 'd' ? '' : 'view-file'}" href="${row.url}">${Handlebars.escapeExpression(data)}</a>` }, // name

apps/dashboard/app/javascript/packs/files/file_ops.js

@@ -2,6 +2,7 @@ import Handlebars from 'handlebars';
 import {CONTENTID, EVENTNAME as DATATABLE_EVENTNAME} from './data_table.js';
 import {EVENTNAME as CLIPBOARD_EVENTNAME} from './clip_board.js';
 import {EVENTNAME as SWAL_EVENTNAME} from './sweet_alert.js';
+import _ from 'lodash';
 
 export {EVENTNAME};
 

apps/dashboard/app/javascript/packs/files/uppy_ops.js

@@ -105,12 +105,12 @@ jQuery(function() {
   });
 
   // https://stackoverflow.com/questions/6756583/prevent-browser-from-loading-a-drag-and-dropped-file
-  global.addEventListener("dragover",function(e){
+  window.addEventListener("dragover",function(e){
     e = e || event;
     e.preventDefault();
   },false);
 
-  global.addEventListener("drop",function(e){
+  window.addEventListener("drop",function(e){
     e = e || event;
     e.preventDefault();
   },false);

apps/dashboard/app/javascript/packs/icon_picker.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import ALL_ICONS from 'icons';
+import ALL_ICONS from './icons';
 
 const ICON_SHOW_ID = "product_icon"
 const ICON_SELECT_ID = "product_icon_select"

apps/dashboard/app/javascript/stylesheets/_variables.scss

@@ -54,5 +54,5 @@ $navbar-nav-link-padding-x: 0.75rem;
 // breadcrumbs are purely visual for accessibility
 $breadcrumb-divider: '';
 
-// needs to be set by webpack
-// $fa-font-path:
+// files get copied during 'yarn build' in esbuild.config.js
+$fa-font-path: "../builds";

apps/dashboard/app/views/active_jobs/index.html.erb

@@ -1,4 +1,4 @@
-<%=  javascript_pack_tag 'active_jobs', nonce: true %>
+<%=  javascript_include_tag 'active_jobs', nonce: true %>
 
 <div class="row">
   <div class="col-md-12">

apps/dashboard/app/views/apps/index.html.erb

@@ -1,4 +1,4 @@
-<%= javascript_pack_tag 'apps', nonce: true %>
+<%= javascript_include_tag 'apps', nonce: true %>
 
 <%= render partial: 'batch_connect/shared/breadcrumb',
 locals: {

apps/dashboard/app/views/batch_connect/session_contexts/_form.html.erb

@@ -7,7 +7,7 @@
   <%= f.submit t('dashboard.batch_connect_form_launch'), class: "btn btn-primary btn-block" %>
 <% end %>
 
-<%= javascript_pack_tag 'batch_connect', nonce: true if Configuration.bc_dynamic_js? %>
+<%= javascript_include_tag 'batch_connect', nonce: true if Configuration.bc_dynamic_js? %>
 
 <% @app.custom_javascript_files.each do |jsfile| %>
   <%= javascript_tag "(function(){\n" + jsfile.read + "\n}());" %>

apps/dashboard/app/views/batch_connect/sessions/index.html.erb

@@ -3,7 +3,7 @@
   any_apps = (@sys_app_groups + @usr_app_groups + @dev_app_groups).any?
 -%>
 
-<%= javascript_pack_tag 'batch_connect_sessions', nonce: true %>
+<%= javascript_include_tag 'batch_connect_sessions', nonce: true %>
 
 <%= render partial: 'batch_connect/shared/breadcrumb',
 locals: {

apps/dashboard/app/views/dashboard/index.html.erb

@@ -1,4 +1,4 @@
-<%= javascript_pack_tag 'dashboard', nonce: true %>
+<%= javascript_include_tag 'dashboard', nonce: true %>
 <%= render partial: 'shared/welcome' %>
 
 <%- dashboard_layout.fetch(:rows, []).each do |row| -%>

apps/dashboard/app/views/layouts/_footer.html.erb

@@ -2,7 +2,7 @@
   <div class="mr-2">
     <%= link_to "https://openondemand.org" do %>
       <%=
-        image_pack_tag(
+        image_tag(
           "OpenOnDemand_powered_by_RGB.svg",
           class: "footer-logo",
           alt: "Powered by Open OnDemand",

apps/dashboard/app/views/layouts/application.html.erb

@@ -4,8 +4,8 @@
   <title><%= content_for?(:title) ? yield(:title) : "Dashboard - #{OodAppkit.dashboard.title}" %></title>
   <%= favicon_link_tag 'favicon.ico', href: OodAppkit.public.url.join('favicon.ico'), skip_pipeline: true %>
 
-  <%= javascript_pack_tag 'application', nonce: true %>
-  <%= stylesheet_pack_tag 'application', nonce: true, media: 'all' %>
+  <%= javascript_include_tag 'application', nonce: true %>
+  <%= stylesheet_link_tag 'application', nonce: true, media: 'all' %>
 
   <%= csrf_meta_tags %>
 

apps/dashboard/app/views/layouts/editor.html.erb

@@ -4,11 +4,11 @@
   <meta charset="UTF-8">
 
   <title><%= "File Editor - #{OodAppkit.dashboard.title}" %><%= @path.nil? ? "" : " - #{@path.basename.to_s}" %></title>
-  <%= favicon_link_tag 'favicon.ico', href: OodAppkit.public.url.join('favicon.ico') %>
+  <%= favicon_link_tag 'favicon.ico', href: OodAppkit.public.url.join('favicon.ico'), skip_pipeline: true %>
 
-  <%= javascript_pack_tag 'application', nonce: true %>
-  <%= javascript_pack_tag 'editor', nonce: true %>
-  <%= stylesheet_pack_tag 'application', nonce: true, media: 'all' %>
+  <%= javascript_include_tag 'application', nonce: true %>
+  <%= javascript_include_tag 'editor', nonce: true %>
+  <%= stylesheet_link_tag 'application', nonce: true, media: 'all' %>
 
   <%= csrf_meta_tags %>
 

apps/dashboard/app/views/layouts/files.html.erb

@@ -1,6 +1,6 @@
 <%
 content_for :head do
-  javascript_pack_tag 'files/index', nonce: true
+  javascript_include_tag 'files/index', nonce: true
 end
 %>
 

apps/dashboard/app/views/products/_form_icon.html.erb

@@ -1,4 +1,4 @@
-<%= javascript_pack_tag 'icon_picker', nonce: true %>
+<%= javascript_include_tag 'icon_picker', nonce: true %>
 
 <% if product.app.image_icon? %>
   <p class="text-center">

apps/dashboard/app/views/products/index.html.erb

@@ -1,4 +1,4 @@
-<%= javascript_pack_tag 'products_index', nonce: true %>
+<%= javascript_include_tag 'products_index', nonce: true %>
 
 <% product_class = Product.product_types[@type] %>
 

apps/dashboard/app/views/products/show.html.erb

@@ -1,4 +1,4 @@
-<%= javascript_pack_tag 'products_show', nonce: true %>
+<%= javascript_include_tag 'products_show', nonce: true %>
 
 <%= render layout: 'products/breadcrumbs' do %>
   <li class="breadcrumb-item"><%= @product.title %></li>