Nesting Bindings

[nmattela]

Hi all,

Perhaps you might have encountered this issue before: you need to listen to two or more different accessors (a.k.a. bindings, signals, ...) to change a single value. Example: I want to create a label showing the volume in percentage, or "Muted" if the sound is muted, so I need to know the current volume and the current mute status of my default speaker, and my label has to update when one of them changes. You might go with something like this:

export function Example() {
    const audio = Wp.get_default()!
    const defaultSpeaker = audio.audio.defaultSpeaker

    const volume = createBinding(audio.defaultSpeaker, `volume`)
    const muted = createBinding(audio.defaultSpeaker, `mute`)

    const label = volume.as(volume => muted.as(muted => muted ? `Muted` : `${volume}%`))
}

But this is bad: it will only update the label as the volume changes. As you toggle the mute, it will not trigger changing the label because it is wrapped in that volume.as() (listening to volume changes).
Since I couldn't find anything documented about this behavior and how to circumnavigate it, I decided to write a function called sequence, inspired by the Haskell function of the same name since this whole Accessor thing reminds me of a monad (not sure if intentional):

function sequence<M extends { [K: string]: any }>(accessors: { [K in keyof M]: Accessor<M[K]> }): Accessor<M> {
    const [accessor, setAccessor] = createState<M>(Object.fromEntries(Object.entries(accessors).map(([key, val]: [keyof M, Accessor<M[keyof M]>]) => [key, val.get()])) as M)
    Object.entries(accessors).forEach(([key, val]: [keyof M, Accessor<M[keyof M]>]) => val.subscribe(() => setAccessor(accessor => ({ ...accessor, [key]: val.get() }))))
    return accessor
}

What it does is it takes an object of multiple accessors, and turns it into an accessor of an object. You can call it like so to fix the above issue with our label:

const label = sequence({ volume, muted }).as(({ volume, muted }) => muted ? `Muted` : `${volume}%`)

Please let me know if there's any built-in way to resolve this issue that I am not aware about :)

[Aylur]

Yes, there is a builtin called createComputed

Tip: Your version will leak memory, because the subscription is never cleaned up. createComputed will "lazily" subscribe to dependencies as needed and the owner scope will clean it up.

[kotontrion]

There already exists a solution for this: https://aylur.github.io/gnim/jsx#createcomputed

As a side note: I like how many people have trouble understanding Monads, but people keep reinventing them accidentally.