@thi.ng/transducers-hdom 3.1.215 → 3.1.216
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 +43 -42
- package/package.json +6 -6
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/transducers-hdom)
|
|
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
|
- [Status](#status)
|
|
@@ -26,16 +27,16 @@
|
|
|
26
27
|
|
|
27
28
|
## About
|
|
28
29
|
|
|
29
|
-
Transducer based UI updater for [@thi.ng/hdom](https://
|
|
30
|
+
Transducer based UI updater for [@thi.ng/hdom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hdom). This is a support package for [@thi.ng/transducers](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/transducers).
|
|
30
31
|
|
|
31
32
|
This package provides a single `updateDOM` function, a side-effecting &
|
|
32
33
|
stateful transducer which receives
|
|
33
|
-
[@thi.ng/hdom](https://
|
|
34
|
+
[@thi.ng/hdom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hdom)
|
|
34
35
|
component trees, diffs each against the previous value and applies any
|
|
35
36
|
required changes to the browser DOM, starting at given root element. By
|
|
36
37
|
default, incoming values are first normalized using @thi.ng/hdom's
|
|
37
38
|
`normalizeTree()` function. See [hdom's `start()`
|
|
38
|
-
function](https://
|
|
39
|
+
function](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hdom#start)
|
|
39
40
|
for more details.
|
|
40
41
|
|
|
41
42
|
If the `hydrate` option is given, the first received tree is only used
|
|
@@ -44,7 +45,7 @@ to inject event listeners and initialize components with lifecycle
|
|
|
44
45
|
All succeeding trees are diffed then as usual.
|
|
45
46
|
|
|
46
47
|
This transducer is primarily intended for
|
|
47
|
-
[@thi.ng/rstream](https://
|
|
48
|
+
[@thi.ng/rstream](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rstream)-based
|
|
48
49
|
dataflow graphs, where it can be used as final leaf subscription /
|
|
49
50
|
stream transformer to reflect UI changes back to the user, without using
|
|
50
51
|
the usual RAF update loop used by @thi.ng/hdom by default. In this
|
|
@@ -53,20 +54,20 @@ is attached to receives new values (i.e. hdom component trees).
|
|
|
53
54
|
|
|
54
55
|
Please also see the following hdom references for further details:
|
|
55
56
|
|
|
56
|
-
- [start()](https://
|
|
57
|
-
- [HDOMOpts](https://
|
|
57
|
+
- [start()](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hdom/src/start.ts)
|
|
58
|
+
- [HDOMOpts](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hdom/src/api.ts#L19)
|
|
58
59
|
|
|
59
60
|
## Status
|
|
60
61
|
|
|
61
62
|
**STABLE** - used in production
|
|
62
63
|
|
|
63
|
-
[Search or submit any issues for this package](https://
|
|
64
|
+
[Search or submit any issues for this package](https://codeberg.org/thi.ng/umbrella/issues?q=%5Btransducers-hdom%5D)
|
|
64
65
|
|
|
65
66
|
## Related packages
|
|
66
67
|
|
|
67
|
-
- [@thi.ng/hdom](https://
|
|
68
|
-
- [@thi.ng/interceptors](https://
|
|
69
|
-
- [@thi.ng/rstream](https://
|
|
68
|
+
- [@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
|
|
69
|
+
- [@thi.ng/interceptors](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/interceptors) - Interceptor based event bus, side effect & immutable state handling
|
|
70
|
+
- [@thi.ng/rstream](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rstream) - Reactive streams & subscription primitives for constructing dataflow graphs / pipelines
|
|
70
71
|
|
|
71
72
|
## Installation
|
|
72
73
|
|
|
@@ -98,39 +99,39 @@ Package sizes (brotli'd, pre-treeshake): ESM: 272 bytes
|
|
|
98
99
|
|
|
99
100
|
## Dependencies
|
|
100
101
|
|
|
101
|
-
- [@thi.ng/hdom](https://
|
|
102
|
-
- [@thi.ng/hiccup](https://
|
|
103
|
-
- [@thi.ng/transducers](https://
|
|
102
|
+
- [@thi.ng/hdom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hdom)
|
|
103
|
+
- [@thi.ng/hiccup](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup)
|
|
104
|
+
- [@thi.ng/transducers](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/transducers)
|
|
104
105
|
|
|
105
106
|
## Usage examples
|
|
106
107
|
|
|
107
108
|
21 projects in this repo's
|
|
108
|
-
[/examples](https://
|
|
109
|
+
[/examples](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples)
|
|
109
110
|
directory are using this package:
|
|
110
111
|
|
|
111
|
-
| Screenshot | Description | Live demo | Source
|
|
112
|
-
|
|
113
|
-
| <img src="https://
|
|
114
|
-
| <img src="https://
|
|
115
|
-
| <img src="https://
|
|
116
|
-
| <img src="https://
|
|
117
|
-
| <img src="https://
|
|
118
|
-
| <img src="https://
|
|
119
|
-
| <img src="https://
|
|
120
|
-
| <img src="https://
|
|
121
|
-
| <img src="https://
|
|
122
|
-
| | Isolated, component-local DOM updates | [Demo](https://demo.thi.ng/umbrella/hdom-local-render/) | [Source](https://
|
|
123
|
-
| <img src="https://
|
|
124
|
-
| <img src="https://
|
|
125
|
-
| <img src="https://
|
|
126
|
-
| | Basic rstream-gestures multi-touch demo | [Demo](https://demo.thi.ng/umbrella/multitouch/) | [Source](https://
|
|
127
|
-
| <img src="https://
|
|
128
|
-
| <img src="https://
|
|
129
|
-
| <img src="https://
|
|
130
|
-
| | rstream based UI updates & state handling | [Demo](https://demo.thi.ng/umbrella/rstream-hdom/) | [Source](https://
|
|
131
|
-
| <img src="https://
|
|
132
|
-
| <img src="https://
|
|
133
|
-
| | Transducer & rstream based hdom UI updates | [Demo](https://demo.thi.ng/umbrella/transducers-hdom/) | [Source](https://
|
|
112
|
+
| Screenshot | Description | Live demo | Source |
|
|
113
|
+
|:-------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------|:----------------------------------------------------------|:-----------------------------------------------------------------------------------------------|
|
|
114
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/adaptive-threshold.png" width="240"/> | Interactive image processing (adaptive threshold) | [Demo](https://demo.thi.ng/umbrella/adaptive-threshold/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/adaptive-threshold) |
|
|
115
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/canvas-dial.png" width="240"/> | Canvas based dial widget | [Demo](https://demo.thi.ng/umbrella/canvas-dial/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/canvas-dial) |
|
|
116
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/crypto-chart.png" width="240"/> | Basic crypto-currency candle chart with multiple moving averages plots | [Demo](https://demo.thi.ng/umbrella/crypto-chart/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/crypto-chart) |
|
|
117
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/fft-synth.png" width="240"/> | Interactive inverse FFT toy synth | [Demo](https://demo.thi.ng/umbrella/fft-synth/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/fft-synth) |
|
|
118
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/geom-knn.jpg" width="240"/> | Doodle w/ K-nearest neighbor search result visualization | [Demo](https://demo.thi.ng/umbrella/geom-knn/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/geom-knn) |
|
|
119
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/geom-knn-hash.jpg" width="240"/> | K-nearest neighbor search in an hash grid | [Demo](https://demo.thi.ng/umbrella/geom-knn-hash/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/geom-knn-hash) |
|
|
120
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/gesture-analysis.png" width="240"/> | Mouse gesture / stroke analysis, simplification, corner detection | [Demo](https://demo.thi.ng/umbrella/gesture-analysis/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/gesture-analysis) |
|
|
121
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/hdom-canvas-draw.jpg" width="240"/> | Interactive pattern drawing demo using transducers | [Demo](https://demo.thi.ng/umbrella/hdom-canvas-draw/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/hdom-canvas-draw) |
|
|
122
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/hdom-canvas/hdom-canvas-shapes-results.png" width="240"/> | Various hdom-canvas shape drawing examples & SVG conversion / export | [Demo](https://demo.thi.ng/umbrella/hdom-canvas-shapes/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/hdom-canvas-shapes) |
|
|
123
|
+
| | Isolated, component-local DOM updates | [Demo](https://demo.thi.ng/umbrella/hdom-local-render/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/hdom-local-render) |
|
|
124
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/imgui/imgui-all.png" width="240"/> | Canvas based Immediate Mode GUI components | [Demo](https://demo.thi.ng/umbrella/imgui/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/imgui) |
|
|
125
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/mandelbrot.jpg" width="240"/> | Worker based, interactive Mandelbrot visualization | [Demo](https://demo.thi.ng/umbrella/mandelbrot/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/mandelbrot) |
|
|
126
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/markdown-parser.jpg" width="240"/> | Markdown to Hiccup to HTML parser / transformer | [Demo](https://demo.thi.ng/umbrella/markdown/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/markdown) |
|
|
127
|
+
| | Basic rstream-gestures multi-touch demo | [Demo](https://demo.thi.ng/umbrella/multitouch/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/multitouch) |
|
|
128
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/poly-spline.png" width="240"/> | Polygon to cubic curve conversion & visualization | [Demo](https://demo.thi.ng/umbrella/poly-spline/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/poly-spline) |
|
|
129
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/rotating-voronoi.jpg" width="240"/> | Animated Voronoi diagram, cubic splines & SVG download | [Demo](https://demo.thi.ng/umbrella/rotating-voronoi/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rotating-voronoi) |
|
|
130
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/rstream-event-loop.png" width="240"/> | Minimal demo of using rstream constructs to form an interceptor-style event loop | [Demo](https://demo.thi.ng/umbrella/rstream-event-loop/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rstream-event-loop) |
|
|
131
|
+
| | rstream based UI updates & state handling | [Demo](https://demo.thi.ng/umbrella/rstream-hdom/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rstream-hdom) |
|
|
132
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/rstream-spreadsheet.png" width="240"/> | rstream based spreadsheet w/ S-expression formula DSL | [Demo](https://demo.thi.ng/umbrella/rstream-spreadsheet/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rstream-spreadsheet) |
|
|
133
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/talk-slides.png" width="240"/> | hdom based slide deck viewer & slides from my ClojureX 2018 keynote | [Demo](https://demo.thi.ng/umbrella/talk-slides/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/talk-slides) |
|
|
134
|
+
| | Transducer & rstream based hdom UI updates | [Demo](https://demo.thi.ng/umbrella/transducers-hdom/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/transducers-hdom) |
|
|
134
135
|
|
|
135
136
|
## API
|
|
136
137
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thi.ng/transducers-hdom",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.216",
|
|
4
4
|
"description": "Transducer based UI updater for @thi.ng/hdom",
|
|
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/transducers-hdom"
|
|
13
13
|
},
|
|
14
14
|
"homepage": "https://thi.ng/transducers-hdom",
|
|
@@ -40,9 +40,9 @@
|
|
|
40
40
|
"tool:tangle": "../../node_modules/.bin/tangle src/**/*.ts"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@thi.ng/hdom": "^9.4.
|
|
44
|
-
"@thi.ng/hiccup": "^5.4.
|
|
45
|
-
"@thi.ng/transducers": "^9.6.
|
|
43
|
+
"@thi.ng/hdom": "^9.4.107",
|
|
44
|
+
"@thi.ng/hiccup": "^5.4.2",
|
|
45
|
+
"@thi.ng/transducers": "^9.6.31"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"esbuild": "^0.27.2",
|
|
@@ -82,5 +82,5 @@
|
|
|
82
82
|
],
|
|
83
83
|
"year": 2018
|
|
84
84
|
},
|
|
85
|
-
"gitHead": "
|
|
85
|
+
"gitHead": "8ddf86ea0a1e658ddbf19cc645b29d0c176e29c4\n"
|
|
86
86
|
}
|