Node/Yarn to Bun

.github/workflows/build-and-deploy-images.yaml

@@ -50,16 +50,14 @@ jobs:
         with:
           fetch-depth: 0 # to get all tags
 
-      - name: Set up Node
-        uses: actions/setup-node@v3
-        with:
-          node-version: "18"
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
 
       - name: Install packages
-        run: yarn install
+        run: bun install
 
       - name: Build app
-        run: yarn build
+        run: bun run build
 
       - name: Generate Image Tag for Frontend Dir
         id: get-tag

.github/workflows/test-frontend.yaml

@@ -12,130 +12,97 @@ defaults:
     working-directory: ./frontend
 
 jobs:
-  # build cache for rest of jobs
-  install-cache:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Set up Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: "18"
-
-      - name: Install packages
-        run: yarn install
-
-      - name: Install Playwright
-        run: npx playwright install
-
-      - name: Define cache key
-        id: define-key
-        run: echo "key=${{ hashFiles('frontend/yarn.lock') }}" >> $GITHUB_OUTPUT
-
-      - name: Store cache
-        uses: actions/cache@v4
-        with:
-          path: ${{ env.CACHE_PATH }}
-          key: ${{ steps.define-key.outputs.key }}
-
-    outputs:
-      cache-key: ${{ steps.define-key.outputs.key }}
-
   # test that app can build without issues
   test-build:
     runs-on: ubuntu-latest
-    needs: install-cache
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Restore cache
-        uses: actions/cache@v4
-        with:
-          path: ${{ env.CACHE_PATH }}
-          key: ${{ needs.install-cache.outputs.cache-key }}
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Install packages
+        run: bun install
 
       - if: runner.debug == '1'
         uses: mxschmitt/action-tmate@v3
 
       - name: Run test
-        run: yarn build
+        run: bun run build
 
   # test that app has no typescript errors
   test-types:
     runs-on: ubuntu-latest
-    needs: install-cache
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Restore cache
-        uses: actions/cache@v4
-        with:
-          path: ${{ env.CACHE_PATH }}
-          key: ${{ needs.install-cache.outputs.cache-key }}
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Install packages
+        run: bun install
 
       - if: runner.debug == '1'
         uses: mxschmitt/action-tmate@v3
 
       - name: Run test
-        run: yarn test:types
+        run: bun run test:types
 
   # test that app is properly formatted and linted
   test-lint:
     runs-on: ubuntu-latest
-    needs: install-cache
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Restore cache
-        uses: actions/cache@v4
-        with:
-          path: ${{ env.CACHE_PATH }}
-          key: ${{ needs.install-cache.outputs.cache-key }}
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Install packages
+        run: bun install
 
       - if: runner.debug == '1'
         uses: mxschmitt/action-tmate@v3
 
       - name: Run test
-        run: yarn test:lint
+        run: bun run test:lint
 
   # run unit tests
   test-unit:
     runs-on: ubuntu-latest
-    needs: install-cache
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Restore cache
-        uses: actions/cache@v4
-        with:
-          path: ${{ env.CACHE_PATH }}
-          key: ${{ needs.install-cache.outputs.cache-key }}
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Install packages
+        run: bun install
 
       - name: Run test
-        run: yarn test:unit
+        run: bun run test:unit
 
   # run end to end integration tests
   test-e2e:
     runs-on: ubuntu-latest
-    needs: install-cache
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Restore cache
-        uses: actions/cache@v4
-        with:
-          path: ${{ env.CACHE_PATH }}
-          key: ${{ needs.install-cache.outputs.cache-key }}
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Install packages
+        run: bun install
+
+      - name: Install Playwright
+        run: bunx playwright install
 
       - if: runner.debug == '1'
         uses: mxschmitt/action-tmate@v3
 
       - name: Run test
-        run: yarn test:e2e
+        run: bun run test:e2e

Makefile

@@ -71,8 +71,8 @@ install-backend:
 .PHONY: install-frontend
 install-frontend:
 	cd frontend && \
-		yarn install && \
-		npx playwright install
+		bun install && \
+		bunx playwright install
 
 
 .PHONY: model
@@ -134,15 +134,15 @@ test-backend:
 .PHONY: test-frontend
 test-frontend: 
 	cd frontend && \
-		yarn test
+		bun run test
 
 
 ### Development ###
 
 .PHONY: dev-frontend
 dev-frontend: frontend/src/api/model.ts
 	cd frontend && \
-		VITE_API=local yarn dev
+		VITE_API=local bun run dev
 
 
 .PHONY: dev-api
@@ -190,7 +190,7 @@ lint: lint-frontend lint-backend
 .PHONY: lint-frontend
 lint-frontend: 
 	cd frontend && \
-		yarn test:lint
+		bun run test:lint
 
 
 .PHONY: lint-backend
@@ -212,4 +212,4 @@ format-backend:
 .PHONY: format-frontend
 format-frontend:
 	cd frontend && \
-		yarn lint
+		bun run lint

frontend/.eslintrc

@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "extends": [
+    "plugin:vue/vue3-recommended",
+    "plugin:vuejs-accessibility/recommended",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript",
+    "@vue/eslint-config-prettier/skip-formatting",
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+  },
+  "rules": {
+    "prettier/prettier": "warn",
+    "vuejs-accessibility/anchor-has-content": [
+      "error",
+      {
+        "accessibleDirectives": ["tooltip"],
+      },
+    ],
+    "vuejs-accessibility/label-has-for": [
+      "error",
+      {
+        "controlComponents": ["AppInput"],
+        "required": {
+          "some": ["nesting", "id"],
+        },
+        "allowChildren": true,
+      },
+    ],
+    "vue/no-v-html": ["off"],
+    "vue/no-v-text-v-html-on-component": ["off"],
+    "vuejs-accessibility/mouse-events-have-key-events": ["off"],
+  },
+}

frontend/README.md

@@ -1,48 +1,57 @@
 # Monarch Frontend
 
-This project was scaffolded using Vite (`yarn create vite` → `Vue` → `create-vue`) with the following options:
+This project was scaffolded using Vite (`bun create vite` → `Vue` → `create-vue`).
 
+Stack summary:
+
+- Bun (for runtime and package manager, see note below)
 - TypeScript (for type checking)
 - Vue Router (for SPA navigation)
 - Vitest (unit testing)
 - Playwright (e2e testing)
 - ESLint (code quality)
 - Prettier (code formatting)
-
-Techniques/approaches used:
-
 - Vue 3
 - Composition API
 - `<script setup lang="ts">` syntax
 - `<style lang="scss" scoped>` styles
 
 ## Requirements
 
-- Node `v18` or later
-- Yarn `v1` (classic)
+- [Bun](bun.sh)
+
+Bun is used as a drop-in replacement for Node (non-browser JavaScript runtime environment) and Yarn (package manager).
+It is _not_ yet used as a replacement for Vite (dev previewing, bundling, building) or Vitest (test runner).
+
+This makes one less thing for developers to install.
+It also should make installs (which impact GitHub Actions quota) much faster, and anything that runs locally (like Vite and Vitest) a bit faster as well.
+
+Anything that works in Node should also work in Bun, per Bun's stated goals.
+Do not use Bun-specific APIs.
+If there is ever a problem with Bun, switching back to Node should be as simple as replacing "bun" with "node"/"yarn" and "bunx" with "npx" in commands.
 
 ## Commands
 
-| Command                  | Description                               |
-| ------------------------ | ----------------------------------------- |
-| `yarn install`           | Install packages                          |
-| `yarn dev`               | Start local dev server with hot-reloading |
-| `yarn build`             | Build production version of app           |
-| `yarn preview`           | Serve built version of app                |
-| `yarn lint`              | Check linting and formatting, _and fix_   |
-| `yarn test`              | Run all tests below sequentially          |
-| `yarn test:types`        | Type-check codebase                       |
-| `yarn test:lint`         | Check linting and formatting              |
-| `yarn test:unit`         | Run unit tests with Vitest                |
-| `npx playwright install` | Install browsers for Playwright           |
-| `yarn test:e2e`          | Run e2e (and Axe) tests with Playwright   |
+| Command                   | Description                               |
+| ------------------------- | ----------------------------------------- |
+| `bun install`             | Install packages                          |
+| `bun run dev`             | Start local dev server with hot-reloading |
+| `bun run build`           | Build production version of app           |
+| `bun run preview`         | Serve built version of app                |
+| `bun run lint`            | Check linting and formatting, _and fix_   |
+| `bun run test`            | Run all tests below sequentially          |
+| `bun run test:types`      | Type-check codebase                       |
+| `bun run test:lint`       | Check linting and formatting              |
+| `bun run test:unit`       | Run unit tests with Vitest                |
+| `bunx playwright install` | Install browsers for Playwright           |
+| `bun run test:e2e`        | Run e2e (and Axe) tests with Playwright   |
 
 Custom e2e commands:
 
 ```
-yarn test:e2e example.spec.ts
-yarn test:e2e --project=chromium
-yarn test:e2e --debug
+bun run test:e2e example.spec.ts
+bun run test:e2e --project=chromium
+bun run test:e2e --debug
 ```
 
 ## Flags
@@ -55,7 +64,7 @@ For example, add `?flag=value` to a URL like `monarchinitiative.org/?unrelated-p
 
 Environment variable flags can be used to set/override a setting at "compile time", when building the web app.
 These flags always have to be prefixed with `VITE_`.
-For example, set an env var before a command like `VITE_FLAG=value yarn dev`, or add it to `.env` or `.env.local` like `VITE_FLAG=value`.
+For example, set an env var before a command like `VITE_FLAG=value bun dev`, or add it to `.env` or `.env.local` like `VITE_FLAG=value`.
 
 **`api`**
 

frontend/e2e/text-annotator.test.ts

@@ -1,5 +1,6 @@
 import { expect, test } from "@playwright/test";
 import { log } from "../playwright.config";
+/** https://github.com/microsoft/playwright/issues/23662 */
 import example from "../src/pages/explore/text-annotator.json";
 
 log();

frontend/package.json

@@ -1,75 +1,72 @@
 {
   "name": "monarch-app",
-  "version": "0.1.0",
-  "private": true,
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext .vue,.ts,.js,.cjs,.mjs --fix && prettier --write \"**/*.{vue,ts,js,css,scss,json,yaml,svg,md}\"",
-    "test": "yarn test:types && yarn test:lint && yarn test:unit && yarn test:e2e",
+    "test": "bun run test:types && bun run test:lint && bun run test:unit && bun run test:e2e",
     "test:types": "vue-tsc --noEmit -p tsconfig.json --composite false",
     "test:lint": "eslint . --ext .vue,.ts,.js,.cjs,.mjs && prettier --check \"**/*.{vue,ts,js,css,scss,json,yaml,svg,md}\"",
     "test:unit": "vitest run",
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.5.3",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/vue-fontawesome": "^3.0.3",
-    "@sentry/browser": "^7.77.0",
-    "@sentry/vue": "^7.77.0",
-    "@vueuse/core": "^10.5.0",
-    "apexcharts": "^3.44.0",
+    "@floating-ui/dom": "^1.6.3",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/vue-fontawesome": "^3.0.6",
+    "@sentry/browser": "^7.105.0",
+    "@sentry/vue": "^7.105.0",
+    "@vueuse/core": "^10.9.0",
+    "apexcharts": "^3.46.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "lodash": "^4.17.21",
     "micromark": "^4.0.0",
     "normalize.css": "^8.0.1",
     "tippy.js": "^6.3.7",
     "ua-parser-js": "^1.0.37",
-    "vue": "^3.3.7",
+    "vue": "^3.4.21",
     "vue-gtag": "^2.0.1",
     "vue-hotjar": "^1.4.0",
-    "vue-router": "^4.2.5",
-    "vue-tippy": "^6.3.1",
-    "vue3-apexcharts": "^1.4.4",
+    "vue-router": "^4.3.0",
+    "vue-tippy": "^6.4.1",
+    "vue3-apexcharts": "~1.4.4",
     "wicg-inert": "^3.1.2"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
     "@playwright/test": "~1.39.0",
-    "@rushstack/eslint-patch": "^1.5.1",
-    "@tsconfig/node18": "^18.2.2",
-    "@types/body-scroll-lock": "^3.1.1",
-    "@types/dom-to-image": "^2.6.6",
-    "@types/jsdom": "^21.1.4",
-    "@types/lodash": "^4.14.200",
-    "@types/node": "20.8.10",
-    "@types/ua-parser-js": "^0.7.38",
-    "@vitejs/plugin-vue": "^4.4.0",
-    "@vue/eslint-config-prettier": "^8.0.0",
+    "@tsconfig/node20": "^20.1.2",
+    "@types/body-scroll-lock": "^3.1.2",
+    "@types/dom-to-image": "^2.6.7",
+    "@types/jsdom": "^21.1.6",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "20.11.24",
+    "@types/ua-parser-js": "^0.7.39",
+    "@vitejs/plugin-vue": "^4.6.2",
+    "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/test-utils": "2.4.1",
-    "@vue/tsconfig": "^0.4.0",
-    "axe-playwright": "^1.2.3",
-    "eslint": "^8.52.0",
-    "eslint-plugin-vue": "^9.18.1",
-    "eslint-plugin-vuejs-accessibility": "^2.2.0",
-    "jsdom": "^22.1.0",
-    "msw": "^2.0.2",
-    "postcss": "^8.4.31",
-    "prettier": "^3.0.3",
+    "@vue/test-utils": "2.4.4",
+    "@vue/tsconfig": "^0.5.1",
+    "axe-playwright": "^2.0.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.22.0",
+    "eslint-plugin-vuejs-accessibility": "^2.2.1",
+    "jsdom": "^24.0.0",
+    "msw": "^2.2.2",
+    "postcss": "^8.4.35",
+    "prettier": "^3.2.5",
     "prettier-plugin-css-order": "^2.0.1",
-    "prettier-plugin-jsdoc": "^1.1.1",
-    "sass": "^1.69.5",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
-    "vite-svg-loader": "jpkleemans/vite-svg-loader#v4.1.0",
-    "vitest": "^0.34.6",
-    "vue-tsc": "^1.8.22"
+    "prettier-plugin-jsdoc": "^1.3.0",
+    "sass": "^1.71.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4",
+    "vite-svg-loader": "^5.1.0",
+    "vitest": "^1.3.1",
+    "vue-tsc": "^2.0.4"
   },
   "msw": {
     "workerDirectory": "public"

frontend/public/mockServiceWorker.js

@@ -2,13 +2,13 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (2.0.11).
+ * Mock Service Worker (2.2.2).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
  */
 
-const INTEGRITY_CHECKSUM = 'c5f7f8e188b673ea4e677df7ea3c5a39'
+const INTEGRITY_CHECKSUM = '223d191a56023cd36aa88c802961b911'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 

frontend/src/api/search.ts

@@ -1,4 +1,3 @@
-import * as url from "url";
 import type { SearchResults } from "@/api/model";
 import { apiUrl, request } from "./index";
 

frontend/src/components/AppSelectMulti.vue

@@ -332,13 +332,11 @@ watch(
 watch(selected, () => emit("update:modelValue", getModel()), { deep: true });
 
 /** when highlighted index changes */
-watch(
-  highlighted,
-  () =>
-    /** scroll to highlighted in dropdown */
-    document
-      .querySelector(`#option-${id}-${highlighted.value} > *`)
-      ?.scrollIntoView({ block: "nearest" }),
+watch(highlighted, () =>
+  /** scroll to highlighted in dropdown */
+  document
+    .querySelector(`#option-${id}-${highlighted.value} > *`)
+    ?.scrollIntoView({ block: "nearest" }),
 );
 
 /** are all options selected */

frontend/src/components/AppSelectSingle.vue

@@ -223,13 +223,11 @@ watch(selected, () => {
 });
 
 /** when highlighted index changes */
-watch(
-  highlighted,
-  () =>
-    /** scroll to highlighted in dropdown */
-    document
-      .querySelector(`#option-${id}-${highlighted.value}`)
-      ?.scrollIntoView({ block: "nearest" }),
+watch(highlighted, () =>
+  /** scroll to highlighted in dropdown */
+  document
+    .querySelector(`#option-${id}-${highlighted.value}`)
+    ?.scrollIntoView({ block: "nearest" }),
 );
 
 /** auto-select first option as fallback */

frontend/src/components/TheHeader.vue

@@ -8,7 +8,7 @@
     <TheNexus v-if="home" />
 
     <!-- title bar -->
-    <div class="title" :title="app.version">
+    <div class="title">
       <!-- logo image and text -->
       <AppLink
         v-tooltip="home ? '' : 'Homepage'"
@@ -81,7 +81,6 @@ import { onClickOutside } from "@vueuse/core";
 import TheLogo from "@/assets/TheLogo.vue";
 import TabSearch from "@/pages/explore/TabSearch.vue";
 import TheNexus from "./TheNexus.vue";
-import app from "../../package.json";
 
 /** route info */
 const route = useRoute();

frontend/src/pages/explore/TabSearch.vue

@@ -161,7 +161,7 @@ async function onFocus() {
   if (!props.focusExplore) return;
 
   /** navigate to explore page */
-  await router.push({ ...route, name: "Explore" });
+  await router.push("/explore");
   /** refocus box */
   const input = await waitFor<HTMLInputElement>("input");
   input?.focus();

frontend/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["@tsconfig/node18/tsconfig.json", "@vue/tsconfig/tsconfig.json"],
+  "extends": ["@tsconfig/node20/tsconfig.json", "@vue/tsconfig/tsconfig.json"],
   "include": [
     "env.d.ts",
     "playwright.config.ts",
@@ -19,6 +19,7 @@
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "resolveJsonModule": true,
     "esModuleInterop": true,
+    "moduleResolution": "Bundler",
     "types": ["node", "jsdom"]
   }
 }

frontend/vitest.config.ts

@@ -1,7 +1,7 @@
 import { fileURLToPath } from "node:url";
 import { mergeConfig } from "vite";
 import { defineConfig } from "vitest/config";
-import viteConfig from "./vite.config";
+import viteConfig from "./vite.config.mjs";
 
 export default mergeConfig(
   viteConfig,