A minimal utility that returns updated value every time it changes (without callbacks)

[xzilja]

Hello 👋

We use valtion in a project built out of web-components, mainly using https://lit.dev.

Lit has it's own way of handling component state that looks something like this:

class MyComponent extends LitHtml {
    @state private userId = '123'
}

Whenever that state value is updated it tigers component to re-render. For global values like userId above we use valtio and are currently adding following logic to subscribe to it and update component state:

subscribeKey(state, 'userId', (v) =>
  this.userId = v
)

This works, but I was wondering if there is a chance to make a utility that could help clean this up i.e something like:

class MyComponent extends LitHtml {
    @state private userId = getKey(state, 'userId')
}

Idea her is that getKey would return new value whenever state changes.

[dai-shi]

It depends on what capabilities Lit provides. Are there similar solutions?
Anyone is welcome to dig into it and develop a binding library.