create-sanifyfe 0.2.0 → 0.3.0

package/README.md

@@ -1,20 +1,20 @@
 # create-sanifyfe
 
-Scaffolder project [Sanify Frontend](https://www.npmjs.com/package/@sanify/core).
+Scaffolder for [Sanify Frontend](https://www.npmjs.com/package/@sanify/core) projects.
 
-## Pakai
+## Usage
 
 ```bash
 bun create sanifyfe my-app
-# atau
+# or
 npm create sanifyfe my-app
 ```
 
-Tanpa argumen nama, CLI akan menanyakannya secara interaktif.
+Without a name argument, the CLI prompts for one interactively.
 
-## Hasil
+## Output
 
-Project siap jalan berisi contoh todo (signal, router, persist + cross-tab sync) dengan dev server Bun:
+A ready-to-run showcase app (signals, stores, keyed lists, nested routing, resource) with a Bun dev server and HMR:
 
 ```bash
 cd my-app

package/package.json

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

package/templates/default/README.md

@@ -1,8 +1,8 @@
 # __PROJECT_NAME__
 
-Project frontend berbasis [Sanify](https://www.npmjs.com/package/@sanify/core) — framework reaktif fine-grained di atas Web Components.
+A frontend project built on [Sanify](https://www.npmjs.com/package/@sanify/core) — a fine-grained reactive framework on top of Web Components.
 
-## Prasyarat
+## Prerequisites
 
 - [Bun](https://bun.sh) >= 1.3.0
 
@@ -12,34 +12,41 @@ Project frontend berbasis [Sanify](https://www.npmjs.com/package/@sanify/core)
 bun install
 ```
 
-## Perintah
+## Commands
 
-| Perintah | Fungsi |
+| Command | Purpose |
 | --- | --- |
-| `bun dev` | Jalankan dev server di http://localhost:3000 |
-| `bun run build` | Bundle produksi ke `dist/` |
-| `bun run typecheck` | Cek tipe TypeScript |
+| `bun dev` | Dev server at http://localhost:3000 with **HMR** |
+| `bun run build` | Production bundle into `dist/` |
+| `bun run typecheck` | TypeScript type check |
 
-## Struktur
+## Structure
 
 ```
 src/
-  main.ts            entry: memuat app-root
-  app.ts             root + router (termasuk nested route + outlet)
-  state/             todos (persisted), settings (createStore nested)
-  data/              data contoh + simulasi fetch async
+  main.ts            entry: loads app-root
+  app.ts             root + router (including nested routes + outlet)
+  state/             todos (persisted), settings (nested createStore)
+  data/              sample data + simulated async fetch
   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
+index.html           host page, loads the bundled main.js
+dev-server.ts        Bun dev server with HMR + automatic bundling
 ```
 
-## Fitur yang dicontohkan
+## Showcased features
 
-| Halaman | Fitur Sanify |
+| Page | Sanify features |
 | --- | --- |
 | 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 |
+| Todos | `For` (keyed list), `persisted` + cross-tab, `computed` |
+| Settings | `createStore` fine-grained nested object (update by path) |
+| Users | **nested router + outlet** (persistent layout), reactive `params()`, `resource` (async fetch) |
+| About | reactive `query()` |
+
+## HMR
+
+`bun dev` supports Hot Module Replacement. Edit a component file → the UI updates
+without a reload, and global state (`persisted`/`createStore`) is preserved.
+Local state inside `setup` (e.g. a signal) resets on hot-remount. Each component
+file ends with `if (import.meta.hot) import.meta.hot.accept();`.

package/templates/default/dev-server.ts

@@ -1,42 +1,13 @@
-// dev-server.ts — dev server sederhana pakai Bun, transpile TS on-the-fly
+// dev-server.ts — dev server Bun dengan HMR (import.meta.hot) + bundling otomatis
 
-const PORT = 3000;
+import index from "./index.html";
 
 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" },
-    });
+  port: 3000,
+  development: { hmr: true, console: true },
+  routes: {
+    "/*": index, // SPA: semua route → index.html
   },
 });
 
-console.log(`Dev server: http://localhost:${server.port}`);
+console.log(`Dev server: ${server.url}`);

package/templates/default/env.d.ts

@@ -0,0 +1,14 @@
+// Tipe fitur dev Bun: import file .html & HMR (import.meta.hot).
+
+declare module "*.html" {
+  const content: import("bun").HTMLBundle;
+  export default content;
+}
+
+interface ImportMeta {
+  hot?: {
+    accept(callback?: (module: unknown) => void): void;
+    dispose(callback: (data: unknown) => void): void;
+    data: unknown;
+  };
+}

package/templates/default/index.html

@@ -8,6 +8,6 @@
   </head>
   <body class="bg-slate-50 text-slate-800">
     <app-root></app-root>
-    <script type="module" src="/main.js"></script>
+    <script type="module" src="./src/main.ts"></script>
   </body>
 </html>

package/templates/default/package.json

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

package/templates/default/src/app.ts

@@ -44,3 +44,5 @@ component("app-root", () => {
     <main>${view}</main>
   `;
 });
+
+if (import.meta.hot) import.meta.hot.accept();

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

@@ -12,3 +12,5 @@ component("live-clock", () => {
 
   return () => html`<span class="font-mono">${() => now()}</span>`;
 });
+
+if (import.meta.hot) import.meta.hot.accept();

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

@@ -35,3 +35,5 @@ component("nav-bar", () => {
     </nav>
   `;
 });
+
+if (import.meta.hot) import.meta.hot.accept();

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

@@ -34,3 +34,5 @@ component<TodoItemProps>(
   },
   { props: ["todo"] },
 );
+
+if (import.meta.hot) import.meta.hot.accept();

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

@@ -27,3 +27,5 @@ component("users-sidebar", () => {
     </aside>
   `;
 });
+
+if (import.meta.hot) import.meta.hot.accept();

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

@@ -22,3 +22,5 @@ component("about-page", () => {
     </div>
   `;
 });
+
+if (import.meta.hot) import.meta.hot.accept();

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

@@ -30,3 +30,5 @@ component("home-page", () => {
     </div>
   `;
 });
+
+if (import.meta.hot) import.meta.hot.accept();

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

@@ -45,3 +45,5 @@ component("settings-page", () => {
     </div>
   `;
 });
+
+if (import.meta.hot) import.meta.hot.accept();

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

@@ -49,3 +49,5 @@ component("todos-page", () => {
     </div>
   `;
 });
+
+if (import.meta.hot) import.meta.hot.accept();

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

@@ -30,3 +30,5 @@ component("user-detail", () => {
     </div>
   `;
 });
+
+if (import.meta.hot) import.meta.hot.accept();

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

@@ -9,3 +9,5 @@ component("user-list", () => {
     </p>
   `;
 });
+
+if (import.meta.hot) import.meta.hot.accept();

package/templates/default/tsconfig.json

@@ -18,5 +18,5 @@
 
     "types": ["bun"]
   },
-  "include": ["src", "dev-server.ts"]
+  "include": ["src", "dev-server.ts", "env.d.ts"]
 }