Bump dependencies and add web demo (#14)

* Bump various dependency versions

* Deduplicate dependencies

* Fix errors

* Update CI workflow

Includes WASM module and web build step for more complete testing.

* Add GitHub Actions workflow for web demo CD

Author: RichDom2185

.github/workflows/ci.yml

@@ -69,9 +69,21 @@ jobs:
           node-version: 20
           cache: yarn
           cache-dependency-path: ./devices/wasm/web/yarn.lock
+      - name: Setup Emscripten
+        uses: mymindstorm/setup-emsdk@v14
       - name: Install dependencies
         working-directory: devices/wasm/web
         run: yarn install --frozen-lockfile
       - name: Lint
         working-directory: devices/wasm/web
         run: yarn lint
+      - name: Build WASM module
+        working-directory: devices/wasm
+        run: |
+          mkdir -p build
+          cd build
+          emcmake cmake ../wasm
+          make -j$(nproc)
+      - name: Ensure website builds
+        working-directory: devices/wasm/web
+        run: yarn build

.github/workflows/web.yml

@@ -0,0 +1,47 @@
+name: Deploy web demo
+
+on:
+  push:
+    branches:
+      - master
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Install dependencies (apt)
+        run: |
+          sudo apt-get update && \
+          sudo apt-get install -y --no-install-recommends \
+          libxi-dev libgl1-mesa-dev
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: yarn
+          cache-dependency-path: ./devices/wasm/web/yarn.lock
+      - name: Setup Emscripten
+        uses: mymindstorm/setup-emsdk@v14
+      - name: Install dependencies
+        working-directory: devices/wasm/web
+        run: yarn install --frozen-lockfile
+      - name: Build WASM module
+        working-directory: devices/wasm
+        run: |
+          mkdir -p build
+          cd build
+          emcmake cmake ../wasm
+          make -j$(nproc)
+      - name: Build
+        working-directory: devices/wasm/web
+        run: yarn build
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: devices/wasm/web/build

devices/wasm/web/package.json

@@ -16,16 +16,16 @@
   },
   "devDependencies": {
     "cross-env": "^7.0.3",
-    "eslint": "^8.0.0",
-    "eslint-config-preact": "^1.1.4",
+    "eslint": "^8.57.0",
+    "eslint-config-preact": "^1.3.0",
     "jest": "^29.7.0",
-    "preact-cli": "=3.3.0"
+    "preact-cli": "^3.5.1"
   },
   "dependencies": {
     "file-saver": "^2.0.5",
     "js-slang": "^0.5.19",
-    "preact": "^10.5.15",
-    "react-ace": "^9.4.4"
+    "preact": "^10.19.6",
+    "react-ace": "^10.1.0"
   },
   "resolutions": {
     "**/gl": "^6.0.2"

devices/wasm/web/preact.config.js

@@ -1,4 +1,14 @@
-export default (config, env, helpers) => {
+// @ts-check
+/**
+ * Function that mutates the original webpack config.
+ * Supports asynchronous changes when a promise is returned (or it's an async function).
+ *
+ * @param {import('preact-cli').Config} config - original webpack config
+ * @param {import('preact-cli').Env} env - current environment and options pass to the CLI
+ * @param {import('preact-cli').Helpers} helpers - object with useful helpers for working with the webpack config
+ * @param {Record<string, unknown>} options - this is mainly relevant for plugins (will always be empty in the config), default to an empty object
+ */
+export default (config, env, helpers, options) => {
   config.module.rules.push({
     test: /\.wasm$/,
     type: "javascript/auto",
@@ -9,13 +19,7 @@ export default (config, env, helpers) => {
   config.node.Buffer = true;
   config.node.process = true;
 
-  let babelConfig = helpers.getLoadersByName(config, 'babel-loader')[0].rule.options;
-  let babelPresetEnvPresets = babelConfig.presets.find(([path]) => path.includes("@babel/preset-env"))[1];
-  babelPresetEnvPresets.targets = "Firefox ESR";
-  babelPresetEnvPresets.loose = false;
-  // console.log(babelPresetEnvPresets);
-
-  if (env.production) {
-    config.output.publicPath = '';
+  if (env.isProd) {
+    config.output.publicPath = "";
   }
 };