spark-html-image 0.1.2 → 0.1.4

package/README.md

@@ -1,18 +1,17 @@
 # ⚡ spark-html-image
 
 Build-time image optimization for [spark-html](https://www.npmjs.com/package/spark-html)
-sites — a Vite plugin that converts your `<img>` references to **webp/avif**
-with a responsive `srcset`, **zero config**. No more hand-written
-`scripts/optimize-images.js` wired into the build command.
+sites — a `spark-html-bun` pipeline step that converts your `<img>` references
+to **webp/avif** with a responsive `srcset`, **zero config**. No more
+hand-written `scripts/optimize-images.js` wired into the build command.
 
 ```js
-// vite.config.js
-import spark from 'spark-html/vite';
-import prerender from 'spark-prerender/vite';
-import image from 'spark-html-image';
+// spark.config.js
+import prerender from 'spark-prerender/bun';
+import image from 'spark-html-image/bun';
 
 export default {
-  plugins: [spark(), prerender(), image()],
+  pipeline: [prerender(), image()],
 };
 ```
 
@@ -39,7 +38,7 @@ External URLs, SVGs, and any `<img>` that already has a `srcset` (or sits in a
 ## Install
 
 ```bash
-npm install -D spark-html-image
+bun add -d spark-html-image
 ```
 
 ## Options
@@ -70,6 +69,7 @@ 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-bun`](https://www.npmjs.com/package/spark-html-bun) | Dev server, bundler & preview on Bun — scoped HMR, no-build dev, post-build pipeline. |
 | [`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. |
@@ -84,6 +84,6 @@ virtual DOM, no build step required. Add only what you use.
 | [`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 Vite + spark-html app in one command. |
+| [`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,7 +1,7 @@
 {
   "name": "spark-html-image",
-  "version": "0.1.2",
-  "description": "Build-time image optimization for spark-html sites — a Vite plugin that converts <img> references to webp/avif with responsive srcset, zero config.",
+  "version": "0.1.4",
+  "description": "Build-time image optimization for spark-html sites — a spark-html-bun build step that converts <img> references to webp/avif with responsive srcset, zero config.",
   "type": "module",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",
@@ -11,8 +11,7 @@
       "types": "./src/index.d.ts",
       "default": "./src/index.js"
     },
-    "./vite": {
-      "types": "./src/index.d.ts",
+    "./bun": {
       "default": "./src/index.js"
     }
   },
@@ -33,7 +32,7 @@
   },
   "keywords": [
     "spark-html",
-    "vite-plugin",
+    "bun",
     "images",
     "webp",
     "avif",

package/src/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * spark-html-image — build-time image optimization (Vite plugin).
+ * spark-html-image — build-time image optimization (spark-html-bun step).
  * Converts local raster <img> references in the built HTML (pages and
  * component fragments) to webp/avif variants with a responsive srcset.
  */
@@ -19,10 +19,8 @@ export interface SparkImageOptions {
   lazy?: boolean;
 }
 
-/** Vite plugin: optimize <img> references in the build output. */
+/** spark-html-bun pipeline step: optimize <img> references in the build output. */
 export default function sparkImage(options?: SparkImageOptions): {
   name: string;
-  apply: 'build';
-  configResolved(config: unknown): void;
-  closeBundle: { order: 'post'; handler(): Promise<void> };
+  run(ctx: { outDir: string }): Promise<void>;
 };

package/src/index.js

@@ -1,7 +1,7 @@
 /**
  * spark-html-image — build-time image optimization for spark-html sites.
  *
- * A Vite plugin: after the build (and after spark-prerender has written its
+ * A build step: after the build (and after spark-prerender has written its
  * per-route HTML), it scans every *.html in the out dir — pages AND
  * components — for local raster <img> references, converts each to
  * webp/avif at several widths with sharp, and rewrites the tag:
@@ -15,15 +15,16 @@
  * The original file stays in place as the src fallback, so nothing breaks in
  * a browser (or crawler) that ignores srcset. Zero config:
  *
- *   // vite.config.js
+ *   // spark.config.js
  *   import image from 'spark-html-image';
- *   export default { plugins: [spark(), prerender(), image()] };
+ *   export default { pipeline: [prerender(), image()] };
  *
  * With `picture: true` it instead wraps the img in <picture> with one
  * <source> per format (useful when you enable avif).
  *
  * No core involvement — this is the same pattern as spark-prerender:
- * build-time only, optional, nothing added to the runtime.
+ * build-time only, optional, nothing added to the runtime. It's a
+ * spark-html-bun pipeline step: { name, run({ outDir }) }.
  */
 import { join, dirname, extname, posix } from 'node:path';
 import { readFile, writeFile, readdir, stat } from 'node:fs/promises';
@@ -84,19 +85,10 @@ export default function sparkImage(options = {}) {
   const picture = options.picture === true;
   const lazy = options.lazy !== false;
 
-  let outDir = 'dist';
-
   return {
     name: 'spark-html-image',
-    apply: 'build',
-    configResolved(config) {
-      if (config && config.build && config.build.outDir) outDir = config.build.outDir;
-    },
-    // order:'post' → runs after spark-prerender's closeBundle has written the
-    // per-route HTML, so prerendered pages are rewritten too.
-    closeBundle: {
-      order: 'post',
-      async handler() {
+    // Put it after prerender() in the pipeline so per-route HTML is rewritten too.
+    async run({ outDir }) {
         // sharp is imported lazily so merely having the plugin installed
         // never loads the native module until a build actually runs.
         let sharp;
@@ -212,7 +204,6 @@ export default function sparkImage(options = {}) {
         if (images) {
           console.log(`[spark-html-image] optimized ${images} image reference(s) across ${files} file(s) (${formats.join('+')})`);
         }
-      },
     },
   };
 }