npm - spark-html-manifest - Versions diffs - 0.1.1 → 0.1.3 - Mend

spark-html-manifest 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -1,20 +1,18 @@
 # ⚡ spark-html-manifest
 PWA setup for [spark-html](https://www.npmjs.com/package/spark-html) sites
-from a **single config** — a Vite plugin that generates
+from a **single config** — a `spark-html-bun` build step that generates
 `manifest.webmanifest`, resizes your icons from one source image, injects
 the `<head>` tags, and (optionally) emits a minimal offline app-shell
 service worker. No manual icon exports, no copy-paste boilerplate.
 ```js
-// vite.config.js
-import spark from 'spark-html/vite';
-import prerender from 'spark-prerender/vite';
-import manifest from 'spark-html-manifest/vite';
+// spark.config.js
+import prerender from 'spark-prerender/bun';
+import manifest from 'spark-html-manifest/bun';
 export default {
-  plugins: [
-    spark(),
+  pipeline: [
     prerender(),
     manifest({
       name: 'My Spark App',
@@ -27,7 +25,7 @@ export default {
 };
 ```
-That's the whole setup. `npm run build` now produces:
+That's the whole setup. `bun run build` now produces:
 - `manifest.webmanifest` — name, colors, display mode, icons
 - `icons/spark-192.png`, `icons/spark-512.png` — resized from your source
@@ -41,7 +39,7 @@ Lighthouse/devtools "installable" checks pass locally too.
 ## Install
 ```bash
-npm install spark-html-manifest
+bun add spark-html-manifest
 ```
 ## Config
@@ -69,7 +67,7 @@ manifest({
 `offline: true` emits a deliberately small service worker:
 - the **app shell** (`shell` URLs) is precached at install;
-- Vite's hash-named `/assets/…` files are **cache-first** (they're immutable);
+- the build's hash-named `/assets/…` files are **cache-first** (they're immutable);
 - everything else same-origin is **network-first** with cache fallback — the
   app opens offline but is never a deploy behind while online;
 - offline navigation to any route falls back to the shell.
@@ -102,6 +100,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. |
@@ -116,7 +115,7 @@ 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 CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "spark-html-manifest",
-  "version": "0.1.1",
-  "description": "PWA manifest + icons + offline app shell for spark-html sites from a single config — a Vite plugin that generates manifest.webmanifest, resizes icons, injects the head tags, and optionally emits a minimal service worker.",
+  "version": "0.1.3",
+  "description": "PWA manifest + icons + offline app shell for spark-html sites from a single config — a spark-html-bun build step that generates manifest.webmanifest, resizes icons, injects the head tags, and optionally emits a minimal service worker.",
   "type": "module",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",
@@ -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": {
@@ -37,7 +36,7 @@
     "webmanifest",
     "icons",
     "service-worker",
-    "vite-plugin"
+    "bun"
   ],
   "license": "MIT"
 }

package/src/bun.js ADDED Viewed

@@ -0,0 +1,118 @@
+/**
+ * spark-html-manifest/bun — one config → a full PWA, as a spark-html-bun
+ * pipeline step. Same output, split the two ways the Bun
+ * runner consumes:
+ *
+ *   • run({ outDir }) — emit manifest.webmanifest, resize the source icon into
+ *     every configured size (sharp, imported lazily), optionally emit the
+ *     app-shell worker, then stamp <link rel="manifest"> + <meta theme-color>
+ *     (+ worker registration) into every built page. Put it after prerender()
+ *     so per-route pages are covered.
+ *   • devRoutes() — serve the manifest (and worker) straight from config so
+ *     devtools' "installable" checks work in dev too.
+ *   • transformHtml() — inject the same head tags into served pages in dev.
+ *
+ *   import manifest from 'spark-html-manifest/bun';
+ *   export default { pipeline: [prerender(), manifest({
+ *     name: 'My App', themeColor: '#ffd24a', icon: 'public/icon.png', offline: true,
+ *   })] };
+ */
+import { join, resolve, dirname } from 'node:path';
+import { readFile, writeFile, readdir, stat, mkdir } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import { manifestJson, manifestHtml, swSource, iconPath, ICON_SIZES } 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 sparkManifest(config = {}) {
+  const filename = config.filename || 'manifest.webmanifest';
+  const offline = config.offline || false;
+  const swFile = (offline && offline.file) || 'spark-manifest-sw.js';
+  const headBlock = () =>
+    manifestHtml(config, { href: filename, sw: offline ? swFile : undefined });
+  return {
+    name: 'spark-html-manifest',
+    async run({ outDir }) {
+      const root = resolve(outDir);
+      if (!existsSync(root)) return;
+      // Emit manifest + worker.
+      await writeFile(join(root, filename), JSON.stringify(manifestJson(config), null, 2), 'utf8');
+      if (offline) {
+        await writeFile(join(root, swFile), swSource(typeof offline === 'object' ? offline : {}), 'utf8');
+      }
+      // Icons (unless the author supplied explicit ones).
+      if (config.icon && !config.icons) {
+        if (!existsSync(config.icon)) {
+          console.warn(`[spark-html-manifest] icon source not found: ${config.icon} — icons skipped`);
+        } else {
+          // sharp is imported lazily so the plugin never breaks a build where
+          // native deps can't load — you just generate icons elsewhere.
+          let sharp;
+          try {
+            sharp = (await import('sharp')).default;
+          } catch (e) {
+            console.warn(`[spark-html-manifest] sharp unavailable — icons skipped (${e.message})`);
+            sharp = null;
+          }
+          if (sharp) {
+            const sizes = config.sizes || ICON_SIZES;
+            for (const size of sizes) {
+              const dest = join(root, iconPath(config, size));
+              await mkdir(dirname(dest), { recursive: true });
+              await sharp(config.icon).resize(size, size, { fit: 'cover' }).png().toFile(dest);
+            }
+            console.log(`[spark-html-manifest] ${sizes.length} icon(s) generated from ${config.icon}`);
+          }
+        }
+      }
+      // Stamp head tags into every page (after prerender wrote its pages).
+      const block = headBlock();
+      let pages = 0;
+      for (const file of await htmlFiles(root)) {
+        const html = await readFile(file, 'utf8');
+        if (!/<\/head>/i.test(html)) continue;              // fragment — skip
+        if (html.includes('data-spark-manifest')) continue; // already injected
+        await writeFile(file, html.replace(/<\/head>/i, `${block}\n</head>`), 'utf8');
+        pages++;
+      }
+      if (pages) console.log(`[spark-html-manifest] injected PWA tags into ${pages} page(s)`);
+    },
+    // Dev: serve the manifest (and worker) straight from config.
+    devRoutes() {
+      const routes = {
+        [`/${filename}`]: {
+          type: 'application/manifest+json',
+          body: () => JSON.stringify(manifestJson(config), null, 2),
+        },
+      };
+      if (offline) {
+        routes[`/${swFile}`] = {
+          type: 'text/javascript',
+          body: () => swSource(typeof offline === 'object' ? offline : {}),
+        };
+      }
+      return routes;
+    },
+    transformHtml(html, { dev }) {
+      if (!dev) return html;
+      if (html.includes('data-spark-manifest') || !/<\/head>/i.test(html)) return html;
+      return html.replace(/<\/head>/i, `${headBlock()}\n</head>`);
+    },
+  };
+}

package/src/index.js CHANGED Viewed

@@ -1,13 +1,13 @@
 /**
  * spark-html-manifest — PWA setup from a single config.
  *
- * name, icons, colors, display mode in one place; the vite plugin turns it
+ * name, icons, colors, display mode in one place; the bun build step turns it
  * into manifest.webmanifest + resized icons + the <head> tags + (optionally)
  * a minimal app-shell service worker. No manual icon exports, no copy-paste
  * boilerplate.
  *
- *   // vite.config.js
- *   import manifest from 'spark-html-manifest/vite';
+ *   // spark.config.js
+ *   import manifest from 'spark-html-manifest/bun';
  *   plugins: [spark(), prerender(), manifest({
  *     name: 'My App',
  *     themeColor: '#ffd24a',
@@ -136,7 +136,7 @@ self.addEventListener('fetch', function (event) {
   var url;
   try { url = new URL(req.url); } catch (e) { return; }
   if (url.origin !== self.location.origin) return;
-  // Vite's hash-named assets are immutable — cache-first is always correct.
+  // The build's hash-named assets are immutable — cache-first is always correct.
   var immutable = /\\/assets\\/[^/]*[-.][A-Za-z0-9_-]{8,}\\.\\w+$/.test(url.pathname);
   event.respondWith(caches.open(CACHE).then(function (cache) {
     return cache.match(req, { ignoreSearch: req.mode === 'navigate' }).then(function (cached) {

package/src/vite.d.ts DELETED Viewed

@@ -1,23 +0,0 @@
-import type { ManifestConfig, AppShellSwOptions } from './index.js';
-export interface ManifestVitePluginOptions extends ManifestConfig {
-  /** Source image — resized to every size in `sizes` (requires sharp). */
-  icon?: string;
-  /** Emitted manifest file name (default 'manifest.webmanifest'). */
-  filename?: string;
-  /** Emit + register the offline app-shell worker. */
-  offline?: boolean | AppShellSwOptions;
-}
-/**
- * Vite plugin: manifest.webmanifest + resized icons + head tags +
- * (optionally) the app-shell service worker. Put it after prerender().
- */
-export default function sparkManifest(options: ManifestVitePluginOptions): {
-  name: string;
-  configResolved(config: unknown): void;
-  configureServer(server: unknown): void;
-  transformIndexHtml(html: string): string;
-  generateBundle(): Promise<void>;
-  closeBundle: { order: 'post'; handler(): Promise<void> };
-};

package/src/vite.js DELETED Viewed

@@ -1,128 +0,0 @@
-/**
- * spark-html-manifest/vite — one config → a full PWA.
- *
- * Build: emits manifest.webmanifest, resizes the source icon into every
- * configured size (sharp, imported lazily), optionally emits the app-shell
- * worker, and injects <link rel="manifest"> + <meta name="theme-color">
- * (+ worker registration) into every built page — runs in closeBundle
- * (order post, after spark-prerender wrote its per-route HTML).
- * Dev: serves the manifest + injects the tags so devtools' "installable"
- * checks work locally too.
- *
- *   import manifest from 'spark-html-manifest/vite';
- *   plugins: [spark(), prerender(), manifest({
- *     name: 'My App', themeColor: '#ffd24a', icon: 'public/icon.png', offline: true,
- *   })]
- */
-import { join, resolve } from 'node:path';
-import { readFile, writeFile, readdir, stat } from 'node:fs/promises';
-import { existsSync } from 'node:fs';
-import { manifestJson, manifestHtml, swSource, iconPath, ICON_SIZES } 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;
-}
-/**
- * @param {object} config  Everything manifestJson takes, plus:
- * @param {string}  [config.icon]     Source image — resized to every size in `sizes`.
- * @param {string}  [config.filename='manifest.webmanifest']
- * @param {boolean|object} [config.offline=false]  Emit + register the app-shell
- *   worker; pass { shell, version, file } to tune it.
- */
-export default function sparkManifest(config = {}) {
-  const filename = config.filename || 'manifest.webmanifest';
-  const offline = config.offline || false;
-  const swFile = (offline && offline.file) || 'spark-manifest-sw.js';
-  const headBlock = () =>
-    manifestHtml(config, { href: filename, sw: offline ? swFile : undefined });
-  let outDir = 'dist';
-  return {
-    name: 'spark-html-manifest',
-    configResolved(viteConfig) {
-      if (viteConfig && viteConfig.build && viteConfig.build.outDir) outDir = viteConfig.build.outDir;
-    },
-    // Dev: serve the manifest (and worker) straight from config.
-    configureServer(server) {
-      server.middlewares.use((req, res, next) => {
-        const path = (req.url || '').split('?')[0];
-        if (path === `/${filename}`) {
-          res.setHeader('Content-Type', 'application/manifest+json');
-          res.end(JSON.stringify(manifestJson(config), null, 2));
-        } else if (offline && path === `/${swFile}`) {
-          res.setHeader('Content-Type', 'text/javascript');
-          res.end(swSource(typeof offline === 'object' ? offline : {}));
-        } else {
-          next();
-        }
-      });
-    },
-    transformIndexHtml(html) {
-      if (html.includes('data-spark-manifest')) return html;
-      return html.replace(/<\/head>/i, `${headBlock()}\n</head>`);
-    },
-    // Build: emit manifest + icons + worker.
-    async generateBundle() {
-      this.emitFile({
-        type: 'asset',
-        fileName: filename,
-        source: JSON.stringify(manifestJson(config), null, 2),
-      });
-      if (offline) {
-        const shellOpts = typeof offline === 'object' ? offline : {};
-        this.emitFile({ type: 'asset', fileName: swFile, source: swSource(shellOpts) });
-      }
-      if (!config.icon || config.icons) return; // explicit icons — nothing to generate
-      if (!existsSync(config.icon)) {
-        console.warn(`[spark-html-manifest] icon source not found: ${config.icon} — icons skipped`);
-        return;
-      }
-      // sharp is imported lazily so the plugin never breaks a build where
-      // native deps can't load — you just generate icons elsewhere.
-      let sharp;
-      try {
-        sharp = (await import('sharp')).default;
-      } catch (e) {
-        console.warn(`[spark-html-manifest] sharp unavailable — icons skipped (${e.message})`);
-        return;
-      }
-      for (const size of config.sizes || ICON_SIZES) {
-        const png = await sharp(config.icon)
-          .resize(size, size, { fit: 'cover' })
-          .png()
-          .toBuffer();
-        this.emitFile({ type: 'asset', fileName: iconPath(config, size), source: png });
-      }
-      console.log(`[spark-html-manifest] ${(config.sizes || ICON_SIZES).length} icon(s) generated from ${config.icon}`);
-    },
-    // After prerender wrote its pages: stamp the head tags into every page.
-    closeBundle: {
-      order: 'post',
-      async handler() {
-        const root = resolve(outDir);
-        if (!existsSync(root)) return;
-        const block = headBlock();
-        let pages = 0;
-        for (const file of await htmlFiles(root)) {
-          const html = await readFile(file, 'utf8');
-          if (!/<\/head>/i.test(html)) continue;            // fragment — skip
-          if (html.includes('data-spark-manifest')) continue; // already injected
-          await writeFile(file, html.replace(/<\/head>/i, `${block}\n</head>`), 'utf8');
-          pages++;
-        }
-        if (pages) console.log(`[spark-html-manifest] injected PWA tags into ${pages} page(s)`);
-      },
-    },
-  };
-}