How to use the vendors/framework.connect function in vendors

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>

).$

  let cart$ = state$.map(state => {
    let products = R.pipe(
      R.pick(R.keys(state.cartPicks)),
      R.values,
      R.filter(state.cartFilterFn),
      R.sort(state.cartSortFn),
    )(state.products)

    let picks = state.cartPicks

    return {products, picks}
  })

  let Cart = connect({cart: cart$}, CartIndex)

  // COMPONENT
  let Component = () =>
    <div>
      
      <hr>
      
    </div>

  return {state$, Component}
}

}),

    // 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})
    return function addTodo(state) {
      return R.set2(["todos", todo.id], todo, state)
    }
  })

  let Component = connect(
    {todo: form$},
    TodoForm,
  )

  return {action$, Component}
}

table: posts$,
    },
    ({index, table}) => {
      if (!table) return null
      let filterFn = makeFilterFn(index.filters)
      let sortFn = makeSortFn(index.sort)
      return R.pipe(
        R.values,
        R.filter(filterFn),
        R.sort(sortFn),
      )(table)
    }
  )

  // COMPONENT
  let Component = connect(
    {
      index: index$,
      posts: indexPosts$,
      loading: loading$,
    },
    PostIndex
  )

  // ACTIONS
  let action$ = K.merge([
    posts$
      .filter(posts => {
        // Use local `offset` and `limit` here to detect missing posts
        return !posts || R.keys(posts).length < 12
      })
      .flatMapConcat(posts => K.stream(async (emitter) => {

export default (sources, {key}) => {
  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)),
  }

  let action$ = K.merge([
    intents.inc$.map(_ => R.over2("page3", R.inc)),
    intents.dec$.map(_ => R.over2("page3", R.dec)),
  ])

  let Component = connect(
    {counter: sources.state$.map(s => s.page3)},
    ({counter}) =>
      <div>
        Page 3: {counter} <button data-key="inc">+1</button> <button data-key="dec">-1</button>
        <p><i>Root State persistence (memory)</i></p>
      </div>
  )

  return {action$, Component}
}

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

  let state$ = D.run(
    () => D.makeStore({}),
    D.withLog({key}),
    D.withMemoryPersistence({key}),
  )(
    D.init(0),
    intents.inc$.map(_ => R.inc),
    intents.dec$.map(_ => R.dec),
  ).$

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

  return {Component}
})

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>
    )

  return {state$, Component}
}

({index, todos}) => {
      return R.pipe(
        R.values,
        R.filter(index.filterFn),
        R.sort(index.sortFn),
      )(todos)
    }
  )

  let action$ = K.merge([
    intents.toggleTodo$.map(id => function toggleTodo(state) {
      return R.over2(["todos", id, "completed"], R.not, state)
    }),
  ])

  let Component = connect(
    {todos: todos$},
    TodoIndex,
  )

  return {action$, Component}
}

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 action$ = K.merge([
    intents.inc$.map(_ => R.inc),
    intents.dec$.map(_ => R.dec),
  ])

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

  return {action$, Component}
}