spark-html-font 0.1.0 → 0.1.2

package/README.md

@@ -6,11 +6,12 @@ sites — configure every font **once**, get the whole loading story: correct
 face** so the swap doesn't shift the layout. Zero dependencies.
 
 ```js
-// vite.config.js — bake into every built page
-import font from 'spark-html-font/vite';
+// spark.config.js — bake into every built page
+import prerender from 'spark-prerender/bun';
+import font from 'spark-html-font/bun';
 
 export default {
-  plugins: [spark(), prerender(), font({
+  pipeline: [prerender(), font({
     fonts: [
       { family: 'Inter', src: '/fonts/inter-var.woff2', weight: '100 900' },
       { family: 'Fira Code', google: true, weights: [400, 700] },
@@ -74,3 +75,29 @@ npm install -D spark-html-font
 
 Top-level: `fallback` — generic families appended to every var stack
 (default `['system-ui', 'sans-serif']`).
+
+## 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. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spark-html-font",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Font loading optimizer for spark-html sites — @font-face + preload + size-adjusted fallbacks in one config, no FOUT, no layout shift. Zero dependencies.",
   "type": "module",
   "main": "./src/index.js",
@@ -11,9 +11,8 @@
       "types": "./src/index.d.ts",
       "default": "./src/index.js"
     },
-    "./vite": {
-      "types": "./src/index.d.ts",
-      "default": "./src/vite.js"
+    "./bun": {
+      "default": "./src/bun.js"
     }
   },
   "scripts": {
@@ -34,7 +33,7 @@
     "preload",
     "cls",
     "layout-shift",
-    "vite-plugin"
+    "bun"
   ],
   "license": "MIT"
 }

package/src/bun.js

@@ -0,0 +1,57 @@
+/**
+ * spark-html-font/bun — bake the font tags into every built page, as a
+ * spark-html-bun pipeline step.
+ *
+ * Inserts the <link rel="preload">s + inline <style data-spark-font> right
+ * before </head> in each page — so the font fetch starts with the HTML and
+ * first paint uses the size-adjusted fallback. Component fragments have no
+ * <head> and are skipped naturally; pages already carrying data-spark-font
+ * are left alone (idempotent). Put it after prerender() in the pipeline so
+ * per-route pages are covered.
+ *
+ *   import font from 'spark-html-font/bun';
+ *   export default { pipeline: [prerender(), font({ fonts: [...] })] };
+ */
+import { join, resolve } from 'node:path';
+import { readFile, writeFile, readdir, stat } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import { fontHtml } from './index.js';
+
+async function htmlFiles(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 htmlFiles(full));
+    else if (name.endsWith('.html')) out.push(full);
+  }
+  return out;
+}
+
+export default function sparkFont(config = {}) {
+  return {
+    name: 'spark-html-font',
+    async run({ outDir }) {
+      const root = resolve(outDir);
+      if (!existsSync(root)) return;
+      const block = fontHtml(config);
+      if (!block) return;
+      let pages = 0;
+      for (const file of await htmlFiles(root)) {
+        const html = await readFile(file, 'utf8');
+        if (!/<\/head>/i.test(html)) continue;          // fragment (component) — skip
+        if (html.includes('data-spark-font')) continue; // already injected
+        await writeFile(file, html.replace(/<\/head>/i, `${block}\n</head>`), 'utf8');
+        pages++;
+      }
+      if (pages) console.log(`[spark-html-font] injected font loading into ${pages} page(s)`);
+    },
+    // Dev: inject the same tags into served pages so fonts load in dev too.
+    transformHtml(html, { dev }) {
+      if (!dev) return html;
+      if (html.includes('data-spark-font') || !/<\/head>/i.test(html)) return html;
+      const block = fontHtml(config);
+      return block ? html.replace(/<\/head>/i, `${block}\n</head>`) : html;
+    },
+  };
+}

package/src/index.js

@@ -18,8 +18,8 @@
  *   import { fonts } from 'spark-html-font';
  *   fonts({ fonts: [{ family: 'Inter', src: '/fonts/inter-var.woff2', weight: '100 900' }] });
  *
- *   // at build (vite.config.js) — bakes the same tags into every built page
- *   import font from 'spark-html-font/vite';
+ *   // at build (spark.config.js) — bakes the same tags into every built page
+ *   import font from 'spark-html-font/bun';
  *   plugins: [spark(), prerender(), font({ fonts: [...] })]
  *
  * Zero dependencies; pure string generation plus a little DOM.
@@ -127,7 +127,7 @@ export function fontLinks(config = {}) {
   return links;
 }
 
-// Serialize the links + style as an HTML block (used by the vite plugin; the
+// Serialize the links + style as an HTML block (used by the bun build step; the
 // data-spark-font marker makes injection idempotent).
 export function fontHtml(config = {}) {
   const attrs = (l) => Object.entries(l)

package/src/vite.js

@@ -1,57 +0,0 @@
-/**
- * spark-html-font/vite — bake the font tags into every built page.
- *
- * Runs in closeBundle (order post, after spark-prerender has written its
- * per-route HTML) and inserts the <link rel="preload">s + inline
- * <style data-spark-font> right before </head> in each page — so the font
- * fetch starts with the HTML and first paint uses the size-adjusted
- * fallback. Component fragments have no <head> and are skipped naturally;
- * pages already carrying data-spark-font are left alone (idempotent).
- *
- *   import font from 'spark-html-font/vite';
- *   plugins: [spark(), prerender(), font({ fonts: [...] })]
- */
-import { join, resolve } from 'node:path';
-import { readFile, writeFile, readdir, stat } from 'node:fs/promises';
-import { existsSync } from 'node:fs';
-import { fontHtml } from './index.js';
-
-async function htmlFiles(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 htmlFiles(full));
-    else if (name.endsWith('.html')) out.push(full);
-  }
-  return out;
-}
-
-export default function sparkFont(config = {}) {
-  let outDir = 'dist';
-  return {
-    name: 'spark-html-font',
-    apply: 'build',
-    configResolved(viteConfig) {
-      if (viteConfig && viteConfig.build && viteConfig.build.outDir) outDir = viteConfig.build.outDir;
-    },
-    closeBundle: {
-      order: 'post',
-      async handler() {
-        const root = resolve(outDir);
-        if (!existsSync(root)) return;
-        const block = fontHtml(config);
-        if (!block) return;
-        let pages = 0;
-        for (const file of await htmlFiles(root)) {
-          const html = await readFile(file, 'utf8');
-          if (!/<\/head>/i.test(html)) continue;          // fragment (component) — skip
-          if (html.includes('data-spark-font')) continue; // already injected
-          await writeFile(file, html.replace(/<\/head>/i, `${block}\n</head>`), 'utf8');
-          pages++;
-        }
-        if (pages) console.log(`[spark-html-font] injected font loading into ${pages} page(s)`);
-      },
-    },
-  };
-}