Add current property to skooma bound elements

Elements bound witht he skooma bind function now get a `current`
property patched in.
This commit is contained in:
Talia 2021-11-25 10:50:44 +01:00
parent 60b40e2bc0
commit 694b4da6a4
Signed by: darkwiiplayer
GPG key ID: 7808674088232B3E
2 changed files with 9 additions and 6 deletions

View file

@ -85,10 +85,13 @@ const nameSpacedProxy = (options={}) => new Proxy(Window, {
export const bind = register => transform => { export const bind = register => transform => {
let element let element
const addCurrent = current => Object.defineProperty(current, 'current', {get: () => element})
element = transform(...register((...values) => { element = transform(...register((...values) => {
element = element.replaceWith(transform(...values)) || element const old = element
element = addCurrent(transform(...values))
old.replaceWith(element)
})) }))
return element return addCurrent(element)
} }
export const handle = fn => event => { event.preventDefault(); return fn(event) } export const handle = fn => event => { event.preventDefault(); return fn(event) }

View file

@ -66,10 +66,6 @@ initial element from the initial state, which will be returned.
On every state change, the transform ation will be called on the new state to On every state change, the transform ation will be called on the new state to
generate a new DOM Node, which replace the current one. generate a new DOM Node, which replace the current one.
If the current node is not in the DOM yet, nothing will happen, and the new node
is thrown away. This "stale" node will not update until it has been placed in
the DOM *and* the next state change occurs.
```js ```js
bind(register)(html.div) bind(register)(html.div)
// Returns a div element bound to register // Returns a div element bound to register
@ -77,6 +73,10 @@ bind(register)(html.div)
// and html.div is a transformation from input state to a <div> node // and html.div is a transformation from input state to a <div> node
``` ```
Since references to the bound element can become stale, a `current` property
is set on every element that returns the current element. This will keep working
even after several state changes.
## handle ## handle
Since it is common for event handlers to call `preventDefault()`, skooma Since it is common for event handlers to call `preventDefault()`, skooma