1 | export {thunk, Thunk, ThunkData} from './thunk';
|
2 | export {VNode, VNodeData} from 'snabbdom';
|
3 | export {DOMSource, EventsFnOptions} from './DOMSource';
|
4 | export {MainDOMSource} from './MainDOMSource';
|
5 | /**
|
6 | * A factory for the DOM driver function.
|
7 | *
|
8 | * Takes a `container` to define the target on the existing DOM which this
|
9 | * driver will operate on, and an `options` object as the second argument. The
|
10 | * input to this driver is a stream of virtual DOM objects, or in other words,
|
11 | * Snabbdom "VNode" objects. The output of this driver is a "DOMSource": a
|
12 | * collection of Observables queried with the methods `select()` and `events()`.
|
13 | *
|
14 | * **`DOMSource.select(selector)`** returns a new DOMSource with scope
|
15 | * restricted to the element(s) that matches the CSS `selector` given. To select
|
16 | * the page's `document`, use `.select('document')`. To select the container
|
17 | * element for this app, use `.select(':root')`.
|
18 | *
|
19 | * **`DOMSource.events(eventType, options)`** returns a stream of events of
|
20 | * `eventType` happening on the elements that match the current DOMSource. The
|
21 | * event object contains the `ownerTarget` property that behaves exactly like
|
22 | * `currentTarget`. The reason for this is that some browsers doesn't allow
|
23 | * `currentTarget` property to be mutated, hence a new property is created. The
|
24 | * returned stream is an *xstream* Stream if you use `@cycle/xstream-run` to run
|
25 | * your app with this driver, or it is an RxJS Observable if you use
|
26 | * `@cycle/rxjs-run`, and so forth.
|
27 | *
|
28 | * **options for DOMSource.events**
|
29 | *
|
30 | * The `options` parameter on `DOMSource.events(eventType, options)` is an
|
31 | * (optional) object with two optional fields: `useCapture` and
|
32 | * `preventDefault`.
|
33 | *
|
34 | * `useCapture` is by default `false`, except it is `true` for event types that
|
35 | * do not bubble. Read more here
|
36 | * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
|
37 | * about the `useCapture` and its purpose.
|
38 | *
|
39 | * `preventDefault` is by default `false`, and indicates to the driver whether
|
40 | * `event.preventDefault()` should be invoked. This option can be configured in
|
41 | * three ways:
|
42 | *
|
43 | * - `{preventDefault: boolean}` to invoke preventDefault if `true`, and not
|
44 | * invoke otherwise.
|
45 | * - `{preventDefault: (ev: Event) => boolean}` for conditional invocation.
|
46 | * - `{preventDefault: NestedObject}` uses an object to be recursively compared
|
47 | * to the `Event` object. `preventDefault` is invoked when all properties on the
|
48 | * nested object match with the properties on the event object.
|
49 | *
|
50 | * Here are some examples:
|
51 | * ```typescript
|
52 | * // always prevent default
|
53 | * DOMSource.select('input').events('keydown', {
|
54 | * preventDefault: true
|
55 | * })
|
56 | *
|
57 | * // prevent default only when `ENTER` is pressed
|
58 | * DOMSource.select('input').events('keydown', {
|
59 | * preventDefault: e => e.keyCode === 13
|
60 | * })
|
61 | *
|
62 | * // prevent defualt when `ENTER` is pressed AND target.value is 'HELLO'
|
63 | * DOMSource.select('input').events('keydown', {
|
64 | * preventDefault: { keyCode: 13, ownerTarget: { value: 'HELLO' } }
|
65 | * });
|
66 | * ```
|
67 | *
|
68 | * **`DOMSource.elements()`** returns a stream of arrays containing the DOM
|
69 | * elements that match the selectors in the DOMSource (e.g. from previous
|
70 | * `select(x)` calls).
|
71 | *
|
72 | * **`DOMSource.element()`** returns a stream of DOM elements. Notice that this
|
73 | * is the singular version of `.elements()`, so the stream will emit an element,
|
74 | * not an array. If there is no element that matches the selected DOMSource,
|
75 | * then the returned stream will not emit anything.
|
76 | *
|
77 | * @param {(String|HTMLElement)} container the DOM selector for the element
|
78 | * (or the element itself) to contain the rendering of the VTrees.
|
79 | * @param {DOMDriverOptions} options an object with two optional properties:
|
80 | *
|
81 | * - `modules: array` overrides `@cycle/dom`'s default Snabbdom modules as
|
82 | * as defined in [`src/modules.ts`](./src/modules.ts).
|
83 | * - `reportSnabbdomError: (err: any) => void` overrides the default error reporter function.
|
84 | * @return {Function} the DOM driver function. The function expects a stream of
|
85 | * VNode as input, and outputs the DOMSource object.
|
86 | * @function makeDOMDriver
|
87 | */
|
88 | export {makeDOMDriver, DOMDriverOptions} from './makeDOMDriver';
|
89 | /**
|
90 | * A factory function to create mocked DOMSource objects, for testing purposes.
|
91 | *
|
92 | * Takes a `mockConfig` object as argument, and returns
|
93 | * a DOMSource that can be given to any Cycle.js app that expects a DOMSource in
|
94 | * the sources, for testing.
|
95 | *
|
96 | * The `mockConfig` parameter is an object specifying selectors, eventTypes and
|
97 | * their streams. Example:
|
98 | *
|
99 | * ```js
|
100 | * const domSource = mockDOMSource({
|
101 | * '.foo': {
|
102 | * 'click': xs.of({target: {}}),
|
103 | * 'mouseover': xs.of({target: {}}),
|
104 | * },
|
105 | * '.bar': {
|
106 | * 'scroll': xs.of({target: {}}),
|
107 | * elements: xs.of({tagName: 'div'}),
|
108 | * }
|
109 | * });
|
110 | *
|
111 | * // Usage
|
112 | * const click$ = domSource.select('.foo').events('click');
|
113 | * const element$ = domSource.select('.bar').elements();
|
114 | * ```
|
115 | *
|
116 | * The mocked DOM Source supports isolation. It has the functions `isolateSink`
|
117 | * and `isolateSource` attached to it, and performs simple isolation using
|
118 | * classNames. *isolateSink* with scope `foo` will append the class `___foo` to
|
119 | * the stream of virtual DOM nodes, and *isolateSource* with scope `foo` will
|
120 | * perform a conventional `mockedDOMSource.select('.__foo')` call.
|
121 | *
|
122 | * @param {Object} mockConfig an object where keys are selector strings
|
123 | * and values are objects. Those nested objects have `eventType` strings as keys
|
124 | * and values are streams you created.
|
125 | * @return {Object} fake DOM source object, with an API containing `select()`
|
126 | * and `events()` and `elements()` which can be used just like the DOM Driver's
|
127 | * DOMSource.
|
128 | *
|
129 | * @function mockDOMSource
|
130 | */
|
131 | export {mockDOMSource, MockConfig, MockedDOMSource} from './mockDOMSource';
|
132 | export {CycleDOMEvent} from './EventDelegator';
|
133 | /**
|
134 | * The hyperscript function `h()` is a function to create virtual DOM objects,
|
135 | * also known as VNodes. Call
|
136 | *
|
137 | * ```js
|
138 | * h('div.myClass', {style: {color: 'red'}}, [])
|
139 | * ```
|
140 | *
|
141 | * to create a VNode that represents a `DIV` element with className `myClass`,
|
142 | * styled with red color, and no children because the `[]` array was passed. The
|
143 | * API is `h(tagOrSelector, optionalData, optionalChildrenOrText)`.
|
144 | *
|
145 | * However, usually you should use "hyperscript helpers", which are shortcut
|
146 | * functions based on hyperscript. There is one hyperscript helper function for
|
147 | * each DOM tagName, such as `h1()`, `h2()`, `div()`, `span()`, `label()`,
|
148 | * `input()`. For instance, the previous example could have been written
|
149 | * as:
|
150 | *
|
151 | * ```js
|
152 | * div('.myClass', {style: {color: 'red'}}, [])
|
153 | * ```
|
154 | *
|
155 | * There are also SVG helper functions, which apply the appropriate SVG
|
156 | * namespace to the resulting elements. `svg()` function creates the top-most
|
157 | * SVG element, and `svg.g`, `svg.polygon`, `svg.circle`, `svg.path` are for
|
158 | * SVG-specific child elements. Example:
|
159 | *
|
160 | * ```js
|
161 | * svg({attrs: {width: 150, height: 150}}, [
|
162 | * svg.polygon({
|
163 | * attrs: {
|
164 | * class: 'triangle',
|
165 | * points: '20 0 20 150 150 20'
|
166 | * }
|
167 | * })
|
168 | * ])
|
169 | * ```
|
170 | *
|
171 | * @function h
|
172 | */
|
173 | export {h} from 'snabbdom';
|
174 | import hh, {HyperScriptHelperFn, SVGHelperFn} from './hyperscript-helpers';
|
175 |
|
176 | export const svg: SVGHelperFn = hh.svg;
|
177 | export const a: HyperScriptHelperFn = hh.a;
|
178 | export const abbr: HyperScriptHelperFn = hh.abbr;
|
179 | export const address: HyperScriptHelperFn = hh.address;
|
180 | export const area: HyperScriptHelperFn = hh.area;
|
181 | export const article: HyperScriptHelperFn = hh.article;
|
182 | export const aside: HyperScriptHelperFn = hh.aside;
|
183 | export const audio: HyperScriptHelperFn = hh.audio;
|
184 | export const b: HyperScriptHelperFn = hh.b;
|
185 | export const base: HyperScriptHelperFn = hh.base;
|
186 | export const bdi: HyperScriptHelperFn = hh.bdi;
|
187 | export const bdo: HyperScriptHelperFn = hh.bdo;
|
188 | export const blockquote: HyperScriptHelperFn = hh.blockquote;
|
189 | export const body: HyperScriptHelperFn = hh.body;
|
190 | export const br: HyperScriptHelperFn = hh.br;
|
191 | export const button: HyperScriptHelperFn = hh.button;
|
192 | export const canvas: HyperScriptHelperFn = hh.canvas;
|
193 | export const caption: HyperScriptHelperFn = hh.caption;
|
194 | export const cite: HyperScriptHelperFn = hh.cite;
|
195 | export const code: HyperScriptHelperFn = hh.code;
|
196 | export const col: HyperScriptHelperFn = hh.col;
|
197 | export const colgroup: HyperScriptHelperFn = hh.colgroup;
|
198 | export const dd: HyperScriptHelperFn = hh.dd;
|
199 | export const del: HyperScriptHelperFn = hh.del;
|
200 | export const dfn: HyperScriptHelperFn = hh.dfn;
|
201 | export const dir: HyperScriptHelperFn = hh.dir;
|
202 | export const div: HyperScriptHelperFn = hh.div;
|
203 | export const dl: HyperScriptHelperFn = hh.dl;
|
204 | export const dt: HyperScriptHelperFn = hh.dt;
|
205 | export const em: HyperScriptHelperFn = hh.em;
|
206 | export const embed: HyperScriptHelperFn = hh.embed;
|
207 | export const fieldset: HyperScriptHelperFn = hh.fieldset;
|
208 | export const figcaption: HyperScriptHelperFn = hh.figcaption;
|
209 | export const figure: HyperScriptHelperFn = hh.figure;
|
210 | export const footer: HyperScriptHelperFn = hh.footer;
|
211 | export const form: HyperScriptHelperFn = hh.form;
|
212 | export const h1: HyperScriptHelperFn = hh.h1;
|
213 | export const h2: HyperScriptHelperFn = hh.h2;
|
214 | export const h3: HyperScriptHelperFn = hh.h3;
|
215 | export const h4: HyperScriptHelperFn = hh.h4;
|
216 | export const h5: HyperScriptHelperFn = hh.h5;
|
217 | export const h6: HyperScriptHelperFn = hh.h6;
|
218 | export const head: HyperScriptHelperFn = hh.head;
|
219 | export const header: HyperScriptHelperFn = hh.header;
|
220 | export const hgroup: HyperScriptHelperFn = hh.hgroup;
|
221 | export const hr: HyperScriptHelperFn = hh.hr;
|
222 | export const html: HyperScriptHelperFn = hh.html;
|
223 | export const i: HyperScriptHelperFn = hh.i;
|
224 | export const iframe: HyperScriptHelperFn = hh.iframe;
|
225 | export const img: HyperScriptHelperFn = hh.img;
|
226 | export const input: HyperScriptHelperFn = hh.input;
|
227 | export const ins: HyperScriptHelperFn = hh.ins;
|
228 | export const kbd: HyperScriptHelperFn = hh.kbd;
|
229 | export const keygen: HyperScriptHelperFn = hh.keygen;
|
230 | export const label: HyperScriptHelperFn = hh.label;
|
231 | export const legend: HyperScriptHelperFn = hh.legend;
|
232 | export const li: HyperScriptHelperFn = hh.li;
|
233 | export const link: HyperScriptHelperFn = hh.link;
|
234 | export const main: HyperScriptHelperFn = hh.main;
|
235 | export const map: HyperScriptHelperFn = hh.map;
|
236 | export const mark: HyperScriptHelperFn = hh.mark;
|
237 | export const menu: HyperScriptHelperFn = hh.menu;
|
238 | export const meta: HyperScriptHelperFn = hh.meta;
|
239 | export const nav: HyperScriptHelperFn = hh.nav;
|
240 | export const noscript: HyperScriptHelperFn = hh.noscript;
|
241 | export const object: HyperScriptHelperFn = hh.object;
|
242 | export const ol: HyperScriptHelperFn = hh.ol;
|
243 | export const optgroup: HyperScriptHelperFn = hh.optgroup;
|
244 | export const option: HyperScriptHelperFn = hh.option;
|
245 | export const p: HyperScriptHelperFn = hh.p;
|
246 | export const param: HyperScriptHelperFn = hh.param;
|
247 | export const pre: HyperScriptHelperFn = hh.pre;
|
248 | export const progress: HyperScriptHelperFn = hh.progress;
|
249 | export const q: HyperScriptHelperFn = hh.q;
|
250 | export const rp: HyperScriptHelperFn = hh.rp;
|
251 | export const rt: HyperScriptHelperFn = hh.rt;
|
252 | export const ruby: HyperScriptHelperFn = hh.ruby;
|
253 | export const s: HyperScriptHelperFn = hh.s;
|
254 | export const samp: HyperScriptHelperFn = hh.samp;
|
255 | export const script: HyperScriptHelperFn = hh.script;
|
256 | export const section: HyperScriptHelperFn = hh.section;
|
257 | export const select: HyperScriptHelperFn = hh.select;
|
258 | export const small: HyperScriptHelperFn = hh.small;
|
259 | export const source: HyperScriptHelperFn = hh.source;
|
260 | export const span: HyperScriptHelperFn = hh.span;
|
261 | export const strong: HyperScriptHelperFn = hh.strong;
|
262 | export const style: HyperScriptHelperFn = hh.style;
|
263 | export const sub: HyperScriptHelperFn = hh.sub;
|
264 | export const sup: HyperScriptHelperFn = hh.sup;
|
265 | export const table: HyperScriptHelperFn = hh.table;
|
266 | export const tbody: HyperScriptHelperFn = hh.tbody;
|
267 | export const td: HyperScriptHelperFn = hh.td;
|
268 | export const textarea: HyperScriptHelperFn = hh.textarea;
|
269 | export const tfoot: HyperScriptHelperFn = hh.tfoot;
|
270 | export const th: HyperScriptHelperFn = hh.th;
|
271 | export const thead: HyperScriptHelperFn = hh.thead;
|
272 | export const title: HyperScriptHelperFn = hh.title;
|
273 | export const tr: HyperScriptHelperFn = hh.tr;
|
274 | export const u: HyperScriptHelperFn = hh.u;
|
275 | export const ul: HyperScriptHelperFn = hh.ul;
|
276 | export const video: HyperScriptHelperFn = hh.video;
|