create-sanifyfe 0.1.0

package/dist/index.js

@@ -0,0 +1,76 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { fileURLToPath } from "node:url";
+import { dirname, join as join2, resolve, basename } from "node:path";
+import { createInterface } from "node:readline/promises";
+import { stdin, stdout } from "node:process";
+
+// src/scaffold.ts
+import { cp, readFile, writeFile, rename, mkdir, readdir } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+var PLACEHOLDER = "__PROJECT_NAME__";
+async function isEmptyDir(dir) {
+  const entries = await readdir(dir);
+  return entries.length === 0;
+}
+async function scaffold(opts) {
+  const { targetDir, projectName, templateDir } = opts;
+  if (existsSync(targetDir) && !await isEmptyDir(targetDir)) {
+    throw new Error(`Direktori "${targetDir}" sudah ada dan tidak kosong.`);
+  }
+  await mkdir(targetDir, { recursive: true });
+  await cp(templateDir, targetDir, { recursive: true });
+  const gitignoreSrc = join(targetDir, "_gitignore");
+  if (existsSync(gitignoreSrc)) {
+    await rename(gitignoreSrc, join(targetDir, ".gitignore"));
+  }
+  for (const rel of ["package.json", "README.md", "index.html"]) {
+    const file = join(targetDir, rel);
+    if (!existsSync(file))
+      continue;
+    const content = await readFile(file, "utf8");
+    await writeFile(file, content.replaceAll(PLACEHOLDER, projectName));
+  }
+}
+
+// src/index.ts
+var here = dirname(fileURLToPath(import.meta.url));
+var templateDir = join2(here, "..", "templates", "default");
+function isValidName(name) {
+  return /^[a-z0-9][a-z0-9._-]*$/.test(name);
+}
+async function main() {
+  let target = process.argv[2];
+  if (!target) {
+    const rl = createInterface({ input: stdin, output: stdout });
+    target = (await rl.question("Nama project: ")).trim();
+    rl.close();
+  }
+  if (!target) {
+    console.error("Error: nama project wajib diisi.");
+    process.exit(1);
+  }
+  const targetDir = resolve(process.cwd(), target);
+  const projectName = basename(targetDir);
+  if (!isValidName(projectName)) {
+    console.error(`Error: nama "${projectName}" tidak valid (huruf kecil, angka, "-", "_", ".").`);
+    process.exit(1);
+  }
+  try {
+    await scaffold({ targetDir, projectName, templateDir });
+  } catch (err) {
+    console.error(`Error: ${err.message}`);
+    process.exit(1);
+  }
+  console.log(`
+Project "${projectName}" dibuat di ${targetDir}
+`);
+  console.log("Langkah berikutnya:");
+  console.log(`  cd ${target}`);
+  console.log("  bun install");
+  console.log(`  bun dev
+`);
+}
+main();

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "create-sanifyfe",
+  "version": "0.1.0",
+  "description": "Scaffold project Sanify baru — bun create sanifyfe",
+  "type": "module",
+  "license": "MIT",
+  "author": "Satria Agung Nugraha",
+  "bin": {
+    "create-sanifyfe": "./dist/index.js"
+  },
+  "files": ["dist", "templates"],
+  "scripts": {
+    "build": "bun build ./src/index.ts --outdir ./dist --target node",
+    "test": "bun test"
+  },
+  "engines": {
+    "bun": ">=1.3.0"
+  }
+}

package/templates/default/README.md

@@ -0,0 +1,27 @@
+# __PROJECT_NAME__
+
+Project frontend berbasis [Sanify](https://www.npmjs.com/package/@sanify/core) — framework reaktif fine-grained di atas Web Components.
+
+## Prasyarat
+
+- [Bun](https://bun.sh) >= 1.3.0
+
+## Setup
+
+```bash
+bun install
+```
+
+## Perintah
+
+| Perintah | Fungsi |
+| --- | --- |
+| `bun dev` | Jalankan dev server di http://localhost:3000 |
+| `bun run build` | Bundle produksi ke `dist/` |
+| `bun run typecheck` | Cek tipe TypeScript |
+
+## 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.

package/templates/default/_gitignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

package/templates/default/dev-server.ts

@@ -0,0 +1,42 @@
+// dev-server.ts — dev server sederhana pakai Bun, transpile TS on-the-fly
+
+const PORT = 3000;
+
+const server = Bun.serve({
+  port: PORT,
+  development: true,
+  async fetch(req) {
+    const url = new URL(req.url);
+    let path = url.pathname;
+    if (path === "/") path = "/index.html";
+
+    // bundel entry TS aplikasi on-the-fly
+    if (path === "/main.js") {
+      const built = await Bun.build({
+        entrypoints: ["./src/main.ts"],
+        target: "browser",
+      });
+      if (!built.success) {
+        return new Response("Build error:\n" + built.logs.join("\n"), {
+          status: 500,
+          headers: { "Content-Type": "text/plain" },
+        });
+      }
+      const js = await built.outputs[0]!.text();
+      return new Response(js, {
+        headers: { "Content-Type": "application/javascript" },
+      });
+    }
+
+    // file statis dari root project
+    const file = Bun.file("." + path);
+    if (await file.exists()) return new Response(file);
+
+    // SPA fallback: route apa pun → index.html
+    return new Response(Bun.file("./index.html"), {
+      headers: { "Content-Type": "text/html" },
+    });
+  },
+});
+
+console.log(`Dev server: http://localhost:${server.port}`);

package/templates/default/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="id">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>__PROJECT_NAME__</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-slate-50 text-slate-800">
+    <app-root></app-root>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>

package/templates/default/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "__PROJECT_NAME__",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "bun run dev-server.ts",
+    "build": "bun build ./src/main.ts --outdir ./dist --target browser --minify",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@sanify/core": "^0.1.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.0",
+    "@types/bun": "latest"
+  },
+  "engines": {
+    "bun": ">=1.3.0"
+  }
+}

package/templates/default/src/main.ts

@@ -0,0 +1,156 @@
+// example/main.ts — aplikasi contoh memakai seluruh API Sanify
+// Todo dengan persist + cross-tab sync, routing, props dua arah, list & conditional.
+
+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;

package/templates/default/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "skipLibCheck": true,
+
+    "types": ["bun"]
+  },
+  "include": ["src", "dev-server.ts"]
+}