aberdeen 0.4.0 → 1.0.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.
- package/LICENSE.txt +1 -1
- package/README.md +138 -96
- package/dist/aberdeen.d.ts +652 -528
- package/dist/aberdeen.js +1144 -1957
- package/dist/aberdeen.js.map +11 -1
- package/dist/helpers/reverseSortedSet.d.ts +91 -0
- package/dist/prediction.d.ts +7 -3
- package/dist/prediction.js +77 -93
- package/dist/prediction.js.map +10 -1
- package/dist/route.d.ts +36 -19
- package/dist/route.js +131 -158
- package/dist/route.js.map +10 -1
- package/dist/transitions.js +30 -70
- package/dist/transitions.js.map +10 -1
- package/dist-min/aberdeen.js +7 -2
- package/dist-min/aberdeen.js.map +11 -1
- package/dist-min/prediction.js +4 -2
- package/dist-min/prediction.js.map +10 -1
- package/dist-min/route.js +4 -2
- package/dist-min/route.js.map +10 -1
- package/dist-min/transitions.js +4 -2
- package/dist-min/transitions.js.map +10 -1
- package/package.json +20 -23
- package/src/aberdeen.ts +1933 -1814
- package/src/helpers/reverseSortedSet.ts +188 -0
- package/src/prediction.ts +14 -9
- package/src/route.ts +81 -64
- package/src/transitions.ts +1 -14
- package/dist-min/aberdeen.d.ts +0 -601
- package/dist-min/prediction.d.ts +0 -29
- package/dist-min/route.d.ts +0 -30
- package/dist-min/transitions.d.ts +0 -18
package/dist-min/aberdeen.d.ts
DELETED
|
@@ -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
|
-
}
|
package/dist-min/prediction.d.ts
DELETED
|
@@ -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 {};
|
package/dist-min/route.d.ts
DELETED
|
@@ -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>;
|