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 { HyperScriptHelperFn, SVGHelperFn } from './hyperscript-helpers';
|
175 | export declare const svg: SVGHelperFn;
|
176 | export declare const a: HyperScriptHelperFn;
|
177 | export declare const abbr: HyperScriptHelperFn;
|
178 | export declare const address: HyperScriptHelperFn;
|
179 | export declare const area: HyperScriptHelperFn;
|
180 | export declare const article: HyperScriptHelperFn;
|
181 | export declare const aside: HyperScriptHelperFn;
|
182 | export declare const audio: HyperScriptHelperFn;
|
183 | export declare const b: HyperScriptHelperFn;
|
184 | export declare const base: HyperScriptHelperFn;
|
185 | export declare const bdi: HyperScriptHelperFn;
|
186 | export declare const bdo: HyperScriptHelperFn;
|
187 | export declare const blockquote: HyperScriptHelperFn;
|
188 | export declare const body: HyperScriptHelperFn;
|
189 | export declare const br: HyperScriptHelperFn;
|
190 | export declare const button: HyperScriptHelperFn;
|
191 | export declare const canvas: HyperScriptHelperFn;
|
192 | export declare const caption: HyperScriptHelperFn;
|
193 | export declare const cite: HyperScriptHelperFn;
|
194 | export declare const code: HyperScriptHelperFn;
|
195 | export declare const col: HyperScriptHelperFn;
|
196 | export declare const colgroup: HyperScriptHelperFn;
|
197 | export declare const dd: HyperScriptHelperFn;
|
198 | export declare const del: HyperScriptHelperFn;
|
199 | export declare const dfn: HyperScriptHelperFn;
|
200 | export declare const dir: HyperScriptHelperFn;
|
201 | export declare const div: HyperScriptHelperFn;
|
202 | export declare const dl: HyperScriptHelperFn;
|
203 | export declare const dt: HyperScriptHelperFn;
|
204 | export declare const em: HyperScriptHelperFn;
|
205 | export declare const embed: HyperScriptHelperFn;
|
206 | export declare const fieldset: HyperScriptHelperFn;
|
207 | export declare const figcaption: HyperScriptHelperFn;
|
208 | export declare const figure: HyperScriptHelperFn;
|
209 | export declare const footer: HyperScriptHelperFn;
|
210 | export declare const form: HyperScriptHelperFn;
|
211 | export declare const h1: HyperScriptHelperFn;
|
212 | export declare const h2: HyperScriptHelperFn;
|
213 | export declare const h3: HyperScriptHelperFn;
|
214 | export declare const h4: HyperScriptHelperFn;
|
215 | export declare const h5: HyperScriptHelperFn;
|
216 | export declare const h6: HyperScriptHelperFn;
|
217 | export declare const head: HyperScriptHelperFn;
|
218 | export declare const header: HyperScriptHelperFn;
|
219 | export declare const hgroup: HyperScriptHelperFn;
|
220 | export declare const hr: HyperScriptHelperFn;
|
221 | export declare const html: HyperScriptHelperFn;
|
222 | export declare const i: HyperScriptHelperFn;
|
223 | export declare const iframe: HyperScriptHelperFn;
|
224 | export declare const img: HyperScriptHelperFn;
|
225 | export declare const input: HyperScriptHelperFn;
|
226 | export declare const ins: HyperScriptHelperFn;
|
227 | export declare const kbd: HyperScriptHelperFn;
|
228 | export declare const keygen: HyperScriptHelperFn;
|
229 | export declare const label: HyperScriptHelperFn;
|
230 | export declare const legend: HyperScriptHelperFn;
|
231 | export declare const li: HyperScriptHelperFn;
|
232 | export declare const link: HyperScriptHelperFn;
|
233 | export declare const main: HyperScriptHelperFn;
|
234 | export declare const map: HyperScriptHelperFn;
|
235 | export declare const mark: HyperScriptHelperFn;
|
236 | export declare const menu: HyperScriptHelperFn;
|
237 | export declare const meta: HyperScriptHelperFn;
|
238 | export declare const nav: HyperScriptHelperFn;
|
239 | export declare const noscript: HyperScriptHelperFn;
|
240 | export declare const object: HyperScriptHelperFn;
|
241 | export declare const ol: HyperScriptHelperFn;
|
242 | export declare const optgroup: HyperScriptHelperFn;
|
243 | export declare const option: HyperScriptHelperFn;
|
244 | export declare const p: HyperScriptHelperFn;
|
245 | export declare const param: HyperScriptHelperFn;
|
246 | export declare const pre: HyperScriptHelperFn;
|
247 | export declare const progress: HyperScriptHelperFn;
|
248 | export declare const q: HyperScriptHelperFn;
|
249 | export declare const rp: HyperScriptHelperFn;
|
250 | export declare const rt: HyperScriptHelperFn;
|
251 | export declare const ruby: HyperScriptHelperFn;
|
252 | export declare const s: HyperScriptHelperFn;
|
253 | export declare const samp: HyperScriptHelperFn;
|
254 | export declare const script: HyperScriptHelperFn;
|
255 | export declare const section: HyperScriptHelperFn;
|
256 | export declare const select: HyperScriptHelperFn;
|
257 | export declare const small: HyperScriptHelperFn;
|
258 | export declare const source: HyperScriptHelperFn;
|
259 | export declare const span: HyperScriptHelperFn;
|
260 | export declare const strong: HyperScriptHelperFn;
|
261 | export declare const style: HyperScriptHelperFn;
|
262 | export declare const sub: HyperScriptHelperFn;
|
263 | export declare const sup: HyperScriptHelperFn;
|
264 | export declare const table: HyperScriptHelperFn;
|
265 | export declare const tbody: HyperScriptHelperFn;
|
266 | export declare const td: HyperScriptHelperFn;
|
267 | export declare const textarea: HyperScriptHelperFn;
|
268 | export declare const tfoot: HyperScriptHelperFn;
|
269 | export declare const th: HyperScriptHelperFn;
|
270 | export declare const thead: HyperScriptHelperFn;
|
271 | export declare const title: HyperScriptHelperFn;
|
272 | export declare const tr: HyperScriptHelperFn;
|
273 | export declare const u: HyperScriptHelperFn;
|
274 | export declare const ul: HyperScriptHelperFn;
|
275 | export declare const video: HyperScriptHelperFn;
|