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

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

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$,

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, {})

  // STATE
  let state$ = D.run(
    () => D.makeStore({}),
    D.withLog({key}),
    D.withLocalStoragePersistence({key: "4.todos.root"}),
  )(
    D.init(seed),

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

    addSinks.action$,
    indexSinks.action$,

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

.map(url => {
      if (url == "/") {
        return {Component: Home, action$: K.never()}
      } else if (url == "/page1") {
        return R.merge(
          {Component: () => null, action$: K.never()},
          isolateDOM(page1App, key + ".page1")(sources, {})
        )
      } else if (url == "/page2") {
        return R.merge(
          {Component: () => null, action$: K.never()},
          isolateDOM(page2App, key + ".page2")(sources, {})
        )
      } else if (url == "/page3") {
        return R.merge(
          {Component: () => null, action$: K.never()},
          isolateDOM(page3App, key + ".page3")(sources, {})
        )
      } else {
        return {Component: NotFound, action$: K.never()}
      }
    }
  ).toProperty()

if (url == "/") {
        return {Component: Home, action$: K.never()}
      } else if (url == "/page1") {
        return R.merge(
          {Component: () => null, action$: K.never()},
          isolateDOM(page1App, key + ".page1")(sources, {})
        )
      } else if (url == "/page2") {
        return R.merge(
          {Component: () => null, action$: K.never()},
          isolateDOM(page2App, key + ".page2")(sources, {})
        )
      } else if (url == "/page3") {
        return R.merge(
          {Component: () => null, action$: K.never()},
          isolateDOM(page3App, key + ".page3")(sources, {})
        )
      } else {
        return {Component: NotFound, action$: K.never()}
      }
    }
  ).toProperty()

.map(url => {
      if (url == "/") {
        return {Component: Home, action$: K.never()}
      } else if (url == "/page1") {
        return R.merge(
          {Component: () => null, action$: K.never()},
          isolateDOM(page1App, key + ".page1")(sources, {})
        )
      } else if (url == "/page2") {
        return R.merge(
          {Component: () => null, action$: K.never()},
          isolateDOM(page2App, key + ".page2")(sources, {})
        )
      } else if (url == "/page3") {
        return R.merge(
          {Component: () => null, action$: K.never()},
          isolateDOM(page3App, key + ".page3")(sources, {})
        )
      } else {
        return {Component: NotFound, action$: K.never()}
      }
    }
  ).toProperty()