nanocomponent-adapters
Adapters to make nanocomponent run natively inside frameworks
Last updated 3 years ago by goto-bus-stop .
Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install nanocomponent-adapters 
SYNC missed versions from official npm registry.

nanocomponent-adapters stability

npm version build status 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!

React / Preact

var toReact = require('nanocomponent-adapters/react')
var Nanocomponent = require('nanocomponent')
var reactDom = require('react-dom')
var react = require('react')
var html = require('bel')

class Button extends Nanocomponent {
  constructor () {
    super()
    this.color = null
  }

  handleClick () {
    console.log('choo choo!')
  }

  createElement ({color}) {
    this.color = color
    return html`
      <button onclick=${this.handleClick} style="background-color: ${color}">
        Click Me
      </button>
    `
  }

  update ({color}) {
    return color !== this.color
  }
}

var ReactButton = toReact(Button, react)
reactDom.render(<ReactButton color='white' />, mountNode)

It's very similar with Preact, or any other React-like library that exposes a Component base class and a createElement function:

var preact = require('preact')
var PreactButton = toReact(Button, preact)
preact.render(<PreactButton color='hotpink' />, document.body)

Choo

Choo just works™.

var Nanocomponent = require('nanocomponent')
var html = require('choo/html')
var choo = require('choo')

// create new nanocomponent
class Button extends Nanocomponent {
  constructor () {
    super()
    this.color = null
  }

  handleClick (color) {
    console.log('choo choo!')
  }

  createElement (color) {
    this.color = color
    return html`
      <button onclick=${this.handleClick} style="background-color: ${color}">
        Click Me
      </button>
    `
  }

  update (color) {
    return color !== this.color
  }
}

var app = choo()
app.route('/', mainView)
app.mount('body')

var customButton = new Button ()

function mainView (state, emit) {
  return html`
    <section>
      ${customButton.render('blue')}
    </section>
  `
}

See Also

License

MIT

Current Tags

  • 3.0.0                                ...           latest (3 years ago)

5 Versions

  • 3.0.0                                ...           3 years ago
  • 2.0.0                                ...           3 years ago
  • 1.2.1                                ...           4 years ago
  • 1.2.0                                ...           4 years ago
  • 1.1.1                                ...           4 years ago

Copyright 2014 - 2016 © taobao.org |