Use esbuild Instead of Snowpack (and fix build error) (#530)

.eslintrc.cjs

@@ -28,7 +28,7 @@ module.exports = {
     ],
     'import/no-extraneous-dependencies': [
       'error',
-      { devDependencies: ['**/*.test.*', '**/*.spec.*'] },
+      { devDependencies: ['**/*.test.*', '**/*.spec.*', 'build.js'] },
     ],
     'import/order': [
       'error',

.gitignore

@@ -1,6 +1,4 @@
-lib
-assets/css
-build
+/build
 
 # Created by https://www.toptal.com/developers/gitignore/api/node
 # Edit at https://www.toptal.com/developers/gitignore?templates=node

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm exec lint-staged

build.js

@@ -0,0 +1,87 @@
+import {spawn} from 'node:child_process';
+import * as esbuild from 'esbuild';
+import {copy} from 'esbuild-plugin-copy';
+import {sassPlugin} from 'esbuild-sass-plugin';
+
+
+/** @param {string} prog
+ * @param {string[]} [args=[]] 
+ * @returns {[ChildProcess, Promise<{ret: number, sig: NodeJS.Signals}>]}
+ */
+function cmd(prog, args=[]) {
+    const proc = spawn(prog, args, { cwd: import.meta.dirname, stdio: "inherit", env: process.env});
+    const done = new Promise((resolve, _reject) => {
+        proc.addListener('exit',(ret, sig)=>{
+            resolve({ret,sig});
+        })
+    });
+    return [proc, done];
+}
+
+/** @type import('esbuild').Plugin */
+const typechecker = {
+    name: 'typechecker', 
+    setup(build) {
+        build.onStart(async () => {
+            const [_tsc, tscDone] = cmd('pnpm', ['tsc', '-p', 'tsconfig.browser.json']);
+            const {ret} = await tscDone;
+            if (ret !== 0) {
+                return {warnings: [{text:`Type checking failed: tsc exited with code ${ret}`}]}
+            }
+            return {};
+        });
+    }
+};
+
+/** @param {boolean} watching
+ */
+async function buildClient(watching){
+
+    /** @type {esbuild.BuildOptions} */
+    const esConf = {
+        entryPoints: ['src/client/wetty.ts', 'src/client/dev.ts'],
+        outdir: 'build/client',
+        bundle: true,
+        platform: 'browser',
+        format: 'esm',
+        minify: !watching,
+        sourcemap: !watching,
+        plugins: [
+            typechecker,
+            sassPlugin({
+                embedded: true,
+                loadPaths: ['node_modules'],
+                style: watching ? 'expanded' : 'compressed',
+            }),
+            copy({
+                assets: [
+                    {from: './src/assets/xterm_config/*', to: 'xterm_config'},
+                    {from: './src/assets/favicon.ico', to: 'favicon.ico'},
+                ],
+                watch: watching,
+            }),
+        ],
+        logLevel: 'info',
+    };
+
+    if (watching) {
+        const buildCtx = await esbuild.context(esConf)
+        await buildCtx.watch();
+    } else {
+        esbuild.build(esConf);
+    }
+}
+
+/** @param {boolean} watching
+ */
+async function buildServer(watching) {
+    const tscArgs = ['tsc', '-p', 'tsconfig.node.json'];
+    if (watching) tscArgs.push('--watch','--preserveWatchOutput');
+    const [_tsc, tscDone] = cmd('pnpm', tscArgs);
+    if (!watching) await tscDone;
+}
+
+const watching = process.argv.includes('--watch');
+await buildClient(watching);
+await buildServer(watching);
+

package.json

@@ -13,26 +13,22 @@
     "conf/"
   ],
   "scripts": {
-    "build": "snowpack build",
+    "build": "node build.js",
     "clean": "rm -rf build",
     "contributor": "all-contributors",
-    "dev": "NODE_ENV=development concurrently --kill-others --success first \"snowpack build --watch\" \"nodemon . --conf conf/config.json5\"",
+    "dev": "NODE_ENV=development concurrently --kill-others --raw --success first \"pnpm build --watch\" \"nodemon -w build -i build/client -w conf/config.json5 --delay 200ms . -- --conf conf/config.json5\"",
     "docker-compose-entrypoint": "ssh-keyscan -H wetty-ssh >> ~/.ssh/known_hosts; pnpm start",
     "lint": "eslint src",
     "lint:fix": "eslint --fix src",
     "start": "NODE_ENV=production node .",
-    "test": "mocha"
+    "test": "mocha",
+    "prepare": "husky install"
   },
   "repository": "git://github.com/butlerx/wetty.git",
   "author": "Cian Butler <[email protected]> (cianbutler.ie)",
   "bugs": {
     "url": "https://github.com/butlerx/wetty/issues"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "lint-staged": {
     "*.{js,ts}": [
       "eslint --fix"
@@ -44,54 +40,6 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "nodemonConfig": {
-    "ignore": [
-      "*.scss",
-      "src/*",
-      "*.json"
-    ]
-  },
-  "snowpack": {
-    "buildOptions": {
-      "metaUrlPath": "web_modules"
-    },
-    "packageOptions": {
-      "sourceMap": true,
-      "installTypes": true
-    },
-    "mount": {
-      "src/client": "/client",
-      "src/assets": "/assets"
-    },
-    "exclude": [
-      "src/server/**/*.ts",
-      "src/client/**/*.spec.ts",
-      "src/*.ts"
-    ],
-    "plugins": [
-      [
-        "@snowpack/plugin-run-script",
-        {
-          "cmd": "tsc -p tsconfig.browser.json --noEmit",
-          "watch": "$1 --watch"
-        }
-      ],
-      [
-        "@snowpack/plugin-run-script",
-        {
-          "cmd": "sass src/assets/scss:build/assets/css --load-path=node_modules -s compressed --no-source-map",
-          "watch": "$1 --watch"
-        }
-      ],
-      [
-        "@snowpack/plugin-run-script",
-        {
-          "cmd": "tsc -p tsconfig.node.json",
-          "watch": "$1 --watch"
-        }
-      ]
-    ]
-  },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.1.2",
     "@fortawesome/free-solid-svg-icons": "^6.1.2",
@@ -150,7 +98,10 @@
     "@typescript-eslint/parser": "^5.59.9",
     "all-contributors-cli": "^6.17.2",
     "chai": "^4.3.6",
-    "concurrently": "^5.2.0",
+    "concurrently": "^8.2.2",
+    "esbuild": "^0.21.5",
+    "esbuild-plugin-copy": "^2.1.1",
+    "esbuild-sass-plugin": "^3.3.1",
     "eslint": "^8.36.0",
     "eslint-config-airbnb-base": "latest",
     "eslint-config-prettier": "^8.6.0",
@@ -159,14 +110,13 @@
     "eslint-plugin-mocha": "^10.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "git-authors-cli": "^1.0.42",
-    "husky": "^4.2.5",
+    "husky": "^9.0.11",
     "jsdom": "^16.5.0",
     "lint-staged": "^13.2.2",
     "mocha": "^10.0.0",
-    "nodemon": "^2.0.19",
+    "nodemon": "^3.1.4",
     "prettier": "^2.5.1",
     "sinon": "^14.0.0",
-    "snowpack": "^3.8.8",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.3"
   },
@@ -230,5 +180,5 @@
     "Tri Nguyen <[email protected]>",
     "Vamshi K Ponnapalli <[email protected]>"
   ],
-  "packageManager": "pnpm@8.0.0"
+  "packageManager": "pnpm@9.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a"
 }