Migration from Webpacker to Importmap (#108)

* refactor: Migrated to importmap instead of webpacker Importmap (https://github.com/rails/importmap-rails) instead of the retired webpacker * Added bootstrap in proper importmap manner * refactor: Removed webpacker gem Removal of gem introduced a couple a breaking issues that were also addressed in this commit: - Turbolinks needed to replaced by turbo - Route to delete needed to follow a new format * fix: Fixed devise config to work with Turbo Devise had issues with Turbo and did'nt work out of the box: heartcombo/devise#5446 Workaround/solution as shown here: https://betterprogramming.pub/devise-auth-setup-in-rails-7-44240aaed4be * fix: Fixed delete format for Program * Undid changes required for windows local running * Removed yarn and webpacker steps from Github tests * Removed webpacker + yarn steps in makefile * Removed yarn and package.json from Dockerfile * fix: Fix to destroy tests failing The addition of the 'Turbo' library changed the way delete alert was shown. For some reason, test was too fast and click action does not work. Adding a 1 second delay before click fixed the test.
modulehandbook · Nov 4, 2022 · b3c43d1 · b3c43d1
1 parent bc2851d
commit b3c43d1
Show file tree

Hide file tree

Showing 40 changed files with 90 additions and 25,543 deletions.
diff --git a/.github/workflows/test-rails-app.yml b/.github/workflows/test-rails-app.yml
@@ -33,10 +33,6 @@ jobs:
           ruby-version: 2.7.2
       - name: Install dependencies
         run: bundle install
-      - name: Yarn Install
-        run: yarn install --check-files
-      - name: Compile Assets
-        run: bin/rails webpacker:compile
       - name: create test db
         run: rails db:create RAILS_ENV=test
         env:

diff --git a/Dockerfile b/Dockerfile
@@ -29,15 +29,11 @@ RUN set -ex \
   libxslt-dev \
   build-base \
   postgresql-dev \
-  yarn \
   && bundle config set --local without 'development test' \
   && bundle install
 #  tzdata \
 
 
-COPY package.json yarn.lock ./
-RUN yarn install --check-files
-
 ENTRYPOINT ["./entrypoints/docker-entrypoint.sh"]
 
 
@@ -60,8 +56,7 @@ ENV NODE_ENV development
 
 COPY . ./
 RUN bundle config --local --delete without && \
-    bundle install && \
-    yarn install --check-files
+    bundle install
 
 RUN set -ex && \
   apk del builddependencies && \

diff --git a/Gemfile b/Gemfile
@@ -16,14 +16,12 @@ gem 'pg'
 gem 'puma', '~> 5.6'
 # 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'
+# Turbo makes navigating your web application faster. Replaces turbo-links.
+gem 'turbo-rails'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.7'
 # Use Redis adapter to run Action Cable in production
-# gem 'redis', '~> 4.0'
+gem 'redis', '~> 4.0'
 # Use Active Model has_secure_password
 # gem 'bcrypt', '~> 3.1.7'
 
@@ -71,3 +69,5 @@ gem 'paper_trail'
 gem 'bootstrap', '~> 4.4.1'
 gem 'jquery-rails'
 gem 'redcarpet'
+
+gem "importmap-rails", "~> 1.1"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -115,6 +115,9 @@ GEM
       activesupport (>= 5.0)
     i18n (1.12.0)
       concurrent-ruby (~> 1.0)
+    importmap-rails (1.1.5)
+      actionpack (>= 6.0.0)
+      railties (>= 6.0.0)
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
@@ -171,8 +174,6 @@ GEM
       nio4r (~> 2.0)
     racc (1.6.0)
     rack (2.2.4)
-    rack-proxy (0.7.4)
-      rack
     rack-test (2.0.2)
       rack (>= 1.3)
     rails (7.0.4)
@@ -206,6 +207,7 @@ GEM
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     redcarpet (3.5.1)
+    redis (4.8.0)
     regexp_parser (2.6.0)
     request_store (1.5.1)
       rack (>= 1.4)
@@ -233,7 +235,6 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    semantic_range (3.0.0)
     simplecov (0.21.2)
       docile (~> 1.1)
       simplecov-html (~> 0.11)
@@ -251,9 +252,10 @@ GEM
     thor (1.2.1)
     tilt (2.0.11)
     timeout (0.3.0)
-    turbolinks (5.2.1)
-      turbolinks-source (~> 5.2)
-    turbolinks-source (5.2.0)
+    turbo-rails (1.3.2)
+      actionpack (>= 6.0.0)
+      activejob (>= 6.0.0)
+      railties (>= 6.0.0)
     tzinfo (2.0.5)
       concurrent-ruby (~> 1.0)
     warden (1.2.9)
@@ -267,11 +269,6 @@ GEM
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
       selenium-webdriver (~> 4.0)
-    webpacker (5.4.3)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     websocket (1.2.9)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
@@ -294,6 +291,7 @@ DEPENDENCIES
   capybara (>= 2.15)
   devise
   faraday
+  importmap-rails (~> 1.1)
   jbuilder (~> 2.7)
   jquery-rails
   launchy
@@ -305,14 +303,14 @@ DEPENDENCIES
   puma (~> 5.6)
   rails (~> 7.0.4)
   redcarpet
+  redis (~> 4.0)
   sass-rails (>= 6)
   selenium-webdriver
   simplecov
   spring
-  turbolinks (~> 5)
+  turbo-rails
   web-console (>= 3.3.0)
   webdrivers
-  webpacker (~> 5.0)
 
 RUBY VERSION
    ruby 2.7.2p137

diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -3,3 +3,5 @@
 //= require jquery3
 //= require popper
 //= require bootstrap-sprockets
+//= link_tree ../../javascript .js
+//= link_tree ../../../vendor/javascript .js
diff --git a/app/controllers/turbo_devise_controller.rb b/app/controllers/turbo_devise_controller.rb
@@ -0,0 +1,23 @@
+
+# Turbo does not work Devise out of the box
+# Issue on GitHub: https://github.com/heartcombo/devise/issues/5446
+# Workaround/fix: https://gorails.com/episodes/devise-hotwire-turbo & https://betterprogramming.pub/devise-auth-setup-in-rails-7-44240aaed4be
+#
+class TurboDeviseController < ApplicationController
+  class Responder < ActionController::Responder
+    def to_turbo_stream
+      controller.render(options.merge(formats: :html))
+    rescue ActionView::MissingTemplate => error
+      if get?
+        raise error
+      elsif has_errors? && default_action
+        render rendering_options.merge(formats: :html, status: :unprocessable_entity)
+      else
+        redirect_to navigation_location
+      end
+    end
+  end
+
+  self.responder = Responder
+  respond_to :html, :turbo_stream
+end
diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -0,0 +1,2 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+import "@hotwired/turbo-rails"
diff --git a/app/javascript/channels/consumer.js b/app/javascript/channels/consumer.js
diff --git a/app/javascript/channels/index.js b/app/javascript/channels/index.js
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
diff --git a/app/javascript/packs/hello_typescript.ts b/app/javascript/packs/hello_typescript.ts
diff --git a/app/javascript/packs/styles.xml b/app/javascript/packs/styles.xml
diff --git a/app/views/comments/_comments.html.erb b/app/views/comments/_comments.html.erb
@@ -11,7 +11,7 @@
         </td>
         <td class="text-right">
           <% if can? :edit, comment %><%= link_to 'Edit', edit_comment_path(comment) %> | <% end %>
-          <% if can? :destroy, comment %><%= link_to 'Delete', comment, method: :delete, data: { confirm: 'Are you sure?' } %><% end %>
+          <% if can? :destroy, comment %><%= link_to 'Delete', comment, data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' } %><% end %>
         </td>
       </tr>
       <tr>

diff --git a/app/views/course_programs/index.html.erb b/app/views/course_programs/index.html.erb
@@ -32,7 +32,7 @@
         <td><%= link_to 'Show', course_program %></td>
         <% if can? :edit, @course_program %>
         <td><%= link_to 'Edit', edit_course_program_path(course_program) %></td>
-        <td><%= link_to 'Destroy', course_program, method: :delete, data: { confirm: 'Are you sure?' } %></td>
+        <td><%= link_to 'Destroy', course_program, data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' } %></td>
         <% end %>
       </tr>
     <% end %>

diff --git a/app/views/courses/index.html.erb b/app/views/courses/index.html.erb
@@ -64,7 +64,7 @@ JSON: <%= link_to 'Export all Courses', export_courses_json_url %>
         <td><%= link_to 'Show', course %></td>
         <% if can? :edit, course %>
         <td><%= link_to 'Edit', edit_course_path(course) %></td>
-        <td><%= link_to 'Destroy', course, method: :delete, data: { confirm: 'Are you sure?' } %></td>
+        <td><%= link_to 'Destroy', course, data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' } %></td>
         <% end %>
         <td><%= link_to 'JSON', export_course_json_url(id: course.id) %></td>
         <td><%= link_to 'DOCX', export_course_docx_url(id: course.id) %></td>

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -4,12 +4,8 @@
     <title>ModuleHandbook</title>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
-    <script src="/docx/index.js"></script>
+    <%= javascript_importmap_tags %>
   </head>
 
   <body>

diff --git a/app/views/programs/_course_list.html.erb b/app/views/programs/_course_list.html.erb
@@ -30,7 +30,7 @@
         <td><%= link_to 'Show Link', course_program_path(course_program) %></td>
         <% if can? :edit, @program %>
         <td><%= link_to 'Edit Link', edit_course_program_path(course_program) %></td>
-        <td><%= link_to 'Delete Link', course_program, method: :delete, data: { confirm: 'Are you sure?' } %></td>
+        <td><%= link_to 'Delete Link', course_program, data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' } %></td>
         <% end %>
         <td><%= link_to 'JSON', export_course_json_url(id: course_program.course_id) %></td>
         <td><%= link_to 'DOCX', export_course_docx_url(id: course_program.course_id) %></td>

diff --git a/app/views/programs/index.html.erb b/app/views/programs/index.html.erb
@@ -38,7 +38,7 @@ JSON: <%= link_to 'Export all Programs', export_programs_json_url %>
         <td><%= link_to 'Show', program %></td>
         <% if can? :edit, program %>
         <td><%= link_to 'Edit', edit_program_path(program) %></td>
-        <td><%= link_to 'Destroy', program, method: :delete, id: "destroy_program_#{program.id}", data: { confirm: 'Are you sure?' } %></td>
+        <td><%= link_to 'Destroy', program, id: "destroy_program_#{program.id}", data: {turbo_method: :delete, turbo_confirm: 'Are you sure?' } %></td>
         <% end %>
         <td><%= link_to 'JSON', export_program_json_url(id: program.id) %></td>
         <td><%= link_to 'DOCX', export_program_docx_url(id: program.id) %></td>

diff --git a/babel.config.js b/babel.config.js
diff --git a/bin/importmap b/bin/importmap
@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+
+require_relative "../config/application"
+require "importmap/commands"
diff --git a/bin/spring b/bin/spring
diff --git a/bin/webpack b/bin/webpack
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
		import "@hotwired/turbo-rails"