Migrate from rails/webpacker to shakapacker (#200)

* Replace rails/webpacker with shakapacker

* Replace react-helmet with react-helmet-async

* Upate README

Gemfile

@@ -15,8 +15,8 @@ gem 'rails', '~> 7.0.8'
 # Use Sass to process CSS
 gem 'sassc-rails', '~> 2.1.2'
 
+gem 'shakapacker', '= 7.1'
 gem 'slack-ruby-client', '~> 2.0.0'
-gem 'webpacker', '~> 6.0.0.rc.6'
 
 gem 'bootsnap', '>= 1.4.4', require: false
 gem 'jwt', '>= 2.6.0'

Gemfile.lock

@@ -332,6 +332,11 @@ GEM
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
     semantic_range (3.0.0)
+    shakapacker (7.1.0)
+      activesupport (>= 5.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
     shoulda-matchers (5.3.0)
       activesupport (>= 5.2.0)
     signet (0.17.0)
@@ -380,11 +385,6 @@ GEM
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
       selenium-webdriver (~> 4.0)
-    webpacker (6.0.0.rc.6)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     webrick (1.8.1)
     websocket (1.2.9)
     websocket-driver (0.7.6)
@@ -432,6 +432,7 @@ DEPENDENCIES
   rubocop (~> 1.22)
   sassc-rails (~> 2.1.2)
   selenium-webdriver (~> 4.8.1)
+  shakapacker (= 7.1)
   shoulda-matchers (~> 5.3.0)
   slack-ruby-client (~> 2.0.0)
   stimulus-rails (~> 1.2.1)
@@ -441,7 +442,6 @@ DEPENDENCIES
   tzinfo-data
   web-console (>= 4.1.0)
   webdrivers (~> 5.2.0)
-  webpacker (~> 6.0.0.rc.6)
 
 RUBY VERSION
    ruby 3.2.1p31

Makefile

@@ -5,7 +5,7 @@ start:
 	foreman start
 
 start_client:
-	bin/webpack-dev-server
+	bin/shakapacker-dev-server
 
 start_server:
 	rails server

Procfile.dev

@@ -1,4 +1,4 @@
 web: bundle exec rails s
-webpacker: ./bin/webpack-dev-server
+webpacker: ./bin/shakapacker-dev-server
 js: yarn build --watch
 css: yarn build:css --watch

README.md

@@ -67,7 +67,7 @@ Alternatively, you may run the frontend and backend servers separately with thes
 
 ```
 rails s
-bin/webpack-dev-server
+bin/shakapacker-dev-server
 ```
 
 This may be helpful for debugging, but generally should not be necessary.

app/javascript/components/pages/Donate.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import propTypes from 'prop-types';
 import SharedLayout from 'components/layout/SharedLayout';
 import Banner from 'components/Banner';

app/javascript/components/pages/Home.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import SharedLayout from 'components/layout/SharedLayout';
 import SplashBackground from 'components/icons/SplashBackground';
 import Button from 'components/Button';

app/javascript/components/pages/Jobs.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import propTypes from 'prop-types';
 import { useCookies } from 'react-cookie';
 import SharedLayout from 'components/layout/SharedLayout';

app/javascript/components/pages/JobsAuthenticate.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useCookies } from 'react-cookie';
 import SharedLayout from 'components/layout/SharedLayout';
 import Logo from 'components/icons/Logo';

app/javascript/components/pages/JoinUs.jsx

@@ -1,7 +1,7 @@
 /*global grecaptcha*/
 /*eslint no-undef: "error"*/
 import React from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { Formik, Field, Form, ErrorMessage } from 'formik';
 import * as Yup from 'yup';
 

app/javascript/components/pages/Meetups.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { getPastMeetups } from '../../datasources';
 import SharedLayout from 'components/layout/SharedLayout';
 import LoadingSpinner from 'components/LoadingSpinner';

app/javascript/components/pages/PastMeetup.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import PropTypes from 'prop-types';
 import { getPastMeetup } from '../../datasources';
 import SharedLayout from 'components/layout/SharedLayout';

app/javascript/components/pages/SponsorUs.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import SharedLayout from 'components/layout/SharedLayout';
 import SponsorCard from '../sponsor_us/SponsorCard';
 import PageTitleWithContainer from 'components/PageTitleWithContainer';

app/javascript/packs/application.js

@@ -8,7 +8,6 @@ import * as ActiveStorage from '@rails/activestorage';
 import 'channels';
 
 import '../stylesheets/application.scss';
-import '../stylesheets/page.scss';
 import 'bootstrap-icons/font/bootstrap-icons.css';
 
 // Rails.start();

app/javascript/packs/donate.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import Donate from 'components/pages/Donate';
 
 document.addEventListener('DOMContentLoaded', () => {
     const container = document.getElementById('root');
     const root = createRoot(container);
 
-    root.render(<Donate />);
+    root.render(
+        <HelmetProvider>
+            <Donate />
+        </HelmetProvider>,
+    );
 });

app/javascript/packs/home_page.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import Home from 'components/pages/Home';
 
 document.addEventListener('DOMContentLoaded', () => {
     const container = document.getElementById('root');
     const root = createRoot(container);
 
-    root.render(<Home />);
+    root.render(
+        <HelmetProvider>
+            <Home />
+        </HelmetProvider>,
+    );
 });

app/javascript/packs/jobs.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import Jobs from 'components/pages/Jobs';
 
 document.addEventListener('DOMContentLoaded', () => {
     const container = document.getElementById('root');
     const root = createRoot(container);
 
-    root.render(<Jobs />);
+    root.render(
+        <HelmetProvider>
+            <Jobs />
+        </HelmetProvider>,
+    );
 });

app/javascript/packs/jobs_authenticate.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import JobsAuthenticate from 'components/pages/JobsAuthenticate';
 
 document.addEventListener('DOMContentLoaded', () => {
     const container = document.getElementById('root');
     const root = createRoot(container);
 
-    root.render(<JobsAuthenticate />);
+    root.render(
+        <HelmetProvider>
+            <JobsAuthenticate />
+        </HelmetProvider>,
+    );
 });

app/javascript/packs/join_us.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import JoinUs from 'components/pages/JoinUs';
 
 document.addEventListener('DOMContentLoaded', () => {
     const container = document.getElementById('root');
     const root = createRoot(container);
 
-    root.render(<JoinUs />);
+    root.render(
+        <HelmetProvider>
+            <JoinUs />
+        </HelmetProvider>,
+    );
 });

app/javascript/packs/meetups.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import Meetups from 'components/pages/Meetups';
 
 document.addEventListener('DOMContentLoaded', () => {
     const container = document.getElementById('root');
     const root = createRoot(container);
 
-    root.render(<Meetups />);
+    root.render(
+        <HelmetProvider>
+            <Meetups />
+        </HelmetProvider>,
+    );
 });

app/javascript/packs/past_meetup.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import PastMeetup from '../components/pages/PastMeetup';
 
 document.addEventListener('DOMContentLoaded', () => {
     const container = document.getElementById('root');
     const root = createRoot(container);
 
-    root.render(<PastMeetup />);
+    root.render(
+        <HelmetProvider>
+            <PastMeetup />
+        </HelmetProvider>,
+    );
 });

app/javascript/packs/sponsor_us.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import SponsorUs from 'components/pages/SponsorUs';
 
 document.addEventListener('DOMContentLoaded', () => {
     const container = document.getElementById('root');
     const root = createRoot(container);
 
-    root.render(<SponsorUs />);
+    root.render(
+        <HelmetProvider>
+            <SponsorUs />
+        </HelmetProvider>,
+    );
 });

app/javascript/stylesheets/application.scss

@@ -1,3 +1,28 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
+
+
+body {
+  @apply antialiased text-base;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: 'pnum';
+  font-variant-numeric: proportional-nums;
+  padding: 0;
+  margin: 2.8rem 0 0;
+  height: 100%;
+  font-family: Rubik;
+  color: #4a4a4a;
+  font-size: 0.95rem;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  &.admin {
+      min-height: auto;
+  }
+}
+
+p a {
+  @apply underline;
+}

app/views/site/home.html.erb

@@ -1,2 +1,2 @@
-<%= javascript_pack_tag 'home_page' %>
-<%= stylesheet_pack_tag "home_page" %>
+<%= append_javascript_pack_tag 'home_page' %>
+<%= append_stylesheet_pack_tag "home_page" %>

app/views/site/jobs.html.erb

@@ -1,2 +1,2 @@
-<%= javascript_pack_tag 'jobs' %>
-<%= stylesheet_pack_tag 'jobs' %>
+<%= append_javascript_pack_tag 'jobs' %>
+<%= append_stylesheet_pack_tag 'jobs' %>

app/views/site/jobs_authenticate.html.erb

@@ -1,2 +1,2 @@
-<%= javascript_pack_tag 'jobs_authenticate' %>
-<%= stylesheet_pack_tag 'jobs_authenticate' %>
+<%= append_javascript_pack_tag 'jobs_authenticate' %>
+<%= append_stylesheet_pack_tag 'jobs_authenticate' %>

app/views/site/join_us.html.erb

@@ -1,5 +1,5 @@
-<%= javascript_pack_tag 'join_us' %>
-<%= stylesheet_pack_tag 'join_us' %>
+<%= append_javascript_pack_tag 'join_us' %>
+<%= append_stylesheet_pack_tag 'join_us' %>
 <%- if ENV.fetch('RECAPTCHA_ENABLED', nil) == 'true' %>
   <%= javascript_tag do %>
     var gtoken= '<%=raw(ENV.fetch('RECAPTCHA_SITE_KEY', nil))%>'

app/views/site/meetups.html.erb

@@ -1,2 +1,2 @@
-<%= javascript_pack_tag 'meetups' %>
-<%= stylesheet_pack_tag "meetups" %>
+<%= append_javascript_pack_tag 'meetups' %>
+<%= append_stylesheet_pack_tag "meetups" %>

app/views/site/past_meetup.erb

@@ -1,5 +1,5 @@
-<%= javascript_pack_tag 'past_meetup' %>
-<%= stylesheet_pack_tag "past_meetup" %>
+<%= append_javascript_pack_tag 'past_meetup' %>
+<%= append_stylesheet_pack_tag "past_meetup" %>
 <%= javascript_tag do %>
   var year = <%= raw(h(params[:year])) %>;
   var month = <%= raw(h(params[:month])) %>;

app/views/site/sponsor_us.html.erb

@@ -1,2 +1,2 @@
-<%= javascript_pack_tag 'sponsor_us' %>
-<%= stylesheet_pack_tag "sponsor_us" %>
+<%= append_javascript_pack_tag 'sponsor_us' %>
+<%= append_stylesheet_pack_tag "sponsor_us" %>