async data loading #63
Description
Apologies for the rough draft here; I didn't have much time to phrase things here properly, but I hope the general idea makes sense. This is mostly so we can start thinking about this problem, and create a concrete starting point to work from.
Some of the more CMS-y applications make heavy use of server rendering, which produces pages that can then be stored on CDNs. In order for components to be rendered on the server, it might be useful if they could define an initial set of data before being rendered.
There's probably a good set of considerations as to the more finer grained details, but I was thinking an API like this might just be the right fit.
// button.js
var Nanocomponent = require('nanocomponent')
var html = require('bel')
function Button () {
if (!(this instanceof Button)) return new Button()
this.color = null
Nanocomponent.call(this)
}
Button.prototype = Object.create(Nanocomponent.prototype)
// This the new API.
Button.prototype.initialState = function (done) {
var self = this
xhr('/foo/bar', function (err, data) {
self.state.data = data
done()
})
}
Button.prototype.createElement = function (color) {
this.color = color
return html`
<button style="background-color: ${color}">
Click Me
</button>
`
}
// Implement conditional rendering
Button.prototype.update = function (newColor) {
return newColor !== this.color
}In Node, we could wait for all these functions to resolve, before doing a final render. It's a lil messy, but might be the best we got. Thanks & thoughts very welcome! 😁