Add linting and formatting for JS code in `wasmtime explore` (#8675)

.github/workflows/main.yml

@@ -55,6 +55,20 @@ jobs:
       env:
         GH_TOKEN: ${{ github.token }}
 
+  # Quick JS formatting/linting checks for the little bits of JS we have for the
+  # `wasmtime explore` UI.
+  check_js:
+    name: Check JS
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - run: npm install
+      working-directory: ./crates/explorer
+    - run: npm run lint
+      working-directory: ./crates/explorer
+    - run: npm run fmt-check
+      working-directory: ./crates/explorer
+
   # Check Code style quickly by running `clang-format` over all the C/C++ code
   #
   # Note that `wasmtime-platform.h` is excluded here as it's auto-generated.

.gitignore

@@ -23,3 +23,4 @@ vendor
 examples/build
 examples/.cache
 *.coredump
+crates/explorer/node_modules

crates/explorer/.prettierignore

@@ -0,0 +1,6 @@
+*.html
+*.css
+*.toml
+*.rs
+*.yml
+

crates/explorer/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "arrowParens": "avoid"
+}

crates/explorer/eslint.config.js

@@ -0,0 +1,12 @@
+import js from "@eslint/js";
+
+export default [
+  js.configs.recommended,
+
+  {
+    rules: {
+      "no-unused-vars": "error",
+      "no-undef": "error",
+    },
+  },
+];

crates/explorer/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "wasmtime-explorer",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint",
+    "fmt": "prettier --write .",
+    "fmt-check": "prettier --check ."
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bytecodealliance/wasmtime.git#main"
+  },
+  "author": "The Wasmtime Project Developers",
+  "license": "Apache-2.0 WITH LLVM-exception",
+  "bugs": {
+    "url": "https://github.com/bytecodealliance/wasmtime/issues"
+  },
+  "homepage": "https://github.com/bytecodealliance/wasmtime/tree/main#readme",
+  "description": "",
+  "devDependencies": {
+    "@eslint/js": "^9.3.0",
+    "eslint": "^9.3.0",
+    "prettier": "3.2.5"
+  },
+  "type": "module"
+}

crates/explorer/src/index.css

@@ -1,26 +1,27 @@
 * {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
 .hbox {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
 }
 
-html, body {
-    width: 100%;
-    height: 100%;
+html,
+body {
+  width: 100%;
+  height: 100%;
 }
 
 #wat {
-    width: 50%;
-    height: 100%;
-    overflow: scroll;
+  width: 50%;
+  height: 100%;
+  overflow: scroll;
 }
 
 #asm {
-    width: 50%;
-    height: 100%;
-    overflow: scroll;
+  width: 50%;
+  height: 100%;
+  overflow: scroll;
 }

crates/explorer/src/index.js

@@ -1,3 +1,5 @@
+/* global window, document */
+
 /*** State *********************************************************************/
 
 class State {
@@ -7,27 +9,12 @@ class State {
   }
 }
 
-const state = window.STATE = new State(window.WAT, window.ASM);
+const state = (window.STATE = new State(window.WAT, window.ASM));
 
 /*** Hues for Offsets **********************************************************/
 
 const hues = [
-  80,
-  160,
-  240,
-  320,
-  40,
-  120,
-  200,
-  280,
-  20,
-  100,
-  180,
-  260,
-  340,
-  60,
-  140,
-  220,
+  80, 160, 240, 320, 40, 120, 200, 280, 20, 100, 180, 260, 340, 60, 140, 220,
   300,
 ];
 
@@ -36,7 +23,7 @@ const nextHue = (function () {
   return () => {
     return hues[++i % hues.length];
   };
-}());
+})();
 
 // NB: don't just assign hues based on something simple like `hues[offset %
 // hues.length]` since that can suffer from bias due to certain alignments
@@ -97,42 +84,50 @@ const addAsmElem = (offset, elem) => {
 /*** Event Handlers ************************************************************/
 
 const watElem = document.getElementById("wat");
-watElem.addEventListener("click", event => {
-  if (event.target.dataset.wasmOffset == null) {
-    return;
-  }
+watElem.addEventListener(
+  "click",
+  event => {
+    if (event.target.dataset.wasmOffset == null) {
+      return;
+    }
 
-  const offset = parseInt(event.target.dataset.wasmOffset);
-  if (!asmByOffset.get(offset)) {
-    return;
-  }
+    const offset = parseInt(event.target.dataset.wasmOffset);
+    if (!asmByOffset.get(offset)) {
+      return;
+    }
 
-  const firstAsmElem = asmByOffset.get(offset)[0];
-  firstAsmElem.scrollIntoView({
-    behavior: "smooth",
-    block: "center",
-    inline: "nearest",
-  });
-}, { passive: true });
+    const firstAsmElem = asmByOffset.get(offset)[0];
+    firstAsmElem.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+      inline: "nearest",
+    });
+  },
+  { passive: true },
+);
 
 const asmElem = document.getElementById("asm");
-asmElem.addEventListener("click", event => {
-  if (event.target.dataset.wasmOffset == null) {
-    return;
-  }
+asmElem.addEventListener(
+  "click",
+  event => {
+    if (event.target.dataset.wasmOffset == null) {
+      return;
+    }
 
-  const offset = parseInt(event.target.dataset.wasmOffset);
-  if (!watByOffset.get(offset)) {
-    return;
-  }
+    const offset = parseInt(event.target.dataset.wasmOffset);
+    if (!watByOffset.get(offset)) {
+      return;
+    }
 
-  const firstWatElem = watByOffset.get(offset)[0];
-  firstWatElem.scrollIntoView({
-    behavior: "smooth",
-    block: "center",
-    inline: "nearest",
-  });
-}, { passive: true });
+    const firstWatElem = watByOffset.get(offset)[0];
+    firstWatElem.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+      inline: "nearest",
+    });
+  },
+  { passive: true },
+);
 
 const onMouseEnter = event => {
   if (event.target.dataset.wasmOffset == null) {