ebi-webcomponents · dlrice · Apr 14, 2026 · Apr 16, 2026 · Apr 16, 2026 · Apr 16, 2026
diff --git a/.babelrc b/.babelrc
diff --git a/.gitignore b/.gitignore
@@ -7,4 +7,19 @@ dist/
 node_modules/
 *.log
 .yalc/
-yalc.lock
+yalc.lock
+coverage/
+demo/
+
+# Security: prevent accidental commit of secrets and credentials
+.env
+.env.*
+.env.local
+.env.*.local
+*.pem
+*.key
+*.pfx
+*.p12
+*.cert
+.aws/
+credentials.json
diff --git a/README.md b/README.md
@@ -89,6 +89,43 @@ yarn start
 
 to install dependencies and start the local development server.
 
+## Testing
+
+Tests run under [Vitest](https://vitest.dev/) with a `jsdom` DOM environment. All APIs (`describe`, `it`, `expect`, `vi`, …) must be imported explicitly from `'vitest'` — `globals` is off.
+
+A small setup file at `src/__spec__/setup.ts` filters out jsdom's benign "Could not parse CSS stylesheet" warnings; jsdom's CSS parser is CSS2-era and chokes on the nested-selector syntax used in `src/protvista-styles.ts`. The stylesheet still attaches correctly — it's log noise only. Every other `console.error` passes through untouched. Remove the filter if we ever migrate to happy-dom (which parses modern CSS natively) or jsdom gains native-nesting support.
+
+```bash
+# Run the full pipeline (lint + types + unit)
+yarn test
+
+# Unit tests only (CI-friendly, non-zero exit on failure)
+yarn test:unit
+
+# Watch mode
+yarn test:watch
+
+# Coverage (writes text + html + lcov to ./coverage/)
+yarn test:coverage
+```
+
+Coverage output is for local use only and is not committed. Open `coverage/index.html` after `yarn test:coverage` to inspect.
+
+### Continuous integration
+
+Every push and pull request runs the same three steps as `yarn test` via [`.github/workflows/test-and-deploy.yml`](./.github/workflows/test-and-deploy.yml): `yarn test:lint`, `yarn test:types`, and `yarn test:unit`, under Node 24 on `ubuntu-latest`. A separate `build` job runs `yarn build` (and, on `main`, `yarn build:demo`) and deploys the demo to GitHub Pages. Coverage is not collected in CI today — run `yarn test:coverage` locally when you need a coverage signal.
+
+### Coverage
+
+Captured 2026-04-20 via `yarn test:coverage` (v8 instrumentation, 29 tests across 3 spec files):
+
+| Metric     | Coverage % |
+| ---------- | ---------- |
+| Statements | 71.41      |
+| Branches   | 70.77      |
+| Functions  | 68.63      |
+| Lines      | 71.78      |
+
 ## Configuration
 
 You can pass your own configuration to the component using the `config` attribute/property.

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -2,6 +2,7 @@ import js from '@eslint/js';
 import ts from 'typescript-eslint';
 import tsParser from '@typescript-eslint/parser';
 import tsPlugin from '@typescript-eslint/eslint-plugin';
+import noUnsanitized from 'eslint-plugin-no-unsanitized';
 import prettier from 'eslint-config-prettier';
 import globals from 'globals';
 
@@ -20,21 +21,25 @@ export default [
       globals: {
         ...globals.browser,
         ...globals.es2021,
-        ...globals.jest,
       },
     },
 
     plugins: {
       '@typescript-eslint': tsPlugin,
+      'no-unsanitized': noUnsanitized,
     },
 
-    /* start with the plugin’s own recommended rules… */
+    /* start with the plugin's own recommended rules... */
     rules: {
       ...tsPlugin.configs.recommended.rules,
 
-      /* …then apply your custom tweaks */
+      /* ...then apply your custom tweaks */
       '@typescript-eslint/explicit-module-boundary-types': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
+
+      /* Security: flag unsafe DOM manipulation */
+      'no-unsanitized/method': 'error',
+      'no-unsanitized/property': 'error',
     },
   },
 ];
diff --git a/index.html b/index.html
@@ -24,6 +24,7 @@
 
   <body>
     <div>
+      <!-- NOTE: for all of the following with no config-src → falls back to bundled src/default-config.yaml -->
       <!-- Good default -->
       <protvista-uniprot accession="P05067"></protvista-uniprot>
       <!-- Good multimer -->

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "protvista-uniprot",
   "description": "ProtVista tool for the UniProt website",
-  "version": "4.7.2",
+  "version": "5.0.0",
   "files": [
     "dist",
     "src"
@@ -13,8 +13,10 @@
     "start": "vite",
     "test:lint": "eslint src --ext .ts ",
     "test:types": "tsc",
-    "test:unit": "jest",
-    "test": "npm-run-all --continue-on-error test:*",
+    "test:unit": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test": "npm-run-all --continue-on-error test:lint test:types test:unit",
     "clear-cdn-cache": "./scripts/clearCDNcaches.sh"
   },
   "main": "dist/protvista-uniprot.js",
@@ -41,53 +43,48 @@
     "@nightingale-elements/nightingale-structure": "5.8.0",
     "@nightingale-elements/nightingale-track-canvas": "5.6.0",
     "@nightingale-elements/nightingale-variation": "5.6.0",
+    "@floating-ui/dom": "1.7.6",
+    "@markdoc/markdoc": "0.5.7",
+    "ajv": "8.18.0",
     "color-hash": "2.0.2",
     "core-js": "3.48.0",
+    "js-yaml": "4.1.0",
     "lit": "3.3.2",
-    "lodash-es": "4.17.23",
-    "timing-functions": "2.0.1",
-    "url-join": "5.0.0"
+    "lodash-es": "4.18.1",
+    "timing-functions": "2.0.1"
   },
   "devDependencies": {
-    "@babel/core": "7.29.0",
-    "@babel/plugin-proposal-decorators": "7.29.0",
-    "@babel/plugin-transform-runtime": "7.29.0",
-    "@babel/preset-env": "7.29.0",
-    "@babel/preset-typescript": "7.28.5",
-    "@babel/runtime-corejs3": "7.29.0",
     "@eslint/js": "10.0.1",
     "@originjs/vite-plugin-commonjs": "1.0.3",
-    "@types/jest": "30.0.0",
-    "@typescript-eslint/eslint-plugin": "8.56.1",
-    "@typescript-eslint/parser": "8.56.1",
-    "babel-jest": "30.2.0",
-    "eslint": "10.0.2",
+    "@types/color-hash": "2.0.0",
+    "@types/js-yaml": "4.0.9",
+    "@types/lodash-es": "4.17.12",
+    "@typescript-eslint/eslint-plugin": "8.58.2",
+    "@typescript-eslint/parser": "8.58.2",
+    "@vitest/coverage-v8": "4.1.4",
+    "eslint": "10.2.1",
     "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-no-unsanitized": "4.1.5",
     "eslint-plugin-prettier": "5.5.5",
-    "globals": "17.3.0",
-    "jest": "30.2.0",
+    "globals": "17.5.0",
+    "jsdom": "29.0.2",
     "npm-run-all": "4.1.5",
-    "rollup-plugin-visualizer": "7.0.0",
+    "rollup-plugin-visualizer": "7.0.1",
     "svg-inline-loader": "0.8.2",
-    "typescript": "5.9.3",
-    "typescript-eslint": "8.56.1",
-    "vite": "7.3.1",
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.58.2",
+    "vega-expression": "6.1.0",
+    "vite": "8.0.9",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-env-compatible": "2.0.1",
     "vite-plugin-html": "3.2.2",
-    "vite-plugin-svgo": "2.0.0"
+    "vite-plugin-svgo": "2.0.0",
+    "vitest": "4.1.4"
   },
   "browserslist": [
     "chrome >= 92",
     "edge >= 92",
     "firefox >= 90",
     "safari >= 15"
-  ],
-  "jest": {
-    "testRegex": "(/__tests__/.*|(\\.|/))spec\\.ts$",
-    "testPathIgnorePatterns": [
-      "/__mocks__/",
-      "<rootDir>/dist/"
-    ]
-  }
+  ]
 }
diff --git a/scripts/_validate-default.mjs b/scripts/_validate-default.mjs
diff --git a/scripts/clearCDNcaches.sh b/scripts/clearCDNcaches.sh
@@ -1,7 +1,7 @@
 #!/bin/sh
 
 curl -X POST \
-  http://purge.jsdelivr.net \
+  https://purge.jsdelivr.net \
   -H 'cache-control: no-cache' \
   -H 'content-type: application/json' \
   -d '{