WIP: almost everything works but nothing works

.gitignore

@@ -66,3 +66,8 @@ yarn-*.log*
 # the recommendation of the gem. We also don't ignore .env since that's where default values for
 # configurations will go.
 .env*.local
+
+/app/assets/builds/*
+!/app/assets/builds/.keep
+
+/node_modules

Gemfile

@@ -36,13 +36,13 @@ gem "flatpickr"
 gem "font-awesome-rails", "~> 4.7"
 gem "jquery-fileupload-rails", "~> 1.0"
 gem "jquery-rails", "~> 4.3"
+gem "jsbundling-rails", "~> 1.0"
 gem "popper_js", "~> 1.14"
 gem "rails-backbone", git: "https://github.com/codebrew/backbone-rails.git"
 gem "react-rails", "~> 2.4"
 gem "select2-rails", "~> 4.0"
 gem "spinjs-rails", "~> 1.3.0" # Breaking changes in v1.4 (spin.js v2.0).
 gem "uglifier", "~> 4.2"
-gem "webpacker", "~> 5.4"
 
 # Authz and Authn
 gem "authlogic", "~> 6.1"

Gemfile.lock

@@ -327,6 +327,8 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    jsbundling-rails (1.3.0)
+      railties (>= 6.0.0)
     json (2.7.2)
     jwt (2.8.2)
       base64
@@ -411,8 +413,6 @@ GEM
     rack (2.2.9)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
-    rack-proxy (0.7.7)
-      rack
     rack-session (1.0.2)
       rack (< 3)
     rack-test (2.1.0)
@@ -580,7 +580,6 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    semantic_range (3.0.0)
     sentry-rails (5.18.1)
       railties (>= 5.0)
       sentry-ruby (~> 5.18.1)
@@ -637,11 +636,6 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.4)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     webrick (1.8.1)
     websocket (1.2.10)
     websocket-driver (0.7.6)
@@ -716,6 +710,7 @@ DEPENDENCIES
   iso-639 (~> 0.3.5)
   jquery-fileupload-rails (~> 1.0)
   jquery-rails (~> 4.3)
+  jsbundling-rails (~> 1.0)
   launchy (~> 2.5)
   letter_opener (~> 1.4)
   listen (~> 3.0)
@@ -775,7 +770,6 @@ DEPENDENCIES
   versionist (~> 2.0)
   warning (~> 1.3)
   webmock (~> 3.10)
-  webpacker (~> 5.4)
   whenever (~> 1.0)
   will_paginate (~> 3.1)
   will_paginate-bootstrap4 (~> 0.2.2)

Procfile.dev

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

app/assets/config/manifest.js

@@ -1,3 +1,4 @@
 //= link_tree ../images
-//= link_tree ../../../vendor/assets 
-//= link application.js
+//= link_tree ../../../vendor/assets
+//= link application.js
+//= link_tree ../builds

app/javascript/packs.js

@@ -0,0 +1,33 @@
+// Entry point for the build script in your package.json
+/* eslint no-console:0 */
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= javascript_include_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
+//
+// import * as Sentry from '@sentry/react';
+// import { Integrations } from '@sentry/tracing';
+//
+// const isOnline = !process.env.NEMO_OFFLINE_MODE || process.env.NEMO_OFFLINE_MODE === 'false';
+// if (isOnline && process.env.NODE_ENV !== 'test') {
+//   Sentry.init({
+//     dsn: process.env.NEMO_SENTRY_DSN,
+//     integrations: [new Integrations.BrowserTracing()],
+//
+//     // Uncomment to enable Sentry performance monitoring (disabled in favor of Scout).
+//     // Percentage between 0.0 - 1.0.
+//     // tracesSampleRate: 1.0,
+//   });
+// }
+
+// Support component names relative to this directory:
+const componentRequireContext = require.context('./components', true);
+const ReactRailsUJS = require('react_ujs');
+
+ReactRailsUJS.useContext(componentRequireContext);

app/views/layouts/application.html.erb

@@ -11,7 +11,7 @@
   <%= main_stylesheet_tag(params) %>
   <%= stylesheet_link_tag("disable_bootstrap_modal_transitions") if Rails.env.test? %>
   <%= javascript_include_tag("application") %>
-  <%= javascript_pack_tag("application") %>
+  <%= javascript_include_tag("packs") %>
   <%= csrf_meta_tags %>
 
   <%= javascript_doc_ready do %>
@@ -34,6 +34,7 @@
   <% end %>
 
   <%= yield(:per_page_js) %>
+    <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
 </head>
 <body class="<%= controller_name %>">
   <header class="<%= 'admin' if admin_mode? %>">

app/views/responses/enketo_form.html.erb

@@ -41,4 +41,4 @@
   <%= render(partial: "powered_by_enketo") %>
 <% end %>
 
-<%= javascript_pack_tag 'enketo' %>
+<%= javascript_include_tag 'enketo' %>

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 "$@"

config/initializers/assets.rb

@@ -8,7 +8,7 @@
 # Add additional assets to the asset load path.
 # Rails.application.config.assets.paths << Emoji.images_path
 # Add Yarn node_modules folder to the asset load path.
-Rails.application.config.assets.paths << Rails.root.join("node_modules")
+# Rails.application.config.assets.paths << Rails.root.join("node_modules")
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in the app/assets

config/webpack/webpack.config.js

@@ -0,0 +1,59 @@
+const path    = require("path")
+const webpack = require("webpack")
+// Extracts CSS into .css file
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+// Removes exported JavaScript files from CSS-only entries
+// in this example, entry.custom will create a corresponding empty custom.js file
+const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
+const mode = process.env.NODE_ENV === 'development' ? 'development' : 'production';
+
+module.exports = {
+  mode,
+  entry: {
+    packs: "./app/javascript/packs.js"
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js)$/,
+        use: ['babel-loader']
+      },
+      {
+        test: /node_modules\/(enketo-core|openrosa-xpath-evaluator)\//,
+        use: ['babel-loader']
+      },
+      {
+        test: /\.test\.js$/,
+        use: ['ignore-loader']
+      },
+      {
+        test: /\.(?:sc|c)ss$/i,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+      }
+    ]
+  },
+  output: {
+    filename: "[name].js",
+    sourceMapFilename: "[file].map",
+    chunkFormat: "module",
+    path: path.resolve(__dirname, "..", "..", "app/assets/builds"),
+  },
+  output: {
+    filename: "[name].js",
+    chunkFilename: "[name]-[contenthash].digested.js",
+    sourceMapFilename: "[file]-[fullhash].map",
+    path: path.resolve(__dirname, '..', '..', 'app/assets/builds'),
+    hashFunction: "sha256",
+    hashDigestLength: 64,
+  },
+  plugins: [
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1
+    }),
+    new RemoveEmptyScriptsPlugin(),
+    new MiniCssExtractPlugin(),
+  ],
+  optimization: {
+    moduleIds: 'deterministic',
+  }
+}