Replace webpacker with updating gems #3398

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

FireLemons merged 49 commits into rubyforgood:main from FireLemons:replace_webpacker_with_jsbundling_rails_esbuild

May 25, 2022

.github/workflows/docker.yml

-Original file line number
+Diff line change
@@ Expand Up / @@ -32,5 +32,9 @@ jobs: @@
             run: docker-compose up -d
           - name: db:reset
             run: docker-compose exec -T web rails db:reset
+          - name: compile css
+            run: docker-compose exec -T web bundle exec rails css:build
+          - name: compile js
+            run: docker-compose exec -T web bundle exec rails javascript:build
           - name: Test
             run: docker-compose exec -T web bundle exec rspec spec

.github/workflows/rspec.yml

-Original file line number
+Diff line change
@@ Expand Up / @@ -60,7 +60,8 @@ jobs: @@
               yarn
               bundle exec rake db:create
               bundle exec rake db:schema:load
-              bundle exec rails webpacker:compile
+              bundle exec rails css:build
+              bundle exec rails javascript:build
           - name: Run rspec and upload code coverage
             env:
@@ Expand Down @@

.gitignore

-Original file line number
+Diff line change
@@ Expand Up / @@ -59,3 +59,9 @@ vendor/bundle/ @@
     default.nix
     npm-debug.log
+    # Ignore compiled assets
+    /app/assets/builds/*
+    # In case we want to keep something in the compiled assets directory
+    !/app/assets/builds/.keep

Gemfile

-Original file line number
+Diff line change
@@ Expand Up @@
     gem "filterrific" # filtering and sorting of models
     gem "image_processing", "~> 1.12" # Set of higher-level helper methods for image processing.
     gem "jbuilder" # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
+    gem "jsbundling-rails"
     gem "lograge" # log less so heroku papertrail quits rate limiting our logs
     gem "net-smtp", require: false # needed for ruby upgrade to 3.1.0 for some dang reason
     gem "net-pop" # needed for ruby upgrade to 3.1.0 https://www.ruby-lang.org/en/news/2021/12/25/ruby-3-1-0-released/
@@ Expand All @@
     gem "request_store"
     gem "sablon" # Word document templating tool for Case Court Reports
     gem "scout_apm"
+    gem "sprockets-rails" # The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
     gem "strong_migrations"
     gem "tzinfo-data", platforms: %i[mingw mswin x64_mingw jruby] # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
-    gem "webpacker" # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
     group :development, :test do
       gem "bullet" # Detect and fix N+1 queries
@@ Expand Down Expand Up / @@ -76,3 +77,5 @@ group :test do @@
     end
     # gem "pdf-reader", "~> 2.9"
+    gem "cssbundling-rails", "~> 1.1"

Gemfile.lock

-Original file line number
+Diff line change
@@ Expand Up / @@ -132,6 +132,8 @@ GEM @@
         crack (0.4.5)
           rexml
         crass (1.0.6)
+        cssbundling-rails (1.1.0)
+          railties (>= 6.0.0)
         database_cleaner-active_record (2.0.1)
           activerecord (>= 5.a)
           database_cleaner-core (~> 2.0.0)
@@ Expand Down Expand Up / @@ -232,6 +234,8 @@ GEM @@
         jbuilder (2.11.5)
           actionview (>= 5.0.0)
           activesupport (>= 5.0.0)
+        jsbundling-rails (1.0.2)
+          railties (>= 6.0.0)
         jwt (2.3.0)
         launchy (2.5.0)
           addressable (~> 2.7)
@@ Expand Down Expand Up / @@ -278,8 +282,6 @@ GEM @@
           net-protocol
           timeout
         nio4r (2.5.8)
-        nokogiri (1.13.6-arm64-darwin)
-          racc (~> 1.4)
         nokogiri (1.13.6-x86_64-darwin)
           racc (~> 1.4)
         nokogiri (1.13.6-x86_64-linux)
@@ Expand Down Expand Up / @@ -314,8 +316,6 @@ GEM @@
         rack (2.2.3)
         rack-attack (6.6.1)
           rack (>= 1.0, < 3)
-        rack-proxy (0.7.2)
-          rack
         rack-test (1.1.0)
           rack (>= 1.0, < 3)
         rails (7.0.3)
@@ Expand Down Expand Up / @@ -403,7 +403,6 @@ GEM @@
           childprocess (>= 0.5, < 5.0)
           rexml (~> 3.2, >= 3.2.5)
           rubyzip (>= 1.2.2)
-        semantic_range (3.0.0)
         shoulda-matchers (5.1.0)
           activesupport (>= 5.2.0)
         simplecov (0.21.2)
@@ Expand All / @@ -416,6 +415,13 @@ GEM @@
         spring (4.0.0)
         spring-commands-rspec (1.0.4)
           spring (>= 0.9.1)
+        sprockets (4.0.3)
+          concurrent-ruby (~> 1.0)
+          rack (> 1, < 3)
+        sprockets-rails (3.4.2)
+          actionpack (>= 5.2)
+          activesupport (>= 5.2)
+          sprockets (>= 3.0.0)
         standard (1.5.0)
           rubocop (= 1.23.0)
           rubocop-performance (= 1.12.0)
@@ Expand Down Expand Up / @@ -452,11 +458,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)
@@ Expand All / @@ -465,9 +466,7 @@ GEM @@
         zeitwerk (2.5.4)
     PLATFORMS
-      arm64-darwin-21
       x86_64-darwin-20
-      x86_64-darwin-21
       x86_64-linux
     DEPENDENCIES
@@ Expand All / @@ -483,6 +482,7 @@ DEPENDENCIES @@
       capybara-screenshot
       caxlsx (~> 3.2)
       caxlsx_rails (~> 0.6.3)
+      cssbundling-rails (~> 1.1)
       database_cleaner-active_record
       delayed_job_active_record
       devise
@@ Expand All / @@ -495,6 +495,7 @@ DEPENDENCIES @@
       httparty
       image_processing (~> 1.12)
       jbuilder
+      jsbundling-rails
       letter_opener
       lograge
       net-imap
@@ Expand Down Expand Up / @@ -523,6 +524,7 @@ DEPENDENCIES @@
       simplecov
       spring
       spring-commands-rspec
+      sprockets-rails
       standard (= 1.5.0)
       strong_migrations
       traceroute
@@ Expand All / @@ -531,7 +533,6 @@ DEPENDENCIES @@
       web-console (>= 3.3.0)
       webdrivers
       webmock
-      webpacker
     RUBY VERSION
        ruby 3.1.0p0
@@ Expand Down @@

Procfile.dev

-Original file line number
+Diff line change
@@ -0,0 +1,3 @@
+    web: bin/rails server -p 3000
+    js: yarn build --watch
+    css: yarn build:css --watch

README.md

-Original file line number
+Diff line change
@@ Expand Up @@
         requires running local postgres, with a role created for whatever user you're running rails as
 . `bin/rails db:seed:replant` generates test data (can be rerun to regenerate test data)
-    **Webpacker One Time Setup**
-    `bundle exec rails webpacker:compile`
     ### Platform Specific Installation Instructions
      - [Docker](doc/DOCKER.md)
      - [Linux](doc/LINUX_SETUP.md)
@@ Expand Down @@

0 app/javascript/src/images/.keep → app/assets/builds/.keep

File renamed without changes.

app/assets/config/manifest.js

-Original file line number
+Diff line change
@@ -0,0 +1,4 @@
+    //= link_directory ../builds .css
+    //= link_directory ../builds .js
+    //= link_tree ../images
+    //= link_tree ../fonts

app/assets/fonts/fa-solid-900.ttf

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		../../../node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf

app/assets/fonts/fa-solid-900.woff2

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		../../../node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2

0 ...cript/src/images/android-icon-192x192.png → app/assets/images/android-icon-192x192.png

File renamed without changes

0 ...ascript/src/images/apple-icon-114x114.png → app/assets/images/apple-icon-114x114.png

File renamed without changes

0 ...ascript/src/images/apple-icon-120x120.png → app/assets/images/apple-icon-120x120.png

File renamed without changes

0 ...ascript/src/images/apple-icon-144x144.png → app/assets/images/apple-icon-144x144.png

File renamed without changes

0 ...ascript/src/images/apple-icon-152x152.png → app/assets/images/apple-icon-152x152.png

File renamed without changes

0 ...ascript/src/images/apple-icon-180x180.png → app/assets/images/apple-icon-180x180.png

File renamed without changes

0 ...avascript/src/images/apple-icon-57x57.png → app/assets/images/apple-icon-57x57.png

File renamed without changes

0 ...avascript/src/images/apple-icon-60x60.png → app/assets/images/apple-icon-60x60.png

File renamed without changes

0 ...avascript/src/images/apple-icon-72x72.png → app/assets/images/apple-icon-72x72.png

File renamed without changes

0 ...avascript/src/images/apple-icon-76x76.png → app/assets/images/apple-icon-76x76.png

File renamed without changes

0 app/javascript/src/images/default-logo.png → app/assets/images/default-logo.png

File renamed without changes

0 app/javascript/src/images/default-logo.svg → app/assets/images/default-logo.svg

File renamed without changes

0 app/javascript/src/images/favicon-16x16.png → app/assets/images/favicon-16x16.png

File renamed without changes

0 app/javascript/src/images/favicon-32x32.png → app/assets/images/favicon-32x32.png

File renamed without changes

0 app/javascript/src/images/favicon-96x96.png → app/assets/images/favicon-96x96.png

File renamed without changes

0 app/javascript/src/images/icon-logo.png → app/assets/images/icon-logo.png

File renamed without changes

0 app/javascript/src/images/login.jpg → app/assets/images/login.jpg

File renamed without changes

0 app/javascript/src/images/logo.png → app/assets/images/logo.png

File renamed without changes

0 ...javascript/src/images/ms-icon-144x144.png → app/assets/images/ms-icon-144x144.png

File renamed without changes

0 app/javascript/src/images/rfglogo.png → app/assets/images/rfglogo.png

File renamed without changes

app/assets/stylesheets/application.scss

-Original file line number
+Diff line change
@@ -0,0 +1,36 @@
+    // links to stylesheets inside node_modules
+    @use "add2calendar/css/add2calendar";
+    @use "bootstrap/scss/bootstrap.scss" with (
+      $primary: #00447c
+    );
+    @use "bootstrap-datepicker/dist/css/bootstrap-datepicker";
+    @use "datatables.net-dt/css/jquery.dataTables";
+    @use "@fortawesome/fontawesome-free/scss/fontawesome";
+    @use "@fortawesome/fontawesome-free/scss/solid";
+    @use "select2/dist/css/select2";
+    // custom css for the app
+    @use "base/breakpoints";
+    @use "shared/dashboard";
+    @use "shared/flashes";
+    @use "shared/footer";
+    @use "shared/form";
+    @use "shared/layout";
+    @use "shared/navbar";
+    @use "shared/select2_additional_styles";
+    @use "shared/sidebar";
+    @use "shared/typography";
+    @use "shared/utilities";
+    @use "shared/noscript";
+    @use "pages/all_casa_admin_dashboard";
+    @use "pages/casa_cases";
+    @use "pages/case_contacts";
+    @use "pages/casa_org";
+    @use "pages/court_dates";
+    @use "pages/emancipation";
+    @use "pages/login";
+    @use "pages/password";
+    @use "pages/supervisors";
+    @use "pages/volunteers";

0 ...ipt/src/stylesheets/base/breakpoints.scss → app/assets/stylesheets/base/breakpoints.scss

File renamed without changes.

app/assets/stylesheets/base/variables.scss

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		$primary: #00447c;
		$red: #dc3545;

0 ...ript/src/stylesheets/pages/dashboard.scss → ...heets/pages/all_casa_admin_dashboard.scss

File renamed without changes.

...ipt/src/stylesheets/pages/casa_cases.scss → app/assets/stylesheets/pages/casa_cases.scss

-Original file line number
+Diff line change
@@ -1,3 +1,5 @@
+    @use "../base/breakpoints.scss" as screen-sizes;
     body.casa_cases {
       .form-header {
         h1 {
@@ Expand Down Expand Up / @@ -83,7 +85,7 @@ body.casa_cases { @@
       }
     }
-    @media only screen and (max-width: $small) {
+    @media only screen and (max-width: screen-sizes.$small) {
       body.casa_cases {
         .court-mandates {
           textarea, .add-court-mandate {
@@ Expand Down @@

0 ...cript/src/stylesheets/pages/casa_org.scss → app/assets/stylesheets/pages/casa_org.scss

File renamed without changes.

0 .../src/stylesheets/pages/case_contacts.scss → ...sets/stylesheets/pages/case_contacts.scss

File renamed without changes.

0 ...pt/src/stylesheets/pages/court_dates.scss → ...assets/stylesheets/pages/court_dates.scss

File renamed without changes.

0 ...t/src/stylesheets/pages/emancipation.scss → ...ssets/stylesheets/pages/emancipation.scss

File renamed without changes.

...vascript/src/stylesheets/pages/login.scss → app/assets/stylesheets/pages/login.scss

-Original file line number
+Diff line change
@@ Expand Up @@
       aside {
         background-position: right;
-        background-image: url("../images/login.jpg");
+        background-image: url("login.jpg");
         min-height: 700px;
         background-repeat: no-repeat;
         background-size: cover;
@@ Expand Down @@

...cript/src/stylesheets/pages/password.scss → app/assets/stylesheets/pages/password.scss

-Original file line number
+Diff line change
@@ -1,9 +1,11 @@
+    @use "../base/variables.scss" as globals;
     .password-box {
       width: 450px;
       margin: 10% auto;
       text-align: center;
       border-radius: 25px;
-      border: 2px solid $primary;
+      border: 2px solid globals.$primary;
       form#edit_user.edit_user div.field {
         margin: 0 auto;
@@ Expand Down @@

0 ...pt/src/stylesheets/pages/supervisors.scss → ...assets/stylesheets/pages/supervisors.scss

File renamed without changes.

...ipt/src/stylesheets/pages/volunteers.scss → app/assets/stylesheets/pages/volunteers.scss

-Original file line number
+Diff line change
@@ -1,5 +1,7 @@
+    @use "../base/breakpoints.scss" as screen-sizes;
     body.volunteers {
-      @media only screen and (max-width: $mobile) {
+      @media only screen and (max-width: screen-sizes.$mobile) {
         table#volunteers {
           tbody tr {
             padding-bottom: 2.5rem;
@@ Expand Down @@

0 ...ipt/src/stylesheets/shared/dashboard.scss → app/assets/stylesheets/shared/dashboard.scss

File renamed without changes.

0 ...cript/src/stylesheets/shared/flashes.scss → app/assets/stylesheets/shared/flashes.scss

File renamed without changes.

...script/src/stylesheets/shared/footer.scss → app/assets/stylesheets/shared/footer.scss

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,26 +1,27 @@
  
    @use "../base/variables" as globals;

    footer {

      padding: 2rem 0;

      text-align: center;

      background-color: $primary;

      background-color: globals.$primary;

      color: #fff;

      .default-footer {

        a.rfglink {

          color: #fff;

        }

        .rfglogo{

        .rfglogo {

          max-height: 3em;

        }

      }

      .terms-conditions-link {

        color:#fff;

      }

      .footer-logos{

      .footer-logos {

        .rfglink {

          .rfglogo{

          .rfglogo {

            max-height: 6em;

          }

        }

...vascript/src/stylesheets/shared/form.scss → app/assets/stylesheets/shared/form.scss

-Original file line number
+Diff line change
@@ -1,3 +1,5 @@
+    @use "../base/variables.scss" as globals;
     form {
       .field_with_errors {
         label {
@@ Expand All / @@ -6,7 +8,7 @@ form { @@
         }
         input {
-          border: 1px solid $red;
+          border: 1px solid globals.$red;
         }
       }
@@ Expand Down @@

...script/src/stylesheets/shared/layout.scss → app/assets/stylesheets/shared/layout.scss

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,3 +1,6 @@
  
    @use "../base/variables.scss" as globals;

    @use "../base/breakpoints.scss" as screen-sizes;

    body {

      background-color: #f4f7fa;

      min-width: 320px;

    @@ -25,7 +28,7 @@ h5 label {
  
    }

    .fa-car {

      color: $primary;

      color: globals.$primary;

    }

    div.row div.col-sm-12.form-header h1 {

    @@ -57,7 +60,7 @@ div.row.volunteer-filters {
  
    /* As 'mobile-label' class is mobile only, not display them on desktop view */

    @media only screen and (min-width: $mobile) {

    @media only screen and (min-width: screen-sizes.$mobile) {

      table.table {

        span.mobile-label {

          display: none;

    @@ -69,7 +72,7 @@ div.row.volunteer-filters {
  
      margin-bottom: 0.5em;

    }

    @media only screen and (max-width: $mobile) {

    @media only screen and (max-width: screen-sizes.$mobile) {

      .login-header {

        font-size: 0.75em !important;

      }

...script/src/stylesheets/shared/navbar.scss → app/assets/stylesheets/shared/navbar.scss

-Original file line number
+Diff line change
@@ -1,3 +1,5 @@
+    @use "../base/breakpoints.scss" as screen-sizes;
     .navbar {
       color: #fff;
       background: #00447c;
@@ Expand All / @@ -22,7 +24,7 @@ @@
       width: 40px;
     }
-    @media only screen and (max-width: $mobile) {
+    @media only screen and (max-width: screen-sizes.$mobile) {
       .navbar.mobile {
         display: flex;
         position: sticky;
@@ Expand Down @@

0 ...cript/src/stylesheets/shared/noscript.css → app/assets/stylesheets/shared/noscript.css

File renamed without changes.

0 ...cript/src/stylesheets/shared/select2.scss → ...ets/shared/select2_additional_styles.scss

File renamed without changes.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Replace webpacker with updating gems #3398

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!