Easily re-use existing values in bindings without explicitly extracting them

[ThaNarie]

Quite often you want to change the html or text of an HTML element in some specific scenario (e.g. when a specific error happens).
That element might already have a useful value you want to display in all other cases.

Unfortunately, bindings always replaces the existing value once set up. Which means you would need to extract the existing value, and use it for the "else" condition in your binding.

originalText: propType.string.source({ ref: 'button', type: 'text' })

bind(refs.button, { text: computed(() => someState.value ? 'custom text' : props.originalText) } )

If we could add something that would allow you to omit the extracting step, that would be nice.

One suggestion is to use some kind of "token" in your binding value, that each binding will make available when it's first runs and saves the original value before setting anything.

e.g.

bind(refs.button, { text: computed(() => someState.value ? 'custom text' : '@original@') } )

Pros

• less code to write (better DX)

Cons

• magic syntax to remember, document, test, etc (maintainer tax)
• every binding will always have to read it's initial value the first time (runtime performance tax)

The second point might be a non-issue if reading is fast. However, if all bindings do a read+write, the DOM might need to "flush" in between each binding, which becomes quite slow quite quick.
So we might need to "delay" the write action by a frame, so the read actions will all be executed in batch.

@larsvanbraam @ThijsTyZ @psimk any opinions / suggestions?

[ThijsTyZ]

Looks like we are trying to solve a "problem" I haven't experienced yet. And I am also not a fan of magic syntax.