Updating the system from webpacker to vite

followed orangelight example https://github.com/pulibrary/orangelight/pull/3164/files and migration guide https://vite-ruby.netlify.app/guide/migration.html#webpacker-%F0%9F%93%A6
pulibrary · Sep 8, 2022 · 3124cdf · 3124cdf
1 parent 68d75dd
commit 3124cdf
Show file tree

Hide file tree

Showing 25 changed files with 599 additions and 10,208 deletions.
diff --git a/.gitignore b/.gitignore
@@ -47,3 +47,11 @@ yarn-debug.log*
 .DS_Store
 
 /spec/fixtures/storage/
+
+# Vite Ruby
+/public/vite*
+node_modules
+# Vite uses dotenv and suggests to ignore local-only env files. See
+# https://vitejs.dev/guide/env-and-mode.html#env-files
+*.local
+
diff --git a/Capfile b/Capfile
@@ -34,6 +34,7 @@ install_plugin Capistrano::SCM::Git
 # require "capistrano/bundler"
 # require "capistrano/rails/assets"
 # require "capistrano/rails/migrations"
+require "capistrano/rails"
 require "capistrano/passenger"
 require "whenever/capistrano"
 

diff --git a/Gemfile b/Gemfile
@@ -16,8 +16,6 @@ gem "pg"
 gem "puma", "~> 5.0"
 # Use SCSS for stylesheets
 gem "sass-rails", ">= 6"
-# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
-gem "webpacker", "~> 5.0"
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
 gem "turbolinks", "~> 5"
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
@@ -29,6 +27,7 @@ gem "jbuilder", "~> 2.7"
 gem "nokogiri", ">= 1.13.4"
 gem "rolify"
 gem "rspec-rails", "~> 5.0.0"
+gem "vite_rails"
 gem "webmock"
 gem "whenever"
 

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -178,6 +178,7 @@ GEM
       warden (~> 1.2.3)
     diff-lcs (1.5.0)
     docile (1.4.0)
+    dry-cli (0.7.0)
     dry-core (0.8.1)
       concurrent-ruby (~> 1.0)
     dry-monads (1.4.0)
@@ -373,7 +374,6 @@ GEM
       childprocess (>= 0.5, < 5.0)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2)
-    semantic_range (3.0.0)
     simplecov (0.21.2)
       docile (~> 1.1)
       simplecov-html (~> 0.11)
@@ -415,6 +415,13 @@ GEM
       axiom-types (~> 0.1)
       coercible (~> 1.0)
       descendants_tracker (~> 0.0, >= 0.0.3)
+    vite_rails (3.0.12)
+      railties (>= 5.1, < 8)
+      vite_ruby (~> 3.0, >= 3.2.2)
+    vite_ruby (3.2.3)
+      dry-cli (~> 0.7.0)
+      rack-proxy (~> 0.6, >= 0.6.1)
+      zeitwerk (~> 2.2)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.0)
@@ -430,11 +437,6 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.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)
@@ -499,10 +501,10 @@ DEPENDENCIES
   spring
   turbolinks (~> 5)
   tzinfo-data
+  vite_rails
   web-console (>= 4.1.0)
   webdrivers
   webmock
-  webpacker (~> 5.0)
   whenever
 
 BUNDLED WITH

diff --git a/Procfile.dev b/Procfile.dev
@@ -0,0 +1,3 @@
+
+vite: bin/vite dev
+web: bin/rails s
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -12,12 +12,12 @@
 *
 */
 
-@import "variables/typography";
-@import "components/container";
-@import "components/header";
-@import "components/footer";
-@import "components/works";
-@import "components/works/form";
+@import "variables/typography.scss";
+@import "components/container.scss";
+@import "components/header.scss";
+@import "components/footer.scss";
+@import "components/works.scss";
+@import "components/works/form.scss";
 
 .hidden {
   display: none;

diff --git a/app/assets/stylesheets/components/_container.scss b/app/assets/stylesheets/components/_container.scss
@@ -1,4 +1,4 @@
-@import "./variables/typography";
+@import "./variables/typography.scss";
 
 .container,
 .container-lg,

diff --git a/app/assets/stylesheets/components/footer.scss b/app/assets/stylesheets/components/footer.scss
@@ -1,4 +1,4 @@
-@import "./variables/typography";
+@import "./variables/typography.scss";
 
 #footer {
   font-family: "Open Sans", sans-serif;

diff --git a/app/assets/stylesheets/components/header.scss b/app/assets/stylesheets/components/header.scss
@@ -1,4 +1,4 @@
-@import "./variables/typography";
+@import "./variables/typography.scss";
 
 header {
   font-family: "Open Sans", sans-serif;

diff --git a/app/javascript/channels/index.js b/app/javascript/channels/index.js
diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js
@@ -0,0 +1,46 @@
+// To see this message, add the following to the `<head>` section in your
+// views/layouts/application.html.erb
+//
+//    <%= vite_client_tag %>
+//    <%= vite_javascript_tag 'application' %>
+console.log('Vite ⚡️ Rails')
+
+// If using a TypeScript entrypoint file:
+//     <%= vite_typescript_tag 'application' %>
+//
+// If you want to use .jsx or .tsx, add the extension:
+//     <%= vite_javascript_tag 'application.jsx' %>
+
+console.log('Visit the guide for more information: ', 'https://vite-ruby.netlify.app/guide/rails')
+
+// Example: Load Rails libraries in Vite.
+//
+// import * as Turbo from '@hotwired/turbo'
+// Turbo.start()
+//
+// import ActiveStorage from '@rails/activestorage'
+// ActiveStorage.start()
+//
+// Import all channels.
+const channels = import.meta.globEager('../channels/*.js')
+
+// Example: Import a stylesheet in app/frontend/index.css
+// import '~/index.css'
+
+import Turbolinks from "turbolinks"
+import * as ActiveStorage from "@rails/activestorage"
+// Provides @mention functionality in textboxes (adds to jQuery UI autocomplete)
+import "./vendor/jquery-ui-triggeredAutocomplete"
+import WorkForm from "./works/form"
+
+Turbolinks.start()
+ActiveStorage.start()
+
+$(document).ready( (event) => {
+
+  $(".work-form").each( (index, element) => {
+    const $element = $(element);
+    const work = $element.data('work');
+    const workForm = new WorkForm($element, work);
+  });
+});
diff --git a/app/javascript/packs/file_upload.js → app/javascript/entrypoints/file_upload.js b/app/javascript/packs/file_upload.js → app/javascript/entrypoints/file_upload.js
diff --git a/app/javascript/packs/orcid.js → app/javascript/entrypoints/orcid.js b/app/javascript/packs/orcid.js → app/javascript/entrypoints/orcid.js
diff --git a/...vendor/jquery-ui-triggeredAutocomplete.js → ...vendor/jquery-ui-triggeredAutocomplete.js b/...vendor/jquery-ui-triggeredAutocomplete.js → ...vendor/jquery-ui-triggeredAutocomplete.js
diff --git a/app/javascript/packs/works/form.js → app/javascript/entrypoints/works/form.js b/app/javascript/packs/works/form.js → app/javascript/entrypoints/works/form.js
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -25,6 +25,18 @@
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"/>
     <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
     <%= favicon_link_tag asset_path('favicon.png') %>
+    <%= vite_client_tag %>
+    <%= vite_javascript_tag 'application' %>
+    <!--
+      If using a TypeScript entrypoint file:
+        vite_typescript_tag 'application'
+
+      If using a .jsx or .tsx entrypoint, add the extension:
+        vite_javascript_tag 'application.jsx'
+
+      Visit the guide for more information: https://vite-ruby.netlify.app/guide/rails
+    -->
+
   </head>
 
   <body>
@@ -39,7 +51,7 @@
 
   <!-- Provides @mention functionality in textboxes (adds to jQuery UI autocomplete)-->
 
-  <%= javascript_pack_tag 'file_upload', 'data-turbolinks-track': 'reload' %>
-  <%= javascript_pack_tag 'orcid', 'data-turbolinks-track': 'reload' %>
-  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+  <%= vite_javascript_tag 'file_upload', 'data-turbolinks-track': 'reload' %>
+  <%= vite_javascript_tag 'orcid', 'data-turbolinks-track': 'reload' %>
+  <%= vite_javascript_tag 'application', 'data-turbolinks-track': 'reload' %>
 <% end %>
diff --git a/bin/vite b/bin/vite
@@ -0,0 +1,29 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+#
+# This file was generated by Bundler.
+#
+# The application 'vite' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+bundle_binstub = File.expand_path("../bundle", __FILE__)
+
+if File.file?(bundle_binstub)
+  if File.read(bundle_binstub, 300) =~ /This file was generated by Bundler/
+    load(bundle_binstub)
+  else
+    abort("Your `bin/bundle` was not generated by Bundler, so this binstub cannot run.
+Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.")
+  end
+end
+
+require "rubygems"
+require "bundler/setup"
+
+load Gem.bin_path("vite_ruby", "vite")
diff --git a/config/deploy.rb b/config/deploy.rb
@@ -12,3 +12,5 @@
 
 # Workaround for this issue: https://github.com/capistrano/rails/issues/235
 Rake::Task["deploy:assets:backup_manifest"].clear_actions
+
+set :assets_prefix, "describe/assets/"
diff --git a/config/environments/staging.rb b/config/environments/staging.rb
@@ -28,7 +28,7 @@
   # Compress CSS using a preprocessor.
   # config.assets.css_compressor = :sass
 
-  config.assets.prefix = "/describe/assets/"
+  config.assets.prefix = "vite-staging"
 
   # Do not fallback to assets pipeline if a precompiled asset is missed.
   config.assets.compile = false

diff --git a/config/initializers/content_security_policy.rb b/config/initializers/content_security_policy.rb
@@ -11,9 +11,21 @@
 #   policy.img_src     :self, :https, :data
 #   policy.object_src  :none
 #   policy.script_src  :self, :https
+    # Allow @vite/client to hot reload javascript changes in development
+#    policy.script_src *policy.script_src, :unsafe_eval, "http://#{ ViteRuby.config.host_with_port }" if Rails.env.development?
+
+    # You may need to enable this in production as well depending on your setup.
+#    policy.script_src *policy.script_src, :blob if Rails.env.test?
+
 #   policy.style_src   :self, :https
+    # Allow @vite/client to hot reload style changes in development
+#    policy.style_src *policy.style_src, :unsafe_inline if Rails.env.development?
+
 #   # If you are using webpack-dev-server then specify webpack-dev-server host
 #   policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?
+    # Allow @vite/client to hot reload changes in development
+#    policy.connect_src *policy.connect_src, "ws://#{ ViteRuby.config.host_with_port }" if Rails.env.development?
+
 
 #   # Specify URI for violation reports
 #   # policy.report_uri "/csp-violation-report-endpoint"

diff --git a/config/vite.json b/config/vite.json
@@ -0,0 +1,20 @@
+{
+  "all": {
+    "sourceCodeDir": "app/javascript",
+    "watchAdditionalPaths": []
+  },
+  "staging": {
+    "publicOutputDir": "vite-staging",
+    "port": 3036
+  },
+  "development": {
+    "autoBuild": true,
+    "publicOutputDir": "vite-dev",
+    "port": 3036
+  },
+  "test": {
+    "autoBuild": true,
+    "publicOutputDir": "vite-test",
+    "port": 3037
+  }
+}
diff --git a/package.json b/package.json
@@ -5,16 +5,13 @@
     "@rails/actioncable": "^6.0.0",
     "@rails/activestorage": "^6.0.0",
     "@rails/ujs": "^6.0.0",
-    "@rails/webpacker": "^5.4.3",
     "ejs": "^3.1.7",
-    "turbolinks": "^5.2.0",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12"
+    "turbolinks": "^5.2.0"
   },
   "version": "0.1.0",
   "devDependencies": {
-    "@webpack-cli/serve": "0.2.0",
     "command-line-args": "^5.2.1",
-    "webpack-dev-server": "^3.9.0"
+    "vite": "^3.0.0",
+    "vite-plugin-ruby": "^3.1.0"
   }
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import RubyPlugin from 'vite-plugin-ruby'
+
+export default defineConfig({
+  plugins: [
+    RubyPlugin(),
+  ],
+})