Switch to ESBuild (#567)

* First commit for esbuild over webpack mix

* Get Stimulus working

* Make a yarn prod command that works

* Update webpack terminology

.gitignore

@@ -10,7 +10,6 @@ start_server
 /tmp
 /public/js
 /public/css
-/public/mix-manifest.json
 /node_modules
 yarn-error.log
 .DS_Store

Procfile.dev

@@ -1,4 +1,5 @@
 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
 docker: docker-compose up

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:alpine as webpack_build
-WORKDIR /webpack
+FROM node:alpine as asset_build
+WORKDIR /assets
 COPY . .
 RUN yarn install
 RUN yarn 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 /assets/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 /assets/public public
 RUN shards build --production --static --release
 RUN mv ./bin/webserver /usr/local/bin/webserver
 
@@ -46,5 +46,5 @@ RUN apk --no-cache add postgresql-client
 COPY --from=release_script_build /usr/local/bin/release release
 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 /assets/public public
 CMD ["./release"]

package.json

@@ -2,36 +2,33 @@
   "license": "UNLICENSED",
   "private": true,
   "dependencies": {
-    "@fontsource/inter": "^4.5.1",
     "@hotwired/stimulus": "^3.0.1",
-    "@hotwired/stimulus-webpack-helpers": "^1.0.1",
     "@rails/ujs": "^6.1.4",
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/forms": "^0.3.4",
     "@tailwindcss/typography": "^0.4.1",
+    "autoprefixer": "^10.3.6",
+    "esbuild": "^0.13.3",
     "postcss": "^8.4.5",
     "tailwindcss": "^2.2.19",
     "turbolinks": "^5.2.0"
   },
   "scripts": {
     "heroku-postbuild": "yarn prod",
-    "dev": "TAILWIND_MODE=build yarn run mix",
-    "watch": "yarn run mix watch",
-    "prod": "yarn run 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.16.4",
     "@types/node": "^16.11.12",
-    "@types/webpack-env": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
     "browser-sync": "^2.27.7",
-    "compression-webpack-plugin": "^9.1.1",
-    "eslint": "^7.32.0",
-    "laravel-mix": "^6.0.34",
     "prettier": "^2.5.1",
     "resolve-url-loader": "4.0.0",
-    "ts-loader": "^9.2.6",
+    "tailwindcss-font-inter": "^3.0.0",
     "typescript": "^4.5.3"
   }
 }

postcss.config.js

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

public/mix-manifest.json

@@ -0,0 +1,4 @@
+{
+  "/js/app.js": "/js/app.js",
+  "/css/app.css": "/css/app.css"
+}

script/setup

@@ -12,10 +12,6 @@ print_done
 
 notice "Installing node dependencies"
 yarn install --no-progress | indent
-
-notice "Compiling assets"
-yarn dev | indent
-
 print_done
 
 notice "Installing shards"

src/js/app.ts

@@ -7,17 +7,25 @@ require("@rails/ujs").start();
 // Turbolinks is optional. Learn more: https://github.com/turbolinks/turbolinks/
 require("turbolinks").start();
 
-import "@fontsource/inter";
-
 // 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 HelloController from "./controllers/hello_controller";
+import RemovableController from "./controllers/removable_controller";
+import ToggleController from "./controllers/toggle_controller";
+
+declare global {
+  interface Window {
+    Stimulus: any;
+  }
+}
+
+let Stimulus = (window.Stimulus = Application.start());
+Stimulus.register("hello", HelloController);
+Stimulus.register("toggle", ToggleController);
+Stimulus.register("removable", RemovableController);

src/pages/auth_layout.cr

@@ -18,7 +18,7 @@ abstract class AuthLayout
     html lang: "en" do
       mount Shared::LayoutHead, page_title: page_title
 
-      body do
+      body class: "font-inter" do
         mount Shared::Navbar, simple: true
         mount Shared::FlashMessages, context.flash
         content

src/pages/main_layout.cr

@@ -14,7 +14,7 @@ abstract class MainLayout
     html lang: "en" do
       mount Shared::LayoutHead, page_title: page_title
 
-      body class: "min-h-screen bg-gray-100" do
+      body class: "font-inter min-h-screen bg-gray-100" do
         mount Shared::Navbar, user: current_user
         mount Shared::FlashMessages, context.flash
 

tailwind.config.js

@@ -25,5 +25,6 @@ module.exports = {
     require("@tailwindcss/forms"),
     require("@tailwindcss/typography"),
     require("@tailwindcss/aspect-ratio"),
+    require("tailwindcss-font-inter"),
   ],
 };