Replace Prettier with BiomeJS for webview client formatting

.github/actions/update_unstable.js

@@ -1,22 +1,24 @@
-module.exports = async ({github, context, glob}) => {
+module.exports = async ({ github, context, glob }) => {
   const { SEARCH_PATTERN } = process.env;
   console.log({ SEARCH_PATTERN });
-  const fs = require('fs');
-  const path = require('path');
+  const fs = require("fs");
+  const path = require("path");
   const { owner, repo } = context.repo;
   let sid_release = await github.rest.repos.getReleaseByTag({
     owner,
     repo,
-    tag: "sid"
+    tag: "sid",
   });
   await github.rest.repos.updateRelease({
     owner,
     repo,
     release_id: sid_release.data.id,
-    body: "A persistent prerelease where build artifacts for the current tip will be deposited\n\n## Last updated: " + (new Date()).toDateString()
+    body:
+      "A persistent prerelease where build artifacts for the current tip will be deposited\n\n## Last updated: " +
+      new Date().toDateString(),
   });
   // delete existing release assets (if needed) and upload new ones:
-  const globber = await glob.create(SEARCH_PATTERN ?? "*", {followSymbolicLinks: false});
+  const globber = await glob.create(SEARCH_PATTERN ?? "*", { followSymbolicLinks: false });
   const full_paths = await globber.glob();
   for (let full_path of full_paths) {
     const fn = path.basename(full_path);
@@ -25,20 +27,20 @@ module.exports = async ({github, context, glob}) => {
       continue;
     }
     console.log("updating: ", fn, full_path);
-    let asset_id = (sid_release.data.assets.find((a) => (a.name == fn)) ?? {}).id;
+    let asset_id = (sid_release.data.assets.find((a) => a.name == fn) ?? {}).id;
     if (asset_id) {
       await github.rest.repos.deleteReleaseAsset({
         owner,
         repo,
-        asset_id
+        asset_id,
       });
     }
     await github.rest.repos.uploadReleaseAsset({
       owner,
       repo,
       release_id: sid_release.data.id,
       name: fn,
-      data: await fs.readFileSync(full_path)
+      data: await fs.readFileSync(full_path),
     });
   }
-}
+};

.github/workflows/test-webview-client.yaml

@@ -38,7 +38,7 @@ jobs:
       - name: Run test
         run: bun run build
 
-  # test that app is properly formatted and linted
+  # Test that app is properly linted
   test-lint:
     runs-on: ubuntu-latest
     steps:
@@ -54,6 +54,22 @@ jobs:
       - name: Run test
         run: bun run test:lint
 
+  # Test that app is properly formatted
+  test-format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v2
+
+      - name: Install packages
+        run: bun install
+
+      - name: Run test
+        run: bun run test:format
+
   # test that app has no typescript errors
   test-types:
     runs-on: ubuntu-latest

.gitignore

@@ -66,3 +66,4 @@ test-files/
 # Unused lock files
 bun.lock
 uv.lock
+package-lock.json

.pre-commit-config.yaml

@@ -5,6 +5,13 @@ repos:
         name: eslint
         entry: bash -c "cd refl1d/webview/client && npm run lint"
         language: system
+  - repo: https://github.com/biomejs/pre-commit
+    rev: v0.6.1
+    hooks:
+      - id: biome-format
+        name: biome-format
+        files: \.(vue|js|ts|mjs|tsx|jsx|json)$
+        additional_dependencies: ["@biomejs/biome@2.4.13"]
   - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v6.0.0
     hooks:

biome.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.4.13/schema.json",
+  "files": {
+    "includes": ["**", "!**/package.json"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 120
+  },
+  "linter": {
+    "enabled": false
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double",
+      "trailingCommas": "es5"
+    }
+  }
+}

refl1d/webview/client/biome.json

@@ -0,0 +1,4 @@
+{
+  "root": false,
+  "extends": ["../../../biome.json"]
+}

refl1d/webview/client/eslint.config.js

@@ -1,9 +1,7 @@
 import url from "url";
-import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
 import pluginVue from "eslint-plugin-vue";
 import { FlatCompat } from "@eslint/eslintrc";
 import js from "@eslint/js";
-import prettierConfig from "@vue/eslint-config-prettier";
 import vueTsEslintConfig from "@vue/eslint-config-typescript";
 
 const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
@@ -15,11 +13,9 @@ const compat = new FlatCompat({
 
 export default [
   /** Extend recommended configs */
-  ...compat.extends("plugin:vue/vue3-recommended", "plugin:vuejs-accessibility/recommended", "prettier"),
+  ...compat.extends("plugin:vue/vue3-recommended", "plugin:vuejs-accessibility/recommended"),
   ...pluginVue.configs["flat/recommended"],
   ...vueTsEslintConfig(),
-  eslintPluginPrettierRecommended,
-  prettierConfig,
   /** Configuration */
   {
     languageOptions: {
@@ -39,13 +35,18 @@ export default [
         "error",
         { allowShortCircuit: true, allowTernary: true }, // Temporary fix for indirect dependency @typescript-eslint <= 8.15.0
       ],
-      "prettier/prettier": [
-        "warn",
-        {},
-        {
-          usePrettierrc: true,
-        },
-      ],
+
+      // --- Disable stylistic Vue rules that Biome handles ---
+      "vue/max-attributes-per-line": "off",
+      "vue/html-indent": "off",
+      "vue/html-closing-bracket-newline": "off",
+      "vue/html-self-closing": "off",
+      "vue/first-attribute-linebreak": "off",
+      "vue/html-closing-bracket-spacing": "off",
+      "vue/singleline-html-element-content-newline": "off",
+      "vue/multiline-html-element-content-newline": "off",
+      // ------------------------------------------------------
+
       "vuejs-accessibility/label-has-for": [
         "error",
         {

refl1d/webview/client/package.json

@@ -12,8 +12,9 @@
     "build": "vite build --emptyOutDir -m development",
     "build_prod": "vite build --emptyOutDir -m production",
     "preview": "vite preview --port 4173",
-    "format": "prettier --write src",
+    "format": "biome format --write src",
     "lint": "eslint src --fix",
+    "test:format": "biome format src/",
     "test:lint": "eslint src",
     "test:types": "vue-tsc --noEmit --skipLibCheck -p tsconfig.json --composite false"
   },
@@ -30,23 +31,17 @@
     "vue-json-pretty": "^2.5.0"
   },
   "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
+    "@biomejs/biome": "^2.4.13",
     "@tsconfig/node-lts": "^22.0.2",
     "@types/node": "^24.5.2",
     "@types/plotly.js": "^3.0.9",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-vue": "^6.0.5",
-    "@vue/eslint-config-prettier": "10.1.0",
     "@vue/eslint-config-typescript": "^14.2.0",
     "@vue/tsconfig": "^0.7.0",
     "eslint": "^9.18.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-vue": "^9.32.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
-    "prettier": "^3.4.2",
-    "prettier-plugin-css-order": "^2.1.2",
-    "prettier-plugin-jsdoc": "^1.3.2",
     "typescript": "^5.7.3",
     "vite": "^8.0.2",
     "vite-svg-loader": "5.1.0",

refl1d/webview/client/src/components/DataView.vue

@@ -68,15 +68,13 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
           const local_offset = lin_y ? plot_index * offset : Math.pow(10, plot_index * offset);
           const background_offset = apply_corrections.value ? xs.background : 0.0;
           const intensity_scale = apply_corrections.value ? xs.intensity : 1.0;
-          const y =
-            lin_y ?
-              xs.theory.map((t) => (t - background_offset) / intensity_scale + local_offset)
+          const y = lin_y
+            ? xs.theory.map((t) => (t - background_offset) / intensity_scale + local_offset)
             : xs.theory.map((t) => ((t - background_offset) / intensity_scale) * local_offset);
           theory_traces.push({ x: xs.Q, y: y, mode: "lines", name: label + " theory", line: { width: 2, color } });
           if (xs.R !== undefined) {
-            const R =
-              lin_y ?
-                xs.R.map((t) => (t - background_offset) / intensity_scale + local_offset)
+            const R = lin_y
+              ? xs.R.map((t) => (t - background_offset) / intensity_scale + local_offset)
               : xs.R.map((t) => ((t - background_offset) / intensity_scale) * local_offset);
             const data_trace: Trace = {
               x: xs.Q,
@@ -91,8 +89,9 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
               data_trace.error_x = { type: "data", array: xs.dQ, visible: true };
             }
             if (xs.dR !== undefined) {
-              const dR =
-                lin_y ? xs.dR.map((t) => t / intensity_scale) : xs.dR.map((t) => (t / intensity_scale) * local_offset);
+              const dR = lin_y
+                ? xs.dR.map((t) => t / intensity_scale)
+                : xs.dR.map((t) => (t / intensity_scale) * local_offset);
               data_trace.error_y = { type: "data", array: dR, visible: true };
               if (calculate_residuals) {
                 const residuals = xs.R.map((r, i) => (r - xs.theory[i]) / xs.dR![i]);

refl1d/webview/client/src/components/SimpleBuilder.vue

@@ -205,14 +205,8 @@ function setParameterBounds(stack: Stack) {
     const value = p.slot.value;
     p.bounds = value === 0.0 ? [-0.1, 0.1] : [value * 0.5, value * 1.5];
     p.bounds.sort((a, b) => {
-      let c =
-        a === "-inf" ? Number.NEGATIVE_INFINITY
-        : a === "inf" ? Number.POSITIVE_INFINITY
-        : a;
-      let d =
-        b === "-inf" ? Number.NEGATIVE_INFINITY
-        : b === "inf" ? Number.POSITIVE_INFINITY
-        : b;
+      let c = a === "-inf" ? Number.NEGATIVE_INFINITY : a === "inf" ? Number.POSITIVE_INFINITY : a;
+      let d = b === "-inf" ? Number.NEGATIVE_INFINITY : b === "inf" ? Number.POSITIVE_INFINITY : b;
       return c - d;
     });
   };

refl1d/webview/client/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "extends": ["@tsconfig/node-lts/tsconfig.json", "@vue/tsconfig/tsconfig.json"],
   "include": ["src/**/*"],
-  "exclude": [
-    "node_modules/",
-    "bumps/**/*",
-    "src/components/ModelViewPlotly.vue",
-  ],
+  "exclude": ["node_modules/", "bumps/**/*", "src/components/ModelViewPlotly.vue"],
   "compilerOptions": {
     "noErrorTruncation": true,
     // "composite": true,
@@ -18,7 +14,7 @@
     "esModuleInterop": true,
     "moduleResolution": "Bundler",
     "target": "ES6",
-    "types": ["node"],
+    "types": ["node"]
     // "allowJs": true
   }
 }