diff --git a/.eslintrc.js b/.eslintrc.js index 207539ce4..51a330e1b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,5 +1,4 @@ module.exports = { - 'parser': 'babel-eslint', 'extends': 'airbnb-base', 'rules': { 'semi': ['error', 'always'], diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml index 231b7306a..6ecb6b113 100644 --- a/.github/workflows/push.yml +++ b/.github/workflows/push.yml @@ -66,5 +66,6 @@ jobs: RAILS_ENV: test run: | bundle exec rails db:create db:schema:load + bundle exec rails test:prepare bundle exec rails test bundle exec rails test:system diff --git a/.gitignore b/.gitignore index 4cb81a467..241962a6a 100644 --- a/.gitignore +++ b/.gitignore @@ -34,9 +34,10 @@ vendor/bundle # Fits fits.log -/public/packs -/public/packs-test /node_modules /yarn-error.log yarn-debug.log* .yarn-integrity + +/app/assets/builds/* +!/app/assets/builds/.keep diff --git a/CHANGELOG.md b/CHANGELOG.md index 680e8bafa..c26acddf4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,9 @@ New entries in this file should aim to provide a meaningful amount of informatio ## [Unreleased] +### Added +- Migrate Webpacker to Esbuild [PR#3320](https://github.com/ualbertalib/jupiter/pull/3320) + ### Removed - Remove fully enabled feature flags that have been enabled for years [PR#3375](https://github.com/ualbertalib/jupiter/pull/3375) diff --git a/Gemfile b/Gemfile index b7e3fbe79..7815442da 100644 --- a/Gemfile +++ b/Gemfile @@ -8,8 +8,10 @@ gem 'image_processing' # for ActiveStorage Variants gem 'puma', '~> 6.4' gem 'rails', '~> 7.0.8' -# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker -gem 'webpacker', '~> 5.4' +# Assets +gem 'cssbundling-rails' +gem 'jsbundling-rails' +gem 'sprockets-rails' # Reduces boot times through caching; required in config/boot.rb gem 'bootsnap', require: false diff --git a/Gemfile.lock b/Gemfile.lock index 849dea387..1f3c71ef5 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -166,6 +166,8 @@ GEM bigdecimal rexml crass (1.0.6) + cssbundling-rails (1.3.3) + railties (>= 6.0.0) danger (9.4.3) claide (~> 1.0) claide-plugins (>= 0.9.2) @@ -285,6 +287,8 @@ GEM jbuilder (2.11.5) actionview (>= 5.0.0) activesupport (>= 5.0.0) + jsbundling-rails (1.2.1) + railties (>= 6.0.0) json (2.7.1) json-schema (4.1.1) addressable (>= 2.8) @@ -385,8 +389,6 @@ GEM rack (2.2.8.1) rack-protection (3.1.0) rack (~> 2.2, >= 2.2.4) - rack-proxy (0.7.7) - rack rack-test (2.1.0) rack (>= 1.3) rails (7.0.8) @@ -512,7 +514,6 @@ GEM rexml (~> 3.2, >= 3.2.5) rubyzip (>= 1.2.2, < 3.0) websocket (~> 1.0) - semantic_range (3.0.0) shoulda-matchers (6.1.0) activesupport (>= 5.2.0) sidekiq (7.2.2) @@ -555,6 +556,13 @@ GEM sparql-client (3.3.0) net-http-persistent (~> 4.0, >= 4.0.2) rdf (~> 3.3) + sprockets (4.2.1) + concurrent-ruby (~> 1.0) + rack (>= 2.2.4, < 4) + sprockets-rails (3.4.2) + actionpack (>= 5.2) + activesupport (>= 5.2) + sprockets (>= 3.0.0) stringio (3.0.8) strong_migrations (1.7.0) activerecord (>= 5.2) @@ -585,11 +593,6 @@ GEM addressable (>= 2.8.0) crack (>= 0.3.2) hashdiff (>= 0.4.0, < 2.0.0) - webpacker (5.4.4) - activesupport (>= 5.2) - rack-proxy (>= 0.6.1) - railties (>= 5.2) - semantic_range (>= 2.3.0) webrick (1.8.1) websocket (1.2.10) websocket-driver (0.7.6) @@ -618,6 +621,7 @@ DEPENDENCIES capybara (>= 3.26, < 4.0) clamby connection_pool + cssbundling-rails danger (~> 9.4) datacite-client! debug @@ -633,6 +637,7 @@ DEPENDENCIES haikunator image_processing jbuilder + jsbundling-rails json-schema (~> 4.1.1) kaminari launchy @@ -668,13 +673,13 @@ DEPENDENCIES sidekiq-unique-jobs (~> 8.0) simple_form simplecov + sprockets-rails strong_migrations (~> 1.7.0) uuidtools vcr (= 5.0) voight_kampff (~> 2.0) web-console (>= 4.1.0) webmock - webpacker (~> 5.4) wicked RUBY VERSION diff --git a/Procfile.dev b/Procfile.dev index df3d432c5..b1b20859c 100644 --- a/Procfile.dev +++ b/Procfile.dev @@ -1,3 +1,4 @@ web: env RUBY_DEBUG_OPEN=true bin/rails server -frontend: bin/webpack-dev-server worker: bundle exec sidekiq +js: yarn build --watch +css: yarn build:css --watch diff --git a/README.md b/README.md index f5892c924..1533b7b2e 100644 --- a/README.md +++ b/README.md @@ -137,7 +137,7 @@ bin/dev This starts up Overmind (or fallback to Foreman) running the Procfile.dev config. -We've configured this to run the Rails server, Sidekiq background worker and webpacker (for CSS bundling and JS bundling) out of the box. +We've configured this to run the Rails server, Sidekiq background worker and CSS/JS bundling out of the box. Here's a couple of useful Overmind commands: diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep new file mode 100644 index 000000000..e69de29bb diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js new file mode 100644 index 000000000..9a99757a4 --- /dev/null +++ b/app/assets/config/manifest.js @@ -0,0 +1,2 @@ +//= link_tree ../images +//= link_tree ../builds diff --git a/app/javascript/images/campus-banner.jpg b/app/assets/images/campus-banner.jpg similarity index 100% rename from app/javascript/images/campus-banner.jpg rename to app/assets/images/campus-banner.jpg diff --git a/app/javascript/images/dept-of-agriculture.jpg b/app/assets/images/dept-of-agriculture.jpg similarity index 100% rename from app/javascript/images/dept-of-agriculture.jpg rename to app/assets/images/dept-of-agriculture.jpg diff --git a/app/javascript/images/era-logo-without-text.png b/app/assets/images/era-logo-without-text.png similarity index 100% rename from app/javascript/images/era-logo-without-text.png rename to app/assets/images/era-logo-without-text.png diff --git a/app/javascript/images/era-logo.png b/app/assets/images/era-logo.png similarity index 100% rename from app/javascript/images/era-logo.png rename to app/assets/images/era-logo.png diff --git a/app/javascript/images/images-of-research.jpg b/app/assets/images/images-of-research.jpg similarity index 100% rename from app/javascript/images/images-of-research.jpg rename to app/assets/images/images-of-research.jpg diff --git a/app/javascript/images/locked-uofa-logo.png b/app/assets/images/locked-uofa-logo.png similarity index 100% rename from app/javascript/images/locked-uofa-logo.png rename to app/assets/images/locked-uofa-logo.png diff --git a/app/javascript/images/oil-sands.jpg b/app/assets/images/oil-sands.jpg similarity index 100% rename from app/javascript/images/oil-sands.jpg rename to app/assets/images/oil-sands.jpg diff --git a/app/javascript/images/theses.jpg b/app/assets/images/theses.jpg similarity index 100% rename from app/javascript/images/theses.jpg rename to app/assets/images/theses.jpg diff --git a/app/javascript/images/ualib-logo.png b/app/assets/images/ualib-logo.png similarity index 100% rename from app/javascript/images/ualib-logo.png rename to app/assets/images/ualib-logo.png diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss new file mode 100644 index 000000000..c471ec993 --- /dev/null +++ b/app/assets/stylesheets/application.sass.scss @@ -0,0 +1,27 @@ +// Entry point for your Sass build + +// Set bootstrap sass variables +@import 'bootstrap-sass-overrides'; + +// External Library Stylesheets +@import 'bootstrap/scss/bootstrap'; + +$fa-font-path: "."; + +@import "@fortawesome/fontawesome-free/scss/fontawesome.scss"; +@import "@fortawesome/fontawesome-free/scss/solid.scss"; +@import 'selectize/dist/css/selectize'; +@import 'selectize/dist/css/selectize.bootstrap3'; +@import 'easy-autocomplete/dist/easy-autocomplete'; +@import 'dropzone/dist/dropzone'; + +// Custom Stylesheets +@import 'jupiter'; +@import 'simple_form'; +@import 'items'; +@import 'image'; +@import 'search'; +@import 'users'; +@import 'welcome'; +@import 'skip-content'; +@import 'changeset'; diff --git a/app/javascript/styles/bootstrap-sass-overrides.scss b/app/assets/stylesheets/bootstrap-sass-overrides.scss similarity index 100% rename from app/javascript/styles/bootstrap-sass-overrides.scss rename to app/assets/stylesheets/bootstrap-sass-overrides.scss diff --git a/app/javascript/styles/changeset.scss b/app/assets/stylesheets/changeset.scss similarity index 100% rename from app/javascript/styles/changeset.scss rename to app/assets/stylesheets/changeset.scss diff --git a/app/javascript/styles/image.scss b/app/assets/stylesheets/image.scss similarity index 100% rename from app/javascript/styles/image.scss rename to app/assets/stylesheets/image.scss diff --git a/app/javascript/styles/items.scss b/app/assets/stylesheets/items.scss similarity index 100% rename from app/javascript/styles/items.scss rename to app/assets/stylesheets/items.scss diff --git a/app/javascript/styles/jupiter.scss b/app/assets/stylesheets/jupiter.scss similarity index 96% rename from app/javascript/styles/jupiter.scss rename to app/assets/stylesheets/jupiter.scss index 58f452411..f05d2aee7 100644 --- a/app/javascript/styles/jupiter.scss +++ b/app/assets/stylesheets/jupiter.scss @@ -51,7 +51,7 @@ body { rgba($white, 0.4), rgba($white, 0) ), - url('../images/campus-banner.jpg'); + url('../assets/campus-banner.jpg'); background-repeat: no-repeat; background-position: center 10%; background-size: cover; diff --git a/app/javascript/styles/search.scss b/app/assets/stylesheets/search.scss similarity index 84% rename from app/javascript/styles/search.scss rename to app/assets/stylesheets/search.scss index d82fceb76..2fdd54884 100644 --- a/app/javascript/styles/search.scss +++ b/app/assets/stylesheets/search.scss @@ -1,8 +1,3 @@ -[type="search"]::-webkit-search-cancel-button { - // Bootstrap 4 override - -webkit-appearance: searchfield-cancel-button; -} - // Filter sidebar for small screens @include media-breakpoint-between(xs, sm) { .jupiter-filters { diff --git a/app/javascript/styles/simple_form.scss b/app/assets/stylesheets/simple_form.scss similarity index 100% rename from app/javascript/styles/simple_form.scss rename to app/assets/stylesheets/simple_form.scss diff --git a/app/javascript/styles/skip-content.scss b/app/assets/stylesheets/skip-content.scss similarity index 100% rename from app/javascript/styles/skip-content.scss rename to app/assets/stylesheets/skip-content.scss diff --git a/app/javascript/styles/users.scss b/app/assets/stylesheets/users.scss similarity index 100% rename from app/javascript/styles/users.scss rename to app/assets/stylesheets/users.scss diff --git a/app/javascript/styles/welcome.scss b/app/assets/stylesheets/welcome.scss similarity index 100% rename from app/javascript/styles/welcome.scss rename to app/assets/stylesheets/welcome.scss diff --git a/app/helpers/images_helper.rb b/app/helpers/images_helper.rb index f43d205e2..72d9a4660 100644 --- a/app/helpers/images_helper.rb +++ b/app/helpers/images_helper.rb @@ -28,7 +28,7 @@ def file_icon(content_type) def safe_thumbnail_tag(thumbnail, image_tag_options) image_tag_options[:class] ||= 'j-thumbnail img-thumbnail' image_tag_options[:onerror] = "this.onerror=null;this.src='#{ - asset_pack_url('media/images/era-logo-without-text.png') + image_url('era-logo-without-text.png') }';" image_tag(thumbnail, image_tag_options) diff --git a/app/helpers/page_layout_helper.rb b/app/helpers/page_layout_helper.rb index a137515d8..42d684178 100644 --- a/app/helpers/page_layout_helper.rb +++ b/app/helpers/page_layout_helper.rb @@ -54,7 +54,7 @@ def thumbnail_path(logo, args = { resize_to_limit: [100, 100], auto_orient: true # rubocop:disable Rails/HelperInstanceVariable def page_image_url - default_url = asset_pack_url('media/images/era-logo.png') + default_url = image_url('era-logo.png') # We only have images on community and item/thesis show pages image_path = thumbnail_path(@community&.thumbnail_file) || thumbnail_path(@item&.thumbnail_file) diff --git a/app/javascript/admin.js b/app/javascript/admin.js new file mode 100644 index 000000000..623e3f951 --- /dev/null +++ b/app/javascript/admin.js @@ -0,0 +1 @@ +import './src/admin'; diff --git a/app/javascript/application.js b/app/javascript/application.js new file mode 100644 index 000000000..9cd058ba8 --- /dev/null +++ b/app/javascript/application.js @@ -0,0 +1,20 @@ +// Entry point for the build script in your package.json + +import './src/add_jquery'; + +import Rails from '@rails/ujs'; +import Turbolinks from 'turbolinks'; +import * as ActiveStorage from '@rails/activestorage'; + +import 'trix'; +import '@rails/actiontext'; +import 'bootstrap/dist/js/bootstrap'; +import 'selectize/dist/js/standalone/selectize'; +import 'easy-autocomplete/dist/jquery.easy-autocomplete'; +import 'jquery-multidownload/jquery-multidownload'; + +import './src/application'; + +ActiveStorage.start(); +Rails.start(); +Turbolinks.start(); diff --git a/app/javascript/packs/admin.js b/app/javascript/packs/admin.js deleted file mode 100644 index f2fd88a96..000000000 --- a/app/javascript/packs/admin.js +++ /dev/null @@ -1 +0,0 @@ -import '../src/admin'; diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js deleted file mode 100644 index ae088b366..000000000 --- a/app/javascript/packs/application.js +++ /dev/null @@ -1,29 +0,0 @@ -// This file is automatically compiled by Webpack, along with any other files -// present in this directory. You're encouraged to place your actual application logic in -// a relevant structure within app/javascript and only use these pack files to reference -// that code so it'll be compiled. - -import 'core-js/stable'; -import 'regenerator-runtime/runtime'; -import Rails from '@rails/ujs'; -import Turbolinks from 'turbolinks'; -import * as ActiveStorage from '@rails/activestorage'; - -import 'trix'; -import '@rails/actiontext'; -import 'bootstrap/dist/js/bootstrap'; -import 'selectize/dist/js/standalone/selectize'; -import 'easy-autocomplete/dist/jquery.easy-autocomplete'; -import 'jquery-multidownload/jquery-multidownload'; - -import '../styles/application.scss'; -import '../src/application'; - -// Expose jquery so RJS (e.g: js.erb templates) works properly -window.$ = $; - -require.context('../images', true); - -ActiveStorage.start(); -Rails.start(); -Turbolinks.start(); diff --git a/app/javascript/src/add_jquery.js b/app/javascript/src/add_jquery.js new file mode 100644 index 000000000..314b22f10 --- /dev/null +++ b/app/javascript/src/add_jquery.js @@ -0,0 +1,4 @@ +import jquery from 'jquery'; + +window.jQuery = jquery; +window.$ = jquery; diff --git a/app/javascript/src/admin/ajax_table.js b/app/javascript/src/admin/ajax_table.js index da34e8694..822216de4 100644 --- a/app/javascript/src/admin/ajax_table.js +++ b/app/javascript/src/admin/ajax_table.js @@ -1,4 +1,4 @@ -$(document).on('turbolinks:load', () => { +document.addEventListener('turbolinks:load', () => { function renderNewTable() { const $form = $(this).closest('form'); let action = $form.attr('action'); diff --git a/app/javascript/src/admin/new_batch_ingest.js b/app/javascript/src/admin/new_batch_ingest.js index 39179a22d..efdfbb77e 100644 --- a/app/javascript/src/admin/new_batch_ingest.js +++ b/app/javascript/src/admin/new_batch_ingest.js @@ -192,15 +192,17 @@ function loadAndInitGAPI() { } document.addEventListener('turbolinks:load', () => { - loadAndInitGAPI(); - $('.js-batch-ingest-spreadsheet').on( - 'click', - '.js-btn-delete-file', - deleteSpreadsheet, - ); - $('.js-batch-ingest-files-list').on( - 'click', - '.js-btn-delete-file', - deleteFileFromFilesList, - ); + if (document.querySelector('.js-batch-ingest-spreadsheet')) { + loadAndInitGAPI(); + $('.js-batch-ingest-spreadsheet').on( + 'click', + '.js-btn-delete-file', + deleteSpreadsheet, + ); + $('.js-batch-ingest-files-list').on( + 'click', + '.js-btn-delete-file', + deleteFileFromFilesList, + ); + } }); diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss deleted file mode 100644 index e7d22852b..000000000 --- a/app/javascript/styles/application.scss +++ /dev/null @@ -1,27 +0,0 @@ -// Set bootstrap sass variables -@import 'bootstrap-sass-overrides'; - -// External Library Stylesheets -@import '~bootstrap/scss/bootstrap'; - -$fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; - -@import '~@fortawesome/fontawesome-free/scss/fontawesome'; -@import '~@fortawesome/fontawesome-free/scss/brands'; -@import '~@fortawesome/fontawesome-free/scss/regular'; -@import '~@fortawesome/fontawesome-free/scss/solid'; -@import '~selectize/dist/css/selectize'; -@import '~selectize/dist/css/selectize.bootstrap3'; -@import '~easy-autocomplete/dist/easy-autocomplete'; -@import '~dropzone/dist/dropzone'; - -// Custom Stylesheets -@import 'jupiter'; -@import 'simple_form'; -@import 'items'; -@import 'image'; -@import 'search'; -@import 'users'; -@import 'welcome'; -@import 'skip-content'; -@import 'changeset'; diff --git a/app/views/application/_feature_image.html.erb b/app/views/application/_feature_image.html.erb index 4d6b24eac..001115115 100644 --- a/app/views/application/_feature_image.html.erb +++ b/app/views/application/_feature_image.html.erb @@ -10,5 +10,5 @@ <% end %> <% else %> - <%= image_pack_tag('locked-uofa-logo.png', class: 'j-feature-image img-thumbnail', alt: '', size: '350x350') %> + <%= image_tag('locked-uofa-logo.png', class: 'j-feature-image img-thumbnail', alt: '', size: '350x350') %> <% end %> diff --git a/app/views/application/_footer.html.erb b/app/views/application/_footer.html.erb index 63d6d1599..bff4fd281 100644 --- a/app/views/application/_footer.html.erb +++ b/app/views/application/_footer.html.erb @@ -35,7 +35,7 @@ <%= link_to 'https://www.library.ualberta.ca/', target: :_blank, rel: 'noopener' do %> - <%= image_pack_tag('ualib-logo.png', alt: t('.uofa_library_logo_alt'), size: '262x40') %> + <%= image_tag('ualib-logo.png', alt: t('.uofa_library_logo_alt'), size: '262x40') %> <% end %> diff --git a/app/views/application/_navbar.html.erb b/app/views/application/_navbar.html.erb index dbd9f917f..a94d868da 100644 --- a/app/views/application/_navbar.html.erb +++ b/app/views/application/_navbar.html.erb @@ -4,14 +4,14 @@