UNPKG

@cycle/html

Version:

A driver for HTML strings based on Snabbdom and the DOM driver

51 lines (50 loc) 2.86 kB
export { HTMLSource } from './HTMLSource'; /** * A factory for the HTML driver function. * * Takes an `effect` callback function and an `options` object as arguments. The * input to this driver is a stream of virtual DOM objects, or in other words, * Snabbdom "VNode" objects. The output of this driver is a "DOMSource": a * collection of Observables queried with the methods `select()` and `events()`. * * The HTML Driver is supplementary to the DOM Driver. Instead of producing * elements on the DOM, it generates HTML as strings and does a side effect on * those HTML strings. That side effect is described by the `effect` callback * function. So, if you want to use the HTML Driver on the server-side to render * your application as HTML and send as a response (which is the typical use * case for the HTML Driver), you need to pass something like the * `html => response.send(html)` function as the `effect` argument. This way, * the driver knows what side effect to cause based on the HTML string it just * rendered. * * The HTML driver is useful only for that side effect in the `effect` callback. * It can be considered a sink-only driver. However, in order to serve as a * transparent replacement to the DOM Driver when rendering from the server, the * HTML driver returns a source object that behaves just like the DOMSource. * This helps reuse the same application that is written for the DOM Driver. * This fake DOMSource returns empty streams when you query it, because there * are no user events on the server. * * `DOMSource.select(selector)` returns a new DOMSource with scope restricted to * the element(s) that matches the CSS `selector` given. * * `DOMSource.events(eventType, options)` returns an empty stream. The returned * stream is an *xstream* Stream if you use `@cycle/xstream-run` to run your app * with this driver, or it is an RxJS Observable if you use `@cycle/rxjs-run`, * and so forth. * * `DOMSource.elements()` returns the stream of HTML string rendered from your * sink stream of virtual DOM. The alternative method `DOMSource.element()` does * the same (it only exists to be compatible with DOMSource from `@cycle/dom`). * * @param {Function} effect a callback function that takes a string of rendered * HTML as input and should run a side effect, returning nothing. * @param {HTMLDriverOptions} options an object with two optional properties: * - `transposition: boolean` enables/disables transposition of inner streams in * the virtual DOM tree. * - `reportSnabbdomError: (err: any) => void` overrides the default error reporter function. * @return {Function} the HTML driver function. The function expects a stream of * VNode as input, and outputs the DOMSource object. * @function makeHTMLDriver */ export { makeHTMLDriver, HTMLDriverOptions } from './makeHTMLDriver';