6.13.1
Ever wondered what would happen if preact
and choo
got a baby?
Welp, wonder no longer - here's the answer. Full on choo
architecture plus a couple preact
goodies like h()
and components. No JSX, only template strings via hyperx. But you can use JSX if you want to. We even get almost all of the React ecosystem through preact-compat ππππ
var html = require('choop/html')
var devtools = require('choo-devtools')
var choop = require('choop')
var app = choop()
app.use(devtools())
app.use(countStore)
app.route('/', mainView)
app.mount('body')
function mainView (state, emit) {
return html`
<main>
<h1>count is ${state.count}</h1>
<button onclick=${onclick}>Increment</button>
</main>
`
function onclick () {
emit('increment', 1)
}
}
function countStore (state, emitter) {
state.count = 0
emitter.on('increment', function (count) {
state.count += count
emitter.emit('render')
})
}
See? Same same as choo
!
Only difference is preact
will append our app to the element passed into mount
. So instead of our main view returning <body>
we return <main>
(or whatever we want the root to be).
You can create stateful components right out of the box with choop
:
var Component = require('choop/component')
var html = require('choop/html')
class ClickMe extends Component {
constructor () {
super()
this.state = { n: 0 }
this.handleClick = () => {
this.setState({ n: this.state.n + 1 })
}
}
render (props, state) {
return html`
<div>
<h1>clicked ${state.n} times</h1>
<button onClick=${this.handleClick}>click me!</button>
</div>
`
}
}
And then render them in your views using h()
:
var html = require('choop/html')
var h = require('choop/h')
var ClickMe = require('./ClickMe')
function view (state, emit) {
return html`
<body>
${h(ClickMe)}
</body>
`
}
Optionally pass data a.k.a. props
:
h(MyComponent, { someData: 'beep' })
You can use props
or an additional constructor function to pass emit
into your components.
state.cache
choo
version 6.11.0
introduced a state.cache
helper for managing nanocomponent
instances. This is not included in choop
since component instance management is taken care of by preact
.
- Basic: https://esnextb.in/?gist=f9f339a9d108f156aa885bca96723d36
- Using JSX: https://esnextb.in/?gist=84fd53fc0ea53240da89bef9573c9644
- Rendering
choop
(preact
) component: https://esnextb.in/?gist=28005d951a7347fb652eab669c5ffa1e - Rendering
Nanocomponent
: https://esnextb.in/?gist=01daeea0b216632edf3f0e27b8f0b89a - Rendering
React
component: https://choop-react.glitch.me/ (source)
Sometimes you gotta use react
, and the best thing to do in that case might be to jump on the preact
train, grab a bag of architecture and go to town. This might not be for me, but perhaps it's useful for you. Here you go! π
nanomorph
is replaced by preact
Like this:
npm i -S preact preact-compat
npm i -S preact-compat/react preact-compat/react-dom
Something like 8.7 kB
Yeah, what about me? (drumroll)
$ npm install choop