Merge pull request #12 from choojs/update-to-nc-6

Update adapters
choojs · Aug 9, 2017 · f6c1444 · f6c1444
2 parents 5bb7f6b + 16138f9
commit f6c1444
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 205 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,9 +1,12 @@
+dist: trusty
+language: node_js
 node_js:
-- "4"
-- "5"
-- "6"
-- "7"
+  - 'node'
 sudo: false
-language: node_js
-script: "npm run test"
-after_script: "npm i -g codecov.io && cat ./coverage/lcov.info | codecov"
+cache:
+  directories:
+    - ~/.npm
+install:
+  - npm i
+script:
+  - npm test
diff --git a/README.md b/README.md
@@ -9,7 +9,6 @@ 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)](#custom-elements-webcomponents)
 - [Preact](#preact)
 - [React](#react)
 - [Choo](#choo)
@@ -18,148 +17,134 @@ frameworks support are very welcome!
 - Cycle
 - Vue
 - Inferno
-- [Elm](#elm)
-
-## Custom Elements (webcomponents)
-```js
-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)
-```
+- Custom Elements (webcomponents)
+- Elm
 
 ## Preact
 ```js
 var toPreact = require('nanocomponent-adapters/preact')
-var component = require('nanocomponent')
+var Nanocomponent = require('nanocomponent')
 var preact = require('preact')
 var html = require('bel')
 
 var render = preact.render
 
-// create new nanocomponent
-var Button = component({
-  render: function (data) {
+class Button extends Nanocomponent {
+  constructor () {
+    super()
+    this.color = null
+  }
+
+  handleClick () {
+    console.log('choo choo!')
+  }
+
+  createElement ({color}) {
+    this.color = color
     return html`
-      <button>hello planet</button>
+      <button onclick=${this.handleClick} style="background-color: ${color}">
+        Click Me
+      </button>
     `
   }
-})
 
-Button = toPreact(Button, preact)
+  update ({color}) {
+    return newColor !== this.color
+  }
+}
+
+var PreactButton = toPreact(Button, preact)
 
 // render an instance of Button into <body>:
-render(<Button />, document.body);
+render(<PreactButton color='red'/>, document.body);
 ```
 
 ## React
-```jsx
+```js
 var toReact = require('nanocomponent-adapters/react')
-var component = require('nanocomponent')
+var Nanocomponent = require('nanocomponent')
 var reactDom = require('react-dom')
 var react = require('react')
 
-// create new nanocomponent
-var Button = component({
-  render: function (data) {
+class Button extends Nanocomponent {
+  constructor () {
+    super()
+    this.color = null
+  }
+
+  handleClick () {
+    console.log('choo choo!')
+  }
+
+  createElement ({color}) {
+    this.color = color
     return html`
-      <button>hello planet</button>
+      <button onclick=${this.handleClick} style="background-color: ${color}">
+        Click Me
+      </button>
     `
   }
-})
 
-Button = toReact(Button, react)
-ReactDOM.render(<Button />, mountNode)
+  update ({color}) {
+    return newColor !== this.color
+  }
+}
+
+var ReactButton = toReact(Button, react)
+ReactDOM.render(<ReactButton color='white' />, mountNode)
 ```
 
 ## Choo
+
+Choo just works™.
+
 ```js
-var component = require('nanocomponent')
+var Nanocomponent = require('nanocomponent')
 var html = require('choo/html')
 var choo = require('choo')
 
 // create new nanocomponent
-var customButton = component({
-  render: function (data) {
+class Button extends Nanocomponent {
+  constructor () {
+    super()
+    this.color = null
+  }
+
+  handleClick (color) {
+    console.log('choo choo!')
+  }
+
+  createElement (color) {
+    this.color = color
     return html`
-      <button>hello planet</button>
+      <button onclick=${this.handleClick} style="background-color: ${color}">
+        Click Me
+      </button>
     `
   }
-})
+
+  update (color) {
+    return newColor !== this.color
+  }
+}
 
 var app = choo()
-choo.router(['/', mainView])
-document.body.appendChild(choo.start())
+app.route('/', mainView)
+app.mount('body')
+
+var customButton = new Button ()
 
-mainView (state, prev, send) {
+function mainView (state, emit) {
   return html`
     <section>
-      ${customButton(state)}
+      ${customButton.render('blue')}
     </section>
   `
 }
 ```
 
-## Elm
-To integrate JS components with Elm, it's common to use [custom
-elements](#custom-elements-webcomponents). This requires you to create the
-components in a javascript file. This works well because the state in
-nanocomponents is isolated from the elm code; e.g. it doesn't talk back to Elm
-code.
-
-```js
-// index.js
-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)
-```
-
-```elm
--- Component.elm
-main =
-  node "custom-button" [] []
-```
-```html
-<div id="main"></div>
-<script src="component.js"></script>
-<script src="index.js"></script>
-<script>
-  var node = document.getElementById('body')
-  var app = Elm.Component.embed(node)
-</script>
-```
-
 ## See Also
-- [yoshuawuyts/nanocomponent][nc]
+- [choojs/nanocomponent][nc]
 - [shama/bel](https://github.com/shama/bel)
 
 ## License
@@ -169,12 +154,10 @@ main =
 [1]: https://nodejs.org/api/documentation.html#documentation_stability_index
 [2]: https://img.shields.io/npm/v/nanocomponent-adapters.svg?style=flat-square
 [3]: https://npmjs.org/package/nanocomponent-adapters
-[4]: https://img.shields.io/travis/yoshuawuyts/nanocomponent-adapters/master.svg?style=flat-square
-[5]: https://travis-ci.org/yoshuawuyts/nanocomponent-adapters
-[6]: https://img.shields.io/codecov/c/github/yoshuawuyts/nanocomponent-adapters/master.svg?style=flat-square
-[7]: https://codecov.io/github/yoshuawuyts/nanocomponent-adapters
+[4]: https://img.shields.io/travis/choojs/nanocomponent-adapters/master.svg?style=flat-square
+[5]: https://travis-ci.org/choojs/nanocomponent-adapters
 [8]: http://img.shields.io/npm/dm/nanocomponent-adapters.svg?style=flat-square
 [9]: https://npmjs.org/package/nanocomponent-adapters
 [10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
 [11]: https://github.com/feross/standard
-[nc]: https://github.com/yoshuawuyts/nanocomponent
+[nc]: https://github.com/choojs/nanocomponent
diff --git a/custom-element.js b/custom-element.js
diff --git a/example.js b/example.js
@@ -1,19 +1,37 @@
-var component = require('nanocomponent')
+var Nanocomponent = require('nanocomponent')
 var reactDom = require('react-dom')
 var react = require('react')
 var html = require('bel')
 var toReact = require('./react')
 
 // create new nanocomponent
-var Button = component({
-  render: function (data) {
-    return html`
-      <button>hello planet</button>
-    `
-  }
-})
+function Button () {
+  if (!(this instanceof Button)) return new Button()
+  this.color = null
 
-Button = toReact(Button, react)
+  Nanocomponent.call(this)
+}
+Button.prototype = Object.create(Nanocomponent.prototype)
+
+Button.prototype.handleClick = function () {
+  console.log('yay')
+}
+
+Button.prototype.createElement = function ({color}) {
+  this.color = color
+  return html`
+    <button onclick=${this.handleClick} style="background-color: ${color}">
+      Click Me
+    </button>
+  `
+}
+
+// Implement conditional rendering
+Button.prototype.update = function ({newColor}) {
+  return newColor !== this.color
+}
+
+var ReactButton = toReact(Button, react)
 var el = document.createElement('div')
 document.body.appendChild(el)
-reactDom.render(react.createElement(Button), el)
+reactDom.render(react.createElement(ReactButton, { color: 'green' }), el)
diff --git a/package.json b/package.json
@@ -10,12 +10,12 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "bankai": "^5.2.1",
+    "bankai": "^8.1.1",
     "dependency-check": "^2.7.0",
-    "nanocomponent": "^1.1.0",
+    "nanocomponent": "^6.0.0-1",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
-    "standard": "^8.6.0"
+    "standard": "^10.0.3"
   },
   "keywords": [
     "nanocomponent",