[feature] add thunking API
See original GitHub issueIn yo-yo
and choo
it’s a best practice to have element functions in an
application return the same element given the same input. This mechanism is
commonly referred to as thunking
.
How would we feel about adding a light wrapper that exposes a thunk
function
so that elements can be thunked with little effort. I was thinking of an API
along these lines:
// elements/my-button.js
const thunk = require('bel/thunk')
const html = require('bel')
module.exports = thunk(createMyButton)
// create a cool button that has a different color
function createMyButton (color) {
return html`
<button style="background-color: ${color}">
Click me! :D
</button>
`
}
In a choo
app this could then be consumed as:
const html = require('choo/html')
const choo = require('choo')
const myButton = require('./elements/my-button')
const app = choo()
app.router([ '/', myView ])
app.model({
state: { color: 'blue' }
})
const tree = app.start()
document.body.appendChild(tree)
function myView (state, prev, send) {
return html`
<main>
${myButton(state.color)}
</main>
`
}
What do you think? Would this be a useful addition to bel
, or should we
continue to point people to use an external thing / write it themselves? I was
thinking of including this into choo
, but given that we strongly encourage
people to use bel
for standalone components (yay, reusability) I figured it
might make more sense to include it here first, and then have it propagate
upwards through yo-yo
to choo
. Thanks!
See Also
Issue Analytics
- State:
- Created 7 years ago
- Reactions:2
- Comments:7 (6 by maintainers)
Top GitHub Comments
Hmm let me give it some more thought. Initially it feels like this should be in the diffing library or
yo-yo
asbel
doesn’t know about previous elements.Yup, though I recommended nanocomponent these days - iterated on the interface a bit
On Mon, Feb 6, 2017, 23:15 Björn Roberg notifications@github.com wrote: