@a11y-hud/svelte 1.0.0-rc.0 → 1.0.0

package/README.md

@@ -21,7 +21,7 @@ Use `useA11yHud` inside any Svelte 5 component. Pass a getter function so that r
   let scopeSection = $state<HTMLDivElement | null>(null);
 
   useA11yHud(() => ({
-    theme: "dark",
+    theme: "auto",
     scope: scopeSection,
     autoScan: true,
     debounce: 300,
@@ -46,7 +46,7 @@ Use the `<A11yHud>` component when you prefer a declarative approach:
   let scopeSection = $state<HTMLDivElement | null>(null);
 </script>
 
-<A11yHud scope={scopeSection} theme="dark" />
+<A11yHud scope={scopeSection} theme="auto" />
 
 <div bind:this={scopeSection}>
   <!-- your app content -->
@@ -59,16 +59,21 @@ Use the `<A11yHud>` component when you prefer a declarative approach:
 
 | Option | Type | Description |
 |---|---|---|
-| `theme` | `Theme` | `"light"`, `"dark"`, or `"high-contrast"` |
+| `theme` | `Theme` | `"auto"` (default), `"default"`, `"light"`, `"high-contrast"`, `"github-dark"`, `"github-light"`, `"tokyo-night"`, `"solarized-dark"` |
 | `scope` | `Element \| null` | Restrict scan to a subtree |
 | `autoScan` | `boolean` | Enable/disable automatic scanning (default: `true`) |
 | `debounce` | `number` | Debounce delay in milliseconds |
+| `runOnly` | `string[]` | Restrict axe to specific rule-set tags |
 
-Returns `{ runScan(): Promise<AxeResults>, setTheme(theme: Theme): void }`.
+Returns `{ runScan, setTheme, setRunOnly, exportResults, ignores }`. `runScan()` resolves `Promise<AxeResults | null>` — `null` if called before the HUD has mounted.
 
 ### `<A11yHud>` component
 
-Accepts the same options as `UseA11yHudOptions` as props. Renders nothing into the Svelte tree — the `<a11y-hud>` Custom Element is mounted directly on `document.body`.
+Accepts the same options as `UseA11yHudOptions` as props (`theme`, `scope`, `autoScan`, `debounce`, `runOnly`). Renders nothing into the Svelte tree — the `<a11y-hud>` Custom Element is mounted directly on `document.body`.
+
+### Server-side rendering
+
+Importing `@a11y-hud/svelte` is safe on the server (SvelteKit); the HUD mounts in `onMount`, so nothing renders server-side.
 
 ## License
 

package/dist/A11yHud.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { useA11yHud } from "./hook.svelte.js";
+import type { A11yHudProps, UseA11yHudOptions } from "./types.js";
+
+const { theme, scope, autoScan, debounce, runOnly }: A11yHudProps = $props();
+
+useA11yHud(
+  (): UseA11yHudOptions => ({
+    ...(theme !== undefined && { theme }),
+    ...(scope !== undefined && { scope }),
+    ...(autoScan !== undefined && { autoScan }),
+    ...(debounce !== undefined && { debounce }),
+    ...(runOnly !== undefined && { runOnly }),
+  })
+);
+</script>

package/dist/A11yHud.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { UseA11yHudOptions } from "./types.js";
+declare const A11yHud: import("svelte").Component<UseA11yHudOptions, {}, "">;
+type A11yHud = ReturnType<typeof A11yHud>;
+export default A11yHud;
+//# sourceMappingURL=A11yHud.svelte.d.ts.map

package/dist/A11yHud.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"A11yHud.svelte.d.ts","sourceRoot":"","sources":["../src/A11yHud.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAgB,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAqBlE,QAAA,MAAM,OAAO,uDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/hook.svelte.d.ts

@@ -0,0 +1,3 @@
+import type { UseA11yHudOptions, UseA11yHudReturn } from "./types.js";
+export declare function useA11yHud(getOptions?: () => UseA11yHudOptions): UseA11yHudReturn;
+//# sourceMappingURL=hook.svelte.d.ts.map

package/dist/hook.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.svelte.d.ts","sourceRoot":"","sources":["../src/hook.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEtE,wBAAgB,UAAU,CAAC,UAAU,GAAE,MAAM,iBAA8B,GAAG,gBAAgB,CAkH7F"}

package/dist/hook.svelte.js

@@ -0,0 +1,110 @@
+import { mount } from "a11y-hud";
+import { onDestroy, onMount } from "svelte";
+export function useA11yHud(getOptions = () => ({})) {
+    let mounted = $state(false);
+    let instanceRef = null;
+    let elementRef = null;
+    onMount(() => {
+        const opts = getOptions();
+        const { theme, autoScan, debounce, runOnly } = opts;
+        instanceRef = mount({
+            ...(theme !== undefined && { theme }),
+            ...(autoScan !== undefined && { autoScan }),
+            ...(debounce !== undefined && { debounce }),
+            ...(runOnly !== undefined && { runOnly }),
+        });
+        elementRef = document.querySelector("a11y-hud");
+        mounted = true;
+    });
+    onDestroy(() => {
+        instanceRef?.unmount();
+        instanceRef = null;
+        elementRef = null;
+    });
+    // Render-settled: scope sync + rescan
+    $effect(() => {
+        if (!mounted)
+            return;
+        const { scope } = getOptions();
+        const el = elementRef;
+        if (!el)
+            return;
+        el.scopeElement = scope ?? undefined;
+        void instanceRef?.runScan();
+    });
+    // Theme sync — runs when mounted becomes true or theme changes.
+    $effect(() => {
+        if (mounted) {
+            const { theme } = getOptions();
+            if (theme !== undefined)
+                instanceRef?.setTheme(theme);
+        }
+    });
+    // autoScan sync
+    $effect(() => {
+        if (mounted) {
+            const el = elementRef;
+            if (el) {
+                const { autoScan } = getOptions();
+                if (autoScan === false) {
+                    el.removeAttribute("auto-scan");
+                }
+                else {
+                    el.setAttribute("auto-scan", "");
+                }
+            }
+        }
+    });
+    // debounce sync
+    $effect(() => {
+        if (mounted) {
+            const el = elementRef;
+            if (el) {
+                const { debounce } = getOptions();
+                if (debounce !== undefined)
+                    el.setAttribute("debounce", String(debounce));
+            }
+        }
+    });
+    // runOnly sync
+    $effect(() => {
+        if (mounted) {
+            const { runOnly } = getOptions();
+            if (runOnly !== undefined)
+                instanceRef?.setRunOnly(runOnly);
+        }
+    });
+    function runScan() {
+        return instanceRef?.runScan() ?? Promise.resolve(null);
+    }
+    function setTheme(t) {
+        instanceRef?.setTheme(t);
+    }
+    function setRunOnly(tags) {
+        instanceRef?.setRunOnly(tags);
+    }
+    function exportResults() {
+        return instanceRef?.exportResults() ?? null;
+    }
+    const ignores = {
+        add(ruleId, selector) {
+            instanceRef?.ignores.add(ruleId, selector);
+        },
+        remove(ruleId, selector) {
+            instanceRef?.ignores.remove(ruleId, selector);
+        },
+        clear() {
+            instanceRef?.ignores.clear();
+        },
+        list() {
+            return instanceRef?.ignores.list() ?? [];
+        },
+        exportJson() {
+            return instanceRef?.ignores.exportJson() ?? "[]";
+        },
+        importJson(json) {
+            instanceRef?.ignores.importJson(json);
+        },
+    };
+    return { runScan, setTheme, setRunOnly, exportResults, ignores };
+}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { default as A11yHud } from './A11yHud.svelte';
-export { useA11yHud } from './hook.svelte.js';
-export type { A11yHudProps, UseA11yHudOptions, UseA11yHudReturn } from './types.js';
+export { default as A11yHud } from "./A11yHud.svelte";
+export { useA11yHud } from "./hook.svelte.js";
+export type { A11yHudProps, UseA11yHudOptions, UseA11yHudReturn } from "./types.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,99 +1,2 @@
-import "svelte/internal/disclose-version";
-import * as e from "svelte/internal/client";
-import { mount as t } from "a11y-hud";
-import { onDestroy as n, onMount as r } from "svelte";
-//#region src/hook.svelte.ts
-function i(i = () => ({})) {
-	let a = e.state(!1), o = null, s = null;
-	r(() => {
-		let { theme: n, autoScan: r, debounce: c, runOnly: l } = i();
-		o = t({
-			...n !== void 0 && { theme: n },
-			...r !== void 0 && { autoScan: r },
-			...c !== void 0 && { debounce: c },
-			...l !== void 0 && { runOnly: l }
-		}), s = document.querySelector("a11y-hud"), e.set(a, !0);
-	}), n(() => {
-		o?.unmount(), o = null, s = null;
-	}), e.user_effect(() => {
-		if (!e.get(a)) return;
-		let { scope: t } = i(), n = s;
-		n && (n.scopeElement = t ?? void 0, o?.runScan());
-	}), e.user_effect(() => {
-		if (e.get(a)) {
-			let { theme: e } = i();
-			e !== void 0 && o?.setTheme(e);
-		}
-	}), e.user_effect(() => {
-		if (e.get(a)) {
-			let e = s;
-			if (e) {
-				let { autoScan: t } = i();
-				t === !1 ? e.removeAttribute("auto-scan") : e.setAttribute("auto-scan", "");
-			}
-		}
-	}), e.user_effect(() => {
-		if (e.get(a)) {
-			let e = s;
-			if (e) {
-				let { debounce: t } = i();
-				t !== void 0 && e.setAttribute("debounce", String(t));
-			}
-		}
-	}), e.user_effect(() => {
-		if (e.get(a)) {
-			let { runOnly: e } = i();
-			e !== void 0 && o?.setRunOnly(e);
-		}
-	});
-	function c() {
-		return o?.runScan() ?? Promise.resolve(null);
-	}
-	function l(e) {
-		o?.setTheme(e);
-	}
-	function u(e) {
-		o?.setRunOnly(e);
-	}
-	function d() {
-		return o?.exportResults() ?? null;
-	}
-	return {
-		runScan: c,
-		setTheme: l,
-		setRunOnly: u,
-		exportResults: d,
-		ignores: {
-			add(e, t) {
-				o?.ignores.add(e, t);
-			},
-			remove(e, t) {
-				o?.ignores.remove(e, t);
-			},
-			clear() {
-				o?.ignores.clear();
-			},
-			list() {
-				return o?.ignores.list() ?? [];
-			},
-			exportJson() {
-				return o?.ignores.exportJson() ?? "[]";
-			},
-			importJson(e) {
-				o?.ignores.importJson(e);
-			}
-		}
-	};
-}
-//#endregion
-//#region src/A11yHud.svelte
-function a(t, n) {
-	e.push(n, !0), i(() => ({
-		...n.theme !== void 0 && { theme: n.theme },
-		...n.scope !== void 0 && { scope: n.scope },
-		...n.autoScan !== void 0 && { autoScan: n.autoScan },
-		...n.debounce !== void 0 && { debounce: n.debounce }
-	})), e.pop();
-}
-//#endregion
-export { a as A11yHud, i as useA11yHud };
+export { default as A11yHud } from "./A11yHud.svelte";
+export { useA11yHud } from "./hook.svelte.js";

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { AxeResults, IgnoreEntry, Theme } from 'a11y-hud';
+import type { AxeResults, IgnoreEntry, Theme } from "a11y-hud";
 export interface UseA11yHudOptions {
     theme?: Theme;
     scope?: Element | null;
@@ -8,7 +8,7 @@ export interface UseA11yHudOptions {
 }
 export type A11yHudProps = UseA11yHudOptions;
 export interface UseA11yHudReturn {
-    runScan(): Promise<AxeResults>;
+    runScan(): Promise<AxeResults | null>;
     setTheme(theme: Theme): void;
     setRunOnly(tags: string[]): void;
     exportResults(): string | null;
@@ -21,5 +21,4 @@ export interface UseA11yHudReturn {
         importJson(json: string): void;
     };
 }
-export declare function useA11yHud(getOptions?: () => UseA11yHudOptions): UseA11yHudReturn;
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAE/D,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC;AAE7C,MAAM,WAAW,gBAAgB;IAC/B,OAAO,IAAI,OAAO,CAAC,UAAU,CAAC,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC,aAAa,IAAI,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE;QACP,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAC7C,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAChD,KAAK,IAAI,IAAI,CAAC;QACd,IAAI,IAAI,WAAW,EAAE,CAAC;QACtB,UAAU,IAAI,MAAM,CAAC;QACrB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;KAChC,CAAC;CACH;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,UAAU,CAAC,EAAE,MAAM,iBAAiB,GAAG,gBAAgB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAE/D,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC;AAE7C,MAAM,WAAW,gBAAgB;IAC/B,OAAO,IAAI,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC;IACtC,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC,aAAa,IAAI,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE;QACP,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAC7C,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAChD,KAAK,IAAI,IAAI,CAAC;QACd,IAAI,IAAI,WAAW,EAAE,CAAC;QACtB,UAAU,IAAI,MAAM,CAAC;QACrB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;KAChC,CAAC;CACH"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@a11y-hud/svelte",
-  "version": "1.0.0-rc.0",
+  "version": "1.0.0",
   "description": "Svelte adapter for a11y-hud — run axe-core accessibility audits in your Svelte app with no DevTools required.",
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js",
-      "import": "./dist/index.js"
-    }
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
   },
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -18,22 +19,22 @@
     "README.md"
   ],
   "dependencies": {
-    "a11y-hud": "1.0.0-rc.0"
+    "a11y-hud": "1.0.0"
   },
   "peerDependencies": {
     "svelte": ">=5"
   },
   "devDependencies": {
-    "@playwright/test": "^1.49.1",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
-    "@testing-library/svelte": "^5.3.1",
-    "@vitest/coverage-v8": "^4.1.5",
+    "@playwright/test": "^1.63.0",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@testing-library/svelte": "^5.4.2",
+    "@vitest/coverage-v8": "^4.1.11",
     "jsdom": "^29.1.1",
-    "svelte": "^5.55.5",
-    "svelte-check": "^4.4.7",
-    "vite": "^8.0.10",
-    "vite-plugin-dts": "^5.0.0",
-    "vitest": "^4.1.5"
+    "svelte": "^5.57.1",
+    "svelte-check": "^4.7.6",
+    "vite": "^8.3.1",
+    "vitest": "^4.1.11"
   },
   "engines": {
     "node": ">=22"
@@ -61,8 +62,8 @@
     "hud"
   ],
   "scripts": {
-    "build": "vite build",
-    "dev": "vite build --watch",
+    "build": "svelte-package -i src -o dist",
+    "dev": "svelte-package -i src -o dist --watch",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",