choop

v3.2.1

Published

2 years ago

Choo x Preact

Downloads

0High
0Medium
0Low

amongiants

choo preact client frontend framework minimal composable tiny power modules lolreact lolol react no seriously lol

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 🎉🎉🎉🎉

Example

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).

Components

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.

More Examples

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)

FAQ

Should I use this?

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! 🎁

What's the real difference here?

nanomorph is replaced by preact

How do I run react widgets in choop?

Like this:

npm i -S preact preact-compat
npm i -S preact-compat/react preact-compat/react-dom

What's the size?

Something like 8.7 kB

What about choo?

Yeah, what about me? (drumroll)

Installation

$ npm install choop

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme