spark-html-sri 0.1.0 → 0.1.2

package/README.md

@@ -12,12 +12,11 @@ sri();
 ```
 
 ```js
-// vite.config.js — after prerender()
-import spark from 'spark-html/vite';
-import prerender from 'spark-prerender/vite';
-import sriPlugin from 'spark-html-sri/vite';
+// spark.config.js — sri() runs last, after prerender()
+import prerender from 'spark-prerender/bun';
+import sriPlugin from 'spark-html-sri/bun';
 
-export default { plugins: [spark(), prerender(), sriPlugin()] };
+export default { pipeline: [prerender(), sriPlugin()] };
 ```
 
 ## Install
@@ -28,8 +27,8 @@ npm install spark-html-sri
 
 ## What you get
 
-**Local files — fully automatic, zero config.** At build time the vite
-plugin hashes every JS/CSS file and every component fragment (SHA-384 by
+**Local files — fully automatic, zero config.** At build time the build
+step hashes every JS/CSS file and every component fragment (SHA-384 by
 default), stamps `integrity` + `crossorigin="anonymous"` onto the
 `<script>`/`<link>` tags (the browser enforces those natively), and bakes
 a path → hash manifest into each page. At runtime `sri()` verifies every
@@ -69,7 +68,7 @@ or `false` to override.
 
 ```js
 sri({
-  manifest: { '/components/nav.html': 'sha384-…' }, // default: baked in by the vite plugin
+  manifest: { '/components/nav.html': 'sha384-…' }, // default: baked in by the build step
   allow: ['esm.sh'],          // remote hosts (subdomains included)
   enforce: 'auto',            // true | false | 'auto' (auto = enforce unless localhost)
   onViolation: (msg, url) => report(msg, url),
@@ -89,7 +88,7 @@ sriPlugin({ algorithm: 'sha384' }); // 'sha256' | 'sha384' | 'sha512'
 | `verify(data, integrityString)` | Check data against an SRI string (space-separated list allowed). |
 | `resetTofu()` | Forget every remembered remote-component hash. |
 | `DEFAULT_ALLOW` | The default remote allow list. |
-| `spark-html-sri/vite` | Build plugin — hash, stamp, bake the manifest. |
+| `spark-html-sri/bun` | Build step — hash, stamp, bake the manifest. |
 
 ## Why not put this in the core?
 
@@ -97,6 +96,32 @@ The spark-html runtime has a frozen 13 kB budget. Verification lives here
 instead, as an opt-in wrapper around `fetch` — projects that don't use SRI
 pay zero bytes, and the core stays tiny.
 
+## The Spark family
+
+Small, single-purpose packages that share one philosophy: no compiler, no
+virtual DOM, no build step required. Add only what you use.
+
+| Package | What it does |
+|---|---|
+| [`spark-html`](https://www.npmjs.com/package/spark-html) | The runtime — components, reactivity, stores, forms, scoped styles. 13 kB gzip, 0 deps. |
+| [`spark-html-router`](https://www.npmjs.com/package/spark-html-router) | `<template route>` routing — nested routes/layouts, `route.query`, active links. |
+| [`spark-html-theme`](https://www.npmjs.com/package/spark-html-theme) | Dark/light/system theming in one line — persisted, no flash. |
+| [`spark-html-head`](https://www.npmjs.com/package/spark-html-head) | Reactive `<title>`/`<meta>` per route + a `head` store. |
+| [`spark-html-motion`](https://www.npmjs.com/package/spark-html-motion) | Enter/leave transitions on if/each blocks — `transition="fade|slide|scale"`. |
+| [`spark-html-devtools`](https://www.npmjs.com/package/spark-html-devtools) | In-page devtools — live stores, component tree, patch activity. |
+| [`spark-html-query`](https://www.npmjs.com/package/spark-html-query) | Declarative async data — a self-fetching store (`loading`/`error`/`data`/`refetch`). |
+| [`spark-html-persist`](https://www.npmjs.com/package/spark-html-persist) | Persist stores to localStorage/sessionStorage in one line. |
+| [`spark-html-websocket`](https://www.npmjs.com/package/spark-html-websocket) | A WebSocket as a reactive store — auto-reconnect, JSON, `send()`. |
+| [`spark-prerender`](https://www.npmjs.com/package/spark-prerender) | Build-time SEO prerender + sitemap/robots — no SSR server. |
+| [`spark-html-image`](https://www.npmjs.com/package/spark-html-image) | Build-time image optimization — webp/avif + responsive `srcset`, zero config. |
+| [`spark-html-font`](https://www.npmjs.com/package/spark-html-font) | Font loading optimizer — preload + size-adjusted fallbacks, no FOUT. |
+| [`spark-html-manifest`](https://www.npmjs.com/package/spark-html-manifest) | PWA manifest + icons + head tags (and optional service worker) from one config. |
+| [`spark-html-offline`](https://www.npmjs.com/package/spark-html-offline) | Offline URL imports — a service worker that caches CDN components. |
+| [`spark-html-sri`](https://www.npmjs.com/package/spark-html-sri) | Subresource Integrity — hash + verify assets and remote components. |
+| [`create-spark-html-app`](https://www.npmjs.com/package/create-spark-html-app) | Scaffold a spark-html app in one command. |
+| [`prettier-plugin-spark`](https://www.npmjs.com/package/prettier-plugin-spark) | Prettier for components — formats `<script>`/`<style>`, markup stays byte-for-byte. |
+| [`spark-html-language-server`](https://www.npmjs.com/package/spark-html-language-server) | LSP — diagnostics, go-to-definition, prop autocomplete, hover docs. |
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spark-html-sri",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Subresource Integrity for spark-html — auto-hash built assets and components, verify at runtime, and make URL-imported components safe with an origin allow list + trust-on-first-use. Zero dependencies.",
   "type": "module",
   "main": "./src/index.js",
@@ -11,9 +11,8 @@
       "types": "./src/index.d.ts",
       "default": "./src/index.js"
     },
-    "./vite": {
-      "types": "./src/vite.d.ts",
-      "default": "./src/vite.js"
+    "./bun": {
+      "default": "./src/bun.js"
     }
   },
   "scripts": {
@@ -34,7 +33,7 @@
     "integrity",
     "security",
     "tofu",
-    "vite-plugin"
+    "bun"
   ],
   "license": "MIT"
 }

package/src/bun.js

@@ -0,0 +1,106 @@
+/**
+ * spark-html-sri/bun — hash the build, stamp the pages, as a spark-html-bun
+ * pipeline step. Put it LAST in the pipeline: it must see the final bytes of
+ * every asset and fragment (prerender/image/font all rewrite HTML).
+ *
+ *  1. hashes every .js/.css in the output and adds `integrity` +
+ *     `crossorigin="anonymous"` to the <script src> / <link rel=stylesheet>
+ *     tags that reference them — the browser enforces these natively;
+ *  2. hashes every component fragment (.html without <head>) into a
+ *     manifest and bakes it into the page as
+ *     <script type="application/json" data-spark-sri>…</script> — the
+ *     sri() runtime picks it up with zero config.
+ *
+ *   import sri from 'spark-html-sri/bun';
+ *   export default { pipeline: [prerender(), image(), sri()] };
+ */
+import { join, resolve, relative, sep } from 'node:path';
+import { readFile, writeFile, readdir, stat } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import { createHash } from 'node:crypto';
+
+async function walk(dir) {
+  const out = [];
+  for (const name of await readdir(dir)) {
+    const full = join(dir, name);
+    const s = await stat(full);
+    if (s.isDirectory()) out.push(...await walk(full));
+    else out.push(full);
+  }
+  return out;
+}
+
+function sriHash(buf, algo) {
+  return `${algo}-${createHash(algo).update(buf).digest('base64')}`;
+}
+
+// Attribute-order-agnostic tag rewriting: find <script src>/<link stylesheet>
+// tags, resolve their URL against the manifest, splice the attributes in.
+function stampTags(html, lookup) {
+  return html
+    .replace(/<script\b[^>]*\bsrc\s*=\s*"([^"]+)"[^>]*>/g, (tag, src) => stamp(tag, src, lookup))
+    .replace(/<link\b[^>]*\brel\s*=\s*"stylesheet"[^>]*>/g, (tag) => {
+      const href = (tag.match(/\bhref\s*=\s*"([^"]+)"/) || [])[1];
+      return href ? stamp(tag, href, lookup) : tag;
+    });
+}
+
+function stamp(tag, url, lookup) {
+  if (/\bintegrity\s*=/.test(tag)) return tag;           // already stamped
+  if (/^(https?:)?\/\//.test(url)) return tag;           // remote — not ours to hash
+  const hash = lookup(url.split(/[?#]/)[0]);
+  if (!hash) return tag;
+  const attrs = ` integrity="${hash}"` + (/\bcrossorigin\b/.test(tag) ? '' : ' crossorigin="anonymous"');
+  return tag.replace(/\s*\/?>$/, (end) => `${attrs}${end}`);
+}
+
+/**
+ * @param {object} [options]
+ * @param {'sha256'|'sha384'|'sha512'} [options.algorithm='sha384']
+ */
+export default function sparkSri(options = {}) {
+  const algo = options.algorithm || 'sha384';
+  return {
+    name: 'spark-html-sri',
+    async run({ outDir, base = '/' }) {
+      const root = resolve(outDir);
+      if (!existsSync(root)) return;
+      const baseDir = base.endsWith('/') ? base : base + '/';
+
+      const files = await walk(root);
+      const manifest = {};   // served pathname → sri string
+      const pages = [];
+      for (const file of files) {
+        const pathname = baseDir + relative(root, file).split(sep).join('/');
+        if (/\.(js|css)$/.test(file)) {
+          manifest[pathname] = sriHash(await readFile(file), algo);
+        } else if (file.endsWith('.html')) {
+          const html = await readFile(file, 'utf8');
+          if (/<\/head>/i.test(html)) pages.push({ file, html });
+          else manifest[pathname] = sriHash(Buffer.from(html), algo); // component fragment
+        }
+      }
+
+      const json = JSON.stringify(manifest);
+      let stamped = 0;
+      for (const { file, html } of pages) {
+        if (html.includes('data-spark-sri')) continue;  // idempotent
+        // Resolve a tag's URL to a manifest key: absolute pathnames match
+        // directly; relative ones resolve against the page's directory.
+        const pageDir = baseDir + relative(root, join(file, '..')).split(sep).join('/');
+        const lookup = (url) => {
+          if (url.startsWith('/')) return manifest[url] || manifest[baseDir.replace(/\/$/, '') + url];
+          const dir = pageDir === baseDir + '.' ? baseDir : pageDir + '/';
+          return manifest[dir.replace(/\/\.\//, '/') + url.replace(/^\.\//, '')];
+        };
+        let out = stampTags(html, lookup);
+        out = out.replace(/<\/head>/i, `<script type="application/json" data-spark-sri>${json}</script>\n</head>`);
+        await writeFile(file, out, 'utf8');
+        stamped++;
+      }
+      if (stamped) {
+        console.log(`[spark-html-sri] ${Object.keys(manifest).length} asset(s) hashed, ${stamped} page(s) stamped`);
+      }
+    },
+  };
+}

package/src/index.d.ts

@@ -16,7 +16,7 @@ export function verify(
 ): Promise<boolean>;
 
 export interface SriOptions {
-  /** path → SRI string. Default: the manifest the vite plugin baked into the page. */
+  /** path → SRI string. Default: the manifest the build step baked into the page. */
   manifest?: Record<string, string>;
   /** Allowed remote hosts for URL imports (subdomains included). */
   allow?: string[];

package/src/index.js

@@ -4,8 +4,8 @@
  * Two halves, one mental model (`<script integrity>` — familiar to every
  * web developer):
  *
- * **Local files** — fully automatic, zero config. The vite plugin
- * (spark-html-sri/vite) hashes every built JS/CSS/component fragment,
+ * **Local files** — fully automatic, zero config. The build step
+ * (spark-html-sri/bun) hashes every built JS/CSS/component fragment,
  * injects `integrity` + `crossorigin` into `<script>`/`<link>` tags, and
  * bakes a manifest into each page. At runtime `sri()` verifies every
  * component fetch against that manifest before spark-html boots it.
@@ -120,7 +120,7 @@ function blockedResponse(reason) {
  *
  * @param {object} [options]
  * @param {Record<string,string>} [options.manifest] path → SRI string. Default: the
- *   manifest the vite plugin baked into the page (absent in dev — nothing to verify).
+ *   manifest the build step baked into the page (absent in dev — nothing to verify).
  * @param {string[]} [options.allow] Allowed remote hosts for URL imports
  *   (default: jsdelivr/unpkg/esm.sh/raw.githubusercontent — subdomains included).
  * @param {boolean|'auto'} [options.enforce='auto'] Block on failure. 'auto'

package/src/vite.d.ts

@@ -1,18 +0,0 @@
-import type { SriAlgorithm } from './index.js';
-
-export interface SriVitePluginOptions {
-  /** Hash algorithm for assets and the manifest (default 'sha384'). */
-  algorithm?: SriAlgorithm;
-}
-
-/**
- * Vite plugin: hashes every built JS/CSS/component fragment, stamps
- * integrity + crossorigin onto script/link tags, and bakes the manifest
- * into each page. Put it after prerender() in `plugins`.
- */
-export default function sparkSri(options?: SriVitePluginOptions): {
-  name: string;
-  apply: 'build';
-  configResolved(config: unknown): void;
-  closeBundle: { order: 'post'; handler(): Promise<void> };
-};

package/src/vite.js

@@ -1,117 +0,0 @@
-/**
- * spark-html-sri/vite — hash the build, stamp the pages.
- *
- * Runs in closeBundle (order post, after spark-prerender has written its
- * per-route HTML — put it after prerender() in `plugins`). For every page:
- *
- *  1. hashes every .js/.css in the output and adds `integrity` +
- *     `crossorigin="anonymous"` to the <script src> / <link rel=stylesheet>
- *     tags that reference them — the browser enforces these natively;
- *  2. hashes every component fragment (.html without <head>) into a
- *     manifest and bakes it into the page as
- *     <script type="application/json" data-spark-sri>…</script> — the
- *     sri() runtime picks it up with zero config.
- *
- *   import sriPlugin from 'spark-html-sri/vite';
- *   plugins: [spark(), prerender(), sriPlugin()]
- */
-import { join, resolve, relative, sep } from 'node:path';
-import { readFile, writeFile, readdir, stat } from 'node:fs/promises';
-import { existsSync } from 'node:fs';
-import { createHash } from 'node:crypto';
-
-async function walk(dir) {
-  const out = [];
-  for (const name of await readdir(dir)) {
-    const full = join(dir, name);
-    const s = await stat(full);
-    if (s.isDirectory()) out.push(...await walk(full));
-    else out.push(full);
-  }
-  return out;
-}
-
-function sriHash(buf, algo) {
-  return `${algo}-${createHash(algo).update(buf).digest('base64')}`;
-}
-
-// Attribute-order-agnostic tag rewriting: find <script src>/<link stylesheet>
-// tags, resolve their URL against the manifest, splice the attributes in.
-function stampTags(html, lookup) {
-  return html
-    .replace(/<script\b[^>]*\bsrc\s*=\s*"([^"]+)"[^>]*>/g, (tag, src) => stamp(tag, src, lookup))
-    .replace(/<link\b[^>]*\brel\s*=\s*"stylesheet"[^>]*>/g, (tag) => {
-      const href = (tag.match(/\bhref\s*=\s*"([^"]+)"/) || [])[1];
-      return href ? stamp(tag, href, lookup) : tag;
-    });
-}
-
-function stamp(tag, url, lookup) {
-  if (/\bintegrity\s*=/.test(tag)) return tag;           // already stamped
-  if (/^(https?:)?\/\//.test(url)) return tag;           // remote — not ours to hash
-  const hash = lookup(url.split(/[?#]/)[0]);
-  if (!hash) return tag;
-  const attrs = ` integrity="${hash}"` + (/\bcrossorigin\b/.test(tag) ? '' : ' crossorigin="anonymous"');
-  return tag.replace(/\s*\/?>$/, (end) => `${attrs}${end}`);
-}
-
-/**
- * @param {object} [options]
- * @param {'sha256'|'sha384'|'sha512'} [options.algorithm='sha384']
- */
-export default function sparkSri(options = {}) {
-  const algo = options.algorithm || 'sha384';
-  let outDir = 'dist';
-  let base = '/';
-  return {
-    name: 'spark-html-sri',
-    apply: 'build',
-    configResolved(viteConfig) {
-      if (viteConfig && viteConfig.build && viteConfig.build.outDir) outDir = viteConfig.build.outDir;
-      if (viteConfig && viteConfig.base) base = viteConfig.base;
-    },
-    closeBundle: {
-      order: 'post',
-      async handler() {
-        const root = resolve(outDir);
-        if (!existsSync(root)) return;
-        const baseDir = base.endsWith('/') ? base : base + '/';
-
-        const files = await walk(root);
-        const manifest = {};   // served pathname → sri string
-        const pages = [];
-        for (const file of files) {
-          const pathname = baseDir + relative(root, file).split(sep).join('/');
-          if (/\.(js|css)$/.test(file)) {
-            manifest[pathname] = sriHash(await readFile(file), algo);
-          } else if (file.endsWith('.html')) {
-            const html = await readFile(file, 'utf8');
-            if (/<\/head>/i.test(html)) pages.push({ file, html });
-            else manifest[pathname] = sriHash(Buffer.from(html), algo); // component fragment
-          }
-        }
-
-        const json = JSON.stringify(manifest);
-        let stamped = 0;
-        for (const { file, html } of pages) {
-          if (html.includes('data-spark-sri')) continue;  // idempotent
-          // Resolve a tag's URL to a manifest key: absolute pathnames match
-          // directly; relative ones resolve against the page's directory.
-          const pageDir = baseDir + relative(root, join(file, '..')).split(sep).join('/');
-          const lookup = (url) => {
-            if (url.startsWith('/')) return manifest[url] || manifest[baseDir.replace(/\/$/, '') + url];
-            const dir = pageDir === baseDir + '.' ? baseDir : pageDir + '/';
-            return manifest[dir.replace(/\/\.\//, '/') + url.replace(/^\.\//, '')];
-          };
-          let out = stampTags(html, lookup);
-          out = out.replace(/<\/head>/i, `<script type="application/json" data-spark-sri>${json}</script>\n</head>`);
-          await writeFile(file, out, 'utf8');
-          stamped++;
-        }
-        if (stamped) {
-          console.log(`[spark-html-sri] ${Object.keys(manifest).length} asset(s) hashed, ${stamped} page(s) stamped`);
-        }
-      },
-    },
-  };
-}