@thi.ng/rdom 1.3.2 → 1.4.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/CHANGELOG.md +14 -1
- package/README.md +4 -1
- package/async.js +3 -6
- package/compile.js +6 -6
- package/klist.js +1 -2
- package/list.js +1 -2
- package/package.json +14 -14
- package/sub.js +2 -4
- package/wrap.js +1 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
-
- **Last updated**: 2024-
|
|
3
|
+
- **Last updated**: 2024-05-08T18:24:31Z
|
|
4
4
|
- **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
|
|
5
5
|
|
|
6
6
|
All notable changes to this project will be documented in this file.
|
|
@@ -9,6 +9,19 @@ See [Conventional Commits](https://conventionalcommits.org/) for commit guidelin
|
|
|
9
9
|
**Note:** Unlisted _patch_ versions only involve non-code or otherwise excluded changes
|
|
10
10
|
and/or version bumps of transitive dependencies.
|
|
11
11
|
|
|
12
|
+
## [1.4.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom@1.4.0) (2024-05-08)
|
|
13
|
+
|
|
14
|
+
#### 🚀 Features
|
|
15
|
+
|
|
16
|
+
- add rdom-klist example project, update readmes ([cd458ac](https://github.com/thi-ng/umbrella/commit/cd458ac))
|
|
17
|
+
- add rdom-klist example project, update readmes ([531437f](https://github.com/thi-ng/umbrella/commit/531437f))
|
|
18
|
+
|
|
19
|
+
### [1.3.3](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom@1.3.3) (2024-04-26)
|
|
20
|
+
|
|
21
|
+
#### 🩹 Bug fixes
|
|
22
|
+
|
|
23
|
+
- update $compile() async-iterable attrib handling ([f977556](https://github.com/thi-ng/umbrella/commit/f977556))
|
|
24
|
+
|
|
12
25
|
## [1.3.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom@1.3.0) (2024-04-20)
|
|
13
26
|
|
|
14
27
|
#### 🚀 Features
|
package/README.md
CHANGED
|
@@ -315,7 +315,7 @@ Browser ESM import:
|
|
|
315
315
|
|
|
316
316
|
[JSDelivr documentation](https://www.jsdelivr.com/)
|
|
317
317
|
|
|
318
|
-
Package sizes (brotli'd, pre-treeshake): ESM: 4.
|
|
318
|
+
Package sizes (brotli'd, pre-treeshake): ESM: 4.23 KB
|
|
319
319
|
|
|
320
320
|
## Dependencies
|
|
321
321
|
|
|
@@ -340,6 +340,7 @@ directory are using this package:
|
|
|
340
340
|
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/blurhash.jpg" width="240"/> | Interactive & reactive image blurhash generator | [Demo](https://demo.thi.ng/umbrella/blurhash/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/blurhash) |
|
|
341
341
|
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/canvas-recorder.png" width="240"/> | Self-modifying, animated typographic grid with emergent complex patterns | [Demo](https://demo.thi.ng/umbrella/canvas-recorder/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/canvas-recorder) |
|
|
342
342
|
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/color-themes.png" width="240"/> | Probabilistic color theme generator | [Demo](https://demo.thi.ng/umbrella/color-themes/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/color-themes) |
|
|
343
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/csp-bus.png" width="240"/> | CSP channel-based event handling, async transducers & reactive UI components | [Demo](https://demo.thi.ng/umbrella/csp-bus/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/csp-bus) |
|
|
343
344
|
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/dominant-colors.png" width="240"/> | Color palette generation via dominant color extraction from uploaded images | [Demo](https://demo.thi.ng/umbrella/dominant-colors/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/dominant-colors) |
|
|
344
345
|
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/ellipse-proximity.png" width="240"/> | Interactive visualization of closest points on ellipses | [Demo](https://demo.thi.ng/umbrella/ellipse-proximity/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/ellipse-proximity) |
|
|
345
346
|
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/fiber-basics.png" width="240"/> | Fiber-based cooperative multitasking basics | [Demo](https://demo.thi.ng/umbrella/fiber-basics/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/fiber-basics) |
|
|
@@ -361,8 +362,10 @@ directory are using this package:
|
|
|
361
362
|
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-dnd.png" width="240"/> | rdom drag & drop example | [Demo](https://demo.thi.ng/umbrella/rdom-dnd/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-dnd) |
|
|
362
363
|
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-formgen.jpg" width="240"/> | Basic usage of the declarative rdom-forms generator | [Demo](https://demo.thi.ng/umbrella/rdom-formgen/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-formgen) |
|
|
363
364
|
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-key-sequences.jpg" width="240"/> | rstream & transducer-based FSM for converting key event sequences into high-level commands | [Demo](https://demo.thi.ng/umbrella/rdom-key-sequences/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-key-sequences) |
|
|
365
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-klist.png" width="240"/> | Basic usage of thi.ng/rdom keyed list component wrapper | [Demo](https://demo.thi.ng/umbrella/rdom-klist/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-klist) |
|
|
364
366
|
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-lazy-load.png" width="240"/> | Lazy loading components via @thi.ng/rdom | [Demo](https://demo.thi.ng/umbrella/rdom-lazy-load/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-lazy-load) |
|
|
365
367
|
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-lissajous.png" width="240"/> | rdom & hiccup-canvas interop test | [Demo](https://demo.thi.ng/umbrella/rdom-lissajous/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-lissajous) |
|
|
368
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-reactive-svg.jpg" width="240"/> | Animated SVG elements with reactive attributes | [Demo](https://demo.thi.ng/umbrella/rdom-reactive-svg/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-reactive-svg) |
|
|
366
369
|
| | Full umbrella repo doc string search w/ paginated results | [Demo](https://demo.thi.ng/umbrella/rdom-search-docs/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-search-docs) |
|
|
367
370
|
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-svg-nodes.png" width="240"/> | rdom powered SVG graph with draggable nodes | [Demo](https://demo.thi.ng/umbrella/rdom-svg-nodes/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-svg-nodes) |
|
|
368
371
|
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-web-components.png" width="240"/> | Defining & using basic Web Components (with shadow DOM) via @thi.ng/rdom & @thi.ng/meta-css | [Demo](https://demo.thi.ng/umbrella/rdom-web-components/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-web-components) |
|
package/async.js
CHANGED
|
@@ -15,8 +15,7 @@ class $Async {
|
|
|
15
15
|
this.el = await this.inner.mount(parent, index, void 0);
|
|
16
16
|
(async () => {
|
|
17
17
|
for await (let x of this.src) {
|
|
18
|
-
if (!this.el)
|
|
19
|
-
return;
|
|
18
|
+
if (!this.el) return;
|
|
20
19
|
this.update(x);
|
|
21
20
|
}
|
|
22
21
|
})();
|
|
@@ -27,16 +26,14 @@ class $Async {
|
|
|
27
26
|
await this.inner.unmount();
|
|
28
27
|
}
|
|
29
28
|
update(x) {
|
|
30
|
-
if (this.el)
|
|
31
|
-
this.inner.update(x);
|
|
29
|
+
if (this.el) this.inner.update(x);
|
|
32
30
|
}
|
|
33
31
|
}
|
|
34
32
|
const $asyncA = async (src, comp, path) => {
|
|
35
33
|
const attribs = {};
|
|
36
34
|
const setter = defSetterUnsafe(path);
|
|
37
35
|
for await (let x of src) {
|
|
38
|
-
if (comp.el)
|
|
39
|
-
$attribs(comp.el, setter(attribs, x));
|
|
36
|
+
if (comp.el) $attribs(comp.el, setter(attribs, x));
|
|
40
37
|
}
|
|
41
38
|
};
|
|
42
39
|
export {
|
package/compile.js
CHANGED
|
@@ -19,13 +19,11 @@ const walk = (f, x, path = []) => {
|
|
|
19
19
|
const isComplexComponent = (x) => {
|
|
20
20
|
if (isPlainObject(x)) {
|
|
21
21
|
for (const k in x) {
|
|
22
|
-
if (isComplexComponent(x[k]))
|
|
23
|
-
return true;
|
|
22
|
+
if (isComplexComponent(x[k])) return true;
|
|
24
23
|
}
|
|
25
24
|
} else if (isArray(x)) {
|
|
26
25
|
for (let i = 0, n = x.length; i < n; i++) {
|
|
27
|
-
if (isComplexComponent(x[i]))
|
|
28
|
-
return true;
|
|
26
|
+
if (isComplexComponent(x[i])) return true;
|
|
29
27
|
}
|
|
30
28
|
}
|
|
31
29
|
return isSubscribable(x) || isAsyncIterable(x) || isComponent(x) || isElement(x);
|
|
@@ -33,15 +31,17 @@ const isComplexComponent = (x) => {
|
|
|
33
31
|
const complexComponent = (tree) => ({
|
|
34
32
|
async mount(parent, index = -1) {
|
|
35
33
|
this.subs = [];
|
|
34
|
+
const attribs = { ...tree[1] };
|
|
36
35
|
walk((x, path) => {
|
|
37
36
|
if (isSubscribable(x)) {
|
|
38
37
|
this.subs.push(x.subscribe(new $SubA(this, path)));
|
|
39
38
|
} else if (isAsyncIterable(x)) {
|
|
40
39
|
$asyncA(x, this, path);
|
|
40
|
+
if (path.length === 1) delete attribs[path[0]];
|
|
41
41
|
}
|
|
42
|
-
},
|
|
42
|
+
}, attribs);
|
|
43
43
|
this.children = [];
|
|
44
|
-
this.el = $el(tree[0],
|
|
44
|
+
this.el = $el(tree[0], attribs, null, parent, index);
|
|
45
45
|
for (let i = 2; i < tree.length; i++) {
|
|
46
46
|
const child = $compile(tree[i]);
|
|
47
47
|
child.mount(this.el, i - 2);
|
package/klist.js
CHANGED
|
@@ -32,8 +32,7 @@ class KList extends Component {
|
|
|
32
32
|
this.cache = void 0;
|
|
33
33
|
}
|
|
34
34
|
async update(curr) {
|
|
35
|
-
if (!curr)
|
|
36
|
-
return;
|
|
35
|
+
if (!curr) return;
|
|
37
36
|
const { keyFn, items, ctor, cache, el: parent } = this;
|
|
38
37
|
const currItems = [];
|
|
39
38
|
const currCache = /* @__PURE__ */ new Map();
|
package/list.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thi.ng/rdom",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
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",
|
|
@@ -37,20 +37,20 @@
|
|
|
37
37
|
"tool:tangle": "../../node_modules/.bin/tangle src/**/*.ts"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@thi.ng/api": "^8.11.
|
|
41
|
-
"@thi.ng/checks": "^3.6.
|
|
42
|
-
"@thi.ng/errors": "^2.5.
|
|
43
|
-
"@thi.ng/hiccup": "^5.2.
|
|
44
|
-
"@thi.ng/paths": "^5.1.
|
|
45
|
-
"@thi.ng/prefixes": "^2.3.
|
|
46
|
-
"@thi.ng/rstream": "^8.
|
|
47
|
-
"@thi.ng/strings": "^3.7.
|
|
40
|
+
"@thi.ng/api": "^8.11.2",
|
|
41
|
+
"@thi.ng/checks": "^3.6.4",
|
|
42
|
+
"@thi.ng/errors": "^2.5.7",
|
|
43
|
+
"@thi.ng/hiccup": "^5.2.1",
|
|
44
|
+
"@thi.ng/paths": "^5.1.81",
|
|
45
|
+
"@thi.ng/prefixes": "^2.3.19",
|
|
46
|
+
"@thi.ng/rstream": "^8.5.0",
|
|
47
|
+
"@thi.ng/strings": "^3.7.33"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@microsoft/api-extractor": "^7.43.
|
|
51
|
-
"esbuild": "^0.
|
|
52
|
-
"typedoc": "^0.25.
|
|
53
|
-
"typescript": "^5.4.
|
|
50
|
+
"@microsoft/api-extractor": "^7.43.2",
|
|
51
|
+
"esbuild": "^0.21.1",
|
|
52
|
+
"typedoc": "^0.25.13",
|
|
53
|
+
"typescript": "^5.4.5"
|
|
54
54
|
},
|
|
55
55
|
"keywords": [
|
|
56
56
|
"async",
|
|
@@ -145,5 +145,5 @@
|
|
|
145
145
|
],
|
|
146
146
|
"year": 2020
|
|
147
147
|
},
|
|
148
|
-
"gitHead": "
|
|
148
|
+
"gitHead": "df34b4a9e650cc7323575356de207d78933bdcf3\n"
|
|
149
149
|
}
|
package/sub.js
CHANGED
|
@@ -30,8 +30,7 @@ class $Sub extends Subscription {
|
|
|
30
30
|
this.next(x);
|
|
31
31
|
}
|
|
32
32
|
next(x) {
|
|
33
|
-
if (this.el)
|
|
34
|
-
this.inner.update(x);
|
|
33
|
+
if (this.el) this.inner.update(x);
|
|
35
34
|
}
|
|
36
35
|
}
|
|
37
36
|
class $SubA extends Subscription {
|
|
@@ -43,8 +42,7 @@ class $SubA extends Subscription {
|
|
|
43
42
|
setter;
|
|
44
43
|
attr = {};
|
|
45
44
|
next(a) {
|
|
46
|
-
if (this.comp.el)
|
|
47
|
-
$attribs(this.comp.el, this.setter(this.attr, a));
|
|
45
|
+
if (this.comp.el) $attribs(this.comp.el, this.setter(this.attr, a));
|
|
48
46
|
}
|
|
49
47
|
}
|
|
50
48
|
export {
|