create-spark-html-app 0.11.1 → 0.13.0

package/bin/index.js

@@ -27,8 +27,6 @@ import { createInterface } from 'node:readline/promises';
 import { stdin, stdout, argv, exit } from 'node:process';
 
 const here = dirname(fileURLToPath(import.meta.url));
-const templateFor = (type) =>
-  resolve(here, '..', type === 'client' ? 'template' : `template-${type}`);
 
 // ── tiny ANSI palette (no chalk; one less thing to install) ───────────
 const supportsColor = stdout.isTTY && process.env.NO_COLOR === undefined;
@@ -122,6 +120,24 @@ async function pickType() {
   return (TYPES[Number(a) - 1] || TYPES[0]).key;
 }
 
+// SSR only: with a database (SQLite + auto-CRUD + auth + admin) or without one
+// (a markdown blog on file sources). Flags: --db / --no-db.
+async function pickSsrDb() {
+  const flags = argv.slice(2);
+  if (flags.includes('--no-db')) return false;
+  if (flags.includes('--db')) return true;
+  if (!stdin.isTTY) return true;
+  const a = (await prompt(`${c.accent('?')} Include a database? ${c.dim('(Y/n)')} `, 'y')).toLowerCase();
+  return /^y(es)?$/.test(a);
+}
+
+// Resolve the template directory for a chosen project type.
+function templateDir(type, ssrDb) {
+  if (type === 'client') return resolve(here, '..', 'template');
+  if (type === 'prerender') return resolve(here, '..', 'template-prerender');
+  return resolve(here, '..', ssrDb ? 'template-ssr' : 'template-ssr-nodb');
+}
+
 // ── optional features ──────────────────────────────────────────────────
 // The template ships with EVERYTHING wired; excluded features are stripped
 // out of the copied files via `@spark:<name>` … `@spark:end` marker blocks
@@ -232,10 +248,14 @@ async function main() {
 
   // 3 ─ pick the project type + features, copy the template ────────────
   const type = await pickType();
-  const features = type === 'client' ? await pickFeatures() : {};
+  // SSR can ship with or without a database; the choice picks the template.
+  const ssrDb = type === 'ssr' ? await pickSsrDb() : true;
+  // The prerender template is the full showcase (router, todos, demos) whose
+  // optional pieces are toggled via @spark markers; client and ssr ship fixed.
+  const features = type === 'prerender' ? await pickFeatures() : {};
   mkdirSync(targetDir, { recursive: true });
-  cpSync(templateFor(type), targetDir, { recursive: true });
-  if (type === 'client') applyFeatures(targetDir, features);
+  cpSync(templateDir(type, ssrDb), targetDir, { recursive: true });
+  if (type === 'prerender') applyFeatures(targetDir, features);
 
   // npm renames/strips dotfiles on publish, so the template ships them
   // with safe underscore prefixes. Restore the real names here.
@@ -253,7 +273,7 @@ async function main() {
   const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'));
   pkg.name = projectName;
   // Drop dependencies that belong to excluded features.
-  for (const f of type === 'client' ? FEATURES : []) {
+  for (const f of type === 'prerender' ? FEATURES : []) {
     if (features[f.key]) continue;
     for (const dep of f.deps) {
       if (pkg.dependencies) delete pkg.dependencies[dep];
@@ -285,9 +305,10 @@ async function main() {
 
   // 5 ─ celebrate + print next steps ───────────────────────────────────
   const rel = relative(process.cwd(), targetDir) || '.';
-  const flavor = type === 'ssr' ? 'SSR — spark-ssr, zero config, no build'
-    : type === 'prerender' ? 'prerendered static site — spark-prerender'
-    : `head, persist, prerender, devtools + ${FEATURES.filter((f) => features[f.key]).map((f) => f.key).join(', ') || 'core only'}`;
+  const flavor = type === 'ssr'
+    ? (ssrDb ? 'SSR — spark-ssr blog, SQLite + auth, zero config' : 'SSR — spark-ssr, markdown blog, no database')
+    : type === 'prerender' ? `prerendered showcase — router, todos, demos + ${FEATURES.filter((f) => features[f.key]).map((f) => f.key).join(', ') || 'core only'}`
+    : 'client-only — a single reactive counter to build on';
   stdout.write(`\n${c.green('✔')} Scaffolded ${c.bold(projectName)} in ${c.cyan(rel)} ${c.dim(`(${flavor})`)}\n\n`);
   stdout.write(`${c.bold('Next steps:')}\n`);
   if (rel !== '.') stdout.write(`  ${c.dim('1.')} cd ${rel}\n`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-spark-html-app",
-  "version": "0.11.1",
+  "version": "0.13.0",
   "description": "Scaffold a spark-html app — dev/build/preview on Bun",
   "type": "module",
   "bin": {
@@ -10,6 +10,7 @@
     "bin",
     "template",
     "template-ssr",
+    "template-ssr-nodb",
     "template-prerender"
   ],
   "engines": {

package/template/README.md

@@ -1,76 +1,17 @@
 # ⚡ Spark App
 
-A starter built with [spark-html](https://github.com/wilkinnovo/spark-html) — single-file
-HTML components with built-in reactivity. No compiler, no virtual DOM, no build step.
+A minimal client-side app built with
+[spark-html](https://github.com/wilkinnovo/spark-html) — single-file HTML
+components with built-in reactivity. No compiler, no virtual DOM, no build step.
 
-The scaffold is a **multi-page SPA** with client-side routing, live demos, and a
-shared design system — edit any component and save to see it update instantly.
-Depending on the options you picked at scaffold time it also wires up
-`spark-html-theme` (dark/light), `spark-html-image` (build-time webp/avif),
-`spark-html-sri` (integrity checks), and `spark-html-manifest` (PWA manifest +
-icons + offline app shell). `spark-html-head`, `spark-html-persist`,
-`spark-prerender`, and `spark-html-devtools` are always included.
-
-## Develop
+Edit `public/components/hero.html` and save to see it update instantly.
 
 ```bash
 bun install
-bun run dev          # dev server with HMR
-```
-
-In dev mode, `spark-html-devtools` adds a debugging overlay — inspect
-component state, stores, and the mounted tree live.
-
-## Build (SEO-ready)
-
-```bash
-bun run build     # static output → dist/, serve anywhere
-bun run preview   # preview the production build locally
+bun run dev       # dev server with HMR
+bun run build     # bundle → dist/, deploy anywhere
+bun run preview   # preview the production build
 ```
 
-`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.
-
-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(...)` step from `spark.config.js`.
-
-## Architecture
-
-Client routing is set up in `src/main.js` — `router()` (from
-`spark-html-router`) replaces `mount()` and discovers your routes from
-`<template route>` blocks in `index.html`. Per-route `<title>` and `<meta>`
-are handled by `head()` (from `spark-html-head`), and `spark-html-devtools`
-provides a live debugging overlay in dev mode.
-
-Each route is just an HTML file in `public/components/`.
-
-## What's inside
-
-The scaffold's components in `public/components/` each demonstrate a Spark feature
-(all using only the published runtime — no experimental APIs):
-
-| Component | Features shown |
-|---|---|
-| `nav.html` | Client routing (active link highlight via `aria-current="page"`), theme toggle via `useStore('theme')` |
-| `hero.html` | Local state, `$:` reactive declarations, shared store (`useStore('app')`) |
-| `home.html` | Page composition — imports `hero` + demo components for the `/` route |
-| `about.html` | Page composition — uses `feature-card` with props and slots for the `/about` route |
-| `demo-todo.html` | `bind:value`/`bind:checked`, `<template each>` with `key`, `$:` derived counts |
-| `demo-props.html` | `export let` props, named `<slot>`, component composition |
-| `demo-await.html` | `<template await>` with `once()`, `onMount`, loading/then/catch states |
-| `feature-card.html` | Reusable card via `export let` + `<slot>`, used by `about` and `demo-props` |
-| `footer.html` | Static content component, imported by the shell |
-
-A component is a `.html` file with optional `<script>` and `<style>`. Top-level
-variables are reactive state — assigning to one re-patches that component's DOM.
-Derive values with `$:`, share state across components with `useStore(name)`, use
-`bind:value` for two-way binds, and pass props as attributes on the `import`
-placeholder.
-
-See the [full docs](https://wilkinnovo.github.io/spark-html/docs) for the complete
-template syntax reference.
+Want server rendering or prerendered static HTML? Scaffold again and pick the
+**SSR** or **Prerender** project type.

package/template/_gitignore

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

package/template/index.html

@@ -1,214 +1,14 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <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>" />
-    <!-- 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
-               <head> so they apply globally before any component boots. Light & dark
-               are driven by [data-theme] (spark-html-theme writes it). */
-      *,
-      *::before,
-      *::after {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-      }
-      :root {
-        --bg: #000;
-        --surface: #0a0a0a;
-        --surface-2: #101014;
-        --border: #1a1a1a;
-        --border-strong: #333;
-        --text: #fff;
-        --muted: #888;
-        --muted-dim: #555;
-        --spark: #ffd24a;
-        --spark-ink: #ffd24a;
-        --danger: #ff6b6b;
-        --radius: 12px;
-        /* 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;
-        --surface: #fafafa;
-        --surface-2: #f4f4f5;
-        --border: #ededed;
-        --border-strong: #d4d4d4;
-        --text: #1a1a1a;
-        --muted: #666;
-        --muted-dim: #999;
-        --spark: #ffd24a;
-        --spark-ink: #9a6a00;
-        --danger: #d63b3b;
-      }
-      html {
-        scroll-behavior: smooth;
-      }
-      body {
-        font-family: var(--font);
-        background: var(--bg);
-        color: var(--text);
-        line-height: 1.6;
-        -webkit-font-smoothing: antialiased;
-        min-height: 100vh;
-        display: flex;
-        flex-direction: column;
-      }
-      ::selection {
-        background: var(--spark);
-        color: #000;
-      }
-      [data-theme="light"] ::selection {
-        background: #ffe9a8;
-        color: #111;
-      }
-      a {
-        color: var(--spark-ink);
-        text-decoration: none;
-      }
-      [hidden] {
-        display: none !important;
-      }
-      .routes {
-        flex: 1;
-        width: 100%;
-        max-width: 960px;
-        margin: 0 auto;
-        padding: 0 24px;
-      }
-
-      /* Shared component system — components lean on these instead of each
-               redefining a card/button/input. */
-      .card {
-        background: var(--surface);
-        border: 1px solid var(--border);
-        border-radius: var(--radius);
-        padding: 22px;
-      }
-      .card h2 {
-        font-size: 16px;
-        font-weight: 700;
-        margin-bottom: 4px;
-        letter-spacing: -0.01em;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        flex-wrap: wrap;
-      }
-      .tag {
-        font-size: 10px;
-        font-weight: 500;
-        color: var(--spark-ink);
-        border: 1px solid var(--border-strong);
-        padding: 1px 7px;
-        border-radius: 999px;
-      }
-      .hint {
-        font-size: 12.5px;
-        color: var(--muted);
-        margin-bottom: 16px;
-        line-height: 1.5;
-      }
-      code {
-        background: var(--surface-2);
-        color: var(--spark-ink);
-        padding: 1px 6px;
-        border-radius: 4px;
-        font-size: 12px;
-      }
-      .row {
-        display: flex;
-        gap: 8px;
-        align-items: center;
-        flex-wrap: wrap;
-      }
-
-      button,
-      .btn {
-        font-family: inherit;
-        font-size: 13px;
-        cursor: pointer;
-        padding: 8px 15px;
-        border-radius: 8px;
-        border: 1px solid var(--border-strong);
-        background: var(--surface-2);
-        color: var(--text);
-        transition:
-          border-color 0.12s,
-          background 0.12s,
-          color 0.12s,
-          transform 0.08s;
-      }
-      button:hover:not(:disabled) {
-        border-color: var(--spark);
-        color: var(--spark-ink);
-      }
-      button:active:not(:disabled) {
-        transform: scale(0.97);
-      }
-      button:disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-      button.primary {
-        background: var(--spark);
-        color: #000;
-        border-color: var(--spark);
-        font-weight: 700;
-      }
-      button.primary:hover:not(:disabled) {
-        color: #000;
-        filter: brightness(1.06);
-      }
-
-      label {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-        font-size: 12px;
-        color: var(--muted);
-      }
-      input,
-      textarea {
-        font-family: inherit;
-        font-size: 14px;
-        width: 100%;
-        background: var(--bg);
-        color: var(--text);
-        border: 1px solid var(--border-strong);
-        border-radius: 8px;
-        padding: 9px 12px;
-      }
-      input:focus,
-      textarea:focus {
-        outline: none;
-        border-color: var(--spark);
-      }
-    </style>
+    <link rel="stylesheet" href="/src/style.css" />
   </head>
   <body>
-    <div import="components/nav"></div>
-    <main class="routes">
-      <!-- @spark:router -->
-      <template route="/"><div import="components/home"></div></template>
-      <template route="/about"><div import="components/about"></div></template>
-      <!-- @spark:end -->
-      <!-- @spark:!router -->
-      <div import="components/home"></div>
-      <!-- @spark:end -->
-    </main>
-    <div import="components/footer"></div>
-
+    <div import="components/hero"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>

package/template/package.json

@@ -9,19 +9,9 @@
     "preview": "spark preview"
   },
   "dependencies": {
-    "spark-html": "latest",
-    "spark-html-router": "latest",
-    "spark-html-theme": "latest",
-    "spark-html-head": "latest",
-    "spark-html-persist": "latest",
-    "spark-html-sri": "latest",
-    "spark-html-manifest": "latest"
+    "spark-html": "latest"
   },
   "devDependencies": {
-    "spark-html-bun": "latest",
-    "spark-prerender": "latest",
-    "spark-html-devtools": "latest",
-    "spark-html-image": "latest",
-    "spark-html-font": "latest"
+    "spark-html-bun": "latest"
   }
 }

package/template/public/components/hero.html

@@ -1,75 +1,23 @@
-<header class="hero">
-  <span class="bolt" :class="igniting ? 'bolt lit' : 'bolt'" onclick="{ignite}" title="Strike the bolt">⚡</span>
-
-  <h1>HTML that <span class="grad">reacts</span>.</h1>
+<main>
+  <h1>⚡ {greeting}</h1>
   <p class="tagline">
-    Single-file reactive components — no compiler, no virtual DOM, no build step.
-    Everything below is live the moment the page loads.
+    A single-file reactive component — no compiler, no virtual DOM, no build
+    step. Edit this file and save; the page updates instantly.
   </p>
 
   <div class="counter">
-    <button class="round" onclick="{count = Math.max(0, count - 1)}" :disabled="count <= 0" aria-label="decrement">–</button>
-    <div class="readout">
-      <span class="num">{count}</span>
-      <span class="sub">doubled is {doubled} · {capitalize(mood)}</span>
-    </div>
-    <button class="round plus" onclick="{count++}" aria-label="increment">+</button>
+    <button onclick={dec} aria-label="decrement">–</button>
+    <span class="count">{count}</span>
+    <button onclick={inc} aria-label="increment">+</button>
   </div>
 
-  <p class="store-line">
-    You've struck the bolt <strong>{app.sparks}</strong>
-    {pluralize(app.sparks, 'time')} — that lives in a shared store.
-  </p>
-</header>
+  <p class="doubled" :hidden="count === 0">doubled is {doubled}</p>
+</main>
 
 <script>
-  import { capitalize, pluralize } from '../lib/format.js';
-
+  let greeting = 'HTML that reacts';
   let count = 0;
-  let igniting = false;
-
   $: doubled = count * 2;
-  $: mood = count === 0 ? 'a calm start' : count < 5 ? 'warming up' : 'on fire';
-
-  const app = useStore('app');
-
-  function ignite() {
-    app.sparks++;
-    igniting = true;
-    setTimeout(() => { igniting = false; }, 450);
-  }
+  function inc() { count++; }
+  function dec() { count--; }
 </script>
-
-<style>
-  .hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-top: 32px; }
-  .bolt {
-    font-size: 32px; line-height: 1; cursor: pointer; user-select: none;
-    filter: drop-shadow(0 0 14px rgba(255, 210, 74, .45));
-    transition: transform .2s ease, filter .2s ease;
-  }
-  .bolt:hover { transform: translateY(-1px) scale(1.06); }
-  .bolt.lit { animation: zap .45s ease; }
-  @keyframes zap {
-    0%   { transform: scale(1); filter: drop-shadow(0 0 14px rgba(255, 210, 74, .45)); }
-    40%  { transform: scale(1.35) rotate(-8deg); filter: drop-shadow(0 0 34px rgba(255, 210, 74, .95)); }
-    100% { transform: scale(1); filter: drop-shadow(0 0 14px rgba(255, 210, 74, .45)); }
-  }
-
-  h1 { font-size: clamp(32px, 6vw, 48px); font-weight: 800; letter-spacing: -.03em; }
-  .grad {
-    background: linear-gradient(110deg, var(--text), var(--spark));
-    -webkit-background-clip: text; background-clip: text; color: transparent;
-  }
-  .tagline { max-width: 480px; color: var(--muted); font-size: 14px; }
-
-  .counter { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 8px; }
-  .round {
-    width: 44px; height: 44px; border-radius: 50%; font-size: 22px; padding: 0;
-  }
-  .round.plus { background: var(--surface-2); }
-  .readout { min-width: 130px; }
-  .num { display: block; font-size: 42px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
-  .sub { font-size: 11px; color: var(--muted); }
-  .store-line { font-size: 13px; color: var(--muted); margin-top: 4px; }
-  .store-line strong { color: var(--spark-ink); }
-</style>

package/template/src/main.js

@@ -1,61 +1,2 @@
-import { store } from "spark-html";
-// @spark:!router
-import { mount } from "spark-html";
-// @spark:end
-// @spark:router
-import { router } from "spark-html-router";
-// @spark:end
-// @spark:theme
-import { theme } from "spark-html-theme";
-// @spark:end
-import { head } from "spark-html-head";
-import { persist } from "spark-html-persist";
-// @spark:sri
-import { sri } from "spark-html-sri";
-// @spark:end
-import { devtools } from "spark-html-devtools";
-
-const dev = import.meta.env?.DEV;
-if (dev) devtools(); // dev only
-
-// @spark:sri
-// Subresource Integrity: verifies every component fetch against the
-// manifest the build baked into the page, and allow-lists remote URL
-// imports (TOFU). Fails open on localhost, enforces in production.
-sri();
-// @spark:end
-
-head({
-  title: { "/": "Home", "/about": "About", "*": "Not found" },
-  titleTemplate: (t) => `${t} · My Site`,
-  meta: { description: (path) => `The ${path} page` },
-});
-
-// Shared stores connect components without providers or prop drilling.
-store("app", { sparks: 0 });
-
-// A store that survives reloads — hydrates from localStorage on boot,
-// saves on every change (see components/demo-persist.html).
-persist("prefs", { name: "", visits: 0 });
-
-// @spark:theme
-// One-line dark/light/system theming (the ⚡ logo toggles it).
-theme();
-// @spark:end
-
-// @spark:pwa
-// PWA: manifest.webmanifest, icons, and the offline app-shell worker are
-// 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).
-// @spark:end
-
-// @spark:router
-// Client-side router: reads <template route> blocks, intercepts <a> clicks,
-// and manages SPA navigation. Call it once — replaces mount().
-router({ devOverlay: dev, quiet: !dev });
-// @spark:end
-// @spark:!router
-mount(document.body);
-// @spark:end
+import { mount } from 'spark-html';
+mount();

package/template/src/style.css

@@ -0,0 +1,32 @@
+:root { color-scheme: light dark; }
+body {
+  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
+  max-width: 36rem;
+  margin: 4rem auto;
+  padding: 0 1.5rem;
+  line-height: 1.6;
+}
+main { text-align: center; }
+h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); letter-spacing: -0.02em; }
+.tagline { color: gray; font-size: 0.95rem; }
+.counter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.25rem;
+  margin: 2rem 0 0.5rem;
+}
+.count { font-size: 2rem; font-variant-numeric: tabular-nums; min-width: 2ch; }
+button {
+  font: inherit;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 999px;
+  border: 1px solid currentColor;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-size: 1.25rem;
+}
+button:active { transform: scale(0.94); }
+.doubled { color: gray; font-size: 0.9rem; }