zenith 1.0.0-rc.1 → 1.0.0-rc.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/README.md +15 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
# Zenith
|
|
2
2
|
|
|
3
|
-
Zenith is a tiny
|
|
3
|
+
Zenith is a tiny JavaScript virtual DOM framework with keyed reconciliation and targeted component redraws. Its rendering model can update an entire application or a specific component, making it easy to integrate independently managed content such as canvas, WebGL, and SVG interfaces.
|
|
4
4
|
|
|
5
5
|
Zenith supports component lifecycle hooks, memoization, DOM events, SVG and MathML, and optional helpers. It is inspired by [Mithril.js](https://github.com/MithrilJS/mithril.js).
|
|
6
6
|
|
|
7
|
-
**Status:** Zenith is currently in
|
|
7
|
+
**Status:** Zenith 1.0.0 is currently in release candidate. The API is expected to remain stable through the final 1.0 release, with changes focused primarily on bug fixes.
|
|
8
8
|
|
|
9
9
|
## Installation
|
|
10
10
|
|
|
11
|
-
Install the
|
|
11
|
+
Install the release candidate:
|
|
12
12
|
|
|
13
13
|
```sh
|
|
14
|
-
npm install zenith@
|
|
14
|
+
npm install zenith@rc
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
Import the functions you need:
|
|
@@ -20,7 +20,7 @@ Import the functions you need:
|
|
|
20
20
|
import { bind, comp, compDef, elem } from 'zenith';
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
-
Prebuilt browser files are also included in `dist/`. The `zenith.
|
|
23
|
+
Prebuilt browser files are also included in `dist/`. The `zenith.js` build is an ES module, while `zenith.global.js` exposes the Zenith API through window.z for direct browser use.
|
|
24
24
|
|
|
25
25
|
## Example: counter
|
|
26
26
|
|
|
@@ -50,14 +50,14 @@ Prebuilt browser files are also included in `dist/`. The `zenith.global.js` buil
|
|
|
50
50
|
</html>
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
-
The example assumes an environment that resolves npm package imports, such as a bundler or development server. Event handlers automatically schedule a redraw unless the event's `
|
|
53
|
+
The example assumes an environment that resolves npm package imports, such as a bundler or development server. Event handlers automatically schedule a redraw unless the event's `redraw` property is set to `false`.
|
|
54
54
|
|
|
55
55
|
## Components and redraws
|
|
56
56
|
|
|
57
|
-
Create components with `compDef()` and `comp()`, then mount them using `bind()`. Call `
|
|
57
|
+
Create components with `compDef()` and `comp()`, then mount them using `bind()`. Call `redraw()` when application state changes outside an event handler:
|
|
58
58
|
|
|
59
59
|
```js
|
|
60
|
-
import { bind, comp, compDef,
|
|
60
|
+
import { bind, comp, compDef, redraw, elem } from 'zenith';
|
|
61
61
|
|
|
62
62
|
let message = 'Hello';
|
|
63
63
|
|
|
@@ -69,19 +69,21 @@ const view = comp(Message);
|
|
|
69
69
|
bind(document.querySelector('#app'), view);
|
|
70
70
|
|
|
71
71
|
message = 'Updated';
|
|
72
|
-
|
|
72
|
+
redraw(view);
|
|
73
73
|
```
|
|
74
74
|
|
|
75
|
-
Redraws are scheduled in a microtask. Call `sync()`
|
|
75
|
+
Redraws are batched and scheduled in a microtask. Call `sync()` to apply queued redraws immediately. Use `redraw(view, true)` to redraw only the specified component subtree.
|
|
76
76
|
|
|
77
|
-
Component definitions
|
|
77
|
+
Component definitions support `init`, `draw`, `drawn`, `remove`, and `removed` lifecycle hooks. The `remove` hook may return a Promise to defer removal; deferred removal requires keyed components. Components also support optional memoization through `$memo`.
|
|
78
|
+
|
|
79
|
+
Zenith does not manage application state or automatically track dependencies. State can be stored and updated using ordinary JavaScript, external state managers, or optional helpers.
|
|
78
80
|
|
|
79
81
|
## Package builds
|
|
80
82
|
|
|
81
83
|
The npm package includes prebuilt files under `dist/`, including:
|
|
82
84
|
|
|
83
85
|
- `zenith.js` — ES module
|
|
84
|
-
- `zenith.global.js` —
|
|
86
|
+
- `zenith.global.js` — browser build exposing window.z
|
|
85
87
|
- `zenith.development.js` — development build
|
|
86
88
|
- `zenith-helpers.js` — optional helpers (import from `zenith/helpers`)
|
|
87
89
|
|
|
@@ -89,7 +91,7 @@ The library is designed for a very small compressed footprint; actual size depen
|
|
|
89
91
|
|
|
90
92
|
## Documentation
|
|
91
93
|
|
|
92
|
-
Additional information: [Zenith website](https://aleph-1.com/zenith)
|
|
94
|
+
Additional information: [Zenith website](https://aleph-1.com/zenith).
|
|
93
95
|
|
|
94
96
|
Report bugs and request features through [GitHub Issues](https://github.com/aleph1/Zenith/issues).
|
|
95
97
|
|