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

import {fromDOMEvent, poolProp} from "vendors/framework"
import "vendors/shims"
import React from "react"
import ReactDOM from "react-dom"
import app from "./root"

let APP_KEY = "root"

// Prepare sources
let sources = {
  DOM: fromDOMEvent("#" + APP_KEY),
  state$: poolProp(),
}

// Prepare props
let props = {
  key: APP_KEY,
  url: document.location.href.replace(document.location.origin, ""),
}

// Run app to get sinks
let sinks = app(sources, props)

// Cycle the root state
sinks.state$.observe(sources.state$.plug)

// Render the Component sink

import {fromDOMEvent, poolProp} from "vendors/framework"
import React from "react"
import ReactDOM from "react-dom"
import "vendors/shims"
import app from "./root"

let APP_KEY = "root"

// Prepare sources
let sources = {
  DOM: fromDOMEvent("#" + APP_KEY),
  state$: poolProp(),
}

// Prepare props
let props = {
  key: APP_KEY,
}

// Run app to get sinks
let sinks = app(sources, props)

// Cycle the root state
sinks.state$.observe(sources.state$.plug)

// Render the Component sink
ReactDOM.render(, document.getElementById(APP_KEY))

import Q from "querystring"
import K from "kefir"
import React from "react"
import ReactDOM from "react-dom"
import "vendors/shims"
import {derive, fromDOMEvent, poolProp} from "vendors/framework"
import {APP_KEY} from "./meta"
import app, {seed} from "./root"
import "./index.less"

let qs = Q.parse(document.location.search.slice(1))
let ssr = !("noSSR" in qs)

// Prepare sources
let sources = {
  DOM: fromDOMEvent("#" + APP_KEY),
  state$: poolProp(ssr ? window[APP_KEY].state : seed),
}

// Prepare props
let props = {
  key: APP_KEY,
  url: document.location.href.replace(document.location.origin, ""),
}

// Run app to get sinks
let sinks = app(sources, props)

// Cycle the root state
sinks.state$.observe(sources.state$.plug)

// Side-effects

import {fromDOMEvent, poolProp} from "vendors/framework"
import Q from "querystring"
import React from "react"
import ReactDOM from "react-dom"
import "vendors/shims"
import {APP_KEY} from "./meta"
import app from "./root"

import "./index.less"

// Prepare sources
let sources = {
  DOM: fromDOMEvent("#" + APP_KEY),
  state$: poolProp(),
}

// Prepare props
let props = {
  key: APP_KEY,
  url: document.location.href.replace(document.location.origin, ""),
}

// Run app to get sinks
let sinks = app(sources, props)

// Cycle the root state
sinks.state$.observe(sources.state$.plug)

// Render the Component sink

import {fromDOMEvent, poolProp} from "vendors/framework"
import "vendors/shims"
import React from "react"
import ReactDOM from "react-dom"
import app from "./root"

let APP_KEY = "root"

// Prepare sources
let sources = {
  DOM: fromDOMEvent("#" + APP_KEY),
  state$: poolProp(),
}

// Prepare props
let props = {
  key: APP_KEY,
}

// Run app to get sinks
let sinks = app(sources, props)

// Cycle the root state
sinks.state$.observe(sources.state$.plug)

// Render the Component sink
ReactDOM.render(, document.getElementById(APP_KEY))

import {fromDOMEvent, poolProp} from "vendors/framework"
import "vendors/shims"
import React from "react"
import ReactDOM from "react-dom"
import app from "./root"

let APP_KEY = "root"

// Prepare sources
let sources = {
  DOM: fromDOMEvent("#" + APP_KEY),
  state$: poolProp(),
}

// Prepare props
let props = {
  key: APP_KEY,
  url: document.location.href.replace(document.location.origin, ""),
}

// Run app to get sinks
let sinks = app(sources, props)

// Cycle the root state
sinks.state$.observe(sources.state$.plug)

// Render the Component sink

import React from "react"
import ReactDOM from "react-dom"
import "vendors/shims"
import {fromDOMEvent, poolProp} from "vendors/framework"
import {APP_KEY} from "./meta"
import app, {seed} from "./root"
import "./index.less"

// Prepare sources
let sources = {
  DOM: fromDOMEvent("#" + APP_KEY),
  state$: poolProp(seed),
}

// Prepare props
let props = {
  key: APP_KEY,
  url: document.location.href.replace(document.location.origin, ""),
}

// Run app to get sinks
let sinks = app(sources, props)

// Cycle the root state
sinks.state$.observe(sources.state$.plug)

// Start rendering the state on the first route

router.get("/*", (req, res, next) => {
  let canonicalUrl = `${req.protocol}://${global.host}${req.originalUrl}`

  // SSR
  if ("noSSR" in req.query) {
    return res.send(appLayout({
      appKey: APP_KEY,
      appHTML: "",
      state: clientSeed,
      url: canonicalUrl,
    }))
  } else {
    // Note: simplified, perfect SSR happens in a separate process
    // Prepare sources
    let sources = {
      DOM: fromDOMEvent("#" + APP_KEY),
      state$: poolProp(clientSeed),
    }

    // Prepare props
    let props = {
      key: APP_KEY,
      url: req.originalUrl,
    }

    // Run clientApp to get sinks
    let sinks = clientApp(sources, props)

    let finalState$ = K.fromProperty(sinks.state$)
      .skipWhile(hasLoadingApps)
      .debounce(50) // necessary to wait for sync events to finish, DO NOT remove
      .merge(timeoutError(3000))