How to use the kefir.db.withLog function in kefir

counterSub(v, s) {
    return R.over("counter", R.flip(R.subtract)(v), s)
  },
})

// Comparison of approaches:
let action$ = O.of(
  mods.init,
  mods.counterInc,
  mods.counterAdd(2),
  mods.counterSub(2),
).concatMap(x => O.of(x).delay(200))

let state = D.run(
  () => D.makeStore({}),
  D.withLog({key: "db"}),
  D.withControl({}),
)(action$)

state.$.subscribe()

// Next: ???

function increment(s) { return R.over("counter", R.inc, s) },
      function addTwo(s) { return R.over("counter", R.add(2), s) },
    ).concatMap(x => O.of(x).delay(200))
  )
  .concat(O.of
    (
      // Commands
      {fn: R.fn("init", () => seed)},
      {fn: R.over, args: ["counter", R.inc]},
      {fn: R.over, args: ["counter", {fn: R.add, args: [2]}]},
    ).concatMap(x => O.of(x).delay(200))
  )

let state = D.run(
  () => D.makeStore({}),
  D.withLog({key: "db"}),
  D.withControl({}),
)(action$)

state.$.subscribe()

/*
Raw lambdas and curried functions
  @ db λ anonymous
  # db = { counter: 0 }
  @ db λ over_2
  # db = { counter: 1 }
  @ db λ over_2
  # db = { counter: 3 }

ES5-style functions
  @ db λ init

let intents = {
    // unsubscribed on state unsubscribe which happens on willUnmount
    inc$: sources.DOM.fromKey("inc").listen("click").map(R.always(true)),
    dec$: sources.DOM.fromKey("dec").listen("click").map(R.always(true)),
  }

  sources.Component.willMount$.take(1).observe(() => {
    console.log("Page2.app: Component.willMount$")
  })
  sources.Component.willUnmount$.take(1).observe(() => {
    console.log("Page2.app: Component.willUnmount$")
  })

  let state$ = D.run(
    () => D.makeStore({}),
    D.withLog({key}),
    D.withLocalStoragePersistence({key: "3.1.pages." + key}),
  )(
    D.init(0),
    intents.inc$.map(_ => R.inc),
    intents.dec$.map(_ => R.dec),
  ).$

  let Component = connect(
    {counter: state$},
    ({counter}) =>
      <div>
        Page 2: {counter} <button data-key="inc">+1</button> <button data-key="dec">-1</button>
        <p><i>Local Storage persistence</i></p>
      </div>
  )

export default (sources, {key}) => {
  let intents = {
    toggleTodo$: sources.DOM.fromKey("item").listen("click")
      .map(ee => ee.element.dataset.val),

    setFilter$: sources.DOM.fromKey("filter").listen("click")
      .map(ee => (ee.event.preventDefault(), ee))
      .map(ee => ee.element.dataset.val),
  }

  let state$ = D.run(
    () => D.makeStore({assertFn: R.id}),
    D.withLog({key}),
  )(
    D.init(seed),

    // Updates
    intents.setFilter$.map(filter => function setFilter(state) {
      let filterFn = R.id
      if (filter == "completed") {
        filterFn = isCompleted
      } else if (filter == "active") {
        filterFn = isActive
      }
      return R.set2("filterFn", filterFn, state)
    }),
  ).$

  let todos$ = deriveObj(

export default (sources, {key}) => {
  let intents = {
    inputText$: sources.DOM.from("input[name=text]").listen("input")
      .map(ee => ee.element.value),

    submitForm$: sources.DOM.from("form").listen("submit")
      .map(ee => (ee.event.preventDefault(), ee))
      .map(R.always(true)),
  }

  let form$ = D.run(
    () => D.makeStore({}),
    D.withLog({key}),
  )(
    D.init(seed),

    // Updates
    intents.inputText$.map(text => function inputText(state) {
      return R.set2("text", text, state)
    }),

    // Resets
    intents.submitForm$.delay(1).map(_ => function reset(state) {
      return seed
    }),
  ).$

  let action$ = form$.sampledBy(intents.submitForm$).map(form => {
    let todo = makeTodo({text: form.text})

let a2Sinks = isolateDOM(aApp, "a2")(sources, {title: "CounterA2"})
  // a*Sinks :: {Component}

  // Counters B* have their own states, visible outside
  let b1Sinks = isolateDOM(bApp, "b1")(sources, {title: "CounterB1"})
  let b2Sinks = isolateDOM(bApp, "b2")(sources, {title: "CounterB2"})
  // b*Sinks :: {Component, state$}

  // Counters C* use the root state$ and modify it via `action$` sink
  let c1Sinks = isolateState(isolateDOM(cApp, "c1"), "c1")(sources, {title: "CounterC1"})
  let c2Sinks = isolateState(isolateDOM(cApp, "c2"), "c2")(sources, {title: "CounterC2"})
  // c*Sinks :: {Component, action$}

  let state$ = D.run(
    () => D.makeStore({}),
    D.withLog({key}),
  )(
    D.init(seed),

    // Counters A* are irrelevant here

    // Counters B* will work without the root state
    b1Sinks.state$.skip(1).map(R.set2("b1")),
    b2Sinks.state$.skip(1).map(R.set2("b2")),

    // Counters C* won't work without the root state
    c1Sinks.action$,
    c2Sinks.action$,
  ).$

  let Component = (props) => {
    return <div></div>

export default (sources, {key}) => {
  let intents = {
    inputText$: sources.DOM.from("input[name=text]").listen("input")
      .map(ee => ee.element.value),

    submitForm$: sources.DOM.from("form").listen("submit")
      .map(ee => (ee.event.preventDefault(), ee))
      .map(R.always(true)),
  }

  let form$ = D.run(
    () => D.makeStore({}),
    D.withLog({key}),
  )(
    D.init(seed),

    // Updates
    intents.inputText$.map(text => function inputText(state) {
      return R.set2("text", text, state)
    }),

    // Resets
    intents.submitForm$.delay(1).map(_ => function reset(state) {
      return seed
    }),
  ).$

  let action$ = form$.sampledBy(intents.submitForm$).map(form => {
    let todo = makeTodo({text: form.text})

export default (sources, {key}) => {
  let intents = {
    inc$: sources.DOM.fromKey("inc").listen("click").map(R.always(true)),
    dec$: sources.DOM.fromKey("dec").listen("click").map(R.always(true)),
    add$: sources.DOM.fromKey("add").listen("click").map(({element}) => Number(element.dataset.val)),
    sub$: sources.DOM.fromKey("sub").listen("click").map(({element}) => Number(element.dataset.val)),
  }

  let state$ = D.run(
    () => D.makeStore({}),
    D.withLog({key}),
  )(
    D.init(0),

    intents.inc$.map(_ => R.inc),
    intents.dec$.map(_ => R.dec),
    intents.add$.map(v => R.add(v)),
    intents.sub$.map(v => R.flip(R.subtract)(v)),
  ).$

  let Component = connect(
    {counter: state$},
    ({counter}) =>
      <p>
        Counter: <span>{counter}</span>
        {" "}
        <button data-key="inc">+1</button></p>

export default (sources, {key, title}) => {
  let intents = {
    inc$: sources.DOM.fromKey("inc").listen("click").map(R.always(true)),
    dec$: sources.DOM.fromKey("dec").listen("click").map(R.always(true)),
  }

  let state$ = D.run(
    () => D.makeStore({}),
    D.withLog({key}),
  )(
    D.init(0),

    intents.inc$.map(_ => R.inc),
    intents.dec$.map(_ => R.dec),
  ).$

  let Component = connect(
    {counter: state$},
    ({counter}) =>
      <p>
        {title}: <span>{counter}</span>
        {" "}
        <button data-key="inc">+1</button>
        {" "}
        <button data-key="dec">-1</button></p>

export default (sources, {key, title}) => {
  let intents = {
    inc$: sources.DOM.fromKey("inc").listen("click").map(R.always(true)),
    dec$: sources.DOM.fromKey("dec").listen("click").map(R.always(true)),
  }

  let state$ = D.run(
    () => D.makeStore({}),
    D.withLog({key}),
  )(
    sources.state$.map(R.prop(key)).take(1).map(R.always),

    intents.inc$.map(_ => R.inc),
    intents.dec$.map(_ => R.dec),
  ).$

  let Component = connect(
    {counter: state$},
    ({counter}) =>
      <p>
        {title}: <span>{counter}</span>
        {" "}
        <button data-key="inc">+1</button>
        {" "}
        <button data-key="dec">-1</button></p>