@thi.ng/rdom 1.7.83 → 1.7.84
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 +96 -94
- package/package.json +11 -11
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<!-- This file is generated - DO NOT EDIT! -->
|
|
2
|
-
<!-- Please see: https://
|
|
3
|
-
# 
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@thi.ng/rdom)
|
|
6
6
|
|
|
@@ -8,11 +8,12 @@
|
|
|
8
8
|
|
|
9
9
|
> [!NOTE]
|
|
10
10
|
> This is one of 214 standalone projects, maintained as part
|
|
11
|
-
> of the [@thi.ng/umbrella](https://
|
|
11
|
+
> of the [@thi.ng/umbrella](https://codeberg.org/thi.ng/umbrella/) ecosystem
|
|
12
12
|
> and anti-framework.
|
|
13
13
|
>
|
|
14
|
-
> 🚀 Please help me to work full-time on these projects by [sponsoring
|
|
15
|
-
>
|
|
14
|
+
> 🚀 Please help me to work full-time on these projects by [sponsoring
|
|
15
|
+
> me](https://codeberg.org/thi.ng/umbrella/src/branch/develop/CONTRIBUTING.md#donations).
|
|
16
|
+
> Thank you! ❤️
|
|
16
17
|
|
|
17
18
|
- [About](#about)
|
|
18
19
|
- [From hdom to rdom: Reactive UIs without virtual DOMs](#from-hdom-to-rdom-reactive-uis-without-virtual-doms)
|
|
@@ -37,19 +38,19 @@
|
|
|
37
38
|
|
|
38
39
|
## About
|
|
39
40
|
|
|
40
|
-
Lightweight, reactive, VDOM-less UI/DOM components with async lifecycle and [@thi.ng/hiccup](https://
|
|
41
|
+
Lightweight, reactive, VDOM-less UI/DOM components with async lifecycle and [@thi.ng/hiccup](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup) compatible.
|
|
41
42
|
|
|
42
43
|
### From hdom to rdom: Reactive UIs without virtual DOMs
|
|
43
44
|
|
|
44
45
|
In many ways this package is the direct successor of
|
|
45
|
-
[@thi.ng/hdom](https://
|
|
46
|
+
[@thi.ng/hdom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hdom),
|
|
46
47
|
which for several years was my preferred way of building UIs. _hdom_ eschewed
|
|
47
48
|
using a virtual DOM to represent and maintain a dynamic tree of (UI) components
|
|
48
49
|
and instead only required a previous and current component tree in
|
|
49
|
-
[@thi.ng/hiccup](https://
|
|
50
|
+
[@thi.ng/hiccup](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup)
|
|
50
51
|
format (aka nested, plain JS arrays w/ optional support for embedded other JS
|
|
51
52
|
data types, like ES6 iterables, [@thi.ng/api
|
|
52
|
-
interfaces](https://
|
|
53
|
+
interfaces](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/api), etc.)
|
|
53
54
|
to perform its UI updates. Yet, whilst hiccup trees are plain, simple, user
|
|
54
55
|
defined data structures, which can be very easily composed without any
|
|
55
56
|
libraries, _hdom_ itself was still heavily influenced by the general vDOM
|
|
@@ -64,8 +65,8 @@ value changes directly target underlying DOM nodes without having to resort to
|
|
|
64
65
|
any other intermediate processing (no diffing, vDOM updates etc.).
|
|
65
66
|
_@thi.ng/rdom_ is entirely vDOM-free. It supports declarative component
|
|
66
67
|
definitions via
|
|
67
|
-
[@thi.ng/hiccup](https://
|
|
68
|
-
[@thi.ng/rstream](https://
|
|
68
|
+
[@thi.ng/hiccup](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup),
|
|
69
|
+
[@thi.ng/rstream](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rstream),
|
|
69
70
|
ES6 classes, direct DOM manipulation (incl. provided helpers) and/or any mixture
|
|
70
71
|
of these approaches.**
|
|
71
72
|
|
|
@@ -87,9 +88,9 @@ situations. Whilst targetting a standard JS DOM by default, each component can
|
|
|
87
88
|
decide for itself what kind of target data structure (apart from a browser DOM)
|
|
88
89
|
it manages. _rdom_ components themselves have **no mandatory** knowledge of a
|
|
89
90
|
browser DOM. As an example, similar to
|
|
90
|
-
[@thi.ng/hdom-canvas](https://
|
|
91
|
+
[@thi.ng/hdom-canvas](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-canvas),
|
|
91
92
|
the
|
|
92
|
-
[@thi.ng/rdom-canvas](https://
|
|
93
|
+
[@thi.ng/rdom-canvas](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rdom-canvas)
|
|
93
94
|
wrapper provides a component which subscribes to a stream of hiccup-based scene
|
|
94
95
|
descriptions (trees) and then translates each scene-value into HTML Canvas API
|
|
95
96
|
draw calls.
|
|
@@ -111,10 +112,10 @@ reasons.
|
|
|
111
112
|
|
|
112
113
|
Because _rdom_ itself relies for most reactive features, stream composition and
|
|
113
114
|
reactive value transformations on other packages, i.e.
|
|
114
|
-
[@thi.ng/rstream](https://
|
|
115
|
-
[@thi.ng/transducers-async](https://
|
|
115
|
+
[@thi.ng/rstream](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rstream),
|
|
116
|
+
[@thi.ng/transducers-async](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/transducers-async)
|
|
116
117
|
and
|
|
117
|
-
[@thi.ng/transducers](https://
|
|
118
|
+
[@thi.ng/transducers](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/transducers),
|
|
118
119
|
please consult the docs for these packages to learn more about the available
|
|
119
120
|
constructs and patterns. Most of _rdom_ only deals with either subscribing to
|
|
120
121
|
reactive values, async iterables and/or wrapping/transforming existing
|
|
@@ -128,9 +129,9 @@ auto-wrap such values embedded in an hiccup tree.
|
|
|
128
129
|
|
|
129
130
|
For the sake of deduplication of functionality and to keep the number of
|
|
130
131
|
dependencies to a minimum, direct
|
|
131
|
-
[@thi.ng/atom](https://
|
|
132
|
+
[@thi.ng/atom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/atom)
|
|
132
133
|
integration has been removed in favor of using relevant
|
|
133
|
-
[@thi.ng/rstream](https://
|
|
134
|
+
[@thi.ng/rstream](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rstream)
|
|
134
135
|
constructs, which can be used as lightweight adapters, i.e.:
|
|
135
136
|
|
|
136
137
|
- [`fromAtom()`](https://docs.thi.ng/umbrella/rstream/functions/fromAtom.html)
|
|
@@ -189,7 +190,7 @@ code examples:
|
|
|
189
190
|
### Event handlers for reactive streams
|
|
190
191
|
|
|
191
192
|
Currently, reactive rdom components are based on
|
|
192
|
-
[@thi.ng/rstream](https://
|
|
193
|
+
[@thi.ng/rstream](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rstream)
|
|
193
194
|
subscriptions. To create a feedback loop between those reactive state values and
|
|
194
195
|
their subscribed UI components, input event handlers need to feed any user
|
|
195
196
|
changes back to those reactive state(s). To reduce boilerplate for these tasks,
|
|
@@ -222,8 +223,8 @@ $compile(["input", {
|
|
|
222
223
|
name.subscribe(trace("name:"));
|
|
223
224
|
```
|
|
224
225
|
|
|
225
|
-
Click counter using [thi.ng/rstream](https://
|
|
226
|
-
[thi.ng/transducers](https://
|
|
226
|
+
Click counter using [thi.ng/rstream](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rstream) and
|
|
227
|
+
[thi.ng/transducers](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/transducers):
|
|
227
228
|
|
|
228
229
|
```ts
|
|
229
230
|
import { $compile, $inputTrigger } from "@thi.ng/rdom";
|
|
@@ -250,7 +251,7 @@ Work is underway to better support [built-in
|
|
|
250
251
|
AsyncIterables](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_async_iterator_and_async_iterable_protocols)
|
|
251
252
|
(possibly entirely in-lieu of rstream constructs). Currently, they can only be
|
|
252
253
|
directly used for simple text or attribute values (also see the [rdom-async
|
|
253
|
-
example](https://
|
|
254
|
+
example](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-async)):
|
|
254
255
|
|
|
255
256
|
```ts
|
|
256
257
|
import { $compile } from "@thi.ng/rdom";
|
|
@@ -279,21 +280,21 @@ $compile(
|
|
|
279
280
|
|
|
280
281
|
**STABLE** - used in production
|
|
281
282
|
|
|
282
|
-
[Search or submit any issues for this package](https://
|
|
283
|
+
[Search or submit any issues for this package](https://codeberg.org/thi.ng/umbrella/issues?q=%5Brdom%5D)
|
|
283
284
|
|
|
284
285
|
## Support packages
|
|
285
286
|
|
|
286
|
-
- [@thi.ng/rdom-canvas](https://
|
|
287
|
-
- [@thi.ng/rdom-components](https://
|
|
288
|
-
- [@thi.ng/rdom-forms](https://
|
|
287
|
+
- [@thi.ng/rdom-canvas](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rdom-canvas) - [@thi.ng/rdom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rdom) component wrapper for [@thi.ng/hiccup-canvas](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-canvas) and declarative canvas drawing
|
|
288
|
+
- [@thi.ng/rdom-components](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rdom-components) - Collection of unstyled, customizable components for [@thi.ng/rdom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rdom)
|
|
289
|
+
- [@thi.ng/rdom-forms](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rdom-forms) - Data-driven declarative & extensible HTML form generation
|
|
289
290
|
|
|
290
291
|
## Related packages
|
|
291
292
|
|
|
292
|
-
- [@thi.ng/hdom](https://
|
|
293
|
-
- [@thi.ng/hiccup](https://
|
|
294
|
-
- [@thi.ng/hiccup-html](https://
|
|
295
|
-
- [@thi.ng/hiccup-svg](https://
|
|
296
|
-
- [@thi.ng/transducers](https://
|
|
293
|
+
- [@thi.ng/hdom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hdom) - Lightweight vanilla ES6 UI component trees with customizable branch-local behaviors
|
|
294
|
+
- [@thi.ng/hiccup](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup) - HTML/SVG/XML serialization of nested data structures, iterables & closures
|
|
295
|
+
- [@thi.ng/hiccup-html](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-html) - 100+ type-checked HTML5 element functions for [@thi.ng/hiccup](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup) related infrastructure
|
|
296
|
+
- [@thi.ng/hiccup-svg](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-svg) - SVG element functions for [@thi.ng/hiccup](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup) & related tooling
|
|
297
|
+
- [@thi.ng/transducers](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/transducers) - Collection of ~170 lightweight, composable transducers, reducers, generators, iterators for functional data transformations
|
|
297
298
|
|
|
298
299
|
## Installation
|
|
299
300
|
|
|
@@ -319,76 +320,77 @@ Package sizes (brotli'd, pre-treeshake): ESM: 4.31 KB
|
|
|
319
320
|
|
|
320
321
|
## Dependencies
|
|
321
322
|
|
|
322
|
-
- [@thi.ng/api](https://
|
|
323
|
-
- [@thi.ng/checks](https://
|
|
324
|
-
- [@thi.ng/errors](https://
|
|
325
|
-
- [@thi.ng/hiccup](https://
|
|
326
|
-
- [@thi.ng/paths](https://
|
|
327
|
-
- [@thi.ng/prefixes](https://
|
|
328
|
-
- [@thi.ng/rstream](https://
|
|
329
|
-
- [@thi.ng/strings](https://
|
|
323
|
+
- [@thi.ng/api](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/api)
|
|
324
|
+
- [@thi.ng/checks](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/checks)
|
|
325
|
+
- [@thi.ng/errors](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/errors)
|
|
326
|
+
- [@thi.ng/hiccup](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup)
|
|
327
|
+
- [@thi.ng/paths](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/paths)
|
|
328
|
+
- [@thi.ng/prefixes](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/prefixes)
|
|
329
|
+
- [@thi.ng/rstream](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rstream)
|
|
330
|
+
- [@thi.ng/strings](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/strings)
|
|
330
331
|
|
|
331
332
|
Note: @thi.ng/api is in _most_ cases a type-only import (not used at runtime)
|
|
332
333
|
|
|
333
334
|
## Usage examples
|
|
334
335
|
|
|
335
|
-
|
|
336
|
-
[/examples](https://
|
|
336
|
+
52 projects in this repo's
|
|
337
|
+
[/examples](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples)
|
|
337
338
|
directory are using this package:
|
|
338
339
|
|
|
339
|
-
| Screenshot | Description | Live demo | Source
|
|
340
|
-
|
|
341
|
-
| <img src="https://
|
|
342
|
-
| <img src="https://
|
|
343
|
-
| <img src="https://
|
|
344
|
-
| <img src="https://
|
|
345
|
-
| <img src="https://
|
|
346
|
-
| <img src="https://
|
|
347
|
-
| <img src="https://
|
|
348
|
-
| <img src="https://
|
|
349
|
-
| <img src="https://
|
|
350
|
-
| <img src="https://
|
|
351
|
-
| <img src="https://
|
|
352
|
-
| <img src="https://
|
|
353
|
-
| <img src="https://
|
|
354
|
-
| <img src="https://
|
|
355
|
-
| <img src="https://
|
|
356
|
-
| <img src="https://
|
|
357
|
-
| <img src="https://
|
|
358
|
-
| <img src="https://
|
|
359
|
-
| <img src="https://
|
|
360
|
-
| <img src="https://
|
|
361
|
-
| <img src="https://
|
|
362
|
-
| <img src="https://
|
|
363
|
-
| <img src="https://
|
|
364
|
-
| <img src="https://
|
|
365
|
-
|
|
|
366
|
-
| |
|
|
367
|
-
|
|
|
368
|
-
| <img src="https://
|
|
369
|
-
| <img src="https://
|
|
370
|
-
| <img src="https://
|
|
371
|
-
| <img src="https://
|
|
372
|
-
| <img src="https://
|
|
373
|
-
| <img src="https://
|
|
374
|
-
| <img src="https://
|
|
375
|
-
| <img src="https://
|
|
376
|
-
|
|
|
377
|
-
|
|
|
378
|
-
| <img src="https://
|
|
379
|
-
| <img src="https://
|
|
380
|
-
| <img src="https://
|
|
381
|
-
| <img src="https://
|
|
382
|
-
| <img src="https://
|
|
383
|
-
| <img src="https://
|
|
384
|
-
| <img src="https://
|
|
385
|
-
| <img src="https://
|
|
386
|
-
| <img src="https://
|
|
387
|
-
| <img src="https://
|
|
388
|
-
| <img src="https://
|
|
389
|
-
| <img src="https://
|
|
390
|
-
| <img src="https://
|
|
391
|
-
| <img src="https://
|
|
340
|
+
| Screenshot | Description | Live demo | Source |
|
|
341
|
+
|:----------------------------------------------------------------------------------------------------------------------------|:--------------------------------------------------------------------------------------------------------|:----------------------------------------------------------|:-----------------------------------------------------------------------------------------------|
|
|
342
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/big-font.png" width="240"/> | Large ASCII font text generator using @thi.ng/rdom | [Demo](https://demo.thi.ng/umbrella/big-font/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/big-font) |
|
|
343
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/bitmap-font.gif" width="240"/> | Figlet-style bitmap font creation with transducers | [Demo](https://demo.thi.ng/umbrella/bitmap-font/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/bitmap-font) |
|
|
344
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/blurhash.jpg" width="240"/> | Interactive & reactive image blurhash generator | [Demo](https://demo.thi.ng/umbrella/blurhash/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/blurhash) |
|
|
345
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/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://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/canvas-recorder) |
|
|
346
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/color-contrast.avif" width="240"/> | Tool to interactively compute & visualize color contrasts against WCAG threshold | [Demo](https://demo.thi.ng/umbrella/color-contrast/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/color-contrast) |
|
|
347
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/color-themes.png" width="240"/> | Probabilistic color theme generator | [Demo](https://demo.thi.ng/umbrella/color-themes/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/color-themes) |
|
|
348
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/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://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/csp-bus) |
|
|
349
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/darkroom-calc.avif" width="240"/> | Useful small calculators for darkroom processing | [Demo](https://demo.thi.ng/umbrella/darkroom-calc/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/darkroom-calc) |
|
|
350
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/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://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/dominant-colors) |
|
|
351
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/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://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/ellipse-proximity) |
|
|
352
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/fiber-basics.png" width="240"/> | Fiber-based cooperative multitasking basics | [Demo](https://demo.thi.ng/umbrella/fiber-basics/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/fiber-basics) |
|
|
353
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/fisheye-menu.avif" width="240"/> | Fisheye menu list component for thi.ng/rdom | [Demo](https://demo.thi.ng/umbrella/fisheye-menu/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/fisheye-menu) |
|
|
354
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/layout-gridgen.png" width="240"/> | Randomized space-filling, nested grid layout generator | [Demo](https://demo.thi.ng/umbrella/layout-gridgen/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/layout-gridgen) |
|
|
355
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/lispy-repl.png" width="240"/> | Browser REPL for a Lispy S-expression based mini language | [Demo](https://demo.thi.ng/umbrella/lispy-repl/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/lispy-repl) |
|
|
356
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/mastodon-feed.jpg" width="240"/> | Mastodon API feed reader with support for different media types, fullscreen media modal, HTML rewriting | [Demo](https://demo.thi.ng/umbrella/mastodon-feed/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/mastodon-feed) |
|
|
357
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/meta-css-basics.png" width="240"/> | Basic thi.ng/meta-css usage & testbed | [Demo](https://demo.thi.ng/umbrella/meta-css-basics/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/meta-css-basics) |
|
|
358
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/optical-flow.avif" width="240"/> | Optical flow analysis of web cam or video inputs | [Demo](https://demo.thi.ng/umbrella/optical-flow/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/optical-flow) |
|
|
359
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/parse-playground.png" width="240"/> | Parser grammar livecoding editor/playground & codegen | [Demo](https://demo.thi.ng/umbrella/parse-playground/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/parse-playground) |
|
|
360
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/pixel-colormatrix.jpg" width="240"/> | Matrix-based image color adjustments | [Demo](https://demo.thi.ng/umbrella/pixel-colormatrix/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/pixel-colormatrix) |
|
|
361
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/pixel-gradients.jpg" width="240"/> | Randomized 4-point 2D color gradient image generator | [Demo](https://demo.thi.ng/umbrella/pixel-gradients/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/pixel-gradients) |
|
|
362
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/pixel-sorting.png" width="240"/> | Interactive pixel sorting tool using thi.ng/color & thi.ng/pixel | [Demo](https://demo.thi.ng/umbrella/pixel-sorting/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/pixel-sorting) |
|
|
363
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/pixel-waveform.jpg" width="240"/> | RGB waveform image analysis | [Demo](https://demo.thi.ng/umbrella/pixel-waveform/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/pixel-waveform) |
|
|
364
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/pointfree-geom.jpg" width="240"/> | Live coding playground for 2D geometry generation using @thi.ng/pointfree-lang | [Demo](https://demo.thi.ng/umbrella/pointfree-geom/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/pointfree-geom) |
|
|
365
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/procedural-text.jpg" width="240"/> | Procedural stochastic text generation via custom DSL, parse grammar & AST transformation | [Demo](https://demo.thi.ng/umbrella/procedural-text/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/procedural-text) |
|
|
366
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/ramp-scroll-anim.png" width="240"/> | Scroll-based, reactive, multi-param CSS animation basics | [Demo](https://demo.thi.ng/umbrella/ramp-scroll-anim/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/ramp-scroll-anim) |
|
|
367
|
+
| | Basic & barebones usage of async iterables in thi.ng/rdom | [Demo](https://demo.thi.ng/umbrella/rdom-async/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-async) |
|
|
368
|
+
| | Demonstates various rdom usage patterns | [Demo](https://demo.thi.ng/umbrella/rdom-basics/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-basics) |
|
|
369
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/rdom-delayed-update.jpg" width="240"/> | Dynamically loaded images w/ preloader state | [Demo](https://demo.thi.ng/umbrella/rdom-delayed-update/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-delayed-update) |
|
|
370
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/rdom-dnd.png" width="240"/> | rdom drag & drop example | [Demo](https://demo.thi.ng/umbrella/rdom-dnd/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-dnd) |
|
|
371
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/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://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-formgen) |
|
|
372
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/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://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-key-sequences) |
|
|
373
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/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://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-klist) |
|
|
374
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/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://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-lazy-load) |
|
|
375
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/rdom-lissajous.png" width="240"/> | rdom & hiccup-canvas interop test | [Demo](https://demo.thi.ng/umbrella/rdom-lissajous/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-lissajous) |
|
|
376
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/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://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-reactive-svg) |
|
|
377
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/rdom-router.jpg" width="240"/> | Basic thi.ng/router usage with thi.ng/rdom components | [Demo](https://demo.thi.ng/umbrella/rdom-router/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-router) |
|
|
378
|
+
| | Full umbrella repo doc string search w/ paginated results | [Demo](https://demo.thi.ng/umbrella/rdom-search-docs/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-search-docs) |
|
|
379
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/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://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-svg-nodes) |
|
|
380
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/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://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-web-components) |
|
|
381
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/related-images.jpg" width="240"/> | Responsive image gallery with tag-based Jaccard similarity ranking | [Demo](https://demo.thi.ng/umbrella/related-images/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/related-images) |
|
|
382
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/render-audio.png" width="240"/> | Generative audio synth offline renderer and WAV file export | [Demo](https://demo.thi.ng/umbrella/render-audio/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/render-audio) |
|
|
383
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/rstream-sync.png" width="240"/> | Minimal rstream sync() example using rdom | [Demo](https://demo.thi.ng/umbrella/rstream-sync/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rstream-sync) |
|
|
384
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/rstream-system-bus.png" width="240"/> | Declarative component-based system with central rstream-based pubsub event bus | [Demo](https://demo.thi.ng/umbrella/rstream-system-bus/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rstream-system-bus) |
|
|
385
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/stacked-layout.png" width="240"/> | Responsive & reactively computed stacked column layout | [Demo](https://demo.thi.ng/umbrella/stacked-layout/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/stacked-layout) |
|
|
386
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/svg-resample.png" width="240"/> | SVG path parsing & dynamic resampling | [Demo](https://demo.thi.ng/umbrella/svg-resample/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/svg-resample) |
|
|
387
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/thing-browser.avif" width="240"/> | Tree-based UI to find & explore thi.ng projects via their associated keywords | [Demo](https://demo.thi.ng/umbrella/thing-browser/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/thing-browser) |
|
|
388
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/thing-packages-quiz.avif" width="240"/> | thi.ng/rdom & thi.ng/rstream based quiz to guess thi.ng package names | [Demo](https://demo.thi.ng/umbrella/thing-packages-quiz/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/thing-packages-quiz) |
|
|
389
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/trace-bitmap.jpg" width="240"/> | Multi-layer vectorization & dithering of bitmap images | [Demo](https://demo.thi.ng/umbrella/trace-bitmap/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/trace-bitmap) |
|
|
390
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/tsne-colors.avif" width="240"/> | Animated t-SNE visualization of 4D data | [Demo](https://demo.thi.ng/umbrella/tsne-colors/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/tsne-colors) |
|
|
391
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/viz-ridge-lines.avif" width="240"/> | Interactive ridge-line plot | [Demo](https://demo.thi.ng/umbrella/viz-ridge-lines/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/viz-ridge-lines) |
|
|
392
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/viz-scatter-plot.avif" width="240"/> | Interactive scatter & line plot of low-discrepancy samples | [Demo](https://demo.thi.ng/umbrella/viz-scatter-plot/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/viz-scatter-plot) |
|
|
393
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/webgl-channel-mixer.jpg" width="240"/> | rdom & WebGL-based image channel editor | [Demo](https://demo.thi.ng/umbrella/webgl-channel-mixer/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/webgl-channel-mixer) |
|
|
392
394
|
|
|
393
395
|
## API
|
|
394
396
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thi.ng/rdom",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.84",
|
|
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",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
|
-
"url": "git+https://
|
|
11
|
+
"url": "git+https://codeberg.org/thi.ng/umbrella.git",
|
|
12
12
|
"directory": "packages/rdom"
|
|
13
13
|
},
|
|
14
14
|
"homepage": "https://thi.ng/rdom",
|
|
@@ -41,14 +41,14 @@
|
|
|
41
41
|
"tool:tangle": "../../node_modules/.bin/tangle src/**/*.ts"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@thi.ng/api": "^8.12.
|
|
45
|
-
"@thi.ng/checks": "^3.8.
|
|
46
|
-
"@thi.ng/errors": "^2.6.
|
|
47
|
-
"@thi.ng/hiccup": "^5.4.
|
|
48
|
-
"@thi.ng/paths": "^5.2.
|
|
49
|
-
"@thi.ng/prefixes": "^2.3.
|
|
50
|
-
"@thi.ng/rstream": "^9.4.
|
|
51
|
-
"@thi.ng/strings": "^3.11.
|
|
44
|
+
"@thi.ng/api": "^8.12.18",
|
|
45
|
+
"@thi.ng/checks": "^3.8.8",
|
|
46
|
+
"@thi.ng/errors": "^2.6.7",
|
|
47
|
+
"@thi.ng/hiccup": "^5.4.2",
|
|
48
|
+
"@thi.ng/paths": "^5.2.37",
|
|
49
|
+
"@thi.ng/prefixes": "^2.3.68",
|
|
50
|
+
"@thi.ng/rstream": "^9.4.2",
|
|
51
|
+
"@thi.ng/strings": "^3.11.1"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"esbuild": "^0.27.2",
|
|
@@ -149,5 +149,5 @@
|
|
|
149
149
|
],
|
|
150
150
|
"year": 2020
|
|
151
151
|
},
|
|
152
|
-
"gitHead": "
|
|
152
|
+
"gitHead": "8ddf86ea0a1e658ddbf19cc645b29d0c176e29c4\n"
|
|
153
153
|
}
|