Skip to content
🔌 - Convert a nanocomponent to a component for your favourite API or library (web components, (p)react, angular)
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
angular.js
custom-element-v0.js
custom-element-v1.js
example.js
index.js
package-lock.json
package.json
react.js

README.md

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!

Custom Elements (webcomponents-v0)

Warning: v0 API is deprecated in favor of v1

var toCustomElement = require('nanocomponent-adapters/custom-element-v0')
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
// The second parameter corresponds to a string Array containing the names of the attributes you'd like to observe and react to changes.
var CustomButton = toCustomElement(Button, ['title'])
document.registerElement('custom-button', CustomButton)

// create new custom-button
var button = document.createElement('custom-button')
document.body.appendChild(button)

Custom Elements (webcomponents-v1)

var toCustomElementV1 = require('nanocomponent-adapters/custom-element-v1')
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
// The second parameter corresponds to a string Array containing the names of the attributes you'd like to observe and react to changes.
var CustomButton = toCustomElement(Button, ['title']);
customElements.define('custom-button', CustomButton);
// create new custom-button
var button = document.createElement('custom-button')
document.body.appendChild(button)

Angular.js

See nanocomponent-adapters-angularjs.

Angular

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import * core from '@angular/core';
import * as toAngular from 'nanocomponent-adapters/angular';
import * as Nanocomponent from 'nanocomponent';
import * as html from '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
  }
}

const component: any = toAngular(Button, 'custom-button', ['color'], core);

@NgModule({
  declarations: [
    AppComponent,
    component
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

/*
You can now use the component in either a standalone or inline template
*/

`<custom-button [color]="color"></custom-button>`

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

You can’t perform that action at this time.