nanocomponent-to-webcomponent
v1.1.0
Published
Convert a nanocomponent to a webcomponent
Downloads
1
Maintainers
yoshuawuytsReadme
nanocomponent-adapters 
Adapters to make nanocomponent run natively inside frameworks. This allows you to write highly performant components once, and reuse them between all frameworks.
Table of Contents
Not all languages and frameworks are supported yet; PRs to support more frameworks support are very welcome!
- Custom Elements (webcomponents)
- React
- Preact
- Choo
- Angular
- Ember
- Cycle
- Inferno
- Elm
Custom Elements (webcomponents)
var toCustomElement = require('nanocomponent-adapters/custom-element')
var component = require('nanocomponent')
var html = require('bel')
// create new nanocomponent
var Button = component({
render: function (data) {
return html`
<button>hello planet</button>
`
}
})
// register as custom element
Button = toCustomElement(customButton, 'button')
document.registerElement('custom-button', Button)
// create new custom-button
var button = document.createElement('button', 'custom-button')
document.body.appendChild(button)Preact (to be implemented)
var toPreact = require('nanocomponent-adapters/preact')
var component = require('nanocomponent')
var preact = require('preact')
var html = require('bel')
var render = preact.render
// create new nanocomponent
var Button = component({
render: function (data) {
return html`
<button>hello planet</button>
`
}
})
Button = toPreact(Button)
// render an instance of Button into <body>:
render(<Button />, document.body);React
var toReact = require('nanocomponent-adapters/react')
var reactDom = require('react-dom')
// create new nanocomponent
var Button = component({
render: function (data) {
return html`
<button>hello planet</button>
`
}
})
Button = toReact(Button)
ReactDOM.render(<Button />, mountNode)Choo
var component = require('nanocomponent')
var html = require('choo/html')
var choo = require('choo')
// create new nanocomponent
var customButton = component({
render: function (data) {
return html`
<button>hello planet</button>
`
}
})
var app = choo()
choo.router(['/', mainView])
document.body.appendChild(choo.start())
mainView (state, prev, send) {
return html`
<section>
${customButton(state)}
</section>
`
}