Brookjs components strawman proposal

import { h, component } from 'brookjs'
import { editClick } from '../actions'

// Changes only occur when bound to a stream
export default component({
    render: props$ => (
        
  • {/* Text changes when a value is emitted. */}

    {props$.map(props => props.text)}

    {/* Maps a stream of events to actions. */}
  • ) })
    import { h, component } from 'brookjs'
    import TodoItem from './TodoItem'
    
    export default component({
        render: props$ => (
            

    My Todos

    {/** * `order` provides sequence todos should appear * `dict` provides a performant instance lookup */}
      {props$.map(todos => todos.order.map(key => ( todos.dict[key])} key={key} preplug={instance$ => instance$.map(action => ({ ...action, meta: { key } })} /> )))}
    ) })
    import { h, component } from 'brookjs'
    import TodoList from './TodoList'
    
    export default component({
        render: props$ => (
            

    Todo App

    {/** * Individual attributes respond to observables * Performance optimized inline */} props.editing).skipDuplicates()} onInput={event$ => event$.map(event => editTodo(event.target.value))} /> props.todos)} />
    ) })
    import { createStore, applyMiddleware } from 'redux'
    import { h, observeDelta, Kefir } from brookjs
    import { App } from './components'
    import { selectProps } from './selectors'
    
    const store = createStore(
        (state, action) => state, // reducer
        window.__INITIAL_STATE__ || {},
        applyMiddleware(observeDelta(
            /* register deltas here */
        )
    )
    const state$ = Kefir.fromESObservable(store)
    
    /**
     * `mount` thus takes the DOM to mount
     * and the element to bind it to, and
     * returns a stream. Note that because
     * of how streams work, nothing happens
     * until the stream is observed.
     */
    const view$ = mount(
        ,
        document.getElementById('app')
    )
     
    view$.observe(store.dispatch)
    import { h, component, list } from 'brookjs'
    import TodoItem from './TodoItem'
    
    export default component({
        render: props$ => (
            

    My Todos

      {/* Must be a stream of objects with `order` & `dict` */} {list(props$, (props$, key) => ( instance$.map(action => ({ ...action, meta: { key } })} /> )}
    ) })
    import { createStore, applyMiddleware } from 'redux'
    import { h, observeDelta, Kefir } from brookjs
    import { App } from './components'
    import { selectProps } from './selectors'
    
    const el = document.getElementById('app')
    
    const store = createStore(
        (state, action) => state,
        window.__INITIAL_STATE__ || {},
        applyMiddleware(observeDelta(
            /* register deltas here */
            domDelta({ el, selectProps, view: App })
        )
    )
    
    // Everything is bound to the store immediately,
    // but an init action makes sure everything waits
    // until the store is fully instantiated.
    store.dispatch(init())