Skip to content

Commit f6c1444

Browse files
bcomnesbcomnes
authored
Merge pull request #12 from choojs/update-to-nc-6
Update adapters
2 parents 5bb7f6b + 16138f9 commit f6c1444

File tree

7 files changed

+152
-205
lines changed

7 files changed

+152
-205
lines changed

‎.travis.yml‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1+
dist: trusty
2+
language: node_js
13
node_js:
2-
- "4"
3-
- "5"
4-
- "6"
5-
- "7"
4+
- 'node'
65
sudo: false
7-
language: node_js
8-
script: "npm run test"
9-
after_script: "npm i -g codecov.io && cat ./coverage/lcov.info | codecov"
6+
cache:
7+
directories:
8+
- ~/.npm
9+
install:
10+
- npm i
11+
script:
12+
- npm test

‎README.md‎

Lines changed: 83 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ all frameworks.
99
## Table of Contents
1010
Not all languages and frameworks are supported yet; PRs to support more
1111
frameworks support are very welcome!
12-
- [Custom Elements (webcomponents)](#custom-elements-webcomponents)
1312
- [Preact](#preact)
1413
- [React](#react)
1514
- [Choo](#choo)
@@ -18,148 +17,134 @@ frameworks support are very welcome!
1817
- Cycle
1918
- Vue
2019
- Inferno
21-
- [Elm](#elm)
22-
23-
## Custom Elements (webcomponents)
24-
```js
25-
var toCustomElement = require('nanocomponent-adapters/custom-element')
26-
var component = require('nanocomponent')
27-
var html = require('bel')
28-
29-
// create new nanocomponent
30-
var Button = component({
31-
render: function (data) {
32-
return html`
33-
<button>hello planet</button>
34-
`
35-
}
36-
})
37-
38-
// register as custom element
39-
Button = toCustomElement(customButton, 'button')
40-
document.registerElement('custom-button', Button)
41-
42-
// create new custom-button
43-
var button = document.createElement('button', 'custom-button')
44-
document.body.appendChild(button)
45-
```
20+
- Custom Elements (webcomponents)
21+
- Elm
4622

4723
## Preact
4824
```js
4925
var toPreact = require('nanocomponent-adapters/preact')
50-
var component = require('nanocomponent')
26+
var Nanocomponent = require('nanocomponent')
5127
var preact = require('preact')
5228
var html = require('bel')
5329

5430
var render = preact.render
5531

56-
// create new nanocomponent
57-
var Button = component({
58-
render: function (data) {
32+
class Button extends Nanocomponent {
33+
constructor () {
34+
super()
35+
this.color = null
36+
}
37+
38+
handleClick () {
39+
console.log('choo choo!')
40+
}
41+
42+
createElement ({color}) {
43+
this.color = color
5944
return html`
60-
<button>hello planet</button>
45+
<button onclick=${this.handleClick} style="background-color: ${color}">
46+
Click Me
47+
</button>
6148
`
6249
}
63-
})
6450

65-
Button = toPreact(Button, preact)
51+
update ({color}) {
52+
return newColor !== this.color
53+
}
54+
}
55+
56+
var PreactButton = toPreact(Button, preact)
6657

6758
// render an instance of Button into <body>:
68-
render(<Button />, document.body);
59+
render(<PreactButton color='red'/>, document.body);
6960
```
7061

7162
## React
72-
```jsx
63+
```js
7364
var toReact = require('nanocomponent-adapters/react')
74-
var component = require('nanocomponent')
65+
var Nanocomponent = require('nanocomponent')
7566
var reactDom = require('react-dom')
7667
var react = require('react')
7768

78-
// create new nanocomponent
79-
var Button = component({
80-
render: function (data) {
69+
class Button extends Nanocomponent {
70+
constructor () {
71+
super()
72+
this.color = null
73+
}
74+
75+
handleClick () {
76+
console.log('choo choo!')
77+
}
78+
79+
createElement ({color}) {
80+
this.color = color
8181
return html`
82-
<button>hello planet</button>
82+
<button onclick=${this.handleClick} style="background-color: ${color}">
83+
Click Me
84+
</button>
8385
`
8486
}
85-
})
8687

87-
Button = toReact(Button, react)
88-
ReactDOM.render(<Button />, mountNode)
88+
update ({color}) {
89+
return newColor !== this.color
90+
}
91+
}
92+
93+
var ReactButton = toReact(Button, react)
94+
ReactDOM.render(<ReactButton color='white' />, mountNode)
8995
```
9096

9197
## Choo
98+
99+
Choo just works™.
100+
92101
```js
93-
var component = require('nanocomponent')
102+
var Nanocomponent = require('nanocomponent')
94103
var html = require('choo/html')
95104
var choo = require('choo')
96105

97106
// create new nanocomponent
98-
var customButton = component({
99-
render: function (data) {
107+
class Button extends Nanocomponent {
108+
constructor () {
109+
super()
110+
this.color = null
111+
}
112+
113+
handleClick (color) {
114+
console.log('choo choo!')
115+
}
116+
117+
createElement (color) {
118+
this.color = color
100119
return html`
101-
<button>hello planet</button>
120+
<button onclick=${this.handleClick} style="background-color: ${color}">
121+
Click Me
122+
</button>
102123
`
103124
}
104-
})
125+
126+
update (color) {
127+
return newColor !== this.color
128+
}
129+
}
105130

106131
var app = choo()
107-
choo.router(['/', mainView])
108-
document.body.appendChild(choo.start())
132+
app.route('/', mainView)
133+
app.mount('body')
134+
135+
var customButton = new Button ()
109136

110-
mainView (state, prev, send) {
137+
function mainView (state, emit) {
111138
return html`
112139
<section>
113-
${customButton(state)}
140+
${customButton.render('blue')}
114141
</section>
115142
`
116143
}
117144
```
118145

119-
## Elm
120-
To integrate JS components with Elm, it's common to use [custom
121-
elements](#custom-elements-webcomponents). This requires you to create the
122-
components in a javascript file. This works well because the state in
123-
nanocomponents is isolated from the elm code; e.g. it doesn't talk back to Elm
124-
code.
125-
126-
```js
127-
// index.js
128-
var toCustomElement = require('nanocomponent-adapters/custom-element')
129-
var component = require('nanocomponent')
130-
var html = require('bel')
131-
132-
// create new nanocomponent
133-
var Button = component({
134-
render: function (data) {
135-
return html`
136-
<button>hello planet</button>
137-
`
138-
}
139-
})
140-
141-
// register as custom element
142-
Button = toCustomElement(customButton, 'button')
143-
document.registerElement('custom-button', Button)
144-
```
145-
146-
```elm
147-
-- Component.elm
148-
main =
149-
node "custom-button" [] []
150-
```
151-
```html
152-
<div id="main"></div>
153-
<script src="component.js"></script>
154-
<script src="index.js"></script>
155-
<script>
156-
var node = document.getElementById('body')
157-
var app = Elm.Component.embed(node)
158-
</script>
159-
```
160-
161146
## See Also
162-
- [yoshuawuyts/nanocomponent][nc]
147+
- [choojs/nanocomponent][nc]
163148
- [shama/bel](https://github.com/shama/bel)
164149

165150
## License
@@ -169,12 +154,10 @@ main =
169154
[1]: https://nodejs.org/api/documentation.html#documentation_stability_index
170155
[2]: https://img.shields.io/npm/v/nanocomponent-adapters.svg?style=flat-square
171156
[3]: https://npmjs.org/package/nanocomponent-adapters
172-
[4]: https://img.shields.io/travis/yoshuawuyts/nanocomponent-adapters/master.svg?style=flat-square
173-
[5]: https://travis-ci.org/yoshuawuyts/nanocomponent-adapters
174-
[6]: https://img.shields.io/codecov/c/github/yoshuawuyts/nanocomponent-adapters/master.svg?style=flat-square
175-
[7]: https://codecov.io/github/yoshuawuyts/nanocomponent-adapters
157+
[4]: https://img.shields.io/travis/choojs/nanocomponent-adapters/master.svg?style=flat-square
158+
[5]: https://travis-ci.org/choojs/nanocomponent-adapters
176159
[8]: http://img.shields.io/npm/dm/nanocomponent-adapters.svg?style=flat-square
177160
[9]: https://npmjs.org/package/nanocomponent-adapters
178161
[10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
179162
[11]: https://github.com/feross/standard
180-
[nc]: https://github.com/yoshuawuyts/nanocomponent
163+
[nc]: https://github.com/choojs/nanocomponent

‎custom-element.js‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎example.js‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,37 @@
1-
var component = require('nanocomponent')
1+
var Nanocomponent = require('nanocomponent')
22
var reactDom = require('react-dom')
33
var react = require('react')
44
var html = require('bel')
55
var toReact = require('./react')
66

77
// create new nanocomponent
8-
var Button = component({
9-
render: function (data) {
10-
return html`
11-
<button>hello planet</button>
12-
`
13-
}
14-
})
8+
function Button () {
9+
if (!(this instanceof Button)) return new Button()
10+
this.color = null
1511

16-
Button = toReact(Button, react)
12+
Nanocomponent.call(this)
13+
}
14+
Button.prototype = Object.create(Nanocomponent.prototype)
15+
16+
Button.prototype.handleClick = function () {
17+
console.log('yay')
18+
}
19+
20+
Button.prototype.createElement = function ({color}) {
21+
this.color = color
22+
return html`
23+
<button onclick=${this.handleClick} style="background-color: ${color}">
24+
Click Me
25+
</button>
26+
`
27+
}
28+
29+
// Implement conditional rendering
30+
Button.prototype.update = function ({newColor}) {
31+
return newColor !== this.color
32+
}
33+
34+
var ReactButton = toReact(Button, react)
1735
var el = document.createElement('div')
1836
document.body.appendChild(el)
19-
reactDom.render(react.createElement(Button), el)
37+
reactDom.render(react.createElement(ReactButton, { color: 'green' }), el)

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@
1010
},
1111
"dependencies": {},
1212
"devDependencies": {
13-
"bankai": "^5.2.1",
13+
"bankai": "^8.1.1",
1414
"dependency-check": "^2.7.0",
15-
"nanocomponent": "^1.1.0",
15+
"nanocomponent": "^6.0.0-1",
1616
"react": "^15.4.2",
1717
"react-dom": "^15.4.2",
18-
"standard": "^8.6.0"
18+
"standard": "^10.0.3"
1919
},
2020
"keywords": [
2121
"nanocomponent",

0 commit comments

Comments
 (0)