Render your virtual DOM with React in a TSERSful way.

npm i --save @tsers/react

@tsers/react provides a factory function which can be used to construct the actual interpreter. That factory function takes one mandatory parameter: rootElement which defines the root element for the rendered application. The given root element can be one of the following:

• DOM Node
• Query selector (string)

import TSERS from "@tsers/core"
import ReactDOM from "@tsers/react"
import main from "./YourApp"

TSERS(main, {
  DOM: ReactDOM("#app")       // equivalent to ReactDOM(document.getElementById("app"))
})

React DOM interpreter provides the following signal transform functions

Hyperscript helper function for React element (VNode) creation

Example:

function main({DOM}) {
  const {h} = DOM
  const vnode = h("h1.title", {style: {color: "red"}}, "Tsers!")
  // ...
}

Takes a stream of ReactElements and returns a stream of prepared ReactElements. Prepared ReactElements are elements that can produce events via DOM.events transform function.

React interpreter also expects that the output signals are prepared by using the prepare signal transformer.

function main({DOM}) {
  const {h} = DOM 
  const vdom$ = DOM.prepare(Observable.just(h("h1.title", "Tsers!")))
  // ...
}

Takes a stream of prepared react elements, CSS query selector and the listened event type and returns DOM events belonging to the given prepared elements. If the given element stream is not prepared with prepare transform function first, events displays a warning and returns an empty observable sequence.

function main({DOM}) {
  const {h} = DOM 
  const vdom$ = DOM.prepare(Observable.just(
    h("div", [
      h("button.inc", "++"),
      h("button.dec", "--")
    ])))
  
  const incClick$ = DOM.events(vdom$, ".inc", "click")
  const decClick$ = DOM.events(vdom$, ".dec", "click")
  // ...
}

Just a reference to the underlying react instance. Use this if you want to e.g. use JSX in your application.

function main({DOM}) {
  const {React} = DOM 
  const vdom$ = DOM.prepare(Observable.just(
    <div>
      <button className="inc">++</button>
      <button className="dec">--</button>
    </div>))
  
  const incClick$ = DOM.events(vdom$, ".inc", "click")
  const decClick$ = DOM.events(vdom$, ".dec", "click")
  // ...
}

React DOM interpreter expects a stream of prepared react elements. Those elements will be rendered to the root node every time when the output stream produces new signals (virtual dom changes).

function main({DOM, mux}) {
  const {h} = DOM
  const vdom$ = DOM.prepare(Observable.just(h("h1.title", "Tsers!")))
  return mux({
    DOM: vdom$
  })
}

MIT