create-spark-html-app 0.5.3 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-spark-html-app",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "Scaffold a Vite + spark-html",
   "type": "module",
   "bin": {

package/template/public/components/demo-todo.html

@@ -1,7 +1,7 @@
 <section class="card">
   <header class="card-header">
     <h2>Todos <span class="tag">bind:value + each + $:</span></h2>
-    <span class="badge">{doneCount}/{todos.length}</span>
+    <span class="badge">{doneCount}/{todos.length} {pluralize(todos.length, 'item')}</span>
   </header>
   <p class="hint">Two-way binding, keyed reconciliation, and reactive statements in action.</p>
 
@@ -26,6 +26,8 @@
 </section>
 
 <script>
+  import { pluralize } from '../lib/format.js';
+
   let draft = '';
   let todos = [
     { id: 1, text: 'Learn Spark', done: true },

package/template/public/components/hero.html

@@ -11,18 +11,20 @@
     <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} · {mood}</span>
+      <span class="sub">doubled is {doubled} · {capitalize(mood)}</span>
     </div>
     <button class="round plus" onclick="{count++}" aria-label="increment">+</button>
   </div>
 
   <p class="store-line">
     You've struck the bolt <strong>{app.sparks}</strong>
-    time{app.sparks === 1 ? '' : 's'} — that lives in a shared store.
+    {pluralize(app.sparks, 'time')} — that lives in a shared store.
   </p>
 </header>
 
 <script>
+  import { capitalize, pluralize } from '../lib/format.js';
+
   let count = 0;
   let igniting = false;
 

package/template/public/lib/format.js

@@ -0,0 +1,13 @@
+export function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+export function pluralize(count, singular, plural) {
+  return count === 1 ? singular : (plural || singular + 's');
+}
+
+export function formatDate(date) {
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric', month: 'short', day: 'numeric',
+  });
+}

package/template/vite.config.js

@@ -12,6 +12,11 @@ import prerender from 'spark-prerender/vite';
 // 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({
+  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(),
     prerender({ pages: ['index.html'] }),