How to use vendors - 10 common examples

export default (sources, {key}) => {
  // INTENTS
  let intents = {
    cartInc$: sources.DOM.fromKey("cart").fromKey("inc").listen("click")
      .map(ee => ee.element.dataset.val),

    cartDec$: sources.DOM.fromKey("cart").fromKey("dec").listen("click")
      .map(ee => ee.element.dataset.val),

    cartCheckout$: sources.DOM.fromKey("cart").fromKey("checkout").listen("click")
      .map(R.always(true)),
  }

  let indexSinks = isolateDOM(productIndex, "index")(sources, {})

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

    // Data load
    K.stream(async (emitter) => {
      let reqResult = await fetchJSON("./products.json")
      if (reqResult instanceof Error) {
        console.warn(dataOrError.message) // Set your custom alerts here
        // if (maybeData.errors) {
        //   console.warn(maybeData.errors)
        // }

let state$ = D.run(
    () => D.makeStore({}),
    // D.withLog({key, input: false, output: true}),
  )(
    // Init
    D.init(seed),

    // Page
    sources.page$.flatMapLatest(sinks => sinks.action$),

    // Load
    loadAction$,
  ).$

  // COMPONENT
  let Component = connect(
    {
      route: sources.route$,
      Content: sources.page$.map(sinks => sinks.Component),
    },
    ({route, Content}) => {
      return <div>
        {new Route("/").match(U.pathname(route.url))
          ? null
          : <p><a href="/">Back to Home</a></p>
        }
        <div>
          <content>
        </content></div>
      </div>
    }
  )

let app = (sources, {key}) => {
  // STATE
  let state$ = D.run(
    () => D.makeStore({}),
    D.withLog({key}),
  )(
    // Init
    D.init(seed),

    // Page
    sources.page.action$,
  ).$

  // COMPONENT
  let Component = connect(
    {
      route: sources.route$,
      Content: sources.page.Component$,
    },
    ({route, Content}) => {
      return <div>
        <div>
          <pre>{`
            URL: ${route.url}
            route.mask: ${route.mask}
            route.params: ${JSON.stringify(route.params)}
          `}</pre>
          
        </div>
        <div>
          <content></content></div></div>

)(
    // Init
    D.init(seed),

    intents.loadNext$.map(_ => s => R.over2("offset", R.add(s.limit), s))
  ).$

  // DATA & LOAD
  let deriveState = derive(sources.state$.throttle(50))
  let loading$ = deriveState("loading")
  let indexes$ = deriveState("indexes")
  let postsTable$ = deriveState(["tables", "7/posts"])
  let usersTable$ = deriveState(["tables", "7/users"])

  let index$ = deriveLazyLoad(indexes$, localIndex$, postIndexQuery)  // :: $ (Array String)
  let postIds$ = derive(index$, "ids")                              // :: $ (Array String)
  let posts$ = deriveModelsArr(postsTable$, postIds$, validate(Post)) // :: $ (Array Post)
  let userIds$ = derive(posts$, R.pipe(R.pluck("userId"), R.uniq))  // :: $ (Array String)
  let users$ = deriveModelsObj(usersTable$, userIds$, validate(User)) // :: $ (Object User)

  let load$ = K.merge([
    index$.map(postIndexQuery),
    postIds$.map(postModelsQuery),
    userIds$.map(userModelsQuery),
  ])

  // COMPONENT
  let Component = connect(
    {
      loading: loading$,
      index: index$,
      posts: posts$,

}

  // STATE
  let localIndex$ = D.run(
    () => D.makeStore({}),
    // D.withLog({key, input: false, output: true}),
    D.withMemoryPersistence({key: "7." + key}),
  )(
    // Init
    D.init(seed),

    intents.loadNext$.map(_ => s => R.over2("offset", R.add(s.limit), s))
  ).$

  // DATA & LOAD
  let deriveState = derive(sources.state$.throttle(50))
  let loading$ = deriveState("loading")
  let indexes$ = deriveState("indexes")
  let postsTable$ = deriveState(["tables", "7/posts"])
  let usersTable$ = deriveState(["tables", "7/users"])

  let index$ = deriveLazyLoad(indexes$, localIndex$, postIndexQuery)  // :: $ (Array String)
  let postIds$ = derive(index$, "ids")                              // :: $ (Array String)
  let posts$ = deriveModelsArr(postsTable$, postIds$, validate(Post)) // :: $ (Array Post)
  let userIds$ = derive(posts$, R.pipe(R.pluck("userId"), R.uniq))  // :: $ (Array String)
  let users$ = deriveModelsObj(usersTable$, userIds$, validate(User)) // :: $ (Object User)

  let load$ = K.merge([
    index$.map(postIndexQuery),
    postIds$.map(postModelsQuery),
    userIds$.map(userModelsQuery),
  ])

D.init(seed),

    intents.loadNext$.map(_ => s => R.over2("offset", R.add(s.limit), s))
  ).$

  // DATA & LOAD
  let deriveState = derive(sources.state$.throttle(50))
  let loading$ = deriveState("loading")
  let indexes$ = deriveState("indexes")
  let postsTable$ = deriveState(["tables", "7/posts"])
  let usersTable$ = deriveState(["tables", "7/users"])

  let index$ = deriveLazyLoad(indexes$, localIndex$, postIndexQuery)  // :: $ (Array String)
  let postIds$ = derive(index$, "ids")                              // :: $ (Array String)
  let posts$ = deriveModelsArr(postsTable$, postIds$, validate(Post)) // :: $ (Array Post)
  let userIds$ = derive(posts$, R.pipe(R.pluck("userId"), R.uniq))  // :: $ (Array String)
  let users$ = deriveModelsObj(usersTable$, userIds$, validate(User)) // :: $ (Object User)

  let load$ = K.merge([
    index$.map(postIndexQuery),
    postIds$.map(postModelsQuery),
    userIds$.map(userModelsQuery),
  ])

  // COMPONENT
  let Component = connect(
    {
      loading: loading$,
      index: index$,
      posts: posts$,
      users: users$,
    },

)(
    // Init
    D.init(seed),

    intents.loadNext$.map(_ => s => R.over2("offset", R.add(s.limit), s))
  ).$

  // DATA & LOAD
  let deriveState = derive(sources.state$.throttle(50))
  let loading$ = deriveState("loading")
  let indexes$ = deriveState("indexes")
  let postsTable$ = deriveState(["tables", `${params.subset}/posts`])
  let usersTable$ = deriveState(["tables", `${params.subset}/users`])

  let index$ = deriveLazyLoad(indexes$, localIndex$, postIndexQuery)  // :: $ (Array String)
  let postIds$ = derive(index$, "ids")                                // :: $ (Array String)
  let posts$ = deriveModelsArr(postsTable$, postIds$, validate(Post)) // :: $ (Array Post)
  let userIds$ = derive(posts$, R.pipe(R.pluck("userId"), R.uniq))    // :: $ (Array String)
  let users$ = deriveModelsObj(usersTable$, userIds$, validate(User)) // :: $ (Object User)

  let load$ = K.merge([
    index$.map(postIndexQuery),
    postIds$.map(postModelsQuery),
    userIds$.map(userModelsQuery),
  ])

  // COMPONENT
  let Component = connect(
    {
      loading: loading$,
      index: index$,
      posts: posts$,

export default (sources, {key}) => {
  // INTENTS
  let intents = {
    reset$: sources.DOM.fromKey("reset").listen("click")
      .map(ee => (ee.event.preventDefault(), ee))
      .map(R.always(true)),
  }

  let addSinks = isolateDOM(addApp, "add")(sources, {})
  let indexSinks = isolateDOM(indexApp, "index")(sources, {})
  let historySinks = isolateDOM(historyApp, "history")(sources, {})

  // STATE
  let state$ = D.run(
    () => D.makeStore({}),
    D.withLog({key}),                                                    // 1) this logger is aware of history
    D.withLocalStoragePersistence({key: "5.todos-history.root"}),        // 3) this storage is aware of history
    D.withHistory({}),
    // D.withLog({key}),                                                 // 2) this logger is unaware of history
    // D.withLocalStoragePersistence({key: "5.todos-history_2." + key}), // 4) this storage is unaware of history
  )(
    D.init(seed),

    intents.reset$.map(_ => function reset(state) {
      return seed
    }),

export default (sources, {key}) => {
  // INTENTS
  let intents = {
    reset$: sources.DOM.fromKey("reset").listen("click")
      .map(ee => (ee.event.preventDefault(), ee))
      .map(R.always(true)),
  }

  let addSinks = isolateDOM(addApp, "add")(sources, {})
  let indexSinks = isolateDOM(indexApp, "index")(sources, {})
  let historySinks = isolateDOM(historyApp, "history")(sources, {})

  // STATE
  let state$ = D.run(
    () => D.makeStore({}),
    D.withLog({key}),                                                    // 1) this logger is aware of history
    D.withLocalStoragePersistence({key: "5.todos-history.root"}),        // 3) this storage is aware of history
    D.withHistory({}),
    // D.withLog({key}),                                                 // 2) this logger is unaware of history
    // D.withLocalStoragePersistence({key: "5.todos-history_2." + key}), // 4) this storage is unaware of history
  )(
    D.init(seed),

    intents.reset$.map(_ => function reset(state) {
      return seed

export default (sources, {key}) => {
  // Counters A* have their own states, invisible outside
  let a1Sinks = isolateDOM(aApp, "a1")(sources, {title: "CounterA1"})
  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$,