Bottom-up-MÖLLYKKÄ

application.js

import React from "react"
import {combineAsArray} from "baconjs"
import Counter from "./components/counter"
import BigList from "./components/bigList"

export default initialState => (
  combineAsArray(Counter(initialState), BigList()).map(
    ([$counter, $list]) => (
      <div>
        <h1>Tsers!</h1>
        {$counter}
        {$list}
      </div>
    )
  )
)

bigList.js

import React from "react"
import Bacon from "baconjs"
import {range} from "lodash"

export default () => (
  Bacon.constant(range(100000)).map(items => (
    <ul>
      {items.map(it => <li key={it}>item #{it}</li>)}
    </ul>
  ))
)

counter.js

import React from "react"
import {createAction} from "megablob"

const increment = createAction()
const decrement = createAction()

function stateP({counter = 0}) {
  return increment.$
    .map(1)
    .merge(decrement.$.map(-1))
    .scan(counter, (state, delta) => state + delta)
}

export default initialState => (
  stateP(initialState).map(counter => (
    <div>
      Counter value is {counter} ..
      <div>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
      </div>
    </div>
  ))
)

entry.js

import React from "react"
import {render} from "react-dom"
import {startApp} from "megablob"
import {partialRight} from "lodash"
import App from "./application"

const renderApp = partialRight(render, document.getElementById("app"))

startApp(window.INITIAL_STATE, App, renderApp)