The component module exports a factory method, providing a declarative way of generating Kefir.Observables to manage the application UI lifecycle. They are designed to mount an already rendered DOM, with the server providing the DOM and a Kefir.Observable of component props.

component factories can be composed of several Kefir.Observable-returning functions, described below, which form a Kefir.Observable-returning function of its own. All of the configuration is optional; a component that doesn’t do anything may not be particularly useful, but it is valid.

How to Use

A component factory function is generated by passing an configuration object into the factory method.

// dummy.js
import { Kefir, component, events, render } from 'brookjs';
import template from './index.hbs';

export default component({
  events: events({
    onClick: evt$ => evt$.map(() => ({ type: 'DUMMY_CLICK' }))
  render: render(template)

Somewhere else, mount the component to its element and subscribe to its actions:

// app.js
import DummyComponent from './dummy';

const { __INITIAL_STATE__ } = global;

const app = DummyComponent(el.getElementById('app'), __INITIAL_STATE__);

let sub = app.observe({ value: action => console.log(action)});

Each of these configuration options have an associated brookjs module, which exports a factory method for generating these functions from a configuration.