xote 7.0.0-beta.1 → 7.0.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 +52 -41
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
<p>
|
|
2
|
+
<a href="https://xote.dev/">
|
|
3
|
+
<picture>
|
|
4
|
+
<source media="(prefers-color-scheme: dark)" srcset="docs/banner.svg">
|
|
5
|
+
<source media="(prefers-color-scheme: light)" srcset="docs/banner-light.svg">
|
|
6
|
+
<img src="docs/banner.svg" alt="xote - Fine-grained reactivity for ReScript" width="400" />
|
|
7
|
+
</picture>
|
|
8
|
+
</a>
|
|
9
|
+
</p>
|
|
10
|
+
|
|
11
|
+
<p>
|
|
12
|
+
<a href="https://www.npmjs.com/package/xote"><img src="https://img.shields.io/npm/v/xote" alt="NPM Version" /></a>
|
|
13
|
+
<a href="https://bundlephobia.com/package/xote"><img src="https://badgen.net/bundlephobia/min/xote" alt="Bundle size" /></a>
|
|
14
|
+
<a href="https://bundlephobia.com/package/xote"><img src="https://badgen.net/bundlephobia/minzip/xote" alt="Bundle size (gzip)" /></a>
|
|
15
|
+
</p>
|
|
5
16
|
|
|
6
17
|
xote is a lightweight [ReScript](https://rescript-lang.org/) library that combines fine-grained reactivity and a declarative component system for building user interfaces for the web.
|
|
7
18
|
|
|
@@ -34,43 +45,6 @@ This README uses the application-facing names for public code:
|
|
|
34
45
|
- `Prop` is the static-or-reactive prop module.
|
|
35
46
|
- `View.Text`, `View.Int`, `View.For`, `View.Show`, `View.Attr.*`, `Router.location`, and `SSRState.signal` are the building blocks used throughout these examples.
|
|
36
47
|
|
|
37
|
-
### JavaScript
|
|
38
|
-
|
|
39
|
-
Xote is built for ReScript first, but the compiled package can also be used from JavaScript. Import the focused client entry and build nodes with `View` or `Html` helpers:
|
|
40
|
-
|
|
41
|
-
```js
|
|
42
|
-
import { Signal, Computed, Effect, View } from "xote/client";
|
|
43
|
-
|
|
44
|
-
const count = Signal.make(0);
|
|
45
|
-
const doubled = Computed.make(() => Signal.get(count) * 2);
|
|
46
|
-
|
|
47
|
-
Effect.run(() => {
|
|
48
|
-
console.log("Count:", Signal.get(count));
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
const app = View.element("div", [], [], [
|
|
52
|
-
View.element("h1", [], [], [View.text("Counter")]),
|
|
53
|
-
View.element("p", [], [], [
|
|
54
|
-
View.text("Count: "),
|
|
55
|
-
View.signalText(() => String(Signal.get(count))),
|
|
56
|
-
]),
|
|
57
|
-
View.element("p", [], [], [
|
|
58
|
-
View.text("Doubled: "),
|
|
59
|
-
View.signalText(() => String(Signal.get(doubled))),
|
|
60
|
-
]),
|
|
61
|
-
View.element(
|
|
62
|
-
"button",
|
|
63
|
-
[],
|
|
64
|
-
[["click", () => Signal.update(count, n => n + 1)]],
|
|
65
|
-
[View.text("Increment")],
|
|
66
|
-
),
|
|
67
|
-
]);
|
|
68
|
-
|
|
69
|
-
View.mountById(app, "app");
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
Use `xote/client` for browser UI, `xote/router` for routing, `xote/ssr` for server rendering, `xote/hydration` for hydrating server-rendered pages, and `xote/mdx` for MDX integration.
|
|
73
|
-
|
|
74
48
|
### Quick Example
|
|
75
49
|
|
|
76
50
|
```rescript
|
|
@@ -286,6 +260,43 @@ For server/client state transfer, prefer `SSRState.signal` when creating a synce
|
|
|
286
260
|
let count = SSRState.signal("count", 0, SSRState.Codec.int)
|
|
287
261
|
```
|
|
288
262
|
|
|
263
|
+
### JavaScript Interop
|
|
264
|
+
|
|
265
|
+
Xote is built for ReScript first, but the compiled package can also be used from JavaScript. Import the focused client entry and build nodes with `View` or `Html` helpers:
|
|
266
|
+
|
|
267
|
+
```js
|
|
268
|
+
import { Signal, Computed, Effect, View } from "xote/client";
|
|
269
|
+
|
|
270
|
+
const count = Signal.make(0);
|
|
271
|
+
const doubled = Computed.make(() => Signal.get(count) * 2);
|
|
272
|
+
|
|
273
|
+
Effect.run(() => {
|
|
274
|
+
console.log("Count:", Signal.get(count));
|
|
275
|
+
});
|
|
276
|
+
|
|
277
|
+
const app = View.element("div", [], [], [
|
|
278
|
+
View.element("h1", [], [], [View.text("Counter")]),
|
|
279
|
+
View.element("p", [], [], [
|
|
280
|
+
View.text("Count: "),
|
|
281
|
+
View.signalText(() => String(Signal.get(count))),
|
|
282
|
+
]),
|
|
283
|
+
View.element("p", [], [], [
|
|
284
|
+
View.text("Doubled: "),
|
|
285
|
+
View.signalText(() => String(Signal.get(doubled))),
|
|
286
|
+
]),
|
|
287
|
+
View.element(
|
|
288
|
+
"button",
|
|
289
|
+
[],
|
|
290
|
+
[["click", () => Signal.update(count, n => n + 1)]],
|
|
291
|
+
[View.text("Increment")],
|
|
292
|
+
),
|
|
293
|
+
]);
|
|
294
|
+
|
|
295
|
+
View.mountById(app, "app");
|
|
296
|
+
```
|
|
297
|
+
|
|
298
|
+
Use `xote/client` for browser UI, `xote/router` for routing, `xote/ssr` for server rendering, `xote/hydration` for hydrating server-rendered pages, and `xote/mdx` for MDX integration.
|
|
299
|
+
|
|
289
300
|
Check the [website](https://brnrdog.github.io/xote/) for more comprehensive documentations about Xote and Signals.
|
|
290
301
|
|
|
291
302
|
## Releasing
|