create-sanifyfe 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sanifyfe",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Scaffold project Sanify baru — bun create sanifyfe",
   "type": "module",
   "license": "MIT",

package/templates/default/src/pages/todo-page.ts

@@ -1,7 +1,7 @@
 // pages/todo-page.ts — halaman daftar todo
 
-import { component, html, signal } from "@sanify/core";
-import { todos, remaining, addTodo } from "../state/todos.ts";
+import { component, html, signal, For } from "@sanify/core";
+import { todos, remaining, addTodo, type Todo } from "../state/todos.ts";
 import "../components/todo-item.ts";
 
 component("todo-page", () => {
@@ -37,10 +37,15 @@ component("todo-page", () => {
       </div>
 
       <ul>
+        ${For(
+          () => todos(),
+          (todo: () => Todo) => html`<todo-item .todo=${todo}></todo-item>`,
+          { key: (t: Todo) => t.id },
+        )}
         ${() =>
           todos().length === 0
             ? html`<li class="text-slate-400 py-2">Belum ada tugas.</li>`
-            : todos().map((t) => html`<todo-item .todo=${t}></todo-item>`)}
+            : null}
       </ul>
 
       <div class="mt-4 text-sm">

package/templates/default/src/state/todos.ts

@@ -3,7 +3,7 @@
 import { computed, persisted } from "@sanify/core";
 
 export interface Todo {
-  id: number;
+  id: string;
   text: string;
   done: boolean;
 }
@@ -17,13 +17,16 @@ export const remaining = computed(() => todos().filter((t) => !t.done).length);
 export function addTodo(text: string): void {
   const trimmed = text.trim();
   if (!trimmed) return;
-  setTodos((prev) => [...prev, { id: Date.now(), text: trimmed, done: false }]);
+  setTodos((prev) => [
+    ...prev,
+    { id: crypto.randomUUID(), text: trimmed, done: false },
+  ]);
 }
 
-export function toggleTodo(id: number): void {
+export function toggleTodo(id: string): void {
   setTodos((prev) => prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
 }
 
-export function removeTodo(id: number): void {
+export function removeTodo(id: string): void {
   setTodos((prev) => prev.filter((t) => t.id !== id));
 }