Choo component API preview. See discussion for more information.
var choo = require('choo')
var app = choo()
app.use(require('choo-component-preview')())
app.mount('body')var Component = require('nanocomponent')
var html = require('choo/html')
module.exports = class Article extends Component {
constructor (name, state, emit) {
super(name)
this.state = state
this.emit = emit
}
createElement (article) {
return html`
<article>
<h2>${article.title}</h2>
<p>${article.body}</p>
</article>
`
}
update () {
return false
}
}var Article = require('./components/article')
var Header = require('./components/header')
var Footer = require('./components/footer')
module.exports = function (state, emit) {
return html`
<body>
${state.cache(Header, 'header').render()}
${state.articles.map(article => {
return state.cache(Article, article.id).render(article)
})}
${state.cache(Footer, 'footer').render()}
</body>
`
}$ npm install choo-component-preview