create-spark-html-app 0.8.1 → 0.8.3

package/README.md

@@ -7,9 +7,7 @@ Bun-powered project (dev / build / preview via `spark-html-bun`) wired to
 ## Usage
 
 ```bash
-bun create spark-html-app my-app
-# or
-bunx create-spark-html-app my-app
+bunx create-spark-html-app@latest my-app
 ```
 
 Then:
@@ -23,7 +21,7 @@ bun run dev
 Run it with no name to be prompted:
 
 ```bash
-bun create spark-html-app
+bunx create-spark-html-app@latest
 ```
 
 ## What you get
@@ -44,10 +42,10 @@ Every included feature ships with a live demo component, ready to run.
 Non-interactive? Pass flags instead of answering prompts:
 
 ```bash
-bunx create-spark-html-app my-app --yes       # accept the defaults
-bunx create-spark-html-app my-app --all       # everything on
-bunx create-spark-html-app my-app --minimal   # core only
-bunx create-spark-html-app my-app --pwa --no-image   # per-feature
+bunx create-spark-html-app@latest my-app --yes       # accept the defaults
+bunx create-spark-html-app@latest my-app --all       # everything on
+bunx create-spark-html-app@latest my-app --minimal   # core only
+bunx create-spark-html-app@latest my-app --pwa --no-image   # per-feature
 ```
 
 Everything is plain HTML and JavaScript — no compiler, no virtual DOM, no
@@ -56,7 +54,8 @@ 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.
+virtual DOM, no build step required — built for humans who love hand-writing
+their web apps. Add only what you use.
 
 | Package | What it does |
 |---|---|

package/bin/index.js

@@ -106,6 +106,7 @@ async function prompt(question, fallback) {
 const FEATURES = [
   { key: 'router', question: 'Include router (multi-page SPA)?', def: true, deps: ['spark-html-router'], files: ['public/components/about.html'] },
   { key: 'theme', question: 'Include theme (dark/light toggle)?', def: true, deps: ['spark-html-theme'], files: [] },
+  { key: 'font', question: 'Include font loading optimizer (no FOUT)?', def: true, deps: ['spark-html-font'], files: [] },
   { key: 'image', question: 'Include image optimization?', def: true, deps: ['spark-html-image'], files: ['public/components/demo-image.html', 'public/sample.jpg'] },
   { key: 'sri', question: 'Include SRI integrity checks?', def: true, deps: ['spark-html-sri'], files: [] },
   { key: 'pwa', question: 'Include PWA support (manifest + offline shell)?', def: false, deps: ['spark-html-manifest'], files: ['public/icon.png'] },
@@ -122,7 +123,7 @@ async function pickFeatures() {
     if (flags.includes(`--no-${f.key}`)) on[f.key] = false;
   }
   // Interactive only on a TTY, and only when no preset flag was given.
-  const preset = flags.some((a) => /^--(yes|all|minimal|(no-)?(router|theme|image|sri|pwa))$/.test(a));
+  const preset = flags.some((a) => /^--(yes|all|minimal|(no-)?(router|theme|font|image|sri|pwa))$/.test(a));
   if (stdin.isTTY && !preset) {
     for (const f of FEATURES) {
       const hint = f.def ? '(Y/n)' : '(y/N)';
@@ -181,7 +182,7 @@ function applyFeatures(targetDir, on) {
 
 async function main() {
   stdout.write(`\n${BOLT} ${c.bold('create-spark-html-app')}\n`);
-  stdout.write(`${c.dim('   HTML that reacts — no compiler, no virtual DOM.')}\n\n`);
+  stdout.write(`${c.dim('   HTML that reacts. Built for humans — no compiler, no virtual DOM.')}\n\n`);
 
   // 1 ─ figure out the target directory ────────────────────────────────
   let targetArg = argv[2];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-spark-html-app",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "description": "Scaffold a spark-html app — dev/build/preview on Bun",
   "type": "module",
   "bin": {

package/template/index.html

@@ -6,9 +6,9 @@
     <title>Spark App</title>
     <meta name="description" content="A reactive app built with Spark — single-file HTML components, no compiler, no virtual DOM." />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
+    <!-- Fonts are injected by spark-html-font/bun (see spark.config.js):
+         preconnects, the stylesheet, and a size-adjusted fallback face so the
+         swap never moves the page. -->
     <style>
       /* Design system — the same palette and monospace type as the Spark
                website. Tokens + base + a shared card/button/input system live here in
@@ -34,7 +34,9 @@
         --spark-ink: #ffd24a;
         --danger: #ff6b6b;
         --radius: 12px;
-        --font: "JetBrains Mono", ui-monospace, monospace;
+        /* the injected --font-jetbrains-mono stack includes the fallback face;
+           the var() fallback list covers a config without the font step */
+        --font: var(--font-jetbrains-mono, "JetBrains Mono", ui-monospace, monospace);
       }
       [data-theme="light"] {
         --bg: #fff;

package/template/package.json

@@ -21,6 +21,7 @@
     "spark-html-bun": "latest",
     "spark-prerender": "latest",
     "spark-html-devtools": "latest",
-    "spark-html-image": "latest"
+    "spark-html-image": "latest",
+    "spark-html-font": "latest"
   }
 }

package/template/spark.config.js

@@ -1,4 +1,10 @@
 import prerender from 'spark-prerender/bun';
+// @spark:theme
+import theme from 'spark-html-theme/bun';
+// @spark:end
+// @spark:font
+import font from 'spark-html-font/bun';
+// @spark:end
 // @spark:image
 import image from 'spark-html-image/bun';
 // @spark:end
@@ -26,6 +32,20 @@ import sri from 'spark-html-sri/bun';
 export default {
   pipeline: [
     prerender({ pages: ['index.html'] }),
+    // @spark:theme
+    // Bakes the tiny no-flash script into each page (dev too) so the saved /
+    // OS theme is on <html> before first paint — no wrong-theme flash on load.
+    theme(),
+    // @spark:end
+    // @spark:font
+    // Preconnect + the Google stylesheet + a size-adjusted local fallback
+    // face, baked into each page (dev too) — the font swap never moves or
+    // visibly reflows the page.
+    font({
+      fallback: ['ui-monospace', 'monospace'],
+      fonts: [{ family: 'JetBrains Mono', google: true, weights: [300, 400, 500, 600, 700, 800] }],
+    }),
+    // @spark:end
     // @spark:image
     // Every <img> in pages and components: converted to webp/avif at multiple
     // widths, srcset + width/height added (no layout shift), loading="lazy".