nanocomponent-to-webcomponent

1.1.0 • Public • Published

nanocomponent-adapters stability

npm version build status test coverage downloads js-standard-style

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)

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>
  `
}

See Also

License

MIT

Package Sidebar

Install

npm i nanocomponent-to-webcomponent

Weekly Downloads

0

Version

1.1.0

License

none

Last publish

Collaborators

  • yoshuawuyts