How to use the framework.fromDOMEvent function in framework

import "setimmediate"
import "./index.less"
import K from "kefir"
import * as R from "ramda"
import React from "react"
import ReactDOM from "react-dom"
import {APP_KEY} from "./meta"
import * as F from "framework"
import app from "./root"

let sources = {
  state$: K.pool(),
  DOM: F.fromDOMEvent("#" + APP_KEY),
}

let sinks = app(
  R.over("state$", x => x.toProperty(), sources),
  APP_KEY
)

// Use window.state and cleanup after SSR
sources.state$.plug(K.constant(window.state))
delete window.state
document.querySelector("#rootState").outerHTML = ""

sinks.state$.skipDuplicates(R.equals).observe(state => {
  sources.state$.plug(K.constant(state))
})

import K from "kefir"
import React from "react"
import ReactDOM from "react-dom"
import Q from "querystring"
import "shims"
import {appKey} from "./meta"
import app from "./root"

import "./index.less"

let toProperty = (x) => x.toProperty().skipDuplicates(R.equals)

// APP RUN -----------------------------------------------------------------------------------------
let sources = {
  state$: K.pool(),
  DOM: fromDOMEvent("#" + appKey),
}

let sinks = app(
  R.over2("state$", toProperty, sources),
  appKey
)

if (window.state) {
  sources.state$.plug(K.constant(R.clone(window.state)))
}

sinks.state$.observe(state => {
  setImmediate(() => {
    sources.state$.plug(K.constant(state))
  })
})

res.send(layout200cut({
      appKey,
      appHTML: "",
      state: {},
      project,
    }))
  } else*/ if (req.query.noSSR) {
    res.send(layout200({
      appKey,
      appHTML: "",
      state: R.merge(seed, {url: req.originalUrl}),
    }))
  } else {
    let sources = {
      state$: K.pool(),
      DOM: fromDOMEvent("#" + appKey),
    }

    let sinks = app(
      R.over2("state$", toProperty, sources),
      appKey
    )

    sources.state$.plug(K.constant(R.merge(seed, {url: req.originalUrl})))

    let finalState$ = sinks.state$
      .throttle(10)
      .skipDuplicates(R.equals) // TODO recheck this line
      .skipWhile(hasLoadingApps)
      .merge(timeoutError(500))
      .take(1)
      .takeErrors(1)

router.get("/*", (req, res) => {
  // Dynamic imports
  let app = require("client/root").default
  let {seed} = require("client/root")
  let {APP_KEY} = require("client/meta")

  // With SSR
  let sources = {
    state$: K.pool(),
    DOM: F.fromDOMEvent("#" + APP_KEY),
  }

  let sinks = app(
    R.over("state$", x => x.toProperty(), sources),
    APP_KEY
  )

  sources.state$.plug(K.constant(R.merge(seed, {url: req.originalUrl})))

  sinks.state$.observe(state => {
    sources.state$.plug(K.constant(state))
  })

  sinks.state$
    .skip(1)                                     // skip initial state
    .merge(K.later(500, sinks.state$).flatMap()) // timeout 500

import {fromDOMEvent, poolProp} from "framework"
import React from "react"
import ReactDOM from "react-dom"
import "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 "setimmediate"
import K from "kefir"
import * as R from "ramda"
import React from "react"
import ReactDOM from "react-dom"
import {APP_KEY} from "./meta"
import * as F from "framework"
import app from "./root"

let sources = {
  state$: K.pool(),
  DOM: F.fromDOMEvent("#" + APP_KEY),
}

let sinks = app(
  R.over("state$", x => x.toProperty(), sources),
  APP_KEY
)

// Use window.state and cleanup after SSR
sources.state$.plug(K.constant(window.state))
delete window.state
document.querySelector("#rootState").outerHTML = ""

sinks.state$.observe(state => {
  sources.state$.plug(K.constant(state))
})