Switch to ESBuild

Author: stephendolan

Procfile.dev

@@ -1,3 +1,4 @@
 system_check: script/system_check && sleep 100000
 web: lucky watch --reload-browser
-assets: yarn watch
+js_assets: yarn watch:js
+css_assets: yarn watch:css

dockerfiles/webserver.Dockerfile

@@ -7,8 +7,8 @@ COPY shard.yml shard.lock ./
 RUN  shards install --production
 
 # Install the application Yarn dependencies, then compile production CSS/JS
-FROM node:16-alpine as webpack_build
-WORKDIR /webpack
+FROM node:16-alpine as asset_build
+WORKDIR /asset
 COPY . .
 RUN yarn install
 RUN yarn run prod
@@ -19,7 +19,7 @@ ENV LUCKY_ENV=production
 RUN apk --no-cache add yaml-static
 COPY . .
 COPY --from=crystal_dependencies /shards/lib lib
-COPY --from=webpack_build /webpack/public public
+COPY --from=asset_build /asset/public public
 RUN crystal build --static --release tasks.cr -o /usr/local/bin/lucky
 
 # Build the webserver binary
@@ -29,7 +29,7 @@ RUN apk --no-cache add yaml-static
 ENV LUCKY_ENV=production
 COPY . .
 COPY --from=crystal_dependencies /shards/lib lib
-COPY --from=webpack_build /webpack/public public
+COPY --from=asset_build /asset/public public
 RUN shards build --production --static --release
 RUN mv ./bin/webserver /usr/local/bin/webserver
 
@@ -40,5 +40,5 @@ RUN apk --no-cache add diffutils
 COPY generated generated
 COPY --from=lucky_tasks_build /usr/local/bin/lucky /usr/local/bin/lucky
 COPY --from=lucky_webserver_build /usr/local/bin/webserver webserver
-COPY --from=webpack_build /webpack/public public
+COPY --from=asset_build /asset/public public
 CMD ["./webserver"]

package.json

@@ -3,33 +3,33 @@
   "private": true,
   "dependencies": {
     "@hotwired/stimulus": "^3.1.0",
-    "@hotwired/stimulus-webpack-helpers": "^1.0.1",
     "@rails/ujs": "^7.0.3",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.7",
+    "autoprefixer": "^10.4.8",
     "diff2html": "^3.4.19",
+    "esbuild": "^0.15.7",
     "highlight.js": "^11.6.0",
     "postcss": "^8.4.16",
     "tailwindcss": "^3.1.8",
     "turbolinks": "^5.2.0"
   },
   "scripts": {
     "heroku-postbuild": "yarn prod",
-    "dev": "mix",
-    "watch": "mix watch",
-    "prod": "mix --production"
+    "build:js": "esbuild src/js/app.ts --bundle --sourcemap=inline --target=es2016 --outfile=public/js/app.js",
+    "build:css": "tailwindcss --postcss --input=src/css/app.css --output=public/css/app.css",
+    "watch:js": "esbuild src/js/app.ts --bundle --watch --sourcemap=inline --target=es2016 --outfile=public/js/app.js",
+    "watch:css": "tailwindcss --postcss --watch --input=src/css/app.css --output=public/css/app.css",
+    "prod:js": "esbuild src/js/app.ts --bundle --minify --sourcemap=inline --target=es2016 --outfile=public/js/app.js",
+    "prod:css": "tailwindcss --postcss --minify --input=src/css/app.css --output=public/css/app.css",
+    "prod": "yarn prod:js && yarn prod:css"
   },
   "devDependencies": {
-    "@babel/compat-data": "^7.19.0",
     "@types/node": "^18.7.15",
-    "@types/webpack-env": "^1.17.0",
     "browser-sync": "^2.27.10",
-    "compression-webpack-plugin": "^10.0.0",
-    "laravel-mix": "^6.0.49",
     "prettier": "^2.7.1",
     "resolve-url-loader": "5.0.0",
-    "ts-loader": "^9.3.1",
     "typescript": "^4.8.2"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+    tailwindcss: {},
+  },
+};

src/js/app.ts

@@ -7,9 +7,21 @@ require("@rails/ujs").start();
 // Turbolinks is optional. Learn more: https://github.com/turbolinks/turbolinks/
 require("turbolinks").start();
 
+// If using Turbolinks, you can attach events to page load like this:
+//
+// document.addEventListener("turbolinks:load", function() {
+//   ...
+// })
+
 import { Application } from "@hotwired/stimulus";
-import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers";
 
-const application = Application.start();
-const context = require.context("./controllers", true, /\.ts$/);
-application.load(definitionsFromContext(context));
+import DiffToHtmlController from "./controllers/diff_to_html_controller";
+
+declare global {
+  interface Window {
+    Stimulus: any;
+  }
+}
+
+let Stimulus = (window.Stimulus = Application.start());
+Stimulus.register("diff-to-html", DiffToHtmlController);