node package manager
Stop wasting time. Easily manage code sharing in your team. Create a free org ¬Ľ

rooch

rooch

Full on choo architecture on top of the tiny preact engine.


API stability NPM version Build Status Test Coverage Downloads Standard

Ever wondered what would happen if react 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 support almost all of the React ecosystem through preact-compat.

ūüéČūüéČūüéČūüéČ

Why is this useful? Sometimes you gotta use react, and the best thing to do in that case is 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! ūüéĀ

var html = require('rooch/html')
var rooch = require('rooch')
 
var app = rooch()
app.use(logger)
app.use(countStore)
app.route('/', mainView)
app.mount('body')
 
function mainView (state, emit) {
  return html`
    <body>
      <h1>count is ${state.count}</h1>
      <button onclick=${onclick}>Increment</button>
    </body>
  `
 
  function onclick () {
    emit('increment', 1)
  }
}
 
function logger (state, emitter) {
  emitter.on('*', function (messageName, data) {
    console.log('event', messageName, data)
  })
}
 
function countStore (state, emitter) {
  state.count = 0
  emitter.on('increment', function (count) {
    state.count += count
    emitter.emit('render')
  })
}

See? Same same as choo!

Components

Everything in rooch should be the same, but things can be a little different for components:

var Component = require('rooch/component')
var html = require('rooch/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('rooch/html')
var h = require('rooch/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.

FAQ

Should I use this?

Maybe? If you've got no choice other than using (p)react this might be useful.

How do I run react widgets in rooch?

Like this:

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

What's the size?

Something like 7kb

What about choo?

Yeah, what about me? (drumroll)

Installation

$ npm install rooch