create web components using cyclejs

cycle-wc.ts

function transform(i: Object, fun: (value: any, key: string) => any) {
  const out = {}
  const keys = Object.keys(i)
  keys.map((key, index) => out[key] = fun(i[key], key))
  return out
}

export class CycleHTMLElement extends HTMLElement {

  private __main: Function
  private __drivers: { [name: string]: Function }
  private __run: Function
  private __dispose: Function
  private shadowRoot: Document

  constructor(run: Function, main: Function, drivers: any) {
    super()
    this.__run = run
    this.__main = main
    this.__drivers = transform(
      drivers,
      (driver) => (sources) => driver(sources, this)
    )
  }

  createdCallback() {
    this.shadowRoot = this.attachShadow({ mode: "open" })
    this.__dispose = this.__run(this.__main, this.__drivers)
  }

  detachedCallback() {
    this.__dispose()
  }
}