signal-struct

Structure for storing/handling multiple signals or reactive values

1import signalStruct from 'signal-struct'
2import { signal, computed, batch } from '@preact/signals-core'
3
4let s = signalStruct({
5  x: 0,
6  y: signal(1),
7  z: { r: 2, i: signal(3) },
8  get v() { return this.x * this.y }, // computed
9});
10
11// subscribes to only x and y without need for .value access
12let xy = computed(() => s.x + s.y)
13s.x = 2
14s.y = 3
15xy.value // 5
16
17// subscribes to deep values too: only z.r and z.i update the `len`
18let len = computed(() => (s.z.r**2 + s.z.i**2)**0.5)
19s.z.r = 3
20s.z.i = 4
21len.value // 5
22
23// updating internal objects turns them into signals too
24s.z = { r: 5, i: 12}
25len.value // 13
26
27// update multiple props
28batch(() => Object.assign(s, { x: 1, y: 1 }))
29xy.value // 2
30
31// getter is computed
32s.v // 1
33
34// can subscribe to reactive sources
35let s2 = signalStruct({
36  p: new Promise(ok => setTimeout(() => ok(123)))
37})
38s2.p  // null
39// ...
40s2.p  // 123
41
42// can inherit from proto, including other struct
43let s3 = signalStruct({v:456}, s2)
44s3.p // 123
45s3.v // 456

Supported reactive sources: see sube.

🕉