[feature] add thunking API

In 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

• https://github.com/Raynos/vdom-thunk

[shama]

Hmm let me give it some more thought. Initially it feels like this should be in the diffing library or yo-yo as bel doesn’t know about previous elements.

[yoshuawuyts]

Yup, though I recommended nanocomponent these days - iterated on the interface a bit

On Mon, Feb 6, 2017, 23:15 Björn Roberg [e-mail] wrote:

@yoshuawuyts https://github.com/yoshuawuyts https://github.com/yoshuawuyts/cache-element/ can be used to thunk element, or am I confused?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/shama/bel/issues/40#issuecomment-277831819, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWlerG7SCfNAjUvrJ1sYvee_HIQ_er7ks5rZ5uTgaJpZM4Jbsbi .