Eject webpacker for jsbundling-rails

Signed-off-by: Josh W Lewis <[email protected]>

Update Gemfile.lock

Signed-off-by: Josh W Lewis <[email protected]>

Additional adjustments to asset pipeline

Use inline image assets, drop sass-rails

Signed-off-by: Josh W Lewis <[email protected]>

.gitignore

@@ -47,3 +47,6 @@ package-lock.json
 
 # Ignore asdf versions
 .tool-versions
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

Gemfile

@@ -11,9 +11,8 @@ gem 'rack-attack'
 gem 'rack-cors'
 gem 'rails', '~> 6.1.0'
 gem 'rollbar'
-gem 'sass-rails', '>= 6'
 gem 'toml'
-gem 'webpacker', '~> 5.2', '>= 5.2.1'
+gem 'jsbundling-rails', '~> 1.3'
 
 group :development, :test do
   gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]

Gemfile.lock

@@ -82,6 +82,8 @@ GEM
       activesupport (>= 5.0)
     i18n (1.12.0)
       concurrent-ruby (~> 1.0)
+    jsbundling-rails (1.3.1)
+      railties (>= 6.0.0)
     json_schema (0.21.0)
     listen (3.5.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
@@ -127,8 +129,6 @@ GEM
       rack (>= 1.0, < 3)
     rack-cors (1.1.1)
       rack (>= 2.0.0)
-    rack-proxy (0.6.5)
-      rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rails (6.1.3)
@@ -177,17 +177,6 @@ GEM
     rubocop-ast (1.4.1)
       parser (>= 2.7.1.5)
     ruby-progressbar (1.11.0)
-    sass-rails (6.0.0)
-      sassc-rails (~> 2.1, >= 2.1.1)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    sassc-rails (2.1.2)
-      railties (>= 4.0.0)
-      sassc (>= 2.0)
-      sprockets (> 3.0)
-      sprockets-rails
-      tilt
-    semantic_range (3.0.0)
     simplecov (0.21.2)
       docile (~> 1.1)
       simplecov-html (~> 0.11)
@@ -202,18 +191,12 @@ GEM
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
     thor (1.1.0)
-    tilt (2.0.10)
     toml (0.2.0)
       parslet (~> 1.8.0)
     tzinfo (2.0.5)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.0.0)
     vcr (6.0.0)
-    webpacker (5.2.1)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     websocket-driver (0.7.3)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -226,6 +209,7 @@ DEPENDENCIES
   byebug
   committee
   dotenv-rails
+  jsbundling-rails (~> 1.3)
   listen (~> 3.3)
   minitest-reporters
   mocha
@@ -238,12 +222,10 @@ DEPENDENCIES
   rails (~> 6.1.0)
   rollbar
   rubocop
-  sass-rails (>= 6)
   simplecov
   toml
   tzinfo-data
   vcr
-  webpacker (~> 5.2, >= 5.2.1)
 
 RUBY VERSION
    ruby 2.7.2p137

Procfile.dev

@@ -0,0 +1,2 @@
+web: env RUBY_DEBUG_OPEN=true bin/rails server
+js: yarn build --watch

README.md

@@ -180,10 +180,10 @@ Run the tests:
 ```
 $ make test
 ```
-Then run the app:
+Then run the Rails app and asset watcher/compiler with:
 
 ```
-$ bundle exec rails s
+$ ./bin/dev
 ```
 
 In other terminal session, run the background worker to create the index:

app/assets/config/manifest.js

@@ -1,2 +1,2 @@
 //= link_tree ../images
-//= link_directory ../stylesheets .css
+//= link_tree ../builds

app/javascript/application.js

@@ -0,0 +1,2 @@
+// Entry point for the build script in your package.json
+import Index from "./packs/Index.tsx";

app/javascript/components/search/Search.tsx

@@ -49,7 +49,7 @@ class Search extends React.Component<{}, { searchTerm: string, searchResults: an
         if (this.state.loading || (this.state.searchResults.length === 0 && this.state.searchTerm === '')) {
             summary = null;
         }
-       
+
         return (
             <div className="Search">
                 <div className="Search-header">
@@ -72,7 +72,7 @@ class Search extends React.Component<{}, { searchTerm: string, searchResults: an
             </div>
         );
     }
-    
+
     async keyPressed(e: any) {
         const searchTerm = (e.target.value + '').trim();
         if (searchTerm === '' || e.keyCode !== 13) {
@@ -93,7 +93,7 @@ class Search extends React.Component<{}, { searchTerm: string, searchResults: an
         this.setState({
             formValue: a
         });
-        
+
         await this.fetchSearchResults(a);
     }
 
@@ -103,7 +103,7 @@ class Search extends React.Component<{}, { searchTerm: string, searchResults: an
         }
 
         try {
-            const apiHost = process.env.CNB_API_HOST || 'https://cnb-registry-api.herokuapp.com';
+            const apiHost = process.env.CNB_API_HOST;
             const link = `${apiHost}/api/v1/search?matches=${searchText}`;
             const response: AxiosResponse = await Axios.get(link);
             if (response.status >= 200 && response.status < 300) {

app/javascript/packs/Index.tsx

@@ -1,7 +1,5 @@
 import React from "react";
 import { render } from "react-dom";
-import 'bootstrap/dist/css/bootstrap.min.css';
-import 'bootstrap/dist/js/bootstrap.bundle.min';
 import App from "../components/App";
 
 document.addEventListener("DOMContentLoaded", () => {

app/views/layouts/application.html.erb

@@ -8,9 +8,9 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-    <%= stylesheet_pack_tag 'application', media: 'all' %>
+    <%= stylesheet_link_tag 'application', media: 'all' %>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <%= javascript_pack_tag 'Index' %>
+    <%= javascript_include_tag "application", type: "module" %>
   </head>
 
   <body>

bin/dev

@@ -0,0 +1,11 @@
+#!/usr/bin/env sh
+
+if gem list --no-installed --exact --silent foreman; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+# Default to port 3000 if not specified
+export PORT="${PORT:-3000}"
+
+exec foreman start -f Procfile.dev --env /dev/null "$@"

config/webpack/webpack.config.js

@@ -0,0 +1,54 @@
+const path    = require("path")
+const webpack = require("webpack")
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const mode = process.env.NODE_ENV === 'development' ? 'development' : 'production';
+
+module.exports = {
+  mode,
+  entry: {
+    application: [
+      "./app/javascript/application.js",
+      './app/assets/stylesheets/application.css',
+    ],
+  },
+  optimization: {
+    moduleIds: 'deterministic',
+  },
+  output: {
+    filename: "[name].js",
+    chunkFilename: "[name]-[contenthash].digested.js",
+    sourceMapFilename: "[file]-[fullhash].map",
+    path: path.resolve(__dirname, '..', '..', 'app/assets/builds'),
+    hashFunction: "sha256",
+    hashDigestLength: 64,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx|)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader'],
+      },
+      {
+        test: /\.(?:sa|sc|c)ss$/i,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.(png|jpe?g|svg)$/i,
+        type: 'asset/inline'
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss', '.css', '.png', '.svg'],
+  },
+  plugins: [
+    new MiniCssExtractPlugin(),
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1
+    }),
+    new webpack.EnvironmentPlugin({
+      CNB_API_HOST: 'https://cnb-registry-api.herokuapp.com'
+    })
+  ]
+}