prettier-plugin-spark

Prettier plugin for spark-html single-file components.

Why a dedicated plugin

Spark components are a hybrid syntax — HTML-style quoted attributes (:value="x", onclick="{fn}") and Svelte-style {interpolations}. No built-in Prettier parser handles both without breaking your code:

• The html parser treats onclick="{fn}" as a JS event attribute and rewrites it into broken multi-line JS, and it word-wraps string literals inside {…} (changing their value).
• The svelte parser rejects Spark's quoted :attr="…" / bind:x="…".

Both can silently produce invalid Spark.

What it does

It honours Spark's core promise — the markup you write is what runs — by formatting only what's safe to format:

• <script> → formatted as JavaScript (Prettier babel).
• <style> → formatted as CSS (Prettier css).
• <spark-ssr> block bodies → one binding per line with the = column aligned; SQL that exceeds the print width is broken before its top-level clauses (FROM, WHERE, ORDER BY, …) with continuations indented — the scanner is quote-aware, so keywords inside 'strings' never cause a break, and a statement containing a -- comment keeps its authored line structure. METHOD /path → … endpoint lines and URL/glob/module sources are handled too; any line the grammar doesn't recognize passes through byte-identical. (spark-ssr itself is reflow-tolerant — this is purely for humans reading the page.)
• Everything else (your markup) → left byte-for-byte untouched.

So {interpolations}, onclick="{handlers}", :bindings, <template if/each> — none of it can ever be mangled. It's idempotent, and if a <script>/<style> block can't be parsed it's left as-is rather than failing the whole file.

Install

bun add -d prettier prettier-plugin-spark

Use

Spark components use the .html extension, so select the plugin's spark parser for them. In .prettierrc:

{
  "plugins": ["prettier-plugin-spark"],
  "overrides": [
    { "files": "*.html", "options": { "parser": "spark" } }
  ]
}

bunx prettier --write "src/**/*.html"

(If you also have non-Spark .html files, scope the override to your components directory, e.g. "files": "components/**/*.html".)

Zed

The Spark Zed extension already sets prettier_parser_name = "spark". Enable Prettier + this plugin for the Spark language once in your Zed settings.json:

{
  "languages": {
    "Spark": {
      "prettier": {
        "allowed": true,
        "plugins": ["prettier-plugin-spark"]
      }
    }
  }
}

Format-on-save is on by Zed default, so saving a component formats its script/style and preserves the markup.

The Spark family

Small, single-purpose packages that share one philosophy: no compiler, no virtual DOM, no build step required — built for humans who love hand-writing their web apps. Add only what you use.

| Package | What it does | |---|---| | spark-html | The runtime — components, reactivity, stores, forms, scoped styles. ~14.6 kB gzip, 0 deps. | | spark-html-bun | Dev server, bundler & preview on Bun — scoped HMR, no-build dev, post-build pipeline. | | spark-html-router | <template route> routing — nested routes/layouts, route.query, active links. | | spark-html-theme | Dark/light/system theming in one line — persisted, no flash. | | spark-html-head | Reactive <title>/<meta> per route + a head store. | | spark-html-motion | Enter/leave transitions on if/each blocks — transition="fade|slide|scale". | | spark-html-devtools | In-page devtools — live stores, component tree, patch activity. | | spark-html-query | Declarative async data — a self-fetching store (loading/error/data/refetch). | | spark-html-persist | Persist stores to localStorage/sessionStorage in one line. | | spark-html-websocket | A WebSocket as a reactive store — auto-reconnect, JSON, send(). | | spark-prerender | Build-time SEO prerender + sitemap/robots — no SSR server. | | spark-ssr | Full-stack SSR on Bun — the template is the backend: inferred DB, REST CRUD, auth, live updates. Precompiled + response-cached: fast by default. | | spark-html-image | Build-time image optimization — webp/avif + responsive srcset, zero config. | | spark-html-font | Font loading optimizer — preload + size-adjusted fallbacks, no FOUT. | | spark-html-manifest | PWA manifest + icons + head tags (and optional service worker) from one config. | | spark-html-offline | Offline URL imports — a service worker that caches CDN components. | | spark-html-sri | Subresource Integrity — hash + verify assets and remote components. | | create-spark-html-app | Scaffold a spark-html app in one command. | | prettier-plugin-spark | Prettier for components — formats <script>/<style>, markup stays byte-for-byte. | | spark-html-language-server | LSP — diagnostics, go-to-definition, prop autocomplete, hover docs. |

License

MIT © Wilkin Novo