create-sanifyfe 0.2.1 → 0.3.0
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/README.md +6 -6
- package/package.json +1 -1
- package/templates/default/README.md +24 -24
- package/templates/default/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
# create-sanifyfe
|
|
2
2
|
|
|
3
|
-
Scaffolder
|
|
3
|
+
Scaffolder for [Sanify Frontend](https://www.npmjs.com/package/@sanify/core) projects.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Usage
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
bun create sanifyfe my-app
|
|
9
|
-
#
|
|
9
|
+
# or
|
|
10
10
|
npm create sanifyfe my-app
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
Without a name argument, the CLI prompts for one interactively.
|
|
14
14
|
|
|
15
|
-
##
|
|
15
|
+
## Output
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
A ready-to-run showcase app (signals, stores, keyed lists, nested routing, resource) with a Bun dev server and HMR:
|
|
18
18
|
|
|
19
19
|
```bash
|
|
20
20
|
cd my-app
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# __PROJECT_NAME__
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A frontend project built on [Sanify](https://www.npmjs.com/package/@sanify/core) — a fine-grained reactive framework on top of Web Components.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Prerequisites
|
|
6
6
|
|
|
7
7
|
- [Bun](https://bun.sh) >= 1.3.0
|
|
8
8
|
|
|
@@ -12,41 +12,41 @@ Project frontend berbasis [Sanify](https://www.npmjs.com/package/@sanify/core)
|
|
|
12
12
|
bun install
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
##
|
|
15
|
+
## Commands
|
|
16
16
|
|
|
17
|
-
|
|
|
17
|
+
| Command | Purpose |
|
|
18
18
|
| --- | --- |
|
|
19
|
-
| `bun dev` | Dev server
|
|
20
|
-
| `bun run build` |
|
|
21
|
-
| `bun run typecheck` |
|
|
19
|
+
| `bun dev` | Dev server at http://localhost:3000 with **HMR** |
|
|
20
|
+
| `bun run build` | Production bundle into `dist/` |
|
|
21
|
+
| `bun run typecheck` | TypeScript type check |
|
|
22
22
|
|
|
23
|
-
##
|
|
23
|
+
## Structure
|
|
24
24
|
|
|
25
25
|
```
|
|
26
26
|
src/
|
|
27
|
-
main.ts entry:
|
|
28
|
-
app.ts root + router (
|
|
29
|
-
state/ todos (persisted), settings (createStore
|
|
30
|
-
data/ data
|
|
27
|
+
main.ts entry: loads app-root
|
|
28
|
+
app.ts root + router (including nested routes + outlet)
|
|
29
|
+
state/ todos (persisted), settings (nested createStore)
|
|
30
|
+
data/ sample data + simulated async fetch
|
|
31
31
|
components/ nav-bar, users-sidebar, todo-item, live-clock
|
|
32
32
|
pages/ home, todos, settings, user-list, user-detail, about
|
|
33
|
-
index.html
|
|
34
|
-
dev-server.ts
|
|
33
|
+
index.html host page, loads the bundled main.js
|
|
34
|
+
dev-server.ts Bun dev server with HMR + automatic bundling
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
-
##
|
|
37
|
+
## Showcased features
|
|
38
38
|
|
|
39
|
-
|
|
|
39
|
+
| Page | Sanify features |
|
|
40
40
|
| --- | --- |
|
|
41
41
|
| Home | `signal`, `onMount`/`onCleanup` (live-clock) |
|
|
42
|
-
| Todos | `For` (list
|
|
43
|
-
| Settings | `createStore`
|
|
44
|
-
| Users |
|
|
45
|
-
| About | `query()`
|
|
42
|
+
| Todos | `For` (keyed list), `persisted` + cross-tab, `computed` |
|
|
43
|
+
| Settings | `createStore` fine-grained nested object (update by path) |
|
|
44
|
+
| Users | **nested router + outlet** (persistent layout), reactive `params()`, `resource` (async fetch) |
|
|
45
|
+
| About | reactive `query()` |
|
|
46
46
|
|
|
47
47
|
## HMR
|
|
48
48
|
|
|
49
|
-
`bun dev`
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
`bun dev` supports Hot Module Replacement. Edit a component file → the UI updates
|
|
50
|
+
without a reload, and global state (`persisted`/`createStore`) is preserved.
|
|
51
|
+
Local state inside `setup` (e.g. a signal) resets on hot-remount. Each component
|
|
52
|
+
file ends with `if (import.meta.hot) import.meta.hot.accept();`.
|