create-sanifyfe 0.1.2 → 0.2.0

package/package.json

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

package/templates/default/README.md

@@ -25,10 +25,21 @@ bun install
 ```
 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)
+  app.ts             root + router (termasuk nested route + outlet)
+  state/             todos (persisted), settings (createStore nested)
+  data/              data contoh + simulasi fetch async
+  components/        nav-bar, users-sidebar, todo-item, live-clock
+  pages/             home, todos, settings, user-list, user-detail, about
 index.html           halaman host, memuat main.js hasil bundling
 dev-server.ts        server dev Bun, transpile TS on-the-fly
 ```
+
+## Fitur yang dicontohkan
+
+| Halaman | Fitur Sanify |
+| --- | --- |
+| Home | `signal`, `onMount`/`onCleanup` (live-clock) |
+| Todos | `For` (list keyed), `persisted` + cross-tab, `computed` |
+| Settings | `createStore` objek nested fine-grained (update by path) |
+| Users | router **nested + outlet** (layout bertahan), `params()` reaktif, `resource` (fetch async) |
+| About | `query()` reaktif |

package/templates/default/package.json

@@ -9,7 +9,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@sanify/core": "^0.1.0"
+    "@sanify/core": "^0.2.0"
   },
   "devDependencies": {
     "typescript": "^5.9.0",

package/templates/default/src/app.ts

@@ -1,19 +1,46 @@
-// app.ts — root komponen + router
+// app.ts — root komponen + router (termasuk nested route + outlet)
 
 import { component, html, router } from "@sanify/core";
-import "./pages/todo-page.ts";
+import "./components/nav-bar.ts";
+import "./components/users-sidebar.ts";
+import "./pages/home-page.ts";
+import "./pages/todos-page.ts";
+import "./pages/settings-page.ts";
+import "./pages/user-list.ts";
+import "./pages/user-detail.ts";
 import "./pages/about-page.ts";
 
 component("app-root", () => {
   const view = router({
-    "/": () => html`<todo-page></todo-page>`,
+    "/": () => html`<home-page></home-page>`,
+    "/todos": () => html`<todos-page></todos-page>`,
+    "/settings": () => html`<settings-page></settings-page>`,
+    // nested route: layout dengan outlet — sidebar bertahan saat ganti user
+    "/users": {
+      layout: (ctx) => html`
+        <div class="max-w-3xl mx-auto mt-8 flex gap-6">
+          <users-sidebar></users-sidebar>
+          <section class="flex-1 bg-white rounded-xl shadow p-6 min-h-40">
+            ${ctx.outlet}
+          </section>
+        </div>
+      `,
+      children: {
+        "/": () => html`<user-list></user-list>`,
+        "/:id": () => html`<user-detail></user-detail>`,
+      },
+    },
     "/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>
+      <div class="max-w-md mx-auto mt-16 text-center text-slate-500">
+        <p class="text-lg">Halaman tidak ditemukan.</p>
         <a data-link href="/" class="text-blue-600 hover:underline">Beranda</a>
       </div>
     `,
   });
-  return () => html`<div>${view}</div>`;
+
+  return () => html`
+    <nav-bar></nav-bar>
+    <main>${view}</main>
+  `;
 });

package/templates/default/src/components/live-clock.ts

@@ -0,0 +1,14 @@
+// components/live-clock.ts — demo lifecycle: onMount mulai interval, onCleanup stop
+
+import { component, html, signal, onMount, onCleanup } from "@sanify/core";
+
+component("live-clock", () => {
+  const [now, setNow] = signal(new Date().toLocaleTimeString());
+
+  onMount(() => {
+    const id = setInterval(() => setNow(new Date().toLocaleTimeString()), 1000);
+    onCleanup(() => clearInterval(id));
+  });
+
+  return () => html`<span class="font-mono">${() => now()}</span>`;
+});

package/templates/default/src/components/nav-bar.ts

@@ -0,0 +1,37 @@
+// components/nav-bar.ts — navigasi atas (SPA link via data-link)
+
+import { component, html, current } from "@sanify/core";
+
+const links = [
+  { href: "/", label: "Home" },
+  { href: "/todos", label: "Todos" },
+  { href: "/settings", label: "Settings" },
+  { href: "/users", label: "Users" },
+  { href: "/about", label: "About" },
+];
+
+component("nav-bar", () => {
+  const isActive = (href: string) =>
+    href === "/" ? current() === "/" : current().startsWith(href);
+
+  return () => html`
+    <nav class="bg-white border-b border-slate-200">
+      <div class="max-w-3xl mx-auto px-4 h-12 flex items-center gap-4 text-sm">
+        <span class="font-bold text-slate-800">Sanify</span>
+        ${links.map(
+          (l) => html`
+            <a
+              data-link
+              href=${l.href}
+              class=${() =>
+                isActive(l.href)
+                  ? "text-blue-600 font-medium"
+                  : "text-slate-500 hover:text-slate-800"}
+              >${l.label}</a
+            >
+          `,
+        )}
+      </div>
+    </nav>
+  `;
+});

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

@@ -1,4 +1,4 @@
-// components/todo-item.ts — satu baris todo (menerima objek lewat property)
+// components/todo-item.ts — satu baris todo (menerima objek lewat .prop)
 
 import { component, html, type ComponentContext } from "@sanify/core";
 import { toggleTodo, removeTodo, type Todo } from "../state/todos.ts";
@@ -11,7 +11,7 @@ component<TodoItemProps>(
   "todo-item",
   ({ props }: ComponentContext<TodoItemProps>) => {
     return () => html`
-      <li class="flex items-center gap-3 py-2 border-b border-slate-200">
+      <li class="flex items-center gap-3 py-2 border-b border-slate-100">
         <input
           type="checkbox"
           class="h-4 w-4"

package/templates/default/src/components/users-sidebar.ts

@@ -0,0 +1,29 @@
+// components/users-sidebar.ts — daftar user (bagian layout nested yang bertahan)
+
+import { component, html, params } from "@sanify/core";
+import { users } from "../data/users.ts";
+
+component("users-sidebar", () => {
+  return () => html`
+    <aside class="w-40 shrink-0">
+      <h2 class="text-xs uppercase text-slate-400 mb-2">Users</h2>
+      <ul class="space-y-1">
+        ${users.map(
+          (u) => html`
+            <li>
+              <a
+                data-link
+                href=${`/users/${u.id}`}
+                class=${() =>
+                  params().id === u.id
+                    ? "text-blue-600 font-medium"
+                    : "text-slate-600 hover:text-slate-900"}
+                >${u.name}</a
+              >
+            </li>
+          `,
+        )}
+      </ul>
+    </aside>
+  `;
+});

package/templates/default/src/data/users.ts

@@ -0,0 +1,28 @@
+// data/users.ts — data contoh + simulasi fetch async (untuk demo resource())
+
+export interface User {
+  id: string;
+  name: string;
+}
+
+export interface Profile extends User {
+  email: string;
+  bio: string;
+}
+
+export const users: User[] = [
+  { id: "ada", name: "Ada Lovelace" },
+  { id: "alan", name: "Alan Turing" },
+  { id: "grace", name: "Grace Hopper" },
+];
+
+// Tanpa jaringan: tiru latensi + kemungkinan error agar resource() terlihat.
+export function fetchProfile(id: string): Promise<Profile> {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      const u = users.find((x) => x.id === id);
+      if (!u) reject(new Error(`User "${id}" tidak ditemukan`));
+      else resolve({ ...u, email: `${u.id}@sanify.dev`, bio: `Profil ${u.name}.` });
+    }, 400);
+  });
+}

package/templates/default/src/main.ts

@@ -1,3 +1,3 @@
-// main.ts — entry aplikasi: cukup memuat app-root (komponen lain ikut terdaftar)
+// main.ts — entry: cukup memuat app-root (komponen lain ikut terdaftar)
 
 import "./app.ts";

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

@@ -1,16 +1,24 @@
-// pages/about-page.ts — halaman tentang
+// pages/about-page.ts — info + demo query() reaktif
 
-import { component, html } from "@sanify/core";
+import { component, html, query } 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.
+    <div class="max-w-md mx-auto mt-10 p-6 bg-white rounded-xl shadow space-y-2">
+      <h1 class="text-2xl font-bold">About</h1>
+      <p class="text-sm text-slate-600">
+        Dibangun dengan Sanify — framework reaktif fine-grained di atas Web
+        Components, tanpa virtual DOM.
+      </p>
+      <p class="text-sm">
+        Coba query string:
+        <a data-link href="/about?msg=hai" class="text-blue-600 hover:underline"
+          >/about?msg=hai</a
+        >
+      </p>
+      <p class="text-sm">
+        query.msg = <strong>${() => query().get("msg") ?? "(kosong)"}</strong>
       </p>
-      <a data-link href="/" class="text-blue-600 hover:underline">&larr; Kembali</a>
     </div>
   `;
 });

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

@@ -0,0 +1,32 @@
+// pages/home-page.ts — intro + signal counter + komponen lifecycle
+
+import { component, html, signal } from "@sanify/core";
+import "../components/live-clock.ts";
+
+component("home-page", () => {
+  const [count, setCount] = signal(0);
+
+  return () => html`
+    <div class="max-w-md mx-auto mt-10 p-6 bg-white rounded-xl shadow space-y-4">
+      <h1 class="text-2xl font-bold">Sanify starter</h1>
+      <p class="text-sm text-slate-600">
+        Contoh kecil yang memamerkan fitur inti: signal, store, list keyed,
+        router nested, resource.
+      </p>
+
+      <div class="flex items-center gap-3">
+        <button
+          class="bg-slate-800 text-white rounded px-3 py-1 hover:bg-slate-700"
+          @click=${() => setCount((n) => n + 1)}
+        >
+          +1
+        </button>
+        <span class="text-sm">signal: <strong>${() => count()}</strong></span>
+      </div>
+
+      <p class="text-sm text-slate-500">
+        onMount/onCleanup → <live-clock></live-clock>
+      </p>
+    </div>
+  `;
+});

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

@@ -0,0 +1,47 @@
+// pages/settings-page.ts — createStore nested fine-grained (update by path)
+
+import { component, html } from "@sanify/core";
+import { settings, setSettings } from "../state/settings.ts";
+
+component("settings-page", () => {
+  return () => html`
+    <div class="max-w-md mx-auto mt-10 p-6 bg-white rounded-xl shadow space-y-4">
+      <h1 class="text-2xl font-bold">Settings</h1>
+      <p class="text-sm text-slate-500">
+        createStore + update by path — edit satu field tidak menyentuh field lain.
+      </p>
+
+      <label class="block">
+        <span class="text-sm text-slate-600">Nama</span>
+        <input
+          class="mt-1 w-full border border-slate-300 rounded px-3 py-2"
+          .value=${() => settings.profile.name}
+          @input=${(e: Event) =>
+            setSettings("profile", "name", (e.target as HTMLInputElement).value)}
+        />
+      </label>
+
+      <div class="flex items-center gap-3">
+        <span class="text-sm text-slate-600">Umur</span>
+        <button
+          class="border rounded w-8 h-8"
+          @click=${() => setSettings("profile", "age", (a) => a - 1)}
+        >
+          −
+        </button>
+        <strong>${() => settings.profile.age}</strong>
+        <button
+          class="border rounded w-8 h-8"
+          @click=${() => setSettings("profile", "age", (a) => a + 1)}
+        >
+          +
+        </button>
+      </div>
+
+      <p class="text-sm">
+        Halo, <strong>${() => settings.profile.name}</strong> (umur
+        ${() => settings.profile.age}).
+      </p>
+    </div>
+  `;
+});

package/templates/default/src/pages/{todo-page.ts → todos-page.ts}

@@ -1,12 +1,11 @@
-// pages/todo-page.ts — halaman daftar todo
+// pages/todos-page.ts — list keyed (For) + persisted + computed
 
-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", () => {
+component("todos-page", () => {
   const [draft, setDraft] = signal("");
-
   const submit = () => {
     addTodo(draft());
     setDraft("");
@@ -14,10 +13,10 @@ component("todo-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-1">Todo</h1>
+      <h1 class="text-2xl font-bold mb-1">Todos</h1>
       <p class="text-sm text-slate-500 mb-4">
-        Sisa <strong>${() => remaining()}</strong> belum selesai — buka di dua
-        tab untuk lihat sync.
+        Sisa <strong>${() => remaining()}</strong> — persisted + cross-tab (buka
+        dua tab).
       </p>
 
       <div class="flex gap-2 mb-4">
@@ -37,17 +36,16 @@ 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">
-        <a data-link href="/about" class="text-blue-600 hover:underline"
-          >Tentang &rarr;</a
-        >
-      </div>
     </div>
   `;
 });

package/templates/default/src/pages/user-detail.ts

@@ -0,0 +1,32 @@
+// pages/user-detail.ts — resource() + params() reaktif (refetch saat :id berubah,
+// tanpa membangun ulang komponen karena route-nya sama)
+
+import { component, html, resource, params } from "@sanify/core";
+import { fetchProfile } from "../data/users.ts";
+
+component("user-detail", () => {
+  const profile = resource(() => fetchProfile(params().id ?? ""));
+
+  return () => html`
+    <div>
+      ${() =>
+        profile.loading()
+          ? html`<p class="text-slate-400">Memuat…</p>`
+          : null}
+      ${() =>
+        profile.error()
+          ? html`<p class="text-red-500">${String(profile.error())}</p>`
+          : null}
+      ${() => {
+        const p = profile.data();
+        return p
+          ? html`
+              <h2 class="text-xl font-bold">${p.name}</h2>
+              <p class="text-sm text-slate-500">${p.email}</p>
+              <p class="mt-2 text-slate-700">${p.bio}</p>
+            `
+          : null;
+      }}
+    </div>
+  `;
+});

package/templates/default/src/pages/user-list.ts

@@ -0,0 +1,11 @@
+// pages/user-list.ts — index route di bawah layout /users
+
+import { component, html } from "@sanify/core";
+
+component("user-list", () => {
+  return () => html`
+    <p class="text-slate-500">
+      Pilih user di kiri untuk melihat profil (resource + params reaktif).
+    </p>
+  `;
+});

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

@@ -0,0 +1,12 @@
+// state/settings.ts — store objek nested fine-grained (createStore)
+// Edit satu field tidak memicu pembaca field lain.
+
+import { createStore } from "@sanify/core";
+
+export interface Settings {
+  profile: { name: string; age: number };
+}
+
+export const [settings, setSettings] = createStore<Settings>({
+  profile: { name: "Tamu", age: 20 },
+});

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

@@ -1,14 +1,14 @@
-// state/todos.ts — state global todo (persisted + cross-tab sync)
+// state/todos.ts — daftar todo: persisted (localStorage + cross-tab) + computed
 
 import { computed, persisted } from "@sanify/core";
 
 export interface Todo {
-  id: number;
+  id: string;
   text: string;
   done: boolean;
 }
 
-export const [todos, setTodos] = persisted<Todo[]>("sanify:todos", [], {
+export const [todos, setTodos] = persisted<Todo[]>("app:todos", [], {
   sync: true,
 });
 
@@ -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));
 }