Use esbuild instead of webpacker

.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>