create-spark-html-app 0.7.0 → 0.8.0

package/README.md

@@ -1,14 +1,15 @@
 # create-spark-html-app
 
-Scaffold a [Spark](https://github.com/wilkinnovo/spark) app in seconds — a Vite
-project wired to `spark-html` with live, reactive **Spark** components.
+Scaffold a [Spark](https://github.com/wilkinnovo/spark) app in seconds — a
+Bun-powered project (dev / build / preview via `spark-html-bun`) wired to
+`spark-html` with live, reactive **Spark** components.
 
 ## Usage
 
 ```bash
-npm create spark-html-app@latest my-app
+bun create spark-html-app my-app
 # or
-npx create-spark-html-app my-app
+bunx create-spark-html-app my-app
 ```
 
 Then:
@@ -52,6 +53,32 @@ npx create-spark-html-app my-app --pwa --no-image   # per-feature
 Everything is plain HTML and JavaScript — no compiler, no virtual DOM, no
 proprietary file format. Edit a component, save, and the page updates.
 
+## 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/bin/index.js

@@ -5,9 +5,10 @@
  *   npm create spark-html-app@latest my-app
  *   npx create-spark-html-app my-app
  *
- * Scaffolds a ready-to-run Vite + spark-html project with a live,
- * reactive "Welcome to Spark" screen. Zero runtime dependencies —
- * just Node built-ins, in keeping with Spark's no-build ethos.
+ * Scaffolds a ready-to-run spark-html project (dev/build/preview on Bun,
+ * via spark-html-bun) with a live, reactive "Welcome to Spark" screen.
+ * Zero runtime dependencies — just Node built-ins, in keeping with
+ * Spark's no-build ethos.
  */
 import { fileURLToPath } from 'node:url';
 import { dirname, join, resolve, relative, basename } from 'node:path';
@@ -236,8 +237,8 @@ async function main() {
   }
   // PWA config carries the app's display name.
   if (features.pwa) {
-    const vitePath = join(targetDir, 'vite.config.js');
-    writeFileSync(vitePath, readFileSync(vitePath, 'utf8').replace("name: 'Spark App'", `name: '${projectName}'`), 'utf8');
+    const cfgPath = join(targetDir, 'spark.config.js');
+    writeFileSync(cfgPath, readFileSync(cfgPath, 'utf8').replace("name: 'Spark App'", `name: '${projectName}'`), 'utf8');
   }
   // Always start on the newest published versions of the spark packages. If the
   // registry can't be reached (or a package isn't published yet), the template's
@@ -262,8 +263,8 @@ async function main() {
   stdout.write(`\n${c.green('✔')} Scaffolded ${c.bold(projectName)} in ${c.cyan(rel)} ${c.dim(`(head, persist, prerender, devtools + ${picked})`)}\n\n`);
   stdout.write(`${c.bold('Next steps:')}\n`);
   if (rel !== '.') stdout.write(`  ${c.dim('1.')} cd ${rel}\n`);
-  stdout.write(`  ${c.dim(rel !== '.' ? '2.' : '1.')} npm install\n`);
-  stdout.write(`  ${c.dim(rel !== '.' ? '3.' : '2.')} npm run dev\n\n`);
+  stdout.write(`  ${c.dim(rel !== '.' ? '2.' : '1.')} bun install\n`);
+  stdout.write(`  ${c.dim(rel !== '.' ? '3.' : '2.')} bun dev\n\n`);
   stdout.write(`${BOLT} Then open the dev server and edit ${c.cyan('public/components/hero.html')}.\n\n`);
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-spark-html-app",
-  "version": "0.7.0",
-  "description": "Scaffold a Vite + spark-html",
+  "version": "0.8.0",
+  "description": "Scaffold a spark-html app — dev/build/preview on Bun",
   "type": "module",
   "bin": {
     "create-spark-html-app": "bin/index.js"
@@ -24,7 +24,7 @@
     "create",
     "scaffold",
     "cli",
-    "vite",
+    "bun",
     "reactive",
     "html",
     "no-build"

package/template/README.md

@@ -24,12 +24,12 @@ component state, stores, and the mounted tree live.
 ## Build (SEO-ready)
 
 ```bash
-npm run build     # static output → dist/, serve anywhere
-npm run preview   # preview the production build locally
+bun run build     # static output → dist/, serve anywhere
+bun run preview   # preview the production build locally
 ```
 
-`npm run build` is **SEO-friendly out of the box**: the `spark-prerender`
-Vite plugin runs your app at build time and writes fully-rendered HTML into
+`bun run build` is **SEO-friendly out of the box**: the `spark-prerender`
+pipeline step runs your app at build time and writes fully-rendered HTML into
 `dist/` — so crawlers and AI tools read real content (headings, text, links),
 not empty placeholders. The browser still hydrates over it for full
 interactivity.
@@ -37,7 +37,7 @@ interactivity.
 Per-route `<title>` and `<meta>` tags are set reactively via
 `spark-html-head` in `src/main.js` — no per-component boilerplate.
 
-Don't need SEO? Remove the `prerender(...)` plugin from `vite.config.js`.
+Don't need SEO? Remove the `prerender(...)` step from `spark.config.js`.
 
 ## Architecture
 

package/template/_gitignore

@@ -2,4 +2,3 @@ node_modules
 dist
 *.local
 .DS_Store
-.vite

package/template/package.json

@@ -4,9 +4,9 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
+    "dev": "spark dev",
+    "build": "spark build",
+    "preview": "spark preview"
   },
   "dependencies": {
     "spark-html": "latest",
@@ -18,9 +18,9 @@
     "spark-html-manifest": "latest"
   },
   "devDependencies": {
+    "spark-html-bun": "latest",
     "spark-prerender": "latest",
     "spark-html-devtools": "latest",
-    "spark-html-image": "latest",
-    "vite": "^8.1.0"
+    "spark-html-image": "latest"
   }
 }

package/template/spark.config.js

@@ -0,0 +1,52 @@
+import prerender from 'spark-prerender/bun';
+// @spark:image
+import image from 'spark-html-image/bun';
+// @spark:end
+// @spark:pwa
+import manifest from 'spark-html-manifest/bun';
+// @spark:end
+// @spark:sri
+import sri from 'spark-html-sri/bun';
+// @spark:end
+
+// Spark needs no build step — spark-html-bun is just a fast dev server and a
+// bundler for your app shell. `spark dev` serves component fragments raw and
+// hot-reloads only the edited component; components live in public/ so they
+// ship verbatim to the production build too.
+//
+// The `pipeline` runs in order after `spark build` copies public/ and bundles
+// the entry. Order matters: prerender() first (it writes one HTML file per
+// route), then the steps that rewrite those pages — sri() must be last so it
+// hashes the final bytes.
+//
+// `prerender()` makes `bun run build` SEO-friendly: it runs your app at build
+// time and writes fully-rendered HTML into dist/ (crawlers and AI tools read
+// real content; the browser still hydrates over it), plus sitemap.xml +
+// robots.txt. Remove it if you don't need SEO.
+export default {
+  pipeline: [
+    prerender({ pages: ['index.html'] }),
+    // @spark:image
+    // Every <img> in pages and components: converted to webp/avif at multiple
+    // widths, srcset + width/height added (no layout shift), loading="lazy".
+    // Zero config.
+    image(),
+    // @spark:end
+    // @spark:pwa
+    // One config → manifest.webmanifest + resized icons + <head> tags + an
+    // offline app-shell service worker (registered automatically).
+    manifest({
+      name: 'Spark App',
+      themeColor: '#ffd24a',
+      icon: 'public/icon.png',
+      offline: true,
+    }),
+    // @spark:end
+    // @spark:sri
+    // Hashes every built asset + component, stamps integrity/crossorigin onto
+    // script/link tags, and bakes the verify manifest into each page. Keep it
+    // LAST so it sees the final pages.
+    sri(),
+    // @spark:end
+  ],
+};

package/template/src/main.js

@@ -45,7 +45,7 @@ theme();
 
 // @spark:pwa
 // PWA: manifest.webmanifest, icons, and the offline app-shell worker are
-// generated by spark-html-manifest/vite (see vite.config.js) — the worker
+// generated by spark-html-manifest/bun (see spark.config.js) — the worker
 // registration is injected into every built page automatically.
 // Want offline-capable CDN component imports too? See spark-html-offline
 // (a page registers one worker per scope, so pick the one you need).

package/template/vite.config.js

@@ -1,55 +0,0 @@
-import { defineConfig } from 'vite';
-import spark from 'spark-html/vite';
-import prerender from 'spark-prerender/vite';
-// @spark:image
-import image from 'spark-html-image/vite';
-// @spark:end
-// @spark:pwa
-import manifest from 'spark-html-manifest/vite';
-// @spark:end
-// @spark:sri
-import sri from 'spark-html-sri/vite';
-// @spark:end
-
-// Spark needs no build step — Vite is just a convenient dev server and
-// bundler. The plugin serves component fragments raw and full-reloads
-// when one changes. Components live in public/ so they ship verbatim to
-// the production build too.
-//
-// `prerender()` makes `npm run build` SEO-friendly: it runs your app at
-// build time and writes fully-rendered HTML into dist/ (crawlers and AI
-// tools read real content; the browser still hydrates over it), plus
-// sitemap.xml + robots.txt. Remove it if you don't need SEO.
-export default defineConfig({
-  optimizeDeps: {
-    // Ensure spark-html is pre-bundled so all modules share the same stores Map.
-    // Without this, file: references can create duplicate runtime instances.
-    include: ['spark-html'],
-  },
-  plugins: [
-    spark(),
-    // @spark:image
-    // Every <img> in pages and components: converted to webp/avif at
-    // multiple widths, wrapped in <picture> with srcset, width/height
-    // added (no layout shift), loading="lazy". Zero config.
-    image(),
-    // @spark:end
-    prerender({ pages: ['index.html'] }),
-    // @spark:pwa
-    // One config → manifest.webmanifest + resized icons + <head> tags +
-    // an offline app-shell service worker (registered automatically).
-    manifest({
-      name: 'Spark App',
-      themeColor: '#ffd24a',
-      icon: 'public/icon.png',
-      offline: true,
-    }),
-    // @spark:end
-    // @spark:sri
-    // Hashes every built asset + component, stamps integrity/crossorigin
-    // onto script/link tags, and bakes the verify manifest into each page.
-    // Keep it AFTER prerender() so it sees the final pages.
-    sri(),
-    // @spark:end
-  ],
-});