create-sanifyfe 0.2.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-sanifyfe",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "description": "Scaffold project Sanify baru — bun create sanifyfe",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -16,7 +16,7 @@ bun install
16
16
 
17
17
  | Perintah | Fungsi |
18
18
  | --- | --- |
19
- | `bun dev` | Jalankan dev server di http://localhost:3000 |
19
+ | `bun dev` | Dev server di http://localhost:3000 dengan **HMR** |
20
20
  | `bun run build` | Bundle produksi ke `dist/` |
21
21
  | `bun run typecheck` | Cek tipe TypeScript |
22
22
 
@@ -43,3 +43,10 @@ dev-server.ts server dev Bun, transpile TS on-the-fly
43
43
  | Settings | `createStore` objek nested fine-grained (update by path) |
44
44
  | Users | router **nested + outlet** (layout bertahan), `params()` reaktif, `resource` (fetch async) |
45
45
  | About | `query()` reaktif |
46
+
47
+ ## HMR
48
+
49
+ `bun dev` mendukung Hot Module Replacement. Edit file komponen → tampilan
50
+ ter-update tanpa reload, dan state global (`persisted`/`createStore`) tetap.
51
+ State lokal di dalam `setup` (mis. signal) ter-reset saat hot-remount. Tiap file
52
+ komponen punya `if (import.meta.hot) import.meta.hot.accept();` di bawahnya.
@@ -1,42 +1,13 @@
1
- // dev-server.ts — dev server sederhana pakai Bun, transpile TS on-the-fly
1
+ // dev-server.ts — dev server Bun dengan HMR (import.meta.hot) + bundling otomatis
2
2
 
3
- const PORT = 3000;
3
+ import index from "./index.html";
4
4
 
5
5
  const server = Bun.serve({
6
- port: PORT,
7
- development: true,
8
- async fetch(req) {
9
- const url = new URL(req.url);
10
- let path = url.pathname;
11
- if (path === "/") path = "/index.html";
12
-
13
- // bundel entry TS aplikasi on-the-fly
14
- if (path === "/main.js") {
15
- const built = await Bun.build({
16
- entrypoints: ["./src/main.ts"],
17
- target: "browser",
18
- });
19
- if (!built.success) {
20
- return new Response("Build error:\n" + built.logs.join("\n"), {
21
- status: 500,
22
- headers: { "Content-Type": "text/plain" },
23
- });
24
- }
25
- const js = await built.outputs[0]!.text();
26
- return new Response(js, {
27
- headers: { "Content-Type": "application/javascript" },
28
- });
29
- }
30
-
31
- // file statis dari root project
32
- const file = Bun.file("." + path);
33
- if (await file.exists()) return new Response(file);
34
-
35
- // SPA fallback: route apa pun → index.html
36
- return new Response(Bun.file("./index.html"), {
37
- headers: { "Content-Type": "text/html" },
38
- });
6
+ port: 3000,
7
+ development: { hmr: true, console: true },
8
+ routes: {
9
+ "/*": index, // SPA: semua route → index.html
39
10
  },
40
11
  });
41
12
 
42
- console.log(`Dev server: http://localhost:${server.port}`);
13
+ console.log(`Dev server: ${server.url}`);
@@ -0,0 +1,14 @@
1
+ // Tipe fitur dev Bun: import file .html & HMR (import.meta.hot).
2
+
3
+ declare module "*.html" {
4
+ const content: import("bun").HTMLBundle;
5
+ export default content;
6
+ }
7
+
8
+ interface ImportMeta {
9
+ hot?: {
10
+ accept(callback?: (module: unknown) => void): void;
11
+ dispose(callback: (data: unknown) => void): void;
12
+ data: unknown;
13
+ };
14
+ }
@@ -8,6 +8,6 @@
8
8
  </head>
9
9
  <body class="bg-slate-50 text-slate-800">
10
10
  <app-root></app-root>
11
- <script type="module" src="/main.js"></script>
11
+ <script type="module" src="./src/main.ts"></script>
12
12
  </body>
13
13
  </html>
@@ -9,7 +9,7 @@
9
9
  "typecheck": "tsc --noEmit"
10
10
  },
11
11
  "dependencies": {
12
- "@sanify/core": "^0.2.0"
12
+ "@sanify/core": "^0.2.1"
13
13
  },
14
14
  "devDependencies": {
15
15
  "typescript": "^5.9.0",
@@ -44,3 +44,5 @@ component("app-root", () => {
44
44
  <main>${view}</main>
45
45
  `;
46
46
  });
47
+
48
+ if (import.meta.hot) import.meta.hot.accept();
@@ -12,3 +12,5 @@ component("live-clock", () => {
12
12
 
13
13
  return () => html`<span class="font-mono">${() => now()}</span>`;
14
14
  });
15
+
16
+ if (import.meta.hot) import.meta.hot.accept();
@@ -35,3 +35,5 @@ component("nav-bar", () => {
35
35
  </nav>
36
36
  `;
37
37
  });
38
+
39
+ if (import.meta.hot) import.meta.hot.accept();
@@ -34,3 +34,5 @@ component<TodoItemProps>(
34
34
  },
35
35
  { props: ["todo"] },
36
36
  );
37
+
38
+ if (import.meta.hot) import.meta.hot.accept();
@@ -27,3 +27,5 @@ component("users-sidebar", () => {
27
27
  </aside>
28
28
  `;
29
29
  });
30
+
31
+ if (import.meta.hot) import.meta.hot.accept();
@@ -22,3 +22,5 @@ component("about-page", () => {
22
22
  </div>
23
23
  `;
24
24
  });
25
+
26
+ if (import.meta.hot) import.meta.hot.accept();
@@ -30,3 +30,5 @@ component("home-page", () => {
30
30
  </div>
31
31
  `;
32
32
  });
33
+
34
+ if (import.meta.hot) import.meta.hot.accept();
@@ -45,3 +45,5 @@ component("settings-page", () => {
45
45
  </div>
46
46
  `;
47
47
  });
48
+
49
+ if (import.meta.hot) import.meta.hot.accept();
@@ -49,3 +49,5 @@ component("todos-page", () => {
49
49
  </div>
50
50
  `;
51
51
  });
52
+
53
+ if (import.meta.hot) import.meta.hot.accept();
@@ -30,3 +30,5 @@ component("user-detail", () => {
30
30
  </div>
31
31
  `;
32
32
  });
33
+
34
+ if (import.meta.hot) import.meta.hot.accept();
@@ -9,3 +9,5 @@ component("user-list", () => {
9
9
  </p>
10
10
  `;
11
11
  });
12
+
13
+ if (import.meta.hot) import.meta.hot.accept();
@@ -18,5 +18,5 @@
18
18
 
19
19
  "types": ["bun"]
20
20
  },
21
- "include": ["src", "dev-server.ts"]
21
+ "include": ["src", "dev-server.ts", "env.d.ts"]
22
22
  }