aberdeen 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,601 +0,0 @@
1
- /**
2
- * Normally, changes to `Store`s are reacted to asynchronously, in an (optimized)
3
- * batch, after a timeout of 0s. Calling `runQueue()` will do so immediately
4
- * and synchronously. Doing so may be helpful in cases where you need some DOM
5
- * modification to be done synchronously.
6
- *
7
- * This function is re-entrant, meaning it is safe to call `runQueue` from a
8
- * function that is called due to another (automatic) invocation of `runQueue`.
9
- */
10
- export declare function runQueue(): void;
11
- /**
12
- * A promise-like object that you can `await`. It will resolve *after* the current batch
13
- * of DOM-write operations has completed. This is the best time to retrieve DOM properties
14
- * that dependent on a layout being completed, such as `offsetHeight`.
15
- *
16
- * By batching DOM reads separately from DOM writes, this prevents the browser from
17
- * interleaving layout reads and writes, which can force additional layout recalculations.
18
- * This helps reduce visual glitches and flashes by ensuring the browser doesn't render
19
- * intermediate DOM states during updates.
20
- *
21
- * Unlike `setTimeout` or `requestAnimationFrame`, this mechanism ensures that DOM read
22
- * operations happen before any DOM writes in the same queue cycle, minimizing layout thrashing.
23
- *
24
- * See `transitions.js` for some examples.
25
- */
26
- export declare const DOM_READ_PHASE: {
27
- then: (fulfilled: () => void) => any;
28
- };
29
- /**
30
- * A promise-like object that you can `await`. It will resolve *after* the current
31
- * DOM_READ_PHASE has completed (if any) and after any DOM triggered by Aberdeen
32
- * have completed. This is a good time to do little manual DOM tweaks that depend
33
- * on a *read phase* first, like triggering transitions.
34
- *
35
- * By batching DOM writes separately from DOM reads, this prevents the browser from
36
- * interleaving layout reads and writes, which can force additional layout recalculations.
37
- * This helps reduce visual glitches and flashes by ensuring the browser doesn't render
38
- * intermediate DOM states during updates.
39
- *
40
- * Unlike `setTimeout` or `requestAnimationFrame`, this mechanism ensures that DOM write
41
- * operations happen after all DOM reads in the same queue cycle, minimizing layout thrashing.
42
- *
43
- * See `transitions.js` for some examples.
44
- */
45
- export declare const DOM_WRITE_PHASE: {
46
- then: (fulfilled: () => void) => any;
47
- };
48
- export interface Store {
49
- /**
50
- * Return a `Store` deeper within the tree by resolving the given `path`,
51
- * subscribing to every level.
52
- * In case `undefined` is encountered while resolving the path, a newly
53
- * created `Store` containing `undefined` is returned. In that case, the
54
- * `Store`'s [[`isDetached`]] method will return `true`.
55
- * In case something other than a collection is encountered, an error is thrown.
56
- */
57
- (...path: any[]): Store;
58
- }
59
- export declare class Store {
60
- /**
61
- * Create a new `Store` with `undefined` as its initial value.
62
- */
63
- constructor();
64
- /**
65
- * Create a new `Store`.
66
- * @param value The initial value. Plain objects, arrays and `Map`s, are converted
67
- * into a tree of nested `Store`s. When another `Store` is included somewhere in that
68
- * input tree, a reference is made.
69
- */
70
- constructor(value: any);
71
- /**
72
- * @returns The index for this Store within its parent collection. This will be a `number`
73
- * when the parent collection is an array, a `string` when it's an object, or any data type
74
- * when it's a `Map`.
75
- *
76
- * @example
77
- * ```
78
- * let store = new Store({x: 123})
79
- * let subStore = store.ref('x')
80
- * subStore.get() // 123
81
- * subStore.index() // 'x'
82
- * ```
83
- */
84
- index(): any;
85
- /**
86
- * Retrieve the value for store, subscribing the observe scope to changes.
87
- *
88
- * @param depth Limit the depth of the retrieved data structure to this positive integer.
89
- * When `depth` is `1`, only a single level of the value at `path` is unpacked. This
90
- * makes no difference for primitive values (like strings), but for objects, maps and
91
- * arrays, it means that each *value* in the resulting data structure will be a
92
- * reference to the `Store` for that value.
93
- *
94
- * @returns The resulting value (or `undefined` if the `Store` does not exist).
95
- */
96
- get(depth?: number): any;
97
- /**
98
- * Exactly like {@link Store.get}, except that when executed from an observe scope,
99
- * we will not subscribe to changes in the data retrieved data.
100
- */
101
- peek(depth?: number): any;
102
- /**
103
- * Like {@link Store.get}, but with return type checking.
104
- *
105
- * @param expectType A string specifying what type the.get is expected to return. Options are:
106
- * "undefined", "null", "boolean", "number", "string", "function", "array", "map"
107
- * and "object". If the store holds a different type of value, a `TypeError`
108
- * exception is thrown.
109
- * @returns
110
- */
111
- getTyped(expectType: String, depth?: number): any;
112
- /**
113
- * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `number`.
114
- * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
115
- */
116
- getNumber(): number;
117
- /**
118
- * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `string`.
119
- * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
120
- */
121
- getString(): string;
122
- /**
123
- * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `boolean`.
124
- * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
125
- */
126
- getBoolean(): boolean;
127
- /**
128
- * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `function`.
129
- * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
130
- */
131
- getFunction(): (Function);
132
- /**
133
- * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `array`.
134
- * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
135
- */
136
- getArray(depth?: number): any[];
137
- /**
138
- * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `object`.
139
- * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
140
- */
141
- getObject(depth?: number): object;
142
- /**
143
- * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `map`.
144
- * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
145
- */
146
- getMap(depth?: number): Map<any, any>;
147
- /**
148
- * Like {@link Store.get}, but with a default value (returned when the Store
149
- * contains `undefined`). This default value is also used to determine the expected type,
150
- * and to throw otherwise.
151
- *
152
- * @example
153
- * ```
154
- * let store = new Store({x: 42})
155
- * store('x').getOr(99) // 42
156
- * store('y').getOr(99) // 99
157
- * store('x').getOr('hello') // throws TypeError (because 42 is not a string)
158
- * ```
159
- */
160
- getOr<T>(defaultValue: T): T;
161
- /**
162
- * Checks if the collection held in `Store` is empty, and subscribes the current scope to changes of the emptiness of this collection.
163
- *
164
- * @returns When the collection is not empty `true` is returned. If it is empty or if the value is undefined, `false` is returned.
165
- * @throws When the value is not a collection and not undefined, an Error will be thrown.
166
- */
167
- isEmpty(): boolean;
168
- /**
169
- * Returns the number of items in the collection held in Store, and subscribes the current scope to changes in this count.
170
- *
171
- * @returns The number of items contained in the collection, or 0 if the value is undefined.
172
- * @throws When the value is not a collection and not undefined, an Error will be thrown.
173
- */
174
- count(): number;
175
- /**
176
- * Returns a strings describing the type of the `Store` value, subscribing to changes of this type.
177
- * Note: this currently also subscribes to changes of primitive values, so changing a value from 3 to 4
178
- * would cause the scope to be rerun. This is not great, and may change in the future. This caveat does
179
- * not apply to changes made *inside* an object, `Array` or `Map`.
180
- *
181
- * @returns Possible options: "undefined", "null", "boolean", "number", "string", "function", "array", "map" or "object".
182
- */
183
- getType(): string;
184
- /**
185
- * Returns a new `Store` that will always hold either the value of `whenTrue` or the value
186
- * of `whenFalse` depending on whether the original `Store` is truthy or not.
187
- *
188
- * @param whenTrue The value set to the return-`Store` while `this` is truthy. This can be
189
- * any type of value. If it's a `Store`, the return-`Store` will reference the same
190
- * data (so *no* deep copy will be made).
191
- * @param whenFalse Like `whenTrue`, but for falsy values (false, undefined, null, 0, "").
192
- * @returns A store holding the result value. The value will keep getting updated while
193
- * the observe context from which `if()` was called remains active.
194
- */
195
- if(whenTrue: any[], whenFalse?: any[]): Store;
196
- /**
197
- * Sets the `Store` value to the given argument.
198
- *
199
- * When a `Store` is passed in as the value, its value will be copied (subscribing to changes). In
200
- * case the value is an object, an `Array` or a `Map`, a *reference* to that data structure will
201
- * be created, so that changes made through one `Store` will be reflected through the other. Be
202
- * carefull not to create loops in your `Store` tree that way, as that would cause any future
203
- * call to {@link Store.get} to throw a `RangeError` (Maximum call stack size exceeded.)
204
- *
205
- * If you intent to make a copy instead of a reference, call {@link Store.get} on the origin `Store`.
206
- *
207
- * @returns The `Store` itself, for chaining other methods.
208
- *
209
- * @example
210
- * ```
211
- * let store = new Store() // Value is `undefined`
212
- *
213
- * store.set(6)
214
- * store.get() // 6
215
- *
216
- * store.set({}) // Change value to an empty object
217
- * store('a', 'b', 'c').set('d') // Create parent path as objects
218
- * store.get() // {x: 6, a: {b: {c: 'd'}}}
219
- *
220
- * store.set(42) // Overwrites all of the above
221
- * store.get() // 42
222
- *
223
- * store('x').set(6) // Throw Error (42 is not a collection)
224
- * ```
225
- */
226
- set(newValue: any): Store;
227
- /**
228
- * Sets the `Store` to the given `mergeValue`, but without deleting any pre-existing
229
- * items when a collection overwrites a similarly typed collection. This results in
230
- * a deep merge.
231
- *
232
- * @returns The `Store` itself, for chaining other methods.
233
- *
234
- * @example
235
- * ```
236
- * let store = new Store({a: {x: 1}})
237
- * store.merge({a: {y: 2}, b: 3})
238
- * store.get() // {a: {x: 1, y: 2}, b: 3}
239
- * ```
240
- */
241
- merge(mergeValue: any): Store;
242
- /**
243
- * Sets the value for the store to `undefined`, which causes it to be omitted from the map (or array, if it's at the end)
244
- *
245
- * @returns The `Store` itself, for chaining other methods.
246
- *
247
- * @example
248
- * ```
249
- * let store = new Store({a: 1, b: 2})
250
- * store('a').delete()
251
- * store.get() // {b: 2}
252
- *
253
- * store = new Store(['a','b','c'])
254
- * store(1).delete()
255
- * store.get() // ['a', undefined, 'c']
256
- * store(2).delete()
257
- * store.get() // ['a']
258
- * store.delete()
259
- * store.get() // undefined
260
- * ```
261
- */
262
- delete(): Store;
263
- /**
264
- * Pushes a value to the end of the Array that is at the specified path in the store.
265
- * If that store path is `undefined`, an Array is created first.
266
- * The last argument is the value to be added, any earlier arguments indicate the path.
267
- *
268
- * @returns The index at which the item was appended.
269
- * @throws TypeError when the store contains a primitive data type.
270
- *
271
- * @example
272
- * ```
273
- * let store = new Store()
274
- * store.push(3) // Creates the array
275
- * store.push(6)
276
- * store.get() // [3,6]
277
- *
278
- * store = new Store({myArray: [1,2]})
279
- * store('myArray').push(3)
280
- * store.get() // {myArray: [1,2,3]}
281
- * ```
282
- */
283
- push(newValue: any): number;
284
- /**
285
- * {@link Store.peek} the current value, pass it through `func`, and {@link Store.set} the resulting
286
- * value.
287
- * @param func The function transforming the value.
288
- * @returns The `Store` itself, for chaining other methods.
289
- */
290
- modify(func: (value: any) => any): Store;
291
- /**
292
- * Iterate the specified collection (Array, Map or object), running the given code block for each item.
293
- * When items are added to the collection at some later point, the code block will be ran for them as well.
294
- * When an item is removed, the {@link Store.clean} handlers left by its code block are executed.
295
- *
296
- * @param renderer The function to be called for each item. It receives the item's `Store` object as its only argument.
297
- * @param makeSortKey An optional function that, given an items `Store` object, returns a value to be sorted on.
298
- * This value can be a number, a string, or an array containing a combination of both. When undefined is returned,
299
- * the item is *not* rendered. If `makeSortKey` is not specified, the output will be sorted by `index()`.
300
- */
301
- onEach(renderer: (store: Store) => void, makeSortKey?: (store: Store) => any): void;
302
- /**
303
- * Derive a new `Store` from this `Store`, by reactively passing its value
304
- * through the specified function.
305
- * @param func Your function. It should accept a the input store's value, and return
306
- * a result to be reactively set to the output store.
307
- * @returns The output `Store`.
308
- * @example
309
- * ```javascript
310
- * const store = new Store(21)
311
- * const double = store.derive(v => v*2)
312
- * double.get() // 42
313
- *
314
- * store.set(100)
315
- * runQueue() // Or after a setTimeout 0, due to batching
316
- * double.get() // 200
317
- * ```
318
- */
319
- derive(func: (value: any) => any): Store;
320
- /**
321
- * Applies a filter/map function on each item within the `Store`'s collection,
322
- * and reactively manages the returned `Map` `Store` to hold any results.
323
- *
324
- * @param func - Function that transform the given store into an output value or
325
- * `undefined` in case this value should be skipped:
326
- *
327
- * @returns - A array/map/object `Store` with the values returned by `func` and the
328
- * corresponding keys from the original map, array or object `Store`.
329
- *
330
- * When items disappear from the `Store` or are changed in a way that `func` depends
331
- * upon, the resulting items are removed from the output `Store` as well. When multiple
332
- * input items produce the same output keys, this may lead to unexpected results.
333
- */
334
- map(func: (store: Store) => any): Store;
335
- /**
336
- * Applies a filter/map function on each item within the `Store`'s collection,
337
- * each of which can deliver any number of key/value pairs, and reactively manages the
338
- * returned map `Store` to hold any results.
339
- *
340
- * @param func - Function that transform the given store into output values
341
- * that can take one of the following forms:
342
- * - an `Object` or a `Map`: Each key/value pair will be added to the output `Store`.
343
- * - anything else: No key/value pairs are added to the output `Store`.
344
- *
345
- * @returns - A map `Store` with the key/value pairs returned by all `func` invocations.
346
- *
347
- * When items disappear from the `Store` or are changed in a way that `func` depends
348
- * upon, the resulting items are removed from the output `Store` as well. When multiple
349
- * input items produce the same output keys, this may lead to unexpected results.
350
- */
351
- multiMap(func: (store: Store) => any): Store;
352
- /**
353
- * Dump a live view of the `Store` tree as HTML text, `ul` and `li` nodes at
354
- * the current mount position. Meant for debugging purposes.
355
- * @returns The `Store` itself, for chaining other methods.
356
- */
357
- dump(): Store;
358
- }
359
- /**
360
- * Modifies the *parent* DOM element in the current reactive scope, or adds
361
- * new DOM elements to it.
362
- *
363
- * @param args - Arguments that define how to modify/create elements.
364
- *
365
- * ### String arguments
366
- * Create new elements with optional classes and text content:
367
- * ```js
368
- * $('div.myClass') // <div class="myClass"></div>
369
- * $('span.c1.c2:Hello') // <span class="c1 c2">Hello</span>
370
- * $('p:Some text') // <p>Some text</p>
371
- * $('.my-thing') // <div class="my-thing"></div>
372
- * $('div', 'span', 'p.cls') // <div><span<p class="cls"></p></span></div>
373
- * $(':Just some text!') // Just some text! (No new element, just a text node)
374
- * ```
375
- *
376
- * ### Object arguments
377
- * Set properties, attributes, events and special features:
378
- * ```js
379
- * // Classes (dot prefix)
380
- * $('div', {'.active': true}) // Add class
381
- * $('div', {'.hidden': false}) // Remove (or don't add) class
382
- * $('div', {'.selected': myStore}) // Reactively add/remove class
383
- *
384
- * // Styles (dollar prefixed and camel-cased CSS properties)
385
- * $('div', {$color: 'red'}) // style.color = 'red'
386
- * $('div', {$marginTop: '10px'}) // style.marginTop = '10px'
387
- * $('div', {$color: myColorStore}) // Reactively change color
388
- *
389
- * // Events (function values)
390
- * $('button', {click: () => alert()}) // Add click handler
391
- *
392
- * // Properties (boolean values, `selectedIndex`, `value`)
393
- * $('input', {disabled: true}) // el.disabled = true
394
- * $('input', {value: 'test'}) // el.value = 'test'
395
- * $('select', {selectedIndex: 2}) // el.selectedIndex = 2
396
- *
397
- * // Transitions
398
- * $('div', {create: 'fade-in'}) // Add class on create
399
- * $('div', {create: el => {...}}) // Run function on create
400
- * $('div', {destroy: 'fade-out'}) // Add class before remove
401
- * $('div', {destroy: el => {...}}) // Run function before remove
402
- *
403
- * // Content
404
- * $('div', {html: '<b>Bold</b>'}) // Set innerHTML
405
- * $('div', {text: 'Plain text'}) // Add text node
406
- * const myElement = document.createElement('video')
407
- * $('div', {element: myElement}) // Add existing DOM element
408
- *
409
- * // Regular attributes (everything else)
410
- * $('div', {title: 'Info'}) // el.setAttribute('title', 'info')
411
- * ```
412
- *
413
- * When a `Store` is passed as a value, a seperate observe-scope will
414
- * be created for it, such that when the `Store` changes, only *that*
415
- * UI property will need to be updated.
416
- * So in the following example, when `colorStore` changes, only the
417
- * `color` CSS property will be updated.
418
- * ```js
419
- * $('div', {
420
- * '.active': activeStore, // Reactive class
421
- * $color: colorStore, // Reactive style
422
- * text: textStore // Reactive text
423
- * })
424
- * ```
425
- *
426
- * ### Two-way input binding
427
- * Set the initial value of an <input> <textarea> or <select> to that
428
- * of a `Store`, and then start reflecting user changes to the former
429
- * in the latter.
430
- * ```js
431
- * $('input', {bind: myStore}) // Binds input.value
432
- * ```
433
- * This is a special case, as changes to the `Store` will *not* be
434
- * reflected in the UI.
435
- *
436
- * ### Function arguments
437
- * Create child scopes that re-run on observed `Store` changes:
438
- * ```js
439
- * $('div', () => {
440
- * $(myStore.get() ? 'span' : 'p') // Reactive element type
441
- * })
442
- * ```
443
- * When *only* a function is given, `$` behaves exactly like {@link Store.observe},
444
- * except that it will only work when we're inside a `mount`.
445
- *
446
- * @throws {ScopeError} If called outside an observable scope.
447
- * @throws {Error} If invalid arguments are provided.
448
- */
449
- export declare function $(...args: (string | (() => void) | false | null | undefined | {
450
- [key: string]: any;
451
- })[]): void;
452
- /**
453
- * Set a custome error handling function, thast is called when an error occurs during rendering
454
- * while in a reactive scope. The default implementation logs the error to the console, and then
455
- * just returns `true`, which causes an 'Error' message to be displayed in the UI. When this function
456
- * returns `false`, the error is suppressed. This mechanism exists because rendering errors can occur
457
- * at any time, not just synchronous when making a call to Aberdeen, thus normal exception handling
458
- * is not always possible.
459
- *
460
- * @param handler The handler function, getting an `Error` as its argument, and returning `false`
461
- * if it does *not* want an error message to be added to the DOM.
462
- * When `handler is `undefined`, the default error handling will be reinstated.
463
- *
464
- * @example
465
- * ```javascript
466
- * //
467
- * setErrorHandler(error => {
468
- * // Tell our developers about the problem.
469
- * fancyErrorLogger(error)
470
- * // Add custom error message to the DOM.
471
- * try {
472
- * $('.error:Sorry, something went wrong!')
473
- * } catch() {} // In case there is no parent element.
474
- * // Don't add default error message to the DOM.
475
- * return false
476
- * })
477
- * ```
478
- */
479
- export declare function setErrorHandler(handler?: (error: Error) => boolean | undefined): void;
480
- /**
481
- * Return the browser Element that nodes would be rendered to at this point.
482
- * NOTE: Manually changing the DOM is not recommended in most cases. There is
483
- * usually a better, declarative way. Although there are no hard guarantees on
484
- * how your changes interact with Aberdeen, in most cases results will not be
485
- * terribly surprising. Be careful within the parent element of onEach() though.
486
- */
487
- export declare function getParentElement(): Element;
488
- /**
489
- * Register a function that is to be executed right before the current reactive scope
490
- * disappears or redraws.
491
- * @param clean - The function to be executed.
492
- */
493
- export declare function clean(clean: () => void): void;
494
- /**
495
- * Reactively run a function, meaning the function will rerun when any `Store` that was read
496
- * during its execution is updated.
497
- * Calls to `observe` can be nested, such that changes to `Store`s read by the inner function do
498
- * no cause the outer function to rerun.
499
- *
500
- * @param func - The function to be (repeatedly) executed.
501
- * @returns The mount id (usable for `unmount`) if this is a top-level observe.
502
- * @example
503
- * ```
504
- * let number = new Store(0)
505
- * let doubled = new Store()
506
- * setInterval(() => number.set(0|Math.random()*100)), 1000)
507
- *
508
- * observe(() => {
509
- * doubled.set(number.get() * 2)
510
- * })
511
- *
512
- * observe(() => {
513
- * console.log(doubled.get())
514
- * })
515
- */
516
- export declare function observe(func: () => void): number | undefined;
517
- /**
518
- * Like `observe`, but instead of deferring running the observer function until
519
- * a setTimeout 0, run it immediately and synchronously when a change to one of
520
- * the observed `Store`s is made. Use this sparingly, as this prevents Aberdeen
521
- * from doing the usual batching and smart ordering of observers, leading to
522
- * performance problems and observing of 'weird' partial states.
523
- * @param func The function to be (repeatedly) executed.
524
- * @returns The mount id (usable for `unmount`) if this is a top-level observe.
525
- */
526
- export declare function immediateObserve(func: () => void): number | undefined;
527
- /**
528
- * Reactively run the function, adding any DOM-elements created using {@link $} to the given parent element.
529
-
530
- * @param func - The function to be (repeatedly) executed, possibly adding DOM elements to `parentElement`.
531
- * @param parentElement - A DOM element that will be used as the parent element for calls to `$`.
532
- * @returns The mount id (usable for `unmount`) if this is a top-level mount.
533
- *
534
- * @example
535
- * ```
536
- * let store = new Store(0)
537
- * setInterval(() => store.modify(v => v+1), 1000)
538
- *
539
- * mount(document.body, () => {
540
- * $(`h2:${store.get()} seconds have passed`)
541
- * })
542
- * ```
543
- *
544
- * An example nesting {@link Store.observe} within `mount`:
545
- * ```
546
- * let selected = new Store(0)
547
- * let colors = new Store(new Map())
548
- *
549
- * mount(document.body, () => {
550
- * // This function will never rerun (as it does not read any `Store`s)
551
- * $('button:<<', {click: () => selected.modify(n => n-1)})
552
- * $('button:>>', {click: () => selected.modify(n => n+1)})
553
- *
554
- * observe(() => {
555
- * // This will rerun whenever `selected` changes, recreating the <h2> and <input>.
556
- * $('h2', {text: '#' + selected.get()})
557
- * $('input', {type: 'color', value: '#ffffff' bind: colors(selected.get())})
558
- * })
559
- *
560
- * observe(() => {
561
- * // This function will rerun when `selected` or the selected color changes.
562
- * // It will change the <body> background-color.
563
- * $({$backgroundColor: colors.get(selected.get()) || 'white'})
564
- * })
565
- * })
566
- * ```
567
- */
568
- export declare function mount(parentElement: Element, func: () => void): number | undefined;
569
- /**
570
- * Unmount one specific or all top-level mounts or observes, meaning those that were created outside of the scope
571
- * of any other mount or observe.
572
- * @param id Optional mount number (as returned by `mount`, `observe` or `immediateObserve`). If `undefined`, unmount all.
573
- */
574
- export declare function unmount(id?: number): void;
575
- /** Runs the given function, while not subscribing the current scope when reading {@link Store.Store} values.
576
- *
577
- * @param func Function to be executed immediately.
578
- * @returns Whatever `func()` returns.
579
- * @example
580
- * ```
581
- * import {Store, peek, text} from aberdeen
582
- *
583
- * let store = new Store(['a', 'b', 'c'])
584
- *
585
- * mount(document.body, () => {
586
- * // Prevent rerender when store changes
587
- * let msg = peek(() => `Store has ${store.count()} elements, and the first is ${store.get(0)}`))
588
- * text(msg)
589
- * })
590
- * ```
591
- *
592
- * In the above example `store.get(0)` could be replaced with `store.peek(0)` to achieve the
593
- * same result without `peek()` wrapping everything. There is no non-subscribing equivalent
594
- * for `count()` however.
595
- */
596
- export declare function peek<T>(func: () => T): T;
597
- declare global {
598
- interface String {
599
- replaceAll(from: string, to: string): string;
600
- }
601
- }
@@ -1,29 +0,0 @@
1
- type ObsCollection = any;
2
- type Patch = Map<ObsCollection, Map<any, [any, any]>>;
3
- /**
4
- * Run the provided function, while treating all changes to Observables as predictions,
5
- * meaning they will be reverted when changes come back from the server (or some other
6
- * async source).
7
- * @param predictFunc The function to run. It will generally modify some Observables
8
- * to immediately reflect state (as closely as possible) that we expect the server
9
- * to communicate back to us later on.
10
- * @returns A `Patch` object. Don't modify it. This is only meant to be passed to `applyCanon`.
11
- */
12
- export declare function applyPrediction(predictFunc: () => void): Patch;
13
- /**
14
- * Temporarily revert all outstanding predictions, optionally run the provided function
15
- * (which will generally make authoritative changes to the data based on a server response),
16
- * and then attempt to reapply the predictions on top of the new canonical state, dropping
17
- * any predictions that can no longer be applied cleanly (the data has been modified) or
18
- * that were specified in `dropPredictions`.
19
- *
20
- * All of this is done such that redraws are only triggered if the overall effect is an
21
- * actual change to an `Observable`.
22
- * @param canonFunc The function to run without any predictions applied. This will typically
23
- * make authoritative changes to the data, based on a server response.
24
- * @param dropPredictions An optional list of predictions (as returned by `applyPrediction`)
25
- * to undo. Typically, when a server response for a certain request is being handled,
26
- * you'd want to drop the prediction that was done for that request.
27
- */
28
- export declare function applyCanon(canonFunc?: (() => void), dropPredictions?: Array<Patch>): void;
29
- export {};
@@ -1,30 +0,0 @@
1
- import { Store } from './aberdeen.js';
2
- /**
3
- * A `Store` object that holds the following keys:
4
- * - `path`: The current path of the URL split into components. For instance `/` or `/users/123/feed`. Updates will be reflected in the URL and will *push* a new entry to the browser history.
5
- * - `p`: Array containing the path segments. For instance `[]` or `['users', 123, 'feed']`. Updates will be reflected in the URL and will *push* a new entry to the browser history. Also, the values of `p` and `path` will be synced.
6
- * - `search`: An observable object containing search parameters (a split up query string). For instance `{order: "date", title: "something"}` or just `{}`. By default, updates will be reflected in the URL, replacing the current history state.
7
- * - `hash`: The document hash part of the URL. For instance `"#section-title"`. It can also be an empty string. Updates will be reflected in the URL, modifying the current history state.
8
- * - `id`: A part of the browser history *state* that is considered part of the page *identify*, meaning changes will (by default) cause a history push, and when going *back*, it must match.
9
- * - `aux`: The auxiliary part of the browser history *state*, not considered part of the page *identity*. Changes will be reflected in the browser history using a replace.
10
- * - `depth`: The navigation depth of the current session. Starts at 1. Writing to this property has no effect.
11
- * - `nav`: The navigation action that got us to this page. Writing to this property has no effect.
12
- * - `"load"`: An initial page load.
13
- * - `"back"` or `"forward"`: When we navigated backwards or forwards in the stack.
14
- * - `"push"`: When we added a new page on top of the stack.
15
- *
16
- * The following key may also be written to `route` but will be immediately and silently removed:
17
- * - `mode`: As described above, this library takes a best guess about whether pushing an item to the browser history makes sense or not. When `mode` is...
18
- * - `"push"`: Force creation of a new browser history entry.
19
- * - `"replace"`: Update the current history entry, even when updates to other keys would normally cause a *push*.
20
- * - `"back"`: Unwind the history (like repeatedly pressing the *back* button) until we find a page that matches the given `path` and `id`, and then *replace* that state by the full given state.
21
- */
22
- export declare const route: Store;
23
- /**
24
- * Restore and store the vertical and horizontal scroll position for
25
- * the parent element to the page state.
26
- *
27
- * @param {string} name - A unique (within this page) name for this
28
- * scrollable element. Defaults to 'main'.
29
- */
30
- export declare function persistScroll(name?: string): void;
@@ -1,18 +0,0 @@
1
- /** Do a grow transition for the given element. This is meant to be used as a
2
- * handler for the `create` property.
3
- *
4
- * @param el The element to transition.
5
- *
6
- * The transition doesn't look great for table elements, and may have problems
7
- * for other specific cases as well.
8
- */
9
- export declare function grow(el: HTMLElement): Promise<void>;
10
- /** Do a shrink transition for the given element, and remove it from the DOM
11
- * afterwards. This is meant to be used as a handler for the `destroy` property.
12
- *
13
- * @param el The element to transition and remove.
14
- *
15
- * The transition doesn't look great for table elements, and may have problems
16
- * for other specific cases as well.
17
- */
18
- export declare function shrink(el: HTMLElement): Promise<void>;