Arguseye: compare Svelte component edits without starting the app

[DarkWorldCoder]

I’m the maker of Arguseye, a local component-preview engine for coding agents and VS Code. The released 0.0.10 now supports Svelte components through the project’s own svelte/compiler and runtime.

A style edit can change the image without changing its accessibility text. In an installed Svelte 5 fixture, increasing a badge’s scoped padding changed its captured width from 85 to 117 px. The text stayed New: 3 (6). Replaying the unedited baseline first returned zero changed pixels. This is a fixture result, not a performance benchmark.

The workflow is to render an existing .svelte file, save a baseline, edit its source, then compare using the same resolved props and viewport. Literal props can come from discovered .svelte call sites; runtime bindings remain explicitly unresolved.

From a Svelte project, for example:

npx @ayushniroula/arguseye@0.0.10 shot src/lib/Badge.svelte \
  --props '{"label":"New","count":3,"tone":"warn"}' --viewport 800x600 \
  --capture-dir .arguseye/baseline --out .arguseye/before.png --json

# Edit the component, then:
npx @ayushniroula/arguseye@0.0.10 diff \
  --baseline .arguseye/baseline --out .arguseye/comparison --json

Requires Node.js 22+, Chromium and the project’s Svelte packages. Captures include pixels, accessibility text, warnings and errors. Svelte edits remount and reset component state. This checks isolated browser components; SvelteKit server loads and backend-dependent context are outside this workflow. A visual diff still needs review.

MIT source and setup: https://github.com/DarkWorldCoder/arguseye

If a component needs context this misses, a minimal reproduction would help identify the gap.