dom/src/index.ts
export {thunk, Thunk, ThunkData} from './thunk';
export {VNode, VNodeData} from 'snabbdom';
export {DOMSource, EventsFnOptions} from './DOMSource';
export {MainDOMSource} from './MainDOMSource';
/**
* A factory for the DOM driver function.
*
* Takes a `container` to define the target on the existing DOM which this
* driver will operate on, and an `options` object as the second argument. 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()`.
*
* **`DOMSource.select(selector)`** returns a new DOMSource with scope
* restricted to the element(s) that matches the CSS `selector` given. To select
* the page's `document`, use `.select('document')`. To select the container
* element for this app, use `.select(':root')`.
*
* **`DOMSource.events(eventType, options)`** returns a stream of events of
* `eventType` happening on the elements that match the current DOMSource. The
* event object contains the `ownerTarget` property that behaves exactly like
* `currentTarget`. The reason for this is that some browsers doesn't allow
* `currentTarget` property to be mutated, hence a new property is created. 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.
*
* **options for DOMSource.events**
*
* The `options` parameter on `DOMSource.events(eventType, options)` is an
* (optional) object with two optional fields: `useCapture` and
* `preventDefault`.
*
* `useCapture` is by default `false`, except it is `true` for event types that
* do not bubble. Read more here
* https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
* about the `useCapture` and its purpose.
*
* `preventDefault` is by default `false`, and indicates to the driver whether
* `event.preventDefault()` should be invoked. This option can be configured in
* three ways:
*
* - `{preventDefault: boolean}` to invoke preventDefault if `true`, and not
* invoke otherwise.
* - `{preventDefault: (ev: Event) => boolean}` for conditional invocation.
* - `{preventDefault: NestedObject}` uses an object to be recursively compared
* to the `Event` object. `preventDefault` is invoked when all properties on the
* nested object match with the properties on the event object.
*
* Here are some examples:
* ```typescript
* // always prevent default
* DOMSource.select('input').events('keydown', {
* preventDefault: true
* })
*
* // prevent default only when `ENTER` is pressed
* DOMSource.select('input').events('keydown', {
* preventDefault: e => e.keyCode === 13
* })
*
* // prevent defualt when `ENTER` is pressed AND target.value is 'HELLO'
* DOMSource.select('input').events('keydown', {
* preventDefault: { keyCode: 13, ownerTarget: { value: 'HELLO' } }
* });
* ```
*
* **`DOMSource.elements()`** returns a stream of arrays containing the DOM
* elements that match the selectors in the DOMSource (e.g. from previous
* `select(x)` calls).
*
* **`DOMSource.element()`** returns a stream of DOM elements. Notice that this
* is the singular version of `.elements()`, so the stream will emit an element,
* not an array. If there is no element that matches the selected DOMSource,
* then the returned stream will not emit anything.
*
* @param {(String|HTMLElement)} container the DOM selector for the element
* (or the element itself) to contain the rendering of the VTrees.
* @param {DOMDriverOptions} options an object with two optional properties:
*
* - `modules: array` overrides `@cycle/dom`'s default Snabbdom modules as
* as defined in [`src/modules.ts`](./src/modules.ts).
* - `reportSnabbdomError: (err: any) => void` overrides the default error reporter function.
* @return {Function} the DOM driver function. The function expects a stream of
* VNode as input, and outputs the DOMSource object.
* @function makeDOMDriver
*/
export {makeDOMDriver, DOMDriverOptions} from './makeDOMDriver';
/**
* A factory function to create mocked DOMSource objects, for testing purposes.
*
* Takes a `mockConfig` object as argument, and returns
* a DOMSource that can be given to any Cycle.js app that expects a DOMSource in
* the sources, for testing.
*
* The `mockConfig` parameter is an object specifying selectors, eventTypes and
* their streams. Example:
*
* ```js
* const domSource = mockDOMSource({
* '.foo': {
* 'click': xs.of({target: {}}),
* 'mouseover': xs.of({target: {}}),
* },
* '.bar': {
* 'scroll': xs.of({target: {}}),
* elements: xs.of({tagName: 'div'}),
* }
* });
*
* // Usage
* const click$ = domSource.select('.foo').events('click');
* const element$ = domSource.select('.bar').elements();
* ```
*
* The mocked DOM Source supports isolation. It has the functions `isolateSink`
* and `isolateSource` attached to it, and performs simple isolation using
* classNames. *isolateSink* with scope `foo` will append the class `___foo` to
* the stream of virtual DOM nodes, and *isolateSource* with scope `foo` will
* perform a conventional `mockedDOMSource.select('.__foo')` call.
*
* @param {Object} mockConfig an object where keys are selector strings
* and values are objects. Those nested objects have `eventType` strings as keys
* and values are streams you created.
* @return {Object} fake DOM source object, with an API containing `select()`
* and `events()` and `elements()` which can be used just like the DOM Driver's
* DOMSource.
*
* @function mockDOMSource
*/
export {mockDOMSource, MockConfig, MockedDOMSource} from './mockDOMSource';
export {CycleDOMEvent} from './EventDelegator';
/**
* The hyperscript function `h()` is a function to create virtual DOM objects,
* also known as VNodes. Call
*
* ```js
* h('div.myClass', {style: {color: 'red'}}, [])
* ```
*
* to create a VNode that represents a `DIV` element with className `myClass`,
* styled with red color, and no children because the `[]` array was passed. The
* API is `h(tagOrSelector, optionalData, optionalChildrenOrText)`.
*
* However, usually you should use "hyperscript helpers", which are shortcut
* functions based on hyperscript. There is one hyperscript helper function for
* each DOM tagName, such as `h1()`, `h2()`, `div()`, `span()`, `label()`,
* `input()`. For instance, the previous example could have been written
* as:
*
* ```js
* div('.myClass', {style: {color: 'red'}}, [])
* ```
*
* There are also SVG helper functions, which apply the appropriate SVG
* namespace to the resulting elements. `svg()` function creates the top-most
* SVG element, and `svg.g`, `svg.polygon`, `svg.circle`, `svg.path` are for
* SVG-specific child elements. Example:
*
* ```js
* svg({attrs: {width: 150, height: 150}}, [
* svg.polygon({
* attrs: {
* class: 'triangle',
* points: '20 0 20 150 150 20'
* }
* })
* ])
* ```
*
* @function h
*/
export {h} from 'snabbdom';
import hh, {HyperScriptHelperFn, SVGHelperFn} from './hyperscript-helpers';
export const svg: SVGHelperFn = hh.svg;
export const a: HyperScriptHelperFn = hh.a;
export const abbr: HyperScriptHelperFn = hh.abbr;
export const address: HyperScriptHelperFn = hh.address;
export const area: HyperScriptHelperFn = hh.area;
export const article: HyperScriptHelperFn = hh.article;
export const aside: HyperScriptHelperFn = hh.aside;
export const audio: HyperScriptHelperFn = hh.audio;
export const b: HyperScriptHelperFn = hh.b;
export const base: HyperScriptHelperFn = hh.base;
export const bdi: HyperScriptHelperFn = hh.bdi;
export const bdo: HyperScriptHelperFn = hh.bdo;
export const blockquote: HyperScriptHelperFn = hh.blockquote;
export const body: HyperScriptHelperFn = hh.body;
export const br: HyperScriptHelperFn = hh.br;
export const button: HyperScriptHelperFn = hh.button;
export const canvas: HyperScriptHelperFn = hh.canvas;
export const caption: HyperScriptHelperFn = hh.caption;
export const cite: HyperScriptHelperFn = hh.cite;
export const code: HyperScriptHelperFn = hh.code;
export const col: HyperScriptHelperFn = hh.col;
export const colgroup: HyperScriptHelperFn = hh.colgroup;
export const dd: HyperScriptHelperFn = hh.dd;
export const del: HyperScriptHelperFn = hh.del;
export const dfn: HyperScriptHelperFn = hh.dfn;
export const dir: HyperScriptHelperFn = hh.dir;
export const div: HyperScriptHelperFn = hh.div;
export const dl: HyperScriptHelperFn = hh.dl;
export const dt: HyperScriptHelperFn = hh.dt;
export const em: HyperScriptHelperFn = hh.em;
export const embed: HyperScriptHelperFn = hh.embed;
export const fieldset: HyperScriptHelperFn = hh.fieldset;
export const figcaption: HyperScriptHelperFn = hh.figcaption;
export const figure: HyperScriptHelperFn = hh.figure;
export const footer: HyperScriptHelperFn = hh.footer;
export const form: HyperScriptHelperFn = hh.form;
export const h1: HyperScriptHelperFn = hh.h1;
export const h2: HyperScriptHelperFn = hh.h2;
export const h3: HyperScriptHelperFn = hh.h3;
export const h4: HyperScriptHelperFn = hh.h4;
export const h5: HyperScriptHelperFn = hh.h5;
export const h6: HyperScriptHelperFn = hh.h6;
export const head: HyperScriptHelperFn = hh.head;
export const header: HyperScriptHelperFn = hh.header;
export const hgroup: HyperScriptHelperFn = hh.hgroup;
export const hr: HyperScriptHelperFn = hh.hr;
export const html: HyperScriptHelperFn = hh.html;
export const i: HyperScriptHelperFn = hh.i;
export const iframe: HyperScriptHelperFn = hh.iframe;
export const img: HyperScriptHelperFn = hh.img;
export const input: HyperScriptHelperFn = hh.input;
export const ins: HyperScriptHelperFn = hh.ins;
export const kbd: HyperScriptHelperFn = hh.kbd;
export const keygen: HyperScriptHelperFn = hh.keygen;
export const label: HyperScriptHelperFn = hh.label;
export const legend: HyperScriptHelperFn = hh.legend;
export const li: HyperScriptHelperFn = hh.li;
export const link: HyperScriptHelperFn = hh.link;
export const main: HyperScriptHelperFn = hh.main;
export const map: HyperScriptHelperFn = hh.map;
export const mark: HyperScriptHelperFn = hh.mark;
export const menu: HyperScriptHelperFn = hh.menu;
export const meta: HyperScriptHelperFn = hh.meta;
export const nav: HyperScriptHelperFn = hh.nav;
export const noscript: HyperScriptHelperFn = hh.noscript;
export const object: HyperScriptHelperFn = hh.object;
export const ol: HyperScriptHelperFn = hh.ol;
export const optgroup: HyperScriptHelperFn = hh.optgroup;
export const option: HyperScriptHelperFn = hh.option;
export const p: HyperScriptHelperFn = hh.p;
export const param: HyperScriptHelperFn = hh.param;
export const pre: HyperScriptHelperFn = hh.pre;
export const progress: HyperScriptHelperFn = hh.progress;
export const q: HyperScriptHelperFn = hh.q;
export const rp: HyperScriptHelperFn = hh.rp;
export const rt: HyperScriptHelperFn = hh.rt;
export const ruby: HyperScriptHelperFn = hh.ruby;
export const s: HyperScriptHelperFn = hh.s;
export const samp: HyperScriptHelperFn = hh.samp;
export const script: HyperScriptHelperFn = hh.script;
export const section: HyperScriptHelperFn = hh.section;
export const select: HyperScriptHelperFn = hh.select;
export const small: HyperScriptHelperFn = hh.small;
export const source: HyperScriptHelperFn = hh.source;
export const span: HyperScriptHelperFn = hh.span;
export const strong: HyperScriptHelperFn = hh.strong;
export const style: HyperScriptHelperFn = hh.style;
export const sub: HyperScriptHelperFn = hh.sub;
export const sup: HyperScriptHelperFn = hh.sup;
export const table: HyperScriptHelperFn = hh.table;
export const tbody: HyperScriptHelperFn = hh.tbody;
export const td: HyperScriptHelperFn = hh.td;
export const textarea: HyperScriptHelperFn = hh.textarea;
export const tfoot: HyperScriptHelperFn = hh.tfoot;
export const th: HyperScriptHelperFn = hh.th;
export const thead: HyperScriptHelperFn = hh.thead;
export const title: HyperScriptHelperFn = hh.title;
export const tr: HyperScriptHelperFn = hh.tr;
export const u: HyperScriptHelperFn = hh.u;
export const ul: HyperScriptHelperFn = hh.ul;
export const video: HyperScriptHelperFn = hh.video;