create-spark-html-app 0.3.2 → 0.3.4

package/bin/index.js

@@ -63,6 +63,29 @@ function isEmptyDir(dir) {
   return entries.length === 0;
 }
 
+// Resolve the newest published version of a package from the npm registry,
+// so a freshly scaffolded app always starts on the latest spark-html.
+// Returns a caret range (e.g. "^0.13.2"), or null if the lookup fails
+// (offline, registry down) — callers fall back to the template default.
+async function latestRange(pkgName) {
+  try {
+    const ctrl = new AbortController();
+    const timer = setTimeout(() => ctrl.abort(), 4000);
+    const registry = (process.env.npm_config_registry || 'https://registry.npmjs.org')
+      .replace(/\/+$/, '');
+    const res = await fetch(`${registry}/${pkgName}/latest`, {
+      signal: ctrl.signal,
+      headers: { accept: 'application/json' },
+    });
+    clearTimeout(timer);
+    if (!res.ok) return null;
+    const { version } = await res.json();
+    return version ? `^${version}` : null;
+  } catch {
+    return null;
+  }
+}
+
 async function prompt(question, fallback) {
   const rl = createInterface({ input: stdin, output: stdout });
   try {
@@ -115,10 +138,17 @@ async function main() {
     if (existsSync(src)) renameSync(src, join(targetDir, to));
   }
 
-  // 4 ─ stamp the project name into package.json ───────────────────────
+  // 4 ─ stamp the project name + pin the latest spark-html ─────────────
   const pkgPath = join(targetDir, 'package.json');
   const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'));
   pkg.name = projectName;
+  // Always start on the newest published spark-html. If the registry can't
+  // be reached, the template's "latest" default still resolves on install.
+  const range = await latestRange('spark-html');
+  if (range && pkg.dependencies && pkg.dependencies['spark-html']) {
+    pkg.dependencies['spark-html'] = range;
+    stdout.write(`${c.dim(`   using spark-html ${range}`)}\n`);
+  }
   writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
 
   // 5 ─ celebrate + print next steps ───────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-spark-html-app",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Scaffold a Vite + spark-html app with a live reactive welcome screen.",
   "type": "module",
   "bin": {

package/template/README.md

@@ -13,13 +13,28 @@ npm run dev
 Open the dev server and edit `public/components/welcome.html`. Save, and the
 page reloads instantly.
 
-## Build
+## Build (SEO-ready)
 
 ```bash
 npm run build     # static output → dist/, serve anywhere
 npm 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
+`dist/` — so crawlers and AI tools read real content (headings, text, links),
+not empty placeholders. The browser still hydrates over it for full
+interactivity. Set page metadata as plain component state:
+
+```html
+<script>
+  let pageTitle = 'My App — does a thing';
+  let pageDescription = 'A short, crawlable description of the page.';
+</script>
+```
+
+Don't need SEO? Remove the `prerender(...)` plugin from `vite.config.js`.
+
 ## How it's wired
 
 ```
@@ -29,7 +44,7 @@ npm run preview   # preview the production build locally
 ├── public/components/      ← your components (plain .html files)
 │   ├── app.html            ← theme + shell
 │   └── welcome.html        ← the live reactive welcome screen
-└── vite.config.js          ← spark-html/vite plugin
+└── vite.config.js          ← spark-html/vite + spark-prerender/vite (SEO)
 ```
 
 A component is a `.html` file with optional `<script>` and `<style>`. Top-level

package/template/package.json

@@ -9,9 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "spark-html": "^0.12.0"
+    "spark-html": "latest"
   },
   "devDependencies": {
+    "spark-prerender": "latest",
     "vite": "^5.0.0"
   }
 }

package/template/vite.config.js

@@ -1,10 +1,19 @@
 import { defineConfig } from 'vite';
 import spark from 'spark-html/vite';
+import prerender from 'spark-prerender/vite';
 
 // 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). Remove it
+// if you don't need SEO. List every page you ship in `pages`.
 export default defineConfig({
-  plugins: [spark()],
+  plugins: [
+    spark(),
+    prerender({ pages: ['index.html'] }),
+  ],
 });