spark-html-image 0.1.1 → 0.1.3

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()],
 };
 ```
 
@@ -84,6 +83,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.1",
-  "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.3",
+  "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;
@@ -121,7 +113,15 @@ export default function sparkImage(options = {}) {
           let m = meta.get(file);
           if (!m) {
             const info = await sharp(file).metadata();
-            m = { width: info.width || 0, height: info.height || 0 };
+            // EXIF orientations 5–8 display the image rotated 90° — the
+            // metadata reports the SENSOR dimensions, so swap to get the
+            // dimensions the page actually renders (and that the rotated
+            // variants below will have).
+            const swap = (info.orientation || 1) >= 5;
+            m = {
+              width: (swap ? info.height : info.width) || 0,
+              height: (swap ? info.width : info.height) || 0,
+            };
             meta.set(file, m);
           }
           // Widths strictly below the intrinsic width, plus the intrinsic
@@ -138,7 +138,10 @@ export default function sparkImage(options = {}) {
                 const dest = destUrl.startsWith('/')
                   ? join(root, destUrl.slice(1))
                   : join(dirname(file), posix.basename(destUrl));
-                let img = sharp(file);
+                // .rotate() with no args bakes the EXIF orientation into the
+                // pixels — webp/avif output drops the EXIF tag, so without
+                // this every phone photo would render sideways.
+                let img = sharp(file).rotate();
                 if (w) img = img.resize({ width: w });
                 await img[format]({ quality }).toFile(dest);
                 converted.set(key, url);
@@ -201,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('+')})`);
         }
-      },
     },
   };
 }