create-sanifyfe 0.1.1 → 0.1.3

package/package.json

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

package/templates/default/README.md

@@ -22,6 +22,13 @@ bun install
 
 ## Struktur
 
-- `src/main.ts` — entry aplikasi (komponen, router, state).
-- `index.html` — halaman host, memuat `main.js` hasil bundling.
-- `dev-server.ts` — server dev Bun yang transpile TS on-the-fly.
+```
+src/
+  main.ts            entry: memuat app-root
+  app.ts             root komponen + definisi router
+  state/todos.ts     state global (persisted + cross-tab sync)
+  components/        komponen UI (todo-item)
+  pages/             halaman per-route (todo-page, about-page)
+index.html           halaman host, memuat main.js hasil bundling
+dev-server.ts        server dev Bun, transpile TS on-the-fly
+```

package/templates/default/src/app.ts

@@ -0,0 +1,19 @@
+// app.ts — root komponen + router
+
+import { component, html, router } from "@sanify/core";
+import "./pages/todo-page.ts";
+import "./pages/about-page.ts";
+
+component("app-root", () => {
+  const view = router({
+    "/": () => html`<todo-page></todo-page>`,
+    "/about": () => html`<about-page></about-page>`,
+    "*": () => html`
+      <div class="max-w-md mx-auto mt-10 text-center">
+        <p class="text-slate-500">Halaman tidak ditemukan.</p>
+        <a data-link href="/" class="text-blue-600 hover:underline">Beranda</a>
+      </div>
+    `,
+  });
+  return () => html`<div>${view}</div>`;
+});

package/templates/default/src/components/todo-item.ts

@@ -0,0 +1,36 @@
+// components/todo-item.ts — satu baris todo (menerima objek lewat property)
+
+import { component, html, type ComponentContext } from "@sanify/core";
+import { toggleTodo, removeTodo, type Todo } from "../state/todos.ts";
+
+interface TodoItemProps {
+  todo: Todo;
+}
+
+component<TodoItemProps>(
+  "todo-item",
+  ({ props }: ComponentContext<TodoItemProps>) => {
+    return () => html`
+      <li class="flex items-center gap-3 py-2 border-b border-slate-200">
+        <input
+          type="checkbox"
+          class="h-4 w-4"
+          .checked=${() => props.todo().done}
+          @change=${() => toggleTodo(props.todo().id)}
+        />
+        <span
+          class=${() =>
+            props.todo().done ? "flex-1 line-through text-slate-400" : "flex-1"}
+          >${() => props.todo().text}</span
+        >
+        <button
+          class="text-red-500 hover:text-red-700 text-sm"
+          @click=${() => removeTodo(props.todo().id)}
+        >
+          hapus
+        </button>
+      </li>
+    `;
+  },
+  { props: ["todo"] },
+);

package/templates/default/src/main.ts

@@ -1,156 +1,3 @@
-// example/main.ts — aplikasi contoh memakai seluruh API Sanify
-// Todo dengan persist + cross-tab sync, routing, props dua arah, list & conditional.
+// main.ts — entry aplikasi: cukup memuat app-root (komponen lain ikut terdaftar)
 
-import {
-  component,
-  html,
-  signal,
-  computed,
-  persisted,
-  router,
-  navigate,
-  type ComponentContext,
-} from "@sanify/core";
-
-// ── State global (persisted + cross-tab sync) ───────────────
-interface Todo {
-  id: number;
-  text: string;
-  done: boolean;
-}
-
-const [todos, setTodos] = persisted<Todo[]>("sanify:todos", [], { sync: true });
-
-const remaining = computed(() => todos().filter((t) => !t.done).length);
-
-function addTodo(text: string): void {
-  const trimmed = text.trim();
-  if (!trimmed) return;
-  setTodos((prev) => [...prev, { id: Date.now(), text: trimmed, done: false }]);
-}
-
-function toggleTodo(id: number): void {
-  setTodos((prev) => prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
-}
-
-function removeTodo(id: number): void {
-  setTodos((prev) => prev.filter((t) => t.id !== id));
-}
-
-// ── Komponen: satu baris todo (menerima objek lewat property) ─
-interface TodoItemProps {
-  todo: Todo;
-}
-
-component<TodoItemProps>(
-  "todo-item",
-  ({ props }: ComponentContext<TodoItemProps>) => {
-    return () => html`
-      <li class="flex items-center gap-3 py-2 border-b border-slate-200">
-        <input
-          type="checkbox"
-          class="h-4 w-4"
-          .checked=${() => props.todo().done}
-          @change=${() => toggleTodo(props.todo().id)}
-        />
-        <span
-          class=${() =>
-            props.todo().done
-              ? "flex-1 line-through text-slate-400"
-              : "flex-1"}
-          >${() => props.todo().text}</span
-        >
-        <button
-          class="text-red-500 hover:text-red-700 text-sm"
-          @click=${() => removeTodo(props.todo().id)}
-        >
-          hapus
-        </button>
-      </li>
-    `;
-  },
-  { props: ["todo"] },
-);
-
-// ── Halaman: daftar todo ────────────────────────────────────
-component("todo-page", () => {
-  const [draft, setDraft] = signal("");
-
-  const submit = () => {
-    addTodo(draft());
-    setDraft("");
-  };
-
-  return () => html`
-    <div class="max-w-md mx-auto mt-10 p-6 bg-white rounded-xl shadow">
-      <h1 class="text-2xl font-bold mb-1">Todo</h1>
-      <p class="text-sm text-slate-500 mb-4">
-        Sisa <strong>${() => remaining()}</strong> belum selesai
-        — buka di dua tab untuk lihat sync.
-      </p>
-
-      <div class="flex gap-2 mb-4">
-        <input
-          class="flex-1 border border-slate-300 rounded px-3 py-2"
-          placeholder="Tambah tugas..."
-          .value=${() => draft()}
-          @input=${(e: Event) => setDraft((e.target as HTMLInputElement).value)}
-          @keydown=${(e: KeyboardEvent) => e.key === "Enter" && submit()}
-        />
-        <button
-          class="bg-slate-800 text-white rounded px-4 py-2 hover:bg-slate-700"
-          @click=${submit}
-        >
-          Tambah
-        </button>
-      </div>
-
-      <ul>
-        ${() =>
-          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>`)}
-      </ul>
-
-      <div class="mt-4 text-sm">
-        <a data-link href="/about" class="text-blue-600 hover:underline"
-          >Tentang &rarr;</a
-        >
-      </div>
-    </div>
-  `;
-});
-
-// ── Halaman: about ──────────────────────────────────────────
-component("about-page", () => {
-  return () => html`
-    <div class="max-w-md mx-auto mt-10 p-6 bg-white rounded-xl shadow">
-      <h1 class="text-2xl font-bold mb-2">Tentang</h1>
-      <p class="text-slate-600 mb-4">
-        Contoh kecil yang dibangun dengan Sanify: signal fine-grained,
-        Web Components Light DOM, persist + cross-tab sync, dan router.
-      </p>
-      <a data-link href="/" class="text-blue-600 hover:underline"
-        >&larr; Kembali</a
-      >
-    </div>
-  `;
-});
-
-// ── Root + router ───────────────────────────────────────────
-component("app-root", () => {
-  const view = router({
-    "/": () => html`<todo-page></todo-page>`,
-    "/about": () => html`<about-page></about-page>`,
-    "*": () => html`
-      <div class="max-w-md mx-auto mt-10 text-center">
-        <p class="text-slate-500">Halaman tidak ditemukan.</p>
-        <a data-link href="/" class="text-blue-600 hover:underline">Beranda</a>
-      </div>
-    `,
-  });
-  return () => html`<div>${view}</div>`;
-});
-
-// hindari unused-import error untuk navigate (tersedia utk pemakaian manual)
-void navigate;
+import "./app.ts";

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

@@ -0,0 +1,16 @@
+// pages/about-page.ts — halaman tentang
+
+import { component, html } from "@sanify/core";
+
+component("about-page", () => {
+  return () => html`
+    <div class="max-w-md mx-auto mt-10 p-6 bg-white rounded-xl shadow">
+      <h1 class="text-2xl font-bold mb-2">Tentang</h1>
+      <p class="text-slate-600 mb-4">
+        Contoh kecil yang dibangun dengan Sanify: signal fine-grained, Web
+        Components Light DOM, persist + cross-tab sync, dan router.
+      </p>
+      <a data-link href="/" class="text-blue-600 hover:underline">&larr; Kembali</a>
+    </div>
+  `;
+});

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

@@ -0,0 +1,58 @@
+// pages/todo-page.ts — halaman daftar todo
+
+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", () => {
+  const [draft, setDraft] = signal("");
+
+  const submit = () => {
+    addTodo(draft());
+    setDraft("");
+  };
+
+  return () => html`
+    <div class="max-w-md mx-auto mt-10 p-6 bg-white rounded-xl shadow">
+      <h1 class="text-2xl font-bold mb-1">Todo</h1>
+      <p class="text-sm text-slate-500 mb-4">
+        Sisa <strong>${() => remaining()}</strong> belum selesai — buka di dua
+        tab untuk lihat sync.
+      </p>
+
+      <div class="flex gap-2 mb-4">
+        <input
+          class="flex-1 border border-slate-300 rounded px-3 py-2"
+          placeholder="Tambah tugas..."
+          .value=${() => draft()}
+          @input=${(e: Event) => setDraft((e.target as HTMLInputElement).value)}
+          @keydown=${(e: KeyboardEvent) => e.key === "Enter" && submit()}
+        />
+        <button
+          class="bg-slate-800 text-white rounded px-4 py-2 hover:bg-slate-700"
+          @click=${submit}
+        >
+          Tambah
+        </button>
+      </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>`
+            : null}
+      </ul>
+
+      <div class="mt-4 text-sm">
+        <a data-link href="/about" class="text-blue-600 hover:underline"
+          >Tentang &rarr;</a
+        >
+      </div>
+    </div>
+  `;
+});

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

@@ -0,0 +1,32 @@
+// state/todos.ts — state global todo (persisted + cross-tab sync)
+
+import { computed, persisted } from "@sanify/core";
+
+export interface Todo {
+  id: string;
+  text: string;
+  done: boolean;
+}
+
+export const [todos, setTodos] = persisted<Todo[]>("sanify:todos", [], {
+  sync: true,
+});
+
+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: crypto.randomUUID(), text: trimmed, done: false },
+  ]);
+}
+
+export function toggleTodo(id: string): void {
+  setTodos((prev) => prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
+}
+
+export function removeTodo(id: string): void {
+  setTodos((prev) => prev.filter((t) => t.id !== id));
+}

package/templates/default/tsconfig.json

@@ -5,6 +5,7 @@
     "module": "ESNext",
     "moduleResolution": "bundler",
     "moduleDetection": "force",
+    "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
     "noEmit": true,