@thi.ng/rdom 0.10.6 → 0.10.7
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 +1 -1
- package/README.md +50 -1
- package/package.json +15 -15
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -22,6 +22,8 @@ This project is part of the
|
|
|
22
22
|
- [Dependencies](#dependencies)
|
|
23
23
|
- [Usage examples](#usage-examples)
|
|
24
24
|
- [API](#api)
|
|
25
|
+
- [Basic usage](#basic-usage)
|
|
26
|
+
- [Lists](#lists)
|
|
25
27
|
- [Authors](#authors)
|
|
26
28
|
- [License](#license)
|
|
27
29
|
|
|
@@ -218,6 +220,8 @@ Currently, documentation only exists in the form of small examples and
|
|
|
218
220
|
various doc strings (incomplete). I'm working to alleviate this
|
|
219
221
|
situation ASAP... In that respect, PRs are welcome as well!
|
|
220
222
|
|
|
223
|
+
### Basic usage
|
|
224
|
+
|
|
221
225
|
```ts
|
|
222
226
|
import { $compile } from "@thi.ng/rdom";
|
|
223
227
|
import { reactive } from "@thi.ng/rstream";
|
|
@@ -242,7 +246,7 @@ $compile([
|
|
|
242
246
|
"div",
|
|
243
247
|
{},
|
|
244
248
|
// transformed color as title (aka derived view)
|
|
245
|
-
["h1", {}, bg.
|
|
249
|
+
["h1", {}, bg.map((col) => `Hello, ${col}!`)],
|
|
246
250
|
[
|
|
247
251
|
// tag with Emmet-style ID & classes
|
|
248
252
|
"button#foo.w4.pa3.bn",
|
|
@@ -257,6 +261,51 @@ $compile([
|
|
|
257
261
|
]).mount(document.body);
|
|
258
262
|
```
|
|
259
263
|
|
|
264
|
+
### Lists
|
|
265
|
+
|
|
266
|
+
See [`$list`](https://docs.thi.ng/umbrella/rdom/functions/_list.html) and
|
|
267
|
+
[`$klist`](https://docs.thi.ng/umbrella/rdom/functions/_klist.html) docs for
|
|
268
|
+
further information...
|
|
269
|
+
|
|
270
|
+
```ts
|
|
271
|
+
import { $klist } from "@thi.ng/rdom";
|
|
272
|
+
import { reactive } from "@thi.ng/rstream";
|
|
273
|
+
|
|
274
|
+
const items = reactive([
|
|
275
|
+
{ id: "a", val: 1 },
|
|
276
|
+
{ id: "b", val: 2 },
|
|
277
|
+
{ id: "c", val: 3 },
|
|
278
|
+
]);
|
|
279
|
+
|
|
280
|
+
$klist(
|
|
281
|
+
// reactive data source (any rstream subscribable)
|
|
282
|
+
items,
|
|
283
|
+
// outer list element & attribs
|
|
284
|
+
"ul",
|
|
285
|
+
{ class: "list red" },
|
|
286
|
+
// list item component constructor
|
|
287
|
+
(x) => ["li", {}, x.id, ` (${x.val})`],
|
|
288
|
+
// key function (includes)
|
|
289
|
+
(x) => `${x.id}-${x.val}`
|
|
290
|
+
).mount(document.body);
|
|
291
|
+
|
|
292
|
+
// update list:
|
|
293
|
+
// - item a will be removed
|
|
294
|
+
// - item b is unchanged
|
|
295
|
+
// - item d will be newly inserted
|
|
296
|
+
// - item c will be updated (due to new value)
|
|
297
|
+
setTimeout(
|
|
298
|
+
() => {
|
|
299
|
+
items.next([
|
|
300
|
+
{ id: "b", val: 2 },
|
|
301
|
+
{ id: "d", val: 4 },
|
|
302
|
+
{ id: "c", val: 30 },
|
|
303
|
+
]);
|
|
304
|
+
},
|
|
305
|
+
1000
|
|
306
|
+
);
|
|
307
|
+
```
|
|
308
|
+
|
|
260
309
|
## Authors
|
|
261
310
|
|
|
262
311
|
- [Karsten Schmidt](https://thi.ng)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thi.ng/rdom",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.7",
|
|
4
4
|
"description": "Lightweight, reactive, VDOM-less UI/DOM components with async lifecycle and @thi.ng/hiccup compatible",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./index.js",
|
|
@@ -35,22 +35,22 @@
|
|
|
35
35
|
"test": "testament test"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@thi.ng/api": "^8.
|
|
39
|
-
"@thi.ng/checks": "^3.3.
|
|
40
|
-
"@thi.ng/errors": "^2.2.
|
|
41
|
-
"@thi.ng/hiccup": "^4.2.
|
|
42
|
-
"@thi.ng/paths": "^5.1.
|
|
43
|
-
"@thi.ng/prefixes": "^2.1.
|
|
44
|
-
"@thi.ng/rstream": "^7.2.
|
|
45
|
-
"@thi.ng/strings": "^3.3.
|
|
38
|
+
"@thi.ng/api": "^8.7.0",
|
|
39
|
+
"@thi.ng/checks": "^3.3.8",
|
|
40
|
+
"@thi.ng/errors": "^2.2.9",
|
|
41
|
+
"@thi.ng/hiccup": "^4.2.30",
|
|
42
|
+
"@thi.ng/paths": "^5.1.29",
|
|
43
|
+
"@thi.ng/prefixes": "^2.1.18",
|
|
44
|
+
"@thi.ng/rstream": "^7.2.36",
|
|
45
|
+
"@thi.ng/strings": "^3.3.24"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@microsoft/api-extractor": "^7.
|
|
49
|
-
"@thi.ng/testament": "^0.3.
|
|
50
|
-
"rimraf": "^
|
|
48
|
+
"@microsoft/api-extractor": "^7.34.2",
|
|
49
|
+
"@thi.ng/testament": "^0.3.10",
|
|
50
|
+
"rimraf": "^4.1.2",
|
|
51
51
|
"tools": "^0.0.1",
|
|
52
|
-
"typedoc": "^0.23.
|
|
53
|
-
"typescript": "^4.9.
|
|
52
|
+
"typedoc": "^0.23.24",
|
|
53
|
+
"typescript": "^4.9.5"
|
|
54
54
|
},
|
|
55
55
|
"keywords": [
|
|
56
56
|
"async",
|
|
@@ -140,5 +140,5 @@
|
|
|
140
140
|
"status": "beta",
|
|
141
141
|
"year": 2020
|
|
142
142
|
},
|
|
143
|
-
"gitHead": "
|
|
143
|
+
"gitHead": "50ba9c87676fac60c46d2bc0e4d2c7711a374a68\n"
|
|
144
144
|
}
|