@zoijs/core 1.3.0 → 1.3.2

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/CHANGELOG.md CHANGED
@@ -1,83 +1,103 @@
1
- # Changelog
2
-
3
- All notable changes to Zoijs are documented here. The format is based on
4
- [Keep a Changelog](https://keepachangelog.com/), and Zoijs follows
5
- [Semantic Versioning](https://semver.org/) (see `VERSIONING.md`).
6
-
7
- ## [1.3.0] — 2026-06-26
8
-
9
- ### Added
10
- - **`boundary(child, fallback)`.** A render-time error boundary: it renders
11
- `child`, and if `child` throws **synchronously while building its markup** (a
12
- setup/render error that would otherwise break the whole `mount`), it disposes the
13
- partial work — so an `effect` created before the throw can't leakand renders
14
- `fallback` (a value, or `(error) => value`) instead. Catches synchronous
15
- setup/render throws only; errors in reactive *updates* are already contained per
16
- binding, and *async* errors belong to `@zoijs/resource` / `@zoijs/action`'s
17
- `error()` state. Logs in dev, silent in production. The public surface is now
18
- **nine** functions (additive MINOR). See [RFC 0004](docs/rfcs/0004-error-boundary.md).
19
-
20
- ## [1.2.0] 2026-06-26
21
-
22
- ### Added
23
- - **`effect(fn)`.** A public reactive effect runs a side effect immediately and
24
- re-runs whenever a reactive value it reads changes (automatic dependency
25
- tracking, microtask-batched). The function may return a cleanup that runs before
26
- the next run and on dispose (same convention as a `ref`); `effect` auto-disposes
27
- with its owner (component / list item) and returns `{ dispose }` for early
28
- teardown. This is the public completion of the reactive trio (`createState` /
29
- `computed` / `effect`) — the engine already used it internally for bindings. Use
30
- it for side effects *outside* the view (persist on change, sync `document.title`,
31
- drive a non-Zoijs widget); for on-screen content, keep using a binding
32
- (`${() => …}`). The public surface is now **eight** functions (additive MINOR per
33
- `VERSIONING.md`). See [RFC 0003](docs/rfcs/0003-effect-and-svg.md).
34
-
35
- ### Notes
36
- - The **`svg`** helper considered alongside `effect` was **deferred**: templates
37
- rooted at `<svg>` already render correctly, and only dynamic-SVG *composition* is
38
- affected a minority need. See [RFC 0003](docs/rfcs/0003-effect-and-svg.md) §6.
39
-
40
- ## [1.1.0] — 2026-06-25
41
-
42
- ### Added
43
- - **Element refs.** A new `ref` binding gives you the rendered DOM element:
44
- `html\`<input ref=${(el) => el.focus()} />\``. The callback runs once, just after
45
- the element is inserted (so `focus`/`scroll`/`measure`/`canvas` work), is not
46
- reactive, and may return a cleanup function that runs on unmount or list-item
47
- removal. Works inside keyed `each` lists. Non-function values are ignored with a
48
- dev-mode warning and never become a DOM attribute. No new export — `ref` is a
49
- binding semantic, so the seven-function public surface is unchanged (additive
50
- MINOR per `VERSIONING.md`). See [Element refs](docs/concepts/refs.md) and
51
- [RFC 0001](docs/rfcs/0001-element-refs.md).
52
-
53
- ## [1.0.0] 2026-06-24
54
-
55
- First stable release. The public API is frozen at seven functions.
56
-
57
- ### Public API
58
- - `html` tagged-template renderer (no JSX, no build step).
59
- - `mount(component, target)` → `unmount()`.
60
- - `createState(value)` `{ get, set, peek }`.
61
- - `computed(fn)` → `{ get, peek }` — lazy, cached, value-gated.
62
- - `each(items, keyFn, renderFn)` — keyed list reconciliation.
63
- - `configure({ dev })` development/production mode.
64
- - `onCleanup(fn)` teardown for components and list items.
65
-
66
- ### Features
67
- - Fine-grained, direct DOM updates (no Virtual DOM); setup runs once.
68
- - Push-pull reactive core with automatic dependency tracking and microtask batching.
69
- - Owner-scoped cleanup; deterministic teardown on unmount and list-item removal.
70
- - Context-aware template parser (quoted/unquoted/partial/multi-hole attributes,
71
- boolean/URL/aria/data attributes, SVG, nested templates and lists).
72
- - Secure by default: inert text, URL-scheme allowlist (control-char resistant),
73
- `data:` raster-image rules, `on*`/`srcdoc` blocked, function-only handlers,
74
- no `eval`, CSP- and Trusted-Types-friendly.
75
- - TypeScript definitions with generics for state/computed/lists.
76
-
77
- ### Tooling
78
- - 100+ unit/DOM tests (jsdom), real-browser tests on Chromium/Firefox/WebKit
79
- (Playwright), and TypeScript type tests.
80
- - No build step required at any point.
81
-
82
- [1.1.0]: https://github.com/Zoijs/zoijs/releases/tag/core-v1.1.0
83
- [1.0.0]: https://github.com/Zoijs/zoijs/releases/tag/core-v1.0.0
1
+ # Changelog
2
+
3
+ All notable changes to Zoijs are documented here. The format is based on
4
+ [Keep a Changelog](https://keepachangelog.com/), and Zoijs follows
5
+ [Semantic Versioning](https://semver.org/) (see `VERSIONING.md`).
6
+
7
+ ## [1.3.2] — 2026-06-26
8
+
9
+ ### Fixed
10
+ - **Focus is preserved across a keyed reorder.** The 1.3.1 minimal-move change can
11
+ move the subtree that holds the focused element, which blurs it in browsers.
12
+ `each` now captures focus + caret position before reordering and restores them
13
+ after, so reordering a list never steals focus or selectionwhichever nodes
14
+ happen to move. Verified in Chromium, Firefox, and WebKit
15
+ (`browser-tests/regression.spec.js`).
16
+
17
+ ## [1.3.1] 2026-06-26
18
+
19
+ ### Performance
20
+ - **Minimal DOM moves in `each`.** Keyed-list reconciliation now uses a
21
+ longest-increasing-subsequence pass, so a reorder moves the **fewest nodes
22
+ possible** — moving one item across a list is a single DOM move (it could be up
23
+ to N before). No API or behavior change; the final order is identical and reused
24
+ nodes keep their identity (focus, input values, and scroll survive reorders).
25
+ Proven by move-count tests (`tests/lis.test.js`); numbers in `bench/`.
26
+
27
+ ## [1.3.0] 2026-06-26
28
+
29
+ ### Added
30
+ - **`boundary(child, fallback)`.** A render-time error boundary: it renders
31
+ `child`, and if `child` throws **synchronously while building its markup** (a
32
+ setup/render error that would otherwise break the whole `mount`), it disposes the
33
+ partial work — so an `effect` created before the throw can't leak — and renders
34
+ `fallback` (a value, or `(error) => value`) instead. Catches synchronous
35
+ setup/render throws only; errors in reactive *updates* are already contained per
36
+ binding, and *async* errors belong to `@zoijs/resource` / `@zoijs/action`'s
37
+ `error()` state. Logs in dev, silent in production. The public surface is now
38
+ **nine** functions (additive MINOR). See [RFC 0004](docs/rfcs/0004-error-boundary.md).
39
+
40
+ ## [1.2.0] — 2026-06-26
41
+
42
+ ### Added
43
+ - **`effect(fn)`.** A public reactive effect runs a side effect immediately and
44
+ re-runs whenever a reactive value it reads changes (automatic dependency
45
+ tracking, microtask-batched). The function may return a cleanup that runs before
46
+ the next run and on dispose (same convention as a `ref`); `effect` auto-disposes
47
+ with its owner (component / list item) and returns `{ dispose }` for early
48
+ teardown. This is the public completion of the reactive trio (`createState` /
49
+ `computed` / `effect`) the engine already used it internally for bindings. Use
50
+ it for side effects *outside* the view (persist on change, sync `document.title`,
51
+ drive a non-Zoijs widget); for on-screen content, keep using a binding
52
+ (`${() => …}`). The public surface is now **eight** functions (additive MINOR per
53
+ `VERSIONING.md`). See [RFC 0003](docs/rfcs/0003-effect-and-svg.md).
54
+
55
+ ### Notes
56
+ - The **`svg`** helper considered alongside `effect` was **deferred**: templates
57
+ rooted at `<svg>` already render correctly, and only dynamic-SVG *composition* is
58
+ affecteda minority need. See [RFC 0003](docs/rfcs/0003-effect-and-svg.md) §6.
59
+
60
+ ## [1.1.0] 2026-06-25
61
+
62
+ ### Added
63
+ - **Element refs.** A new `ref` binding gives you the rendered DOM element:
64
+ `html\`<input ref=${(el) => el.focus()} />\``. The callback runs once, just after
65
+ the element is inserted (so `focus`/`scroll`/`measure`/`canvas` work), is not
66
+ reactive, and may return a cleanup function that runs on unmount or list-item
67
+ removal. Works inside keyed `each` lists. Non-function values are ignored with a
68
+ dev-mode warning and never become a DOM attribute. No new export — `ref` is a
69
+ binding semantic, so the seven-function public surface is unchanged (additive
70
+ MINOR per `VERSIONING.md`). See [Element refs](docs/concepts/refs.md) and
71
+ [RFC 0001](docs/rfcs/0001-element-refs.md).
72
+
73
+ ## [1.0.0] 2026-06-24
74
+
75
+ First stable release. The public API is frozen at seven functions.
76
+
77
+ ### Public API
78
+ - `html` tagged-template renderer (no JSX, no build step).
79
+ - `mount(component, target)` `unmount()`.
80
+ - `createState(value)` `{ get, set, peek }`.
81
+ - `computed(fn)` → `{ get, peek }` — lazy, cached, value-gated.
82
+ - `each(items, keyFn, renderFn)` — keyed list reconciliation.
83
+ - `configure({ dev })` — development/production mode.
84
+ - `onCleanup(fn)` — teardown for components and list items.
85
+
86
+ ### Features
87
+ - Fine-grained, direct DOM updates (no Virtual DOM); setup runs once.
88
+ - Push-pull reactive core with automatic dependency tracking and microtask batching.
89
+ - Owner-scoped cleanup; deterministic teardown on unmount and list-item removal.
90
+ - Context-aware template parser (quoted/unquoted/partial/multi-hole attributes,
91
+ boolean/URL/aria/data attributes, SVG, nested templates and lists).
92
+ - Secure by default: inert text, URL-scheme allowlist (control-char resistant),
93
+ `data:` raster-image rules, `on*`/`srcdoc` blocked, function-only handlers,
94
+ no `eval`, CSP- and Trusted-Types-friendly.
95
+ - TypeScript definitions with generics for state/computed/lists.
96
+
97
+ ### Tooling
98
+ - 100+ unit/DOM tests (jsdom), real-browser tests on Chromium/Firefox/WebKit
99
+ (Playwright), and TypeScript type tests.
100
+ - No build step required at any point.
101
+
102
+ [1.1.0]: https://github.com/Zoijs/zoijs/releases/tag/core-v1.1.0
103
+ [1.0.0]: https://github.com/Zoijs/zoijs/releases/tag/core-v1.0.0
package/README.md CHANGED
@@ -1,154 +1,154 @@
1
- # Zoijs
2
-
3
- A lightweight frontend framework you don't have to learn before you use it — **plain HTML, CSS, and JavaScript**, no JSX, no build step, no Virtual DOM.
4
-
5
- **[Documentation](https://zoijs.dev)** · **[GitHub](https://github.com/Zoijs)** · **[npm](https://www.npmjs.com/package/@zoijs/core)**
6
-
7
- ```bash
8
- npm install @zoijs/core
9
- ```
10
-
11
- ```js
12
- import { html, mount, createState } from "@zoijs/core";
13
-
14
- function Counter() {
15
- const count = createState(0);
16
- return html`<button onclick=${() => count.set(count.get() + 1)}>${() => count.get()}</button>`;
17
- }
18
- mount(Counter, "#app");
19
- ```
20
-
21
- ## 📚 Documentation
22
-
23
- **New here? Start at [zoijs.dev](https://zoijs.dev) (or the [docs folder](docs/README.md)) — designed to get you productive in under 30 minutes.**
24
-
25
- - [Installation](docs/installation.md) · [Your First App](docs/first-app.md) · [Core Concepts](docs/concepts/core-concepts.md)
26
- - [Tutorials](docs/README.md#tutorials-build-something) · [API Reference](docs/api-reference.md) · [Examples](docs/examples.md)
27
- - [Troubleshooting](docs/troubleshooting.md) · [FAQ](docs/faq.md) · [Migrating from React/Vue/Solid/Lit/vanilla](docs/README.md#coming-from-another-framework)
28
-
29
- ---
30
-
31
- ## Mission
32
-
33
- Make building modern web applications feel as approachable as writing plain HTML, CSS, and JavaScript — so that any developer, on day one, can ship real software without first learning a framework.
34
-
35
- The framework should disappear into the skills developers already have. The whole mental model is three verbs: **write a function that returns `html`, put `createState` values in it, `mount` it.**
36
-
37
- ## Goals
38
-
39
- - **Beginner-friendly** — concepts you already know from vanilla JS/HTML/CSS.
40
- - **No build step** — runs from a single `<script type="module">`.
41
- - **No Virtual DOM** — fine-grained, direct DOM updates; only what changed is touched.
42
- - **Minimal runtime** — the browser does the heavy lifting (native `<template>`, `cloneNode`, events).
43
- - **Secure by default** — inert text rendering, URL-scheme guards, handler references (never strings), no `eval`.
44
- - **Small & readable** — a junior developer can read the source.
45
-
46
- See [`docs/Phase-1-MVP-Spec.md`](docs/Phase-1-MVP-Spec.md) for the full specification.
47
-
48
- ## Setup
49
-
50
- No build step is required — the framework is plain ES modules.
51
-
52
- ```bash
53
- # from the framework/ directory
54
-
55
- # run the counter example (serves the project root over http so ES modules resolve)
56
- npm run dev
57
- # then open: http://localhost:7310/examples/counter/ (keep the trailing slash)
58
-
59
- # run the tests (DOM tests run automatically via jsdom)
60
- npm test
61
- ```
62
-
63
- > Tips:
64
- > - ES module imports need to be served over `http://`, not opened as a `file://` path. `npm run dev` handles that.
65
- > - Use the **trailing slash** on the example URL (`/examples/counter/`). Without it, some static servers resolve `./app.js` against the wrong directory and the app won't load.
66
-
67
- ## Testing
68
-
69
- | Command | What it runs |
70
- |---|---|
71
- | `npm test` | Unit + DOM tests via jsdom (fast, no browser) |
72
- | `npm run test:unit` | Pure-logic tests only (no DOM) |
73
- | `npm run test:types` | TypeScript type-checks (`tsc --noEmit`) |
74
- | `npm run test:browser` | Real-browser tests in Chromium, Firefox, WebKit (Playwright) |
75
-
76
- Browser tests live in `browser-tests/` and run the example apps plus framework regressions against real engines. First-time setup downloads the browsers:
77
-
78
- ```bash
79
- npm install
80
- npx playwright install chromium firefox webkit
81
- npm run test:browser
82
- ```
83
-
84
- Playwright starts a static server automatically (`npx serve` on port 7310) — still no build step.
85
-
86
- ## Browser support
87
-
88
- Modern evergreen browsers. Verified automatically (Playwright) in:
89
-
90
- | Browser | Engine | Status |
91
- |---|---|---|
92
- | Chrome / Edge | Chromium | ✅ tested |
93
- | Firefox | Gecko | ✅ tested |
94
- | Safari | WebKit | ✅ tested |
95
-
96
- Relies on baseline-modern platform APIs: ES modules, `<template>`, `TreeWalker`, `Proxy`, `queueMicrotask`, `replaceChildren`, `addEventListener`, `setAttributeNS`. No IE support, no transpilation, no polyfills.
97
-
98
- ## Public API
99
-
100
- ```js
101
- import { html, mount, createState, computed, each, configure, onCleanup } from "@zoijs/core";
102
- ```
103
-
104
- - `html` — tagged template; parsed once, cached.
105
- - `mount(component, target)` — render a component; returns `unmount()`.
106
- - `createState(value)` — a reactive value (`get` / `set` / `peek`).
107
- - `computed(fn)` — a lazy, cached, **value-gated** derived value (`get` / `peek`).
108
- - `each(itemsFn, keyFn, renderFn)` — keyed list rendering (reuse / move / remove nodes).
109
- - `configure({ dev })` — toggle development warnings (default `dev: true`).
110
- - `onCleanup(fn)` — register teardown for a component or list item (timers, subscriptions).
111
-
112
- See the [Documentation site](docs/README.md) for the full guide, tutorials, and API reference.
113
-
114
- **TypeScript:** ships type definitions ([`src/index.d.ts`](src/index.d.ts)) for autocomplete and optional type-checking — JS-first, no build step required. `createState<T>`, `computed<T>`, and `each<T>` are generic. Type-check with `npm run test:types`.
115
-
116
- ## What's built
117
-
118
- - Fine-grained text/attribute bindings — `${() => state.get()}` updates one node in place; setup runs once (no re-render).
119
- - Native events, secure-by-default rendering (inert text, URL-scheme guards, no `eval`).
120
- - `computed()` derived values — lazy, cached, nestable, and **value-gated** (unchanged results don't wake downstream).
121
- - `each()` keyed list reconciliation — preserves focus / input / scroll on reorder.
122
- - Microtask batching, push-pull dependency tracking, **owner-scoped cleanup** (unmount and removed items dispose their subscriptions).
123
- - Production mode via `configure({ dev: false })` — no build step.
124
- - Safety: self-triggering effects are warned + stopped; a throwing binding doesn't break others.
125
-
126
- **Out of scope (by design):** router, CLI, plugins, SSR, global store, TypeScript-first setup, Virtual DOM.
127
-
128
- ## Project Structure
129
-
130
- ```
131
- framework/
132
- package.json
133
- README.md
134
- src/
135
- core/
136
- html.js # html() — parse template into a cached blueprint
137
- mount.js # mount() — entry point; instantiate + attach + cleanup
138
- renderer.js # internal: bind dynamic slots, apply fine-grained updates
139
- reactivity/
140
- state.js # createState() + internal dependency tracking
141
- utils/
142
- dom.js # small native-DOM helpers
143
- security.js # escaping, URL-scheme allowlist, attribute-name guards
144
- index.js # public entry — re-exports html, mount, createState
145
- examples/
146
- counter/ # the first working app
147
- tests/ # basic unit tests (node --test)
148
- docs/
149
- Phase-1-MVP-Spec.md
150
- ```
151
-
152
- ## License
153
-
154
- MIT
1
+ # Zoijs
2
+
3
+ A lightweight frontend framework you don't have to learn before you use it — **plain HTML, CSS, and JavaScript**, no JSX, no build step, no Virtual DOM.
4
+
5
+ **[Documentation](https://zoijs.dev)** · **[GitHub](https://github.com/Zoijs)** · **[npm](https://www.npmjs.com/package/@zoijs/core)**
6
+
7
+ ```bash
8
+ npm install @zoijs/core
9
+ ```
10
+
11
+ ```js
12
+ import { html, mount, createState } from "@zoijs/core";
13
+
14
+ function Counter() {
15
+ const count = createState(0);
16
+ return html`<button onclick=${() => count.set(count.get() + 1)}>${() => count.get()}</button>`;
17
+ }
18
+ mount(Counter, "#app");
19
+ ```
20
+
21
+ ## 📚 Documentation
22
+
23
+ **New here? Start at [zoijs.dev](https://zoijs.dev) (or the [docs folder](docs/README.md)) — designed to get you productive in under 30 minutes.**
24
+
25
+ - [Installation](docs/installation.md) · [Your First App](docs/first-app.md) · [Core Concepts](docs/concepts/core-concepts.md)
26
+ - [Tutorials](docs/README.md#tutorials-build-something) · [API Reference](docs/api-reference.md) · [Examples](docs/examples.md)
27
+ - [Troubleshooting](docs/troubleshooting.md) · [FAQ](docs/faq.md) · [Migrating from React/Vue/Solid/Lit/vanilla](docs/README.md#coming-from-another-framework)
28
+
29
+ ---
30
+
31
+ ## Mission
32
+
33
+ Make building modern web applications feel as approachable as writing plain HTML, CSS, and JavaScript — so that any developer, on day one, can ship real software without first learning a framework.
34
+
35
+ The framework should disappear into the skills developers already have. The whole mental model is three verbs: **write a function that returns `html`, put `createState` values in it, `mount` it.**
36
+
37
+ ## Goals
38
+
39
+ - **Beginner-friendly** — concepts you already know from vanilla JS/HTML/CSS.
40
+ - **No build step** — runs from a single `<script type="module">`.
41
+ - **No Virtual DOM** — fine-grained, direct DOM updates; only what changed is touched.
42
+ - **Minimal runtime** — the browser does the heavy lifting (native `<template>`, `cloneNode`, events).
43
+ - **Secure by default** — inert text rendering, URL-scheme guards, handler references (never strings), no `eval`.
44
+ - **Small & readable** — a junior developer can read the source.
45
+
46
+ See [`docs/Phase-1-MVP-Spec.md`](docs/Phase-1-MVP-Spec.md) for the full specification.
47
+
48
+ ## Setup
49
+
50
+ No build step is required — the framework is plain ES modules.
51
+
52
+ ```bash
53
+ # from the framework/ directory
54
+
55
+ # run the counter example (serves the project root over http so ES modules resolve)
56
+ npm run dev
57
+ # then open: http://localhost:7310/examples/counter/ (keep the trailing slash)
58
+
59
+ # run the tests (DOM tests run automatically via jsdom)
60
+ npm test
61
+ ```
62
+
63
+ > Tips:
64
+ > - ES module imports need to be served over `http://`, not opened as a `file://` path. `npm run dev` handles that.
65
+ > - Use the **trailing slash** on the example URL (`/examples/counter/`). Without it, some static servers resolve `./app.js` against the wrong directory and the app won't load.
66
+
67
+ ## Testing
68
+
69
+ | Command | What it runs |
70
+ |---|---|
71
+ | `npm test` | Unit + DOM tests via jsdom (fast, no browser) |
72
+ | `npm run test:unit` | Pure-logic tests only (no DOM) |
73
+ | `npm run test:types` | TypeScript type-checks (`tsc --noEmit`) |
74
+ | `npm run test:browser` | Real-browser tests in Chromium, Firefox, WebKit (Playwright) |
75
+
76
+ Browser tests live in `browser-tests/` and run the example apps plus framework regressions against real engines. First-time setup downloads the browsers:
77
+
78
+ ```bash
79
+ npm install
80
+ npx playwright install chromium firefox webkit
81
+ npm run test:browser
82
+ ```
83
+
84
+ Playwright starts a static server automatically (`npx serve` on port 7310) — still no build step.
85
+
86
+ ## Browser support
87
+
88
+ Modern evergreen browsers. Verified automatically (Playwright) in:
89
+
90
+ | Browser | Engine | Status |
91
+ |---|---|---|
92
+ | Chrome / Edge | Chromium | ✅ tested |
93
+ | Firefox | Gecko | ✅ tested |
94
+ | Safari | WebKit | ✅ tested |
95
+
96
+ Relies on baseline-modern platform APIs: ES modules, `<template>`, `TreeWalker`, `Proxy`, `queueMicrotask`, `replaceChildren`, `addEventListener`, `setAttributeNS`. No IE support, no transpilation, no polyfills.
97
+
98
+ ## Public API
99
+
100
+ ```js
101
+ import { html, mount, createState, computed, each, configure, onCleanup } from "@zoijs/core";
102
+ ```
103
+
104
+ - `html` — tagged template; parsed once, cached.
105
+ - `mount(component, target)` — render a component; returns `unmount()`.
106
+ - `createState(value)` — a reactive value (`get` / `set` / `peek`).
107
+ - `computed(fn)` — a lazy, cached, **value-gated** derived value (`get` / `peek`).
108
+ - `each(itemsFn, keyFn, renderFn)` — keyed list rendering (reuse / move / remove nodes).
109
+ - `configure({ dev })` — toggle development warnings (default `dev: true`).
110
+ - `onCleanup(fn)` — register teardown for a component or list item (timers, subscriptions).
111
+
112
+ See the [Documentation site](docs/README.md) for the full guide, tutorials, and API reference.
113
+
114
+ **TypeScript:** ships type definitions ([`src/index.d.ts`](src/index.d.ts)) for autocomplete and optional type-checking — JS-first, no build step required. `createState<T>`, `computed<T>`, and `each<T>` are generic. Type-check with `npm run test:types`.
115
+
116
+ ## What's built
117
+
118
+ - Fine-grained text/attribute bindings — `${() => state.get()}` updates one node in place; setup runs once (no re-render).
119
+ - Native events, secure-by-default rendering (inert text, URL-scheme guards, no `eval`).
120
+ - `computed()` derived values — lazy, cached, nestable, and **value-gated** (unchanged results don't wake downstream).
121
+ - `each()` keyed list reconciliation — preserves focus / input / scroll on reorder.
122
+ - Microtask batching, push-pull dependency tracking, **owner-scoped cleanup** (unmount and removed items dispose their subscriptions).
123
+ - Production mode via `configure({ dev: false })` — no build step.
124
+ - Safety: self-triggering effects are warned + stopped; a throwing binding doesn't break others.
125
+
126
+ **Out of scope (by design):** router, CLI, plugins, SSR, global store, TypeScript-first setup, Virtual DOM.
127
+
128
+ ## Project Structure
129
+
130
+ ```
131
+ framework/
132
+ package.json
133
+ README.md
134
+ src/
135
+ core/
136
+ html.js # html() — parse template into a cached blueprint
137
+ mount.js # mount() — entry point; instantiate + attach + cleanup
138
+ renderer.js # internal: bind dynamic slots, apply fine-grained updates
139
+ reactivity/
140
+ state.js # createState() + internal dependency tracking
141
+ utils/
142
+ dom.js # small native-DOM helpers
143
+ security.js # escaping, URL-scheme allowlist, attribute-name guards
144
+ index.js # public entry — re-exports html, mount, createState
145
+ examples/
146
+ counter/ # the first working app
147
+ tests/ # basic unit tests (node --test)
148
+ docs/
149
+ Phase-1-MVP-Spec.md
150
+ ```
151
+
152
+ ## License
153
+
154
+ MIT
package/package.json CHANGED
@@ -1,63 +1,63 @@
1
- {
2
- "name": "@zoijs/core",
3
- "version": "1.3.0",
4
- "description": "Zoijs — a beginner-friendly, no-build, no-Virtual-DOM frontend framework. Plain HTML, CSS, and JavaScript.",
5
- "type": "module",
6
- "main": "src/index.js",
7
- "types": "src/index.d.ts",
8
- "exports": {
9
- ".": {
10
- "types": "./src/index.d.ts",
11
- "default": "./src/index.js"
12
- }
13
- },
14
- "files": [
15
- "src",
16
- "README.md",
17
- "LICENSE",
18
- "CHANGELOG.md"
19
- ],
20
- "sideEffects": false,
21
- "engines": {
22
- "node": ">=18"
23
- },
24
- "author": "Zoijs contributors (https://zoijs.dev)",
25
- "license": "MIT",
26
- "homepage": "https://zoijs.dev",
27
- "repository": {
28
- "type": "git",
29
- "url": "git+https://github.com/Zoijs/zoijs.git",
30
- "directory": "framework"
31
- },
32
- "bugs": {
33
- "url": "https://github.com/Zoijs/zoijs/issues"
34
- },
35
- "keywords": [
36
- "zoijs",
37
- "framework",
38
- "frontend",
39
- "ui",
40
- "reactive",
41
- "reactivity",
42
- "signals",
43
- "no-build",
44
- "no-jsx",
45
- "no-virtual-dom",
46
- "fine-grained",
47
- "beginner-friendly",
48
- "html",
49
- "spa"
50
- ],
51
- "scripts": {
52
- "test": "node --test --import ./tests/setup-dom.js",
53
- "test:unit": "node --test",
54
- "test:types": "tsc --noEmit -p tsconfig.json",
55
- "test:browser": "playwright test",
56
- "dev": "npx serve -l 7310 ."
57
- },
58
- "devDependencies": {
59
- "@playwright/test": "^1.61.1",
60
- "jsdom": "^29.1.1",
61
- "typescript": "^5.9.3"
62
- }
63
- }
1
+ {
2
+ "name": "@zoijs/core",
3
+ "version": "1.3.2",
4
+ "description": "Zoijs — a beginner-friendly, no-build, no-Virtual-DOM frontend framework. Plain HTML, CSS, and JavaScript.",
5
+ "type": "module",
6
+ "main": "src/index.js",
7
+ "types": "src/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./src/index.d.ts",
11
+ "default": "./src/index.js"
12
+ }
13
+ },
14
+ "files": [
15
+ "src",
16
+ "README.md",
17
+ "LICENSE",
18
+ "CHANGELOG.md"
19
+ ],
20
+ "sideEffects": false,
21
+ "engines": {
22
+ "node": ">=18"
23
+ },
24
+ "author": "Zoijs contributors (https://zoijs.dev)",
25
+ "license": "MIT",
26
+ "homepage": "https://zoijs.dev",
27
+ "repository": {
28
+ "type": "git",
29
+ "url": "git+https://github.com/Zoijs/zoijs.git",
30
+ "directory": "framework"
31
+ },
32
+ "bugs": {
33
+ "url": "https://github.com/Zoijs/zoijs/issues"
34
+ },
35
+ "keywords": [
36
+ "zoijs",
37
+ "framework",
38
+ "frontend",
39
+ "ui",
40
+ "reactive",
41
+ "reactivity",
42
+ "signals",
43
+ "no-build",
44
+ "no-jsx",
45
+ "no-virtual-dom",
46
+ "fine-grained",
47
+ "beginner-friendly",
48
+ "html",
49
+ "spa"
50
+ ],
51
+ "scripts": {
52
+ "test": "node --test --import ./tests/setup-dom.js",
53
+ "test:unit": "node --test",
54
+ "test:types": "tsc --noEmit -p tsconfig.json",
55
+ "test:browser": "playwright test",
56
+ "dev": "npx serve -l 7310 ."
57
+ },
58
+ "devDependencies": {
59
+ "@playwright/test": "^1.61.1",
60
+ "jsdom": "^29.1.1",
61
+ "typescript": "^5.9.3"
62
+ }
63
+ }