aberdeen 0.0.16 → 0.1.0

package/README.md

@@ -115,4 +115,16 @@ mount(document.body, () => {
 
 ## Reference documentation
 
-https://vanviegen.github.io/aberdeen/
+https://vanviegen.github.io/aberdeen/modules.html
+
+
+## Roadmap
+
+- [x] Support for (dis)appear transitions.
+- [x] A better alternative for scheduleTask.
+- [ ] A simple router.
+- [ ] Architecture document.
+- [x] Optimistic client-side predictions.
+- [ ] SVG support.
+- [ ] More user friendly documentation generator.
+- [ ] Performance profiling and tuning regarding lists.

package/dist/aberdeen.d.ts

@@ -2,6 +2,43 @@ interface QueueRunner {
     queueOrder: number;
     queueRun(): void;
 }
+type Patch = Map<ObsCollection, Map<any, [any, any]>>;
+/**
+ * Schedule a DOM read operation to be executed in Aberdeen's internal task queue.
+ *
+ * This function is used to batch DOM read operations together, avoiding unnecessary
+ * layout recalculations and improving browser performance. A DOM read operation should
+ * only *read* from the DOM, such as measuring element dimensions or retrieving computed styles.
+ *
+ * By batching DOM reads separately from DOM writes, this prevents the browser from
+ * interleaving layout reads and writes, which can force additional layout recalculations.
+ * This helps reduce visual glitches and flashes by ensuring the browser doesn't render
+ * intermediate DOM states during updates.
+ *
+ * Unlike `setTimeout` or `requestAnimationFrame`, this mechanism ensures that DOM read
+ * operations happen before any DOM writes in the same queue cycle, minimizing layout thrashing.
+ *
+ * @param func The function to be executed as a DOM read operation.
+ */
+export declare function scheduleDomReader(func: () => void): void;
+/**
+ * Schedule a DOM write operation to be executed in Aberdeen's internal task queue.
+ *
+ * This function is used to batch DOM write operations together, avoiding unnecessary
+ * layout recalculations and improving browser performance. A DOM write operation should
+ * only *write* to the DOM, such as modifying element properties or applying styles.
+ *
+ * By batching DOM writes separately from DOM reads, this prevents the browser from
+ * interleaving layout reads and writes, which can force additional layout recalculations.
+ * This helps reduce visual glitches and flashes by ensuring the browser doesn't render
+ * intermediate DOM states during updates.
+ *
+ * Unlike `setTimeout` or `requestAnimationFrame`, this mechanism ensures that DOM write
+ * operations happen after all DOM reads in the same queue cycle, minimizing layout thrashing.
+ *
+ * @param func The function to be executed as a DOM write operation.
+ */
+export declare function scheduleDomWriter(func: () => void): void;
 type SortKeyType = number | string | Array<number | string>;
 interface Observer {
     onChange(index: any, newData: DatumType, oldData: DatumType): void;
@@ -16,7 +53,7 @@ declare abstract class Scope implements QueueRunner, Observer {
     }>;
     isDead: boolean;
     constructor(parentElement: Element | undefined, precedingSibling: Node | Scope | undefined, queueOrder: number);
-    findPrecedingNode(): Node | undefined;
+    findPrecedingNode(stopAt?: Scope | Node | undefined): Node | undefined;
     findLastNode(): Node | undefined;
     addNode(node: Node): void;
     remove(): void;
@@ -102,7 +139,7 @@ declare class ObsMap extends ObsCollection {
  *
  * Supported data types are: `string`, `number`, `boolean`, `undefined`, `null`,
  * `Array`, `object` and `Map`. The latter three will always have `Store` objects as
- * values, creating a tree of `Store`s.
+ * values, creating a tree of `Store`-objects.
  */
 export declare class Store {
     private collection;
@@ -110,7 +147,7 @@ export declare class Store {
     /**
      * Create a new store with the given `value` as its value. Defaults to `undefined` if no value is given.
      * When the value is a plain JavaScript object, an `Array` or a `Map`, it will be stored as a tree of
-     * `Store`s. (Calling [[`get`]] on the store will recreate the original data strucure, though.)
+     * `Store`s. (Calling {@link Store.get} on the store will recreate the original data strucure, though.)
      *
      * @example
      * ```
@@ -153,46 +190,46 @@ export declare class Store {
      */
     get(...path: any[]): any;
     /**
-     * Like [[`get`]], but doesn't subscribe to changes.
+     * Like {@link Store.get}, but doesn't subscribe to changes.
      */
     peek(...path: any[]): any;
     /**
-     * @returns Like [[`get`]], but throws a `TypeError` if the resulting value is not of type `number`.
-     * Using this instead of just [[`get`]] is especially useful from within TypeScript.
+     * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `number`.
+     * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
      */
     getNumber(...path: any[]): number;
     /**
-     * @returns Like [[`get`]], but throws a `TypeError` if the resulting value is not of type `string`.
-     * Using this instead of just [[`get`]] is especially useful from within TypeScript.
+     * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `string`.
+     * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
      */
     getString(...path: any[]): string;
     /**
-     * @returns Like [[`get`]], but throws a `TypeError` if the resulting value is not of type `boolean`.
-     * Using this instead of just [[`get`]] is especially useful from within TypeScript.
+     * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `boolean`.
+     * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
      */
     getBoolean(...path: any[]): boolean;
     /**
-     * @returns Like [[`get`]], but throws a `TypeError` if the resulting value is not of type `function`.
-     * Using this instead of just [[`get`]] is especially useful from within TypeScript.
+     * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `function`.
+     * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
      */
     getFunction(...path: any[]): (Function);
     /**
-     * @returns Like [[`get`]], but throws a `TypeError` if the resulting value is not of type `array`.
-     * Using this instead of just [[`get`]] is especially useful from within TypeScript.
+     * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `array`.
+     * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
      */
     getArray(...path: any[]): any[];
     /**
-     * @returns Like [[`get`]], but throws a `TypeError` if the resulting value is not of type `object`.
-     * Using this instead of just [[`get`]] is especially useful from within TypeScript.
+     * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `object`.
+     * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
      */
     getObject(...path: any[]): object;
     /**
-     * @returns Like [[`get`]], but throws a `TypeError` if the resulting value is not of type `map`.
-     * Using this instead of just [[`get`]] is especially useful from within TypeScript.
+     * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `map`.
+     * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
      */
     getMap(...path: any[]): Map<any, any>;
     /**
-     * Like [[`get`]], but the first parameter is the default value (returned when the Store
+     * Like {@link Store.get}, but the first parameter is the default value (returned when the Store
      * contains `undefined`). This default value is also used to determine the expected type,
      * and to throw otherwise.
      *
@@ -206,7 +243,7 @@ export declare class Store {
      */
     getOr<T>(defaultValue: T, ...path: any[]): T;
     /** Retrieve a value, subscribing to all read `Store` values. This is a more flexible
-     * form of the [[`get`]] and [[`peek`]] methods.
+     * form of the {@link Store.get} and {@link Store.peek} methods.
      *
      * @returns The resulting value, or `undefined` if the `path` does not exist.
      */
@@ -263,15 +300,15 @@ export declare class Store {
     getType(...path: any[]): string;
     /**
      * Sets the value to the last given argument. Any earlier argument are a Store-path that is first
-     * resolved/created using [[`makeRef`]].
+     * resolved/created using {@link Store.makeRef}.
      *
      * When a `Store` is passed in as the value, its value will be copied (subscribing to changes). In
      * case the value is an object, an `Array` or a `Map`, a *reference* to that data structure will
      * be created, so that changes made through one `Store` will be reflected through the other. Be
      * carefull not to create loops in your `Store` tree that way, as that would cause any future
-     * call to [[`get`]] to throw a `RangeError` (Maximum call stack size exceeded.)
+     * call to {@link Store.get} to throw a `RangeError` (Maximum call stack size exceeded.)
      *
-     * If you intent to make a copy instead of a reference, call [[`get`]] on the origin `Store`.
+     * If you intent to make a copy instead of a reference, call {@link Store.get} on the origin `Store`.
      *
      *
      * @example
@@ -340,7 +377,7 @@ export declare class Store {
      */
     push(...pathAndValue: any[]): number;
     /**
-     * [[`peek`]] the current value, pass it through `func`, and [[`set`]] the resulting
+     * {@link Store.peek} the current value, pass it through `func`, and {@link Store.set} the resulting
      * value.
      * @param func The function transforming the value.
      */
@@ -350,7 +387,7 @@ export declare class Store {
      * subscribing to every level.
      * In case `undefined` is encountered while resolving the path, a newly
      * created `Store` containing `undefined` is returned. In that case, the
-     * `Store`'s [[`isDetached`]] method will return `true`.
+     * `Store`'s {@link Store.isDetached} method will return `true`.
      * In case something other than a collection is encountered, an error is thrown.
      */
     ref(...path: any[]): Store;
@@ -375,12 +412,12 @@ export declare class Store {
      * ```
      */
     makeRef(...path: any[]): Store;
-    /** @Internal */
+    /** @internal */
     _observe(): DatumType;
     /**
      * Iterate the specified collection (Array, Map or object), running the given code block for each item.
      * When items are added to the collection at some later point, the code block will be ran for them as well.
-     * When an item is removed, the [[`clean`]] handlers left by its code block are executed.
+     * When an item is removed, the {@link Store.clean} handlers left by its code block are executed.
      *
      *
      *
@@ -420,7 +457,7 @@ export declare class Store {
      */
     multiMap(func: (store: Store) => any): Store;
     /**
-     * @returns Returns `true` when the `Store` was created by [[`ref`]]ing a path that
+     * @returns Returns `true` when the `Store` was created by {@link Store.ref}ing a path that
      * does not exist.
      */
     isDetached(): boolean;
@@ -431,7 +468,7 @@ export declare class Store {
  * @param tag - The tag of the element to be created and optionally dot-separated class names. For example: `h1` or `p.intro.has_avatar`.
  * @param rest - The other arguments are flexible and interpreted based on their types:
  *   - `string`: Used as textContent for the element.
- *   - `object`: Used as attributes, properties or event listeners for the element. See [[`prop`]] on how the distinction is made.
+ *   - `object`: Used as attributes, properties or event listeners for the element. See {@link Store.prop} on how the distinction is made and to read about a couple of special keys.
  *   - `function`: The render function used to draw the scope of the element. This function gets its own `Scope`, so that if any `Store` it reads changes, it will redraw by itself.
  *   - `Store`: Presuming `tag` is `"input"`, `"textarea"` or `"select"`, create a two-way binding between this `Store` value and the input element. The initial value of the input will be set to the initial value of the `Store`, or the other way around if the `Store` holds `undefined`. After that, the `Store` will be updated when the input changes and vice versa.
  * @example
@@ -457,8 +494,63 @@ export declare function text(text: string): void;
  * without recreating the element itself. Also, code can be more readable this way.
  * Note that when a nested `observe()` is used, properties set this way do NOT
  * automatically revert to their previous values.
+ *
+ * Here's how properties are handled:
+ * - If `name` is `"create"`, `value` should be either a function that gets
+ *   called with the element as its only argument immediately after creation,
+ *   or a string being the name of a CSS class that gets added immediately
+ *   after element creation, and removed shortly afterwards. This allows for
+ *   reveal animations. However, this is intentionally *not* done
+ *   for elements that are created as part of a larger (re)draw, to prevent
+ *   all elements from individually animating on page creation.
+ * - If `name` is `"destroy"`, `value` should be a function that gets called
+ *   with the element as its only argument, *instead of* the element being
+ *   removed from the DOM (which the function will presumably need to do
+ *   eventually). This can be used for a conceal animation.
+ *   As a convenience, it's also possible to provide a string instead of
+ *   a function, which will be added to the element as a CSS class, allowing
+ *   for simple transitions. In this case, the DOM element in removed 2 seconds
+ *   later (currently not configurable).
+ *   Similar to `"create"` (and in this case doing anything else would make little
+ *   sense), this only happens when the element being is the top-level element
+ *   being removed from the DOM.
+ * - If `value` is a function, it is registered as an event handler for the
+ *   `name` event.
+ * - If `name` is `"class"` or `"className"` and the `value` is an
+ *   object, all keys of the object are either added or removed from `classList`,
+ *   depending on whether `value` is true-like or false-like.
+ * - If `value` is a boolean *or* `name` is `"value"`, `"className"` or
+ *   `"selectedIndex"`, it is set as a DOM element *property*.
+ * - If `name` is `"text"`, the `value` is set as the element's `textContent`.
+ * - If `name` is `"style"` and `value` is an object, each of its
+ *   key/value pairs are assigned to the element's `.style`.
+ * - In other cases, the `value` is set as the `name` HTML *attribute*.
+ *
+ * @example
+ * ```
+ * node('input', () => {
+ *	   prop('type', 'password')
+ *	   prop('readOnly', true)
+ *	   prop('class', 'my-class')
+ *	   prop('class', {
+ *	   		'my-disabled-class': false,
+ *	   		'my-enabled-class': true,
+ *	   })
+ *	   prop({
+ *	   		class: 'my-class',
+ *	   		text: 'Here is something to read...',
+ *	   		style: {
+ *	   			backgroundColor: 'red',
+ *	   			fontWeight: 'bold',
+ *	   		},
+ *	   		create: aberdeen.fadeIn,
+ *	   		destroy: 'my-fade-out-class',
+ *	   		click: myClickHandler,
+ *	   })
+ * })
+ * ```
  */
-export declare function prop(prop: string, value: any): void;
+export declare function prop(name: string, value: any): void;
 export declare function prop(props: object): void;
 /**
  * Return the browser Element that `node()`s would be rendered to at this point.
@@ -497,7 +589,7 @@ export declare function clean(clean: (scope: Scope) => void): void;
  */
 export declare function observe(func: () => void): void;
 /**
- * Like [[`observe`]], but allow the function to create DOM elements using [[`node`]].
+ * Like {@link Store.observe}, but allow the function to create DOM elements using {@link Store.node}.
 
  * @param func - The function to be (repeatedly) executed, possibly adding DOM elements to `parentElement`.
  * @param parentElement - A DOM element that will be used as the parent element for calls to `node`.
@@ -512,7 +604,7 @@ export declare function observe(func: () => void): void;
  * })
  * ```
  *
- * An example nesting [[`observe`]] within `mount`:
+ * An example nesting {@link Store.observe} within `mount`:
  * ```
  * let selected = new Store(0)
  * let colors = new Store(new Map())
@@ -537,7 +629,7 @@ export declare function observe(func: () => void): void;
  * ```
 */
 export declare function mount(parentElement: Element | undefined, func: () => void): void;
-/** Runs the given function, while not subscribing the current scope when reading [[`Store`]] values.
+/** Runs the given function, while not subscribing the current scope when reading {@link Store.Store} values.
  *
  * @param func Function to be executed immediately.
  * @returns Whatever `func()` returns.
@@ -559,4 +651,48 @@ export declare function mount(parentElement: Element | undefined, func: () => vo
  * for `count()` however.
  */
 export declare function peek<T>(func: () => T): T;
+/** Do a grow transition for the given element. This is meant to be used as a
+* handler for the `create` property.
+*
+* @param el The element to transition.
+*
+* The transition doesn't look great for table elements, and may have problems
+* for other specific cases as well.
+*/
+export declare function grow(el: HTMLElement): void;
+/** Do a shrink transition for the given element, and remove it from the DOM
+* afterwards. This is meant to be used as a handler for the `destroy` property.
+*
+* @param el The element to transition and remove.
+*
+* The transition doesn't look great for table elements, and may have problems
+* for other specific cases as well.
+*/
+export declare function shrink(el: HTMLElement): void;
+/**
+ * Run the provided function, while treating all changes to Observables as predictions,
+ * meaning they will be reverted when changes come back from the server (or some other
+ * async source).
+ * @param predictFunc The function to run. It will generally modify some Observables
+ * 	to immediately reflect state (as closely as possible) that we expect the server
+ *  to communicate back to us later on.
+ * @returns A `Patch` object. Don't modify it. This is only meant to be passed to `applyCanon`.
+ */
+export declare function applyPrediction(predictFunc: () => void): Patch;
+/**
+ * Temporarily revert all outstanding predictions, optionally run the provided function
+ * (which will generally make authoritative changes to the data based on a server response),
+ * and then attempt to reapply the predictions on top of the new canonical state, dropping
+ * any predictions that can no longer be applied cleanly (the data has been modified) or
+ * that were specified in `dropPredictions`.
+ *
+ * All of this is done such that redraws are only triggered if the overall effect is an
+ * actual change to an `Observable`.
+ * @param canonFunc The function to run without any predictions applied. This will typically
+ *  make authoritative changes to the data, based on a server response.
+ * @param dropPredictions An optional list of predictions (as returned by `applyPrediction`)
+ *  to undo. Typically, when a server response for a certain request is being handled,
+ *  you'd want to drop the prediction that was done for that request.
+ */
+export declare function applyCanon(canonFunc?: (() => void), dropPredictions?: Array<Patch>): void;
 export {};

package/dist/aberdeen.js

@@ -2,6 +2,8 @@ let queueArray = [];
 let queueSet = new Set();
 let queueOrdered = true;
 let runQueueDepth = 0;
+let queueIndex;
+let recordingPatch;
 function queue(runner) {
     if (queueSet.has(runner))
         return;
@@ -18,24 +20,74 @@ function queue(runner) {
     queueSet.add(runner);
 }
 function runQueue() {
-    for (let index = 0; index < queueArray.length;) {
+    onCreateEnabled = true;
+    for (queueIndex = 0; queueIndex < queueArray.length;) {
+        // Sort queue if new unordered items have been added since last time.
         if (!queueOrdered) {
-            queueArray.splice(0, index);
-            index = 0;
-            // Order queued observers by depth, lowest first
+            queueArray.splice(0, queueIndex);
+            queueIndex = 0;
+            // Order queued observers by depth, lowest first.
             queueArray.sort((a, b) => a.queueOrder - b.queueOrder);
             queueOrdered = true;
         }
+        // Process the rest of what's currently in the queue.
         let batchEndIndex = queueArray.length;
-        for (; index < batchEndIndex && queueOrdered; index++) {
-            let runner = queueArray[index];
+        for (; queueIndex < batchEndIndex && queueOrdered; queueIndex++) {
+            let runner = queueArray[queueIndex];
             queueSet.delete(runner);
             runner.queueRun();
         }
+        // If new items have been added to the queue while processing the previous
+        // batch, we'll need to run this loop again.
         runQueueDepth++;
     }
     queueArray.length = 0;
+    queueIndex = undefined;
     runQueueDepth = 0;
+    onCreateEnabled = false;
+}
+let scheduleOrder = 1000;
+/**
+ * Schedule a DOM read operation to be executed in Aberdeen's internal task queue.
+ *
+ * This function is used to batch DOM read operations together, avoiding unnecessary
+ * layout recalculations and improving browser performance. A DOM read operation should
+ * only *read* from the DOM, such as measuring element dimensions or retrieving computed styles.
+ *
+ * By batching DOM reads separately from DOM writes, this prevents the browser from
+ * interleaving layout reads and writes, which can force additional layout recalculations.
+ * This helps reduce visual glitches and flashes by ensuring the browser doesn't render
+ * intermediate DOM states during updates.
+ *
+ * Unlike `setTimeout` or `requestAnimationFrame`, this mechanism ensures that DOM read
+ * operations happen before any DOM writes in the same queue cycle, minimizing layout thrashing.
+ *
+ * @param func The function to be executed as a DOM read operation.
+ */
+export function scheduleDomReader(func) {
+    let order = (queueIndex != null && queueIndex < queueArray.length && queueArray[queueIndex].queueOrder >= 1000) ? ((queueArray[queueIndex].queueOrder + 1) & (~1)) : 1000;
+    queue({ queueOrder: order, queueRun: func });
+}
+/**
+ * Schedule a DOM write operation to be executed in Aberdeen's internal task queue.
+ *
+ * This function is used to batch DOM write operations together, avoiding unnecessary
+ * layout recalculations and improving browser performance. A DOM write operation should
+ * only *write* to the DOM, such as modifying element properties or applying styles.
+ *
+ * By batching DOM writes separately from DOM reads, this prevents the browser from
+ * interleaving layout reads and writes, which can force additional layout recalculations.
+ * This helps reduce visual glitches and flashes by ensuring the browser doesn't render
+ * intermediate DOM states during updates.
+ *
+ * Unlike `setTimeout` or `requestAnimationFrame`, this mechanism ensures that DOM write
+ * operations happen after all DOM reads in the same queue cycle, minimizing layout thrashing.
+ *
+ * @param func The function to be executed as a DOM write operation.
+ */
+export function scheduleDomWriter(func) {
+    let order = (queueIndex != null && queueIndex < queueArray.length && queueArray[queueIndex].queueOrder >= 1000) ? (queueArray[queueIndex].queueOrder | 1) : 1001;
+    queue({ queueOrder: order, queueRun: func });
 }
 /**
  * Given an integer number, a string or an array of these, this function returns a string that can be used
@@ -96,24 +148,27 @@ class Scope {
         this.precedingSibling = precedingSibling;
         this.queueOrder = queueOrder;
     }
-    // Get a reference to the last Node preceding 
-    findPrecedingNode() {
-        let pre = this.precedingSibling;
-        while (pre) {
+    // Get a reference to the last Node preceding this Scope, or undefined if there is none
+    findPrecedingNode(stopAt = undefined) {
+        let cur = this;
+        let pre;
+        while ((pre = cur.precedingSibling) && pre !== stopAt) {
             if (pre instanceof Node)
                 return pre;
             let node = pre.findLastNode();
             if (node)
                 return node;
-            pre = pre.precedingSibling;
+            cur = pre;
         }
     }
     // Get a reference to the last Node within this scope and parentElement
     findLastNode() {
-        if (this.lastChild instanceof Node)
-            return this.lastChild;
-        if (this.lastChild instanceof Scope)
-            return this.lastChild.findLastNode() || this.lastChild.findPrecedingNode();
+        if (this.lastChild) {
+            if (this.lastChild instanceof Node)
+                return this.lastChild;
+            else
+                return this.lastChild.findLastNode() || this.lastChild.findPrecedingNode(this.precedingSibling);
+        }
     }
     addNode(node) {
         if (!this.parentElement)
@@ -127,20 +182,37 @@ class Scope {
             let lastNode = this.findLastNode();
             if (lastNode) {
                 // at least one DOM node to be removed
-                let precedingNode = this.findPrecedingNode();
-                // Keep removing DOM nodes starting at our last node, until we encounter the preceding node
-                // (which can be undefined)
-                while (lastNode !== precedingNode) {
+                let nextNode = this.findPrecedingNode();
+                nextNode = (nextNode ? nextNode.nextSibling : this.parentElement.firstChild);
+                this.lastChild = undefined;
+                // Keep removing DOM nodes starting at our first node, until we encounter the last node
+                while (true) {
                     /* istanbul ignore next */
-                    if (!lastNode) {
+                    if (!nextNode)
                         return internalError(1);
+                    const node = nextNode;
+                    nextNode = node.nextSibling || undefined;
+                    let onDestroy = onDestroyMap.get(node);
+                    if (onDestroy && node instanceof Element) {
+                        if (onDestroy !== true) {
+                            if (typeof onDestroy === 'function') {
+                                onDestroy(node);
+                            }
+                            else {
+                                destroyWithClass(node, onDestroy);
+                            }
+                            // This causes the element to be ignored from this function from now on:
+                            onDestroyMap.set(node, true);
+                        }
+                        // Ignore the deleting element
+                    }
+                    else {
+                        this.parentElement.removeChild(node);
                     }
-                    let nextLastNode = lastNode.previousSibling || undefined;
-                    this.parentElement.removeChild(lastNode);
-                    lastNode = nextLastNode;
+                    if (node === lastNode)
+                        break;
                 }
             }
-            this.lastChild = undefined;
         }
         // run cleaners
         this._clean();
@@ -223,6 +295,9 @@ class OnEachScope extends Scope {
         this.renderer = renderer;
         this.makeSortKey = makeSortKey;
     }
+    // toString(): string {
+    // 	return `OnEachScope(collection=${this.collection})`
+    // }
     onChange(index, newData, oldData) {
         if (oldData === undefined) {
             if (this.removedIndexes.has(index)) {
@@ -288,9 +363,9 @@ class OnEachScope extends Scope {
         if (!scope) {
             return internalError(6);
         }
+        scope.remove();
         this.byIndex.delete(itemIndex);
         this.removeFromPosition(scope);
-        scope.remove();
     }
     findPosition(sortStr) {
         // In case of duplicate `sortStr`s, this will return the first match.
@@ -315,12 +390,14 @@ class OnEachScope extends Scope {
         let pos = this.findPosition(child.sortStr);
         this.byPosition.splice(pos, 0, child);
         // Based on the position in the list, set the precedingSibling for the new Scope
-        child.precedingSibling = pos > 0 ? this.byPosition[pos - 1] : this.precedingSibling;
-        // Now set the precedingSibling for the subsequent item to this new Scope
-        if (pos + 1 < this.byPosition.length) {
-            this.byPosition[pos + 1].precedingSibling = child;
+        // and for the next sibling.
+        let nextSibling = this.byPosition[pos + 1];
+        if (nextSibling) {
+            child.precedingSibling = nextSibling.precedingSibling;
+            nextSibling.precedingSibling = child;
         }
         else {
+            child.precedingSibling = this.lastChild || this.precedingSibling;
             this.lastChild = child;
         }
     }
@@ -333,10 +410,20 @@ class OnEachScope extends Scope {
                 // Yep, this is the right scope
                 this.byPosition.splice(pos, 1);
                 if (pos < this.byPosition.length) {
-                    this.byPosition[pos].precedingSibling = pos > 0 ? this.byPosition[pos - 1] : this.precedingSibling;
+                    let nextSibling = this.byPosition[pos];
+                    /* istanbul ignore next */
+                    if (!nextSibling)
+                        return internalError(8);
+                    /* istanbul ignore next */
+                    if (nextSibling.precedingSibling !== child)
+                        return internalError(13);
+                    nextSibling.precedingSibling = child.precedingSibling;
                 }
                 else {
-                    this.lastChild = this.byPosition.length ? this.byPosition[this.byPosition.length - 1] : undefined;
+                    /* istanbul ignore next */
+                    if (child !== this.lastChild)
+                        return internalError(12);
+                    this.lastChild = child.precedingSibling === this.precedingSibling ? undefined : child.precedingSibling;
                 }
                 return;
             }
@@ -355,6 +442,9 @@ class OnEachItemScope extends Scope {
         this.parent = parent;
         this.itemIndex = itemIndex;
     }
+    // toString(): string {
+    // 	return `OnEachItemScope(itemIndex=${this.itemIndex} parentElement=${this.parentElement} parent=${this.parent} precedingSibling=${this.precedingSibling} lastChild=${this.lastChild})`
+    // }
     queueRun() {
         /* istanbul ignore next */
         if (currentScope) {
@@ -412,6 +502,9 @@ class ObsCollection {
     constructor() {
         this.observers = new Map();
     }
+    // toString(): string {
+    // 	return JSON.stringify(peek(() => this.getRecursive(3)))
+    // }
     addObserver(index, observer) {
         observer = observer;
         let obsSet = this.observers.get(index);
@@ -430,12 +523,17 @@ class ObsCollection {
         obsSet.delete(observer);
     }
     emitChange(index, newData, oldData) {
-        let obsSet = this.observers.get(index);
-        if (obsSet)
-            obsSet.forEach(observer => observer.onChange(index, newData, oldData));
-        obsSet = this.observers.get(ANY_INDEX);
-        if (obsSet)
-            obsSet.forEach(observer => observer.onChange(index, newData, oldData));
+        if (recordingPatch) {
+            addToPatch(recordingPatch, this, index, newData, oldData);
+        }
+        else {
+            let obsSet = this.observers.get(index);
+            if (obsSet)
+                obsSet.forEach(observer => observer.onChange(index, newData, oldData));
+            obsSet = this.observers.get(ANY_INDEX);
+            if (obsSet)
+                obsSet.forEach(observer => observer.onChange(index, newData, oldData));
+        }
     }
     _clean(observer) {
         this.removeObserver(ANY_INDEX, observer);
@@ -639,7 +737,7 @@ class ObsObject extends ObsMap {
  *
  * Supported data types are: `string`, `number`, `boolean`, `undefined`, `null`,
  * `Array`, `object` and `Map`. The latter three will always have `Store` objects as
- * values, creating a tree of `Store`s.
+ * values, creating a tree of `Store`-objects.
  */
 export class Store {
     constructor(value = undefined, index = undefined) {
@@ -694,48 +792,48 @@ export class Store {
         return this.query({ path });
     }
     /**
-     * Like [[`get`]], but doesn't subscribe to changes.
+     * Like {@link Store.get}, but doesn't subscribe to changes.
      */
     peek(...path) {
         return this.query({ path, peek: true });
     }
     /**
-     * @returns Like [[`get`]], but throws a `TypeError` if the resulting value is not of type `number`.
-     * Using this instead of just [[`get`]] is especially useful from within TypeScript.
+     * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `number`.
+     * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
      */
     getNumber(...path) { return this.query({ path, type: 'number' }); }
     /**
-     * @returns Like [[`get`]], but throws a `TypeError` if the resulting value is not of type `string`.
-     * Using this instead of just [[`get`]] is especially useful from within TypeScript.
+     * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `string`.
+     * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
      */
     getString(...path) { return this.query({ path, type: 'string' }); }
     /**
-     * @returns Like [[`get`]], but throws a `TypeError` if the resulting value is not of type `boolean`.
-     * Using this instead of just [[`get`]] is especially useful from within TypeScript.
+     * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `boolean`.
+     * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
      */
     getBoolean(...path) { return this.query({ path, type: 'boolean' }); }
     /**
-     * @returns Like [[`get`]], but throws a `TypeError` if the resulting value is not of type `function`.
-     * Using this instead of just [[`get`]] is especially useful from within TypeScript.
+     * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `function`.
+     * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
      */
     getFunction(...path) { return this.query({ path, type: 'function' }); }
     /**
-     * @returns Like [[`get`]], but throws a `TypeError` if the resulting value is not of type `array`.
-     * Using this instead of just [[`get`]] is especially useful from within TypeScript.
+     * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `array`.
+     * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
      */
     getArray(...path) { return this.query({ path, type: 'array' }); }
     /**
-     * @returns Like [[`get`]], but throws a `TypeError` if the resulting value is not of type `object`.
-     * Using this instead of just [[`get`]] is especially useful from within TypeScript.
+     * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `object`.
+     * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
      */
     getObject(...path) { return this.query({ path, type: 'object' }); }
     /**
-     * @returns Like [[`get`]], but throws a `TypeError` if the resulting value is not of type `map`.
-     * Using this instead of just [[`get`]] is especially useful from within TypeScript.
+     * @returns Like {@link Store.get}, but throws a `TypeError` if the resulting value is not of type `map`.
+     * Using this instead of just {@link Store.get} is especially useful from within TypeScript.
      */
     getMap(...path) { return this.query({ path, type: 'map' }); }
     /**
-     * Like [[`get`]], but the first parameter is the default value (returned when the Store
+     * Like {@link Store.get}, but the first parameter is the default value (returned when the Store
      * contains `undefined`). This default value is also used to determine the expected type,
      * and to throw otherwise.
      *
@@ -758,7 +856,7 @@ export class Store {
         return this.query({ type, defaultValue, path });
     }
     /** Retrieve a value, subscribing to all read `Store` values. This is a more flexible
-     * form of the [[`get`]] and [[`peek`]] methods.
+     * form of the {@link Store.get} and {@link Store.peek} methods.
      *
      * @returns The resulting value, or `undefined` if the `path` does not exist.
      */
@@ -850,15 +948,15 @@ export class Store {
     }
     /**
      * Sets the value to the last given argument. Any earlier argument are a Store-path that is first
-     * resolved/created using [[`makeRef`]].
+     * resolved/created using {@link Store.makeRef}.
      *
      * When a `Store` is passed in as the value, its value will be copied (subscribing to changes). In
      * case the value is an object, an `Array` or a `Map`, a *reference* to that data structure will
      * be created, so that changes made through one `Store` will be reflected through the other. Be
      * carefull not to create loops in your `Store` tree that way, as that would cause any future
-     * call to [[`get`]] to throw a `RangeError` (Maximum call stack size exceeded.)
+     * call to {@link Store.get} to throw a `RangeError` (Maximum call stack size exceeded.)
      *
-     * If you intent to make a copy instead of a reference, call [[`get`]] on the origin `Store`.
+     * If you intent to make a copy instead of a reference, call {@link Store.get} on the origin `Store`.
      *
      *
      * @example
@@ -954,7 +1052,7 @@ export class Store {
         return pos;
     }
     /**
-     * [[`peek`]] the current value, pass it through `func`, and [[`set`]] the resulting
+     * {@link Store.peek} the current value, pass it through `func`, and {@link Store.set} the resulting
      * value.
      * @param func The function transforming the value.
      */
@@ -966,7 +1064,7 @@ export class Store {
      * subscribing to every level.
      * In case `undefined` is encountered while resolving the path, a newly
      * created `Store` containing `undefined` is returned. In that case, the
-     * `Store`'s [[`isDetached`]] method will return `true`.
+     * `Store`'s {@link Store.isDetached} method will return `true`.
      * In case something other than a collection is encountered, an error is thrown.
      */
     ref(...path) {
@@ -1019,7 +1117,7 @@ export class Store {
         }
         return store;
     }
-    /** @Internal */
+    /** @internal */
     _observe() {
         if (currentScope) {
             if (this.collection.addObserver(this.idx, currentScope)) {
@@ -1031,7 +1129,7 @@ export class Store {
     /**
      * Iterate the specified collection (Array, Map or object), running the given code block for each item.
      * When items are added to the collection at some later point, the code block will be ran for them as well.
-     * When an item is removed, the [[`clean`]] handlers left by its code block are executed.
+     * When an item is removed, the {@link Store.clean} handlers left by its code block are executed.
      *
      *
      *
@@ -1122,7 +1220,7 @@ export class Store {
                 result.forEach((value, key) => {
                     out.set(key, value);
                 });
-                keys = Array.from(result.keys());
+                keys = [...result.keys()];
             }
             else {
                 return;
@@ -1138,7 +1236,7 @@ export class Store {
         return out;
     }
     /**
-     * @returns Returns `true` when the `Store` was created by [[`ref`]]ing a path that
+     * @returns Returns `true` when the `Store` was created by {@link Store.ref}ing a path that
      * does not exist.
      */
     isDetached() { return false; }
@@ -1167,12 +1265,18 @@ export class Store {
 class DetachedStore extends Store {
     isDetached() { return true; }
 }
+let onCreateEnabled = false;
+let onDestroyMap = new WeakMap();
+function destroyWithClass(element, cls) {
+    element.classList.add(cls);
+    setTimeout(() => element.remove(), 2000);
+}
 /**
  * Create a new DOM element, and insert it into the DOM at the position held by the current scope.
  * @param tag - The tag of the element to be created and optionally dot-separated class names. For example: `h1` or `p.intro.has_avatar`.
  * @param rest - The other arguments are flexible and interpreted based on their types:
  *   - `string`: Used as textContent for the element.
- *   - `object`: Used as attributes, properties or event listeners for the element. See [[`prop`]] on how the distinction is made.
+ *   - `object`: Used as attributes, properties or event listeners for the element. See {@link Store.prop} on how the distinction is made and to read about a couple of special keys.
  *   - `function`: The render function used to draw the scope of the element. This function gets its own `Scope`, so that if any `Store` it reads changes, it will redraw by itself.
  *   - `Store`: Presuming `tag` is `"input"`, `"textarea"` or `"select"`, create a two-way binding between this `Store` value and the input element. The initial value of the input will be set to the initial value of the `Store`, or the other way around if the `Store` holds `undefined`. After that, the `Store` will be updated when the input changes and vice versa.
  * @example
@@ -1207,7 +1311,14 @@ export function node(tag = "", ...rest) {
         let type = typeof item;
         if (type === 'function') {
             let scope = new SimpleScope(el, undefined, currentScope.queueOrder + 1, item);
-            scope.update();
+            if (onCreateEnabled) {
+                onCreateEnabled = false;
+                scope.update();
+                onCreateEnabled = true;
+            }
+            else {
+                scope.update();
+            }
             // Add it to our list of cleaners. Even if `scope` currently has
             // no cleaners, it may get them in a future refresh.
             currentScope.cleaners.push(scope);
@@ -1262,13 +1373,13 @@ function bindInput(el, store) {
         };
     }
     else {
+        onInputChange = () => store.set(type === 'number' || type === 'range' ? (el.value === '' ? null : +el.value) : el.value);
         if (value === undefined)
-            store.set(el.value);
+            onInputChange();
         onStoreChange = value => {
             if (el.value !== value)
                 el.value = value;
         };
-        onInputChange = () => store.set(el.value);
     }
     observe(() => {
         onStoreChange(store.get());
@@ -1288,16 +1399,16 @@ export function text(text) {
         return;
     currentScope.addNode(document.createTextNode(text));
 }
-export function prop(prop, value = undefined) {
+export function prop(name, value = undefined) {
     if (!currentScope || !currentScope.parentElement)
         throw new ScopeError(true);
-    if (typeof prop === 'object') {
-        for (let k in prop) {
-            applyProp(currentScope.parentElement, k, prop[k]);
+    if (typeof name === 'object') {
+        for (let k in name) {
+            applyProp(currentScope.parentElement, k, name[k]);
         }
     }
     else {
-        applyProp(currentScope.parentElement, prop, value);
+        applyProp(currentScope.parentElement, name, value);
     }
 }
 /**
@@ -1347,7 +1458,7 @@ export function observe(func) {
     mount(undefined, func);
 }
 /**
- * Like [[`observe`]], but allow the function to create DOM elements using [[`node`]].
+ * Like {@link Store.observe}, but allow the function to create DOM elements using {@link Store.node}.
 
  * @param func - The function to be (repeatedly) executed, possibly adding DOM elements to `parentElement`.
  * @param parentElement - A DOM element that will be used as the parent element for calls to `node`.
@@ -1362,7 +1473,7 @@ export function observe(func) {
  * })
  * ```
  *
- * An example nesting [[`observe`]] within `mount`:
+ * An example nesting {@link Store.observe} within `mount`:
  * ```
  * let selected = new Store(0)
  * let colors = new Store(new Map())
@@ -1403,7 +1514,7 @@ export function mount(parentElement, func) {
         currentScope.cleaners.push(scope);
     }
 }
-/** Runs the given function, while not subscribing the current scope when reading [[`Store`]] values.
+/** Runs the given function, while not subscribing the current scope when reading {@link Store.Store} values.
  *
  * @param func Function to be executed immediately.
  * @returns Whatever `func()` returns.
@@ -1438,33 +1549,47 @@ export function peek(func) {
  * Helper functions
  */
 function applyProp(el, prop, value) {
-    if ((prop === 'class' || prop === 'className') && typeof value === 'object') {
-        // Allow setting classes using an object where the keys are the names and
-        // the values are booleans stating whether to set or remove.
-        for (let name in value) {
-            if (value[name])
-                el.classList.add(name);
-            else
-                el.classList.remove(name);
+    if (prop === 'create') {
+        if (onCreateEnabled) {
+            if (typeof value === 'function') {
+                value(el);
+            }
+            else {
+                el.classList.add(value);
+                setTimeout(function () { el.classList.remove(value); }, 0);
+            }
         }
     }
-    else if (prop === 'value' || prop === 'className' || prop === 'selectedIndex' || value === true || value === false) {
-        // All boolean values and a few specific keys should be set as a property
-        el[prop] = value;
+    else if (prop === 'destroy') {
+        onDestroyMap.set(el, value);
     }
     else if (typeof value === 'function') {
         // Set an event listener; remove it again on clean.
         el.addEventListener(prop, value);
         clean(() => el.removeEventListener(prop, value));
     }
-    else if (prop === 'style' && typeof value === 'object') {
-        // `style` can receive an object
-        Object.assign(el.style, value);
+    else if (prop === 'value' || prop === 'className' || prop === 'selectedIndex' || value === true || value === false) {
+        // All boolean values and a few specific keys should be set as a property
+        el[prop] = value;
     }
     else if (prop === 'text') {
         // `text` is set as textContent
         el.textContent = value;
     }
+    else if ((prop === 'class' || prop === 'className') && typeof value === 'object') {
+        // Allow setting classes using an object where the keys are the names and
+        // the values are booleans stating whether to set or remove.
+        for (let name in value) {
+            if (value[name])
+                el.classList.add(name);
+            else
+                el.classList.remove(name);
+        }
+    }
+    else if (prop === 'style' && typeof value === 'object') {
+        // `style` can receive an object
+        Object.assign(el.style, value);
+    }
     else {
         // Everything else is an HTML attribute
         el.setAttribute(prop, value);
@@ -1530,6 +1655,182 @@ class ScopeError extends Error {
         super(`Operation not permitted outside of ${mount ? "a mount" : "an observe"}() scope`);
     }
 }
+const FADE_TIME = 400;
+const GROW_SHRINK_TRANSITION = `margin ${FADE_TIME}ms ease-out, transform ${FADE_TIME}ms ease-out`;
+function getGrowShrinkProps(el) {
+    const parentStyle = el.parentElement ? getComputedStyle(el.parentElement) : {};
+    const isHorizontal = parentStyle.display === 'flex' && (parentStyle.flexDirection || '').startsWith('row');
+    return isHorizontal ?
+        { marginLeft: `-${el.offsetWidth / 2}px`, marginRight: `-${el.offsetWidth / 2}px`, transform: "scaleX(0)" } :
+        { marginBottom: `-${el.offsetHeight / 2}px`, marginTop: `-${el.offsetHeight / 2}px`, transform: "scaleY(0)" };
+}
+/** Do a grow transition for the given element. This is meant to be used as a
+* handler for the `create` property.
+*
+* @param el The element to transition.
+*
+* The transition doesn't look great for table elements, and may have problems
+* for other specific cases as well.
+*/
+export function grow(el) {
+    // This timeout is to await all other elements having been added to the Dom
+    scheduleDomReader(() => {
+        // Make the element size 0 using transforms and negative margins.
+        // This causes a browser layout, as we're querying el.offset<>.
+        let props = getGrowShrinkProps(el);
+        // The timeout is in order to batch all reads and then all writes when there
+        // are multiple simultaneous grow transitions.
+        scheduleDomWriter(() => {
+            Object.assign(el.style, props);
+            // This timeout is to combine multiple transitions into a single browser layout
+            scheduleDomReader(() => {
+                // Make sure the layouting has been performed, to cause transitions to trigger
+                el.offsetHeight;
+                scheduleDomWriter(() => {
+                    // Do the transitions
+                    el.style.transition = GROW_SHRINK_TRANSITION;
+                    for (let prop in props)
+                        el.style[prop] = "";
+                    setTimeout(() => {
+                        // Reset the element to a clean state
+                        el.style.transition = "";
+                    }, FADE_TIME);
+                });
+            });
+        });
+    });
+}
+/** Do a shrink transition for the given element, and remove it from the DOM
+* afterwards. This is meant to be used as a handler for the `destroy` property.
+*
+* @param el The element to transition and remove.
+*
+* The transition doesn't look great for table elements, and may have problems
+* for other specific cases as well.
+*/
+export function shrink(el) {
+    scheduleDomReader(() => {
+        const props = getGrowShrinkProps(el);
+        // The timeout is in order to batch all reads and then all writes when there
+        // are multiple simultaneous shrink transitions.
+        scheduleDomWriter(() => {
+            el.style.transition = GROW_SHRINK_TRANSITION;
+            Object.assign(el.style, props);
+            setTimeout(() => el.remove(), FADE_TIME);
+        });
+    });
+}
+function recordPatch(func) {
+    if (recordingPatch)
+        throw new Error(`already recording a patch`);
+    recordingPatch = new Map();
+    try {
+        func();
+    }
+    catch (e) {
+        recordingPatch = undefined;
+        throw e;
+    }
+    const result = recordingPatch;
+    recordingPatch = undefined;
+    return result;
+}
+function addToPatch(patch, collection, index, newData, oldData) {
+    let collectionMap = patch.get(collection);
+    if (collectionMap == null) {
+        collectionMap = new Map();
+        patch.set(collection, collectionMap);
+    }
+    let prev = collectionMap.get(index);
+    collectionMap.set(index, [newData, prev == null ? oldData : prev[1]]);
+}
+function emitPatch(patch) {
+    for (let [collection, collectionMap] of patch) {
+        for (let [index, [newData, oldData]] of collectionMap) {
+            collection.emitChange(index, newData, oldData);
+        }
+    }
+}
+function mergePatch(target, source, reverse = false) {
+    for (let [collection, collectionMap] of source) {
+        for (let [index, [newData, oldData]] of collectionMap) {
+            addToPatch(target, collection, index, reverse ? oldData : newData, reverse ? newData : oldData);
+        }
+    }
+}
+function silentlyApplyPatch(patch, force = false) {
+    for (let [collection, collectionMap] of patch) {
+        for (let [index, [newData, oldData]] of collectionMap) {
+            let actualData = collection.rawGet(index);
+            if (actualData !== oldData) {
+                if (force)
+                    handleError(new Error(`Applying invalid patch: data ${actualData} is unequal to expected old data ${oldData} for index ${index}`));
+                else
+                    return false;
+            }
+        }
+    }
+    for (let [collection, collectionMap] of patch) {
+        for (let [index, [newData, oldData]] of collectionMap) {
+            collection.rawSet(index, newData);
+        }
+    }
+    return true;
+}
+const appliedPredictions = [];
+/**
+ * Run the provided function, while treating all changes to Observables as predictions,
+ * meaning they will be reverted when changes come back from the server (or some other
+ * async source).
+ * @param predictFunc The function to run. It will generally modify some Observables
+ * 	to immediately reflect state (as closely as possible) that we expect the server
+ *  to communicate back to us later on.
+ * @returns A `Patch` object. Don't modify it. This is only meant to be passed to `applyCanon`.
+ */
+export function applyPrediction(predictFunc) {
+    let patch = recordPatch(predictFunc);
+    appliedPredictions.push(patch);
+    emitPatch(patch);
+    return patch;
+}
+/**
+ * Temporarily revert all outstanding predictions, optionally run the provided function
+ * (which will generally make authoritative changes to the data based on a server response),
+ * and then attempt to reapply the predictions on top of the new canonical state, dropping
+ * any predictions that can no longer be applied cleanly (the data has been modified) or
+ * that were specified in `dropPredictions`.
+ *
+ * All of this is done such that redraws are only triggered if the overall effect is an
+ * actual change to an `Observable`.
+ * @param canonFunc The function to run without any predictions applied. This will typically
+ *  make authoritative changes to the data, based on a server response.
+ * @param dropPredictions An optional list of predictions (as returned by `applyPrediction`)
+ *  to undo. Typically, when a server response for a certain request is being handled,
+ *  you'd want to drop the prediction that was done for that request.
+ */
+export function applyCanon(canonFunc, dropPredictions = []) {
+    let resultPatch = new Map();
+    for (let prediction of appliedPredictions)
+        mergePatch(resultPatch, prediction, true);
+    silentlyApplyPatch(resultPatch, true);
+    for (let prediction of dropPredictions) {
+        let pos = appliedPredictions.indexOf(prediction);
+        if (pos >= 0)
+            appliedPredictions.splice(pos, 1);
+    }
+    if (canonFunc)
+        mergePatch(resultPatch, recordPatch(canonFunc));
+    for (let idx = 0; idx < appliedPredictions.length; idx++) {
+        if (silentlyApplyPatch(appliedPredictions[idx])) {
+            mergePatch(resultPatch, appliedPredictions[idx]);
+        }
+        else {
+            appliedPredictions.splice(idx, 1);
+            idx--;
+        }
+    }
+    emitPatch(resultPatch);
+}
 // @ts-ignore
 // istanbul ignore next
 if (!String.prototype.replaceAll)

package/dist/aberdeen.min.js

@@ -1 +1 @@
-let e,t=[],i=new Set,n=!0,r=0;function s(e){if(!i.has(e)){if(r>42)throw new Error("Too many recursive updates from observes");t.length?e.queueOrder<t[t.length-1].queueOrder&&(n=!1):setTimeout(o,0),t.push(e),i.add(e)}}function o(){for(let e=0;e<t.length;){n||(t.splice(0,e),e=0,t.sort((e,t)=>e.queueOrder-t.queueOrder),n=!0);let s=t.length;for(;e<s&&n;e++){let n=t[e];i.delete(n),n.queueRun()}r++}t.length=0,r=0}function a(e){if("string"==typeof e)return e+"
";{let t=function(e,t){let i="";for(;e>0;)i+=String.fromCharCode(t?65535-e%65533:2+e%65533),e=Math.floor(e/65533);return i}(Math.abs(Math.round(e)),e<0);return String.fromCharCode(128+(e>0?t.length:-t.length))+t}}class l{constructor(e,t,i){this.cleaners=[],this.isDead=!1,this.parentElement=e,this.precedingSibling=t,this.queueOrder=i}findPrecedingNode(){let e=this.precedingSibling;for(;e;){if(e instanceof Node)return e;let t=e.findLastNode();if(t)return t;e=e.precedingSibling}}findLastNode(){return this.lastChild instanceof Node?this.lastChild:this.lastChild instanceof l?this.lastChild.findLastNode()||this.lastChild.findPrecedingNode():void 0}addNode(e){if(!this.parentElement)throw new O(!0);let t=this.findLastNode()||this.findPrecedingNode();this.parentElement.insertBefore(e,t?t.nextSibling:this.parentElement.firstChild),this.lastChild=e}remove(){if(this.parentElement){let e=this.findLastNode();if(e){let t=this.findPrecedingNode();for(;e!==t;){if(!e)return E(1);let t=e.previousSibling||void 0;this.parentElement.removeChild(e),e=t}}this.lastChild=void 0}this._clean()}_clean(){this.isDead=!0;for(let e of this.cleaners)e._clean(this);this.cleaners.length=0}onChange(e,t,i){s(this)}}class h extends l{constructor(e,t,i,n){super(e,t,i),this.renderer=n}queueRun(){e&&E(2),this.isDead||(this.remove(),this.isDead=!1,this.update())}update(){let t=e;e=this;try{this.renderer()}catch(e){C(e)}e=t}}class d{constructor(e,t,i){this.scope=e,this.collection=t,this.triggerCount=i,this.count=t.getCount(),t.addObserver(f,this),e.cleaners.push(this)}onChange(e,t,i){void 0===t?!this.triggerCount&&--this.count||s(this.scope):void 0===i&&(!this.triggerCount&&this.count++||s(this.scope))}_clean(){this.collection.removeObserver(f,this)}}class c extends l{constructor(e,t,i,n,r,s){super(e,t,i),this.byPosition=[],this.byIndex=new Map,this.newIndexes=new Set,this.removedIndexes=new Set,this.collection=n,this.renderer=r,this.makeSortKey=s}onChange(e,t,i){void 0===i?this.removedIndexes.has(e)?this.removedIndexes.delete(e):(this.newIndexes.add(e),s(this)):void 0===t&&(this.newIndexes.has(e)?this.newIndexes.delete(e):(this.removedIndexes.add(e),s(this)))}queueRun(){if(this.isDead)return;let e=this.removedIndexes;this.removedIndexes=new Set,e.forEach(e=>{this.removeChild(e)}),e=this.newIndexes,this.newIndexes=new Set,e.forEach(e=>{this.addChild(e)})}_clean(){super._clean(),this.collection.observers.delete(this);for(const[e,t]of this.byIndex)t._clean();this.byPosition.length=0,this.byIndex.clear()}renderInitial(){if(!e)return E(3);let t=e;this.collection.iterateIndexes(this),e=t}addChild(e){let t=new u(this.parentElement,void 0,this.queueOrder+1,this,e);this.byIndex.set(e,t),t.update()}removeChild(e){let t=this.byIndex.get(e);if(!t)return E(6);this.byIndex.delete(e),this.removeFromPosition(t),t.remove()}findPosition(e){let t=this.byPosition,i=0,n=t.length;if(!n||e>t[n-1].sortStr)return n;for(;i<n;){let r=i+n>>1;t[r].sortStr<e?i=r+1:n=r}return i}insertAtPosition(e){let t=this.findPosition(e.sortStr);this.byPosition.splice(t,0,e),e.precedingSibling=t>0?this.byPosition[t-1]:this.precedingSibling,t+1<this.byPosition.length?this.byPosition[t+1].precedingSibling=e:this.lastChild=e}removeFromPosition(e){if(""===e.sortStr)return;let t=this.findPosition(e.sortStr);for(;;){if(this.byPosition[t]===e)return this.byPosition.splice(t,1),void(t<this.byPosition.length?this.byPosition[t].precedingSibling=t>0?this.byPosition[t-1]:this.precedingSibling:this.lastChild=this.byPosition.length?this.byPosition[this.byPosition.length-1]:void 0);if(++t>=this.byPosition.length||this.byPosition[t].sortStr!==e.sortStr)return E(5)}}}class u extends l{constructor(e,t,i,n,r){super(e,t,i),this.sortStr="",this.parent=n,this.itemIndex=r}queueRun(){e&&E(4),this.isDead||(this.remove(),this.isDead=!1,this.update())}update(){let t=e;e=this;let i,n=new Store(this.parent.collection,this.itemIndex);try{i=this.parent.makeSortKey(n)}catch(e){C(e)}let r=this.sortStr,s=null==i?"":(o=i)instanceof Array?o.map(a).join(""):a(o);var o;if(""!==r&&r!==s&&this.parent.removeFromPosition(this),this.sortStr=s,""!==s){s!==r&&this.parent.insertAtPosition(this);try{this.parent.renderer(n)}catch(e){C(e)}}e=t}}const f={};class p{constructor(){this.observers=new Map}addObserver(e,t){t=t;let i=this.observers.get(e);if(i){if(i.has(t))return!1;i.add(t)}else this.observers.set(e,new Set([t]));return!0}removeObserver(e,t){this.observers.get(e).delete(t)}emitChange(e,t,i){let n=this.observers.get(e);n&&n.forEach(n=>n.onChange(e,t,i)),n=this.observers.get(f),n&&n.forEach(n=>n.onChange(e,t,i))}_clean(e){this.removeObserver(f,e)}setIndex(e,t,i){const n=this.rawGet(e);if(!(n instanceof p)||t instanceof Store||!n.merge(t,i)){let i=x(t);i!==n&&(this.rawSet(e,i),this.emitChange(e,i,n))}}}class g extends p{constructor(){super(...arguments),this.data=[]}getType(){return"array"}getRecursive(t){e&&this.addObserver(f,e)&&e.cleaners.push(this);let i=[];for(let e=0;e<this.data.length;e++){let n=this.data[e];i.push(n instanceof p?t?n.getRecursive(t-1):new Store(this,e):n)}return i}rawGet(e){return this.data[e]}rawSet(e,t){if(e!==(0|e)||e<0||e>999999)throw new Error("Invalid array index "+JSON.stringify(e));for(this.data[e]=t;this.data.length>0&&void 0===this.data[this.data.length-1];)this.data.pop()}merge(e,t){if(!(e instanceof Array))return!1;for(let i=0;i<e.length;i++)this.setIndex(i,e[i],t);if(t&&this.data.length>e.length){for(let t=e.length;t<this.data.length;t++){let e=this.data[t];void 0!==e&&this.emitChange(t,void 0,e)}this.data.length=e.length}return!0}iterateIndexes(e){for(let t=0;t<this.data.length;t++)void 0!==this.data[t]&&e.addChild(t)}normalizeIndex(e){if("number"==typeof e)return e;if("string"==typeof e){let t=0|e;if(e.length&&t==e)return e}throw new Error("Invalid array index "+JSON.stringify(e))}getCount(){return this.data.length}}class v extends p{constructor(){super(...arguments),this.data=new Map}getType(){return"map"}getRecursive(t){e&&this.addObserver(f,e)&&e.cleaners.push(this);let i=new Map;return this.data.forEach((e,n)=>{i.set(n,e instanceof p?t?e.getRecursive(t-1):new Store(this,n):e)}),i}rawGet(e){return this.data.get(e)}rawSet(e,t){void 0===t?this.data.delete(e):this.data.set(e,t)}merge(e,t){return e instanceof Map&&(e.forEach((e,i)=>{this.setIndex(i,e,t)}),t&&this.data.forEach((t,i)=>{e.has(i)||this.setIndex(i,void 0,!1)}),!0)}iterateIndexes(e){this.data.forEach((t,i)=>{e.addChild(i)})}normalizeIndex(e){return e}getCount(){return this.data.size}}class y extends v{getType(){return"object"}getRecursive(t){e&&this.addObserver(f,e)&&e.cleaners.push(this);let i={};return this.data.forEach((e,n)=>{i[n]=e instanceof p?t?e.getRecursive(t-1):new Store(this,n):e}),i}merge(e,t){if(!e||e.constructor!==Object)return!1;for(let i in e)this.setIndex(i,e[i],t);return t&&this.data.forEach((t,i)=>{e.hasOwnProperty(i)||this.setIndex(i,void 0,!1)}),!0}normalizeIndex(e){let t=typeof e;if("string"===t)return e;if("number"===t)return""+e;throw new Error("Invalid object index "+JSON.stringify(e))}getCount(){let e=0;for(let t of this.data)e++;return e}}export class Store{constructor(e,t){if(void 0===t)this.collection=new g,this.idx=0,void 0!==e&&this.collection.rawSet(0,x(e));else{if(!(e instanceof p))throw new Error("1st parameter should be an ObsCollection if the 2nd is also given");this.collection=e,this.idx=t}}index(){return this.idx}_clean(e){this.collection.removeObserver(this.idx,e)}get(...e){return this.query({path:e})}peek(...e){return this.query({path:e,peek:!0})}getNumber(...e){return this.query({path:e,type:"number"})}getString(...e){return this.query({path:e,type:"string"})}getBoolean(...e){return this.query({path:e,type:"boolean"})}getFunction(...e){return this.query({path:e,type:"function"})}getArray(...e){return this.query({path:e,type:"array"})}getObject(...e){return this.query({path:e,type:"object"})}getMap(...e){return this.query({path:e,type:"map"})}getOr(e,...t){let i=typeof e;return"object"===i&&(e instanceof Map?i="map":e instanceof Array&&(i="array")),this.query({type:i,defaultValue:e,path:t})}query(t){if(t.peek&&e){let i=e;e=void 0;let n=this.query(t);return e=i,n}let i=(t.path&&t.path.length?this.ref(...t.path):this)._observe();if(t.type&&(void 0!==i||void 0===t.defaultValue)){let e=i instanceof p?i.getType():null===i?"null":typeof i;if(e!==t.type)throw new TypeError(`Expecting ${t.type} but got ${e}`)}return i instanceof p?i.getRecursive(null==t.depth?-1:t.depth-1):void 0===i?t.defaultValue:i}isEmpty(...t){let i=this.ref(...t)._observe();if(i instanceof p){if(e){return!new d(e,i,!1).count}return!i.getCount()}if(void 0===i)return!0;throw new Error("isEmpty() expects a collection or undefined, but got "+JSON.stringify(i))}count(...t){let i=this.ref(...t)._observe();if(i instanceof p){if(e){return new d(e,i,!0).count}return i.getCount()}if(void 0===i)return 0;throw new Error("count() expects a collection or undefined, but got "+JSON.stringify(i))}getType(...e){let t=this.ref(...e)._observe();return t instanceof p?t.getType():null===t?"null":typeof t}set(...e){let t=e.pop(),i=this.makeRef(...e);i.collection.setIndex(i.idx,t,!0)}merge(...e){let t=e.pop(),i=this.makeRef(...e);i.collection.setIndex(i.idx,t,!1)}delete(...e){let t=this.makeRef(...e);t.collection.setIndex(t.idx,void 0,!0)}push(...e){let t=e.pop(),i=this.makeRef(...e),n=i.collection.rawGet(i.idx);if(void 0===n)n=new g,i.collection.setIndex(i.idx,n,!0);else if(!(n instanceof g))throw new Error("push() is only allowed for an array or undefined (which would become an array)");let r=x(t),s=n.data.length;return n.data.push(r),n.emitChange(s,r,void 0),s}modify(e){this.set(e(this.query({peek:!0})))}ref(...e){let t=this;for(let i=0;i<e.length;i++){let n=t._observe();if(!(n instanceof p)){if(void 0!==n)throw new Error(`Value ${JSON.stringify(n)} is not a collection (nor undefined) in step ${i} of $(${JSON.stringify(e)})`);return new m}t=new Store(n,n.normalizeIndex(e[i]))}return t}makeRef(...e){let t=this;for(let i=0;i<e.length;i++){let n=t.collection.rawGet(t.idx);if(!(n instanceof p)){if(void 0!==n)throw new Error(`Value ${JSON.stringify(n)} is not a collection (nor undefined) in step ${i} of $(${JSON.stringify(e)})`);n=new y,t.collection.rawSet(t.idx,n),t.collection.emitChange(t.idx,n,void 0)}t=new Store(n,n.normalizeIndex(e[i]))}return t}_observe(){return e&&this.collection.addObserver(this.idx,e)&&e.cleaners.push(this),this.collection.rawGet(this.idx)}onEach(...t){let i=S,n=t.pop();if("function"!=typeof t[t.length-1]||"function"!=typeof n&&null!=n||(null!=n&&(i=n),n=t.pop()),"function"!=typeof n)throw new Error("onEach() expects a render function as its last argument but got "+JSON.stringify(n));if(!e)throw new O(!1);let r=this.ref(...t)._observe();if(r instanceof p){let t=new c(e.parentElement,e.lastChild||e.precedingSibling,e.queueOrder+1,r,n,i);r.addObserver(f,t),e.cleaners.push(t),e.lastChild=t,t.renderInitial()}else if(void 0!==r)throw new Error("onEach() attempted on a value that is neither a collection nor undefined")}map(e){let t=new Store(new Map);return this.onEach(i=>{let n=e(i);if(void 0!==n){let e=i.index();t.set(e,n),clean(()=>{t.delete(e)})}}),t}multiMap(e){let t=new Store(new Map);return this.onEach(i=>{let n,r=e(i);if(r.constructor===Object){for(let e in r)t.set(e,r[e]);n=Object.keys(r)}else{if(!(r instanceof Map))return;r.forEach((e,i)=>{t.set(i,e)}),n=Array.from(r.keys())}n.length&&clean(()=>{for(let e of n)t.delete(e)})}),t}isDetached(){return!1}dump(){let e=this.getType();"array"===e||"object"===e||"map"===e?(text("<"+e+">"),node("ul",()=>{this.onEach(e=>{node("li",()=>{text(JSON.stringify(e.index())+": "),e.dump()})})})):text(JSON.stringify(this.get()))}}class m extends Store{isDetached(){return!0}}export function node(t="",...i){if(!e)throw new O(!0);let n;if(t instanceof Element)n=t;else{let e,i=t.indexOf(".");i>=0&&(e=t.substr(i+1),t=t.substr(0,i)),n=document.createElement(t||"div"),e&&(n.className=e.replaceAll("."," "))}e.addNode(n);for(let t of i){let i=typeof t;if("function"===i){let i=new h(n,void 0,e.queueOrder+1,t);i.update(),e.cleaners.push(i)}else if("string"===i||"number"===i)n.textContent=t;else if("object"===i&&t&&t.constructor===Object)for(let e in t)b(n,e,t[e]);else if(t instanceof Store)w(n,t);else if(null!=t)throw new Error("Unexpected argument "+JSON.stringify(t))}}export function html(t){if(!e||!e.parentElement)throw new O(!0);let i=document.createElement(e.parentElement.tagName);for(i.innerHTML=""+t;i.firstChild;)e.addNode(i.firstChild)}function w(e,t){let i,n,r=e.getAttribute("type"),s=t.query({peek:!0});"checkbox"===r?(void 0===s&&t.set(e.checked),i=t=>e.checked=t,n=()=>t.set(e.checked)):"radio"===r?(void 0===s&&e.checked&&t.set(e.value),i=t=>e.checked=t===e.value,n=()=>{e.checked&&t.set(e.value)}):(void 0===s&&t.set(e.value),i=t=>{e.value!==t&&(e.value=t)},n=()=>t.set(e.value)),observe(()=>{i(t.get())}),e.addEventListener("input",n),clean(()=>{e.removeEventListener("input",n)})}export function text(t){if(!e)throw new O(!0);null!=t&&e.addNode(document.createTextNode(t))}export function prop(t,i){if(!e||!e.parentElement)throw new O(!0);if("object"==typeof t)for(let i in t)b(e.parentElement,i,t[i]);else b(e.parentElement,t,i)}export function getParentElement(){if(!e||!e.parentElement)throw new O(!0);return e.parentElement}export function clean(t){if(!e)throw new O(!1);e.cleaners.push({_clean:t})}export function observe(e){mount(void 0,e)}export function mount(t,i){let n;t||!e?n=new h(t,void 0,0,i):(n=new h(e.parentElement,e.lastChild||e.precedingSibling,e.queueOrder+1,i),e.lastChild=n),n.update(),e&&e.cleaners.push(n)}export function peek(t){let i=e;e=void 0;try{return t()}finally{e=i}}function b(e,t,i){if("class"!==t&&"className"!==t||"object"!=typeof i)"value"===t||"className"===t||"selectedIndex"===t||!0===i||!1===i?e[t]=i:"function"==typeof i?(e.addEventListener(t,i),clean(()=>e.removeEventListener(t,i))):"style"===t&&"object"==typeof i?Object.assign(e.style,i):"text"===t?e.textContent=i:e.setAttribute(t,i);else for(let t in i)i[t]?e.classList.add(t):e.classList.remove(t)}function x(e){if("object"==typeof e&&e){if(e instanceof Store)return e._observe();if(e instanceof Map){let t=new v;return e.forEach((e,i)=>{let n=x(e);void 0!==n&&t.rawSet(i,n)}),t}if(e instanceof Array){let t=new g;for(let i=0;i<e.length;i++){let n=x(e[i]);void 0!==n&&t.rawSet(i,n)}return t}if(e.constructor===Object){let t=new y;for(let i in e){let n=x(e[i]);void 0!==n&&t.rawSet(i,n)}return t}return e}return e}function S(e){return e.index()}function E(e){let t=new Error("Aberdeen internal error "+e);setTimeout(()=>{throw t},0)}function C(e){setTimeout(()=>{throw e},0)}class O extends Error{constructor(e){super(`Operation not permitted outside of ${e?"a mount":"an observe"}() scope`)}}String.prototype.replaceAll||(String.prototype.replaceAll=function(e,t){return this.split(e).join(t)});
+let e,t,n=[],i=new Set,r=!0,s=0;function o(e){if(!i.has(e)){if(s>42)throw new Error("Too many recursive updates from observes");n.length?e.queueOrder<n[n.length-1].queueOrder&&(r=!1):setTimeout(l,0),n.push(e),i.add(e)}}function l(){for(b=!0,e=0;e<n.length;){r||(n.splice(0,e),e=0,n.sort((e,t)=>e.queueOrder-t.queueOrder),r=!0);let t=n.length;for(;e<t&&r;e++){let t=n[e];i.delete(t),t.queueRun()}s++}n.length=0,e=void 0,s=0,b=!1}let a;export function scheduleDomReader(t){o({queueOrder:null!=e&&e<n.length&&n[e].queueOrder>=1e3?n[e].queueOrder+1&-2:1e3,queueRun:t})}export function scheduleDomWriter(t){o({queueOrder:null!=e&&e<n.length&&n[e].queueOrder>=1e3?1|n[e].queueOrder:1001,queueRun:t})}function h(e){if("string"==typeof e)return e+"
";{let t=function(e,t){let n="";for(;e>0;)n+=String.fromCharCode(t?65535-e%65533:2+e%65533),e=Math.floor(e/65533);return n}(Math.abs(Math.round(e)),e<0);return String.fromCharCode(128+(e>0?t.length:-t.length))+t}}class d{constructor(e,t,n){this.cleaners=[],this.isDead=!1,this.parentElement=e,this.precedingSibling=t,this.queueOrder=n}findPrecedingNode(e){let t,n=this;for(;(t=n.precedingSibling)&&t!==e;){if(t instanceof Node)return t;let e=t.findLastNode();if(e)return e;n=t}}findLastNode(){if(this.lastChild)return this.lastChild instanceof Node?this.lastChild:this.lastChild.findLastNode()||this.lastChild.findPrecedingNode(this.precedingSibling)}addNode(e){if(!this.parentElement)throw new k(!0);let t=this.findLastNode()||this.findPrecedingNode();this.parentElement.insertBefore(e,t?t.nextSibling:this.parentElement.firstChild),this.lastChild=e}remove(){if(this.parentElement){let e=this.findLastNode();if(e){let t=this.findPrecedingNode();for(t=t?t.nextSibling:this.parentElement.firstChild,this.lastChild=void 0;;){if(!t)return N(1);const n=t;t=n.nextSibling||void 0;let i=S.get(n);if(i&&n instanceof Element?!0!==i&&("function"==typeof i?i(n):E(n,i),S.set(n,!0)):this.parentElement.removeChild(n),n===e)break}}}this._clean()}_clean(){this.isDead=!0;for(let e of this.cleaners)e._clean(this);this.cleaners.length=0}onChange(e,t,n){o(this)}}class u extends d{constructor(e,t,n,i){super(e,t,n),this.renderer=i}queueRun(){a&&N(2),this.isDead||(this.remove(),this.isDead=!1,this.update())}update(){let e=a;a=this;try{this.renderer()}catch(e){P(e)}a=e}}class c{constructor(e,t,n){this.scope=e,this.collection=t,this.triggerCount=n,this.count=t.getCount(),t.addObserver(g,this),e.cleaners.push(this)}onChange(e,t,n){void 0===t?!this.triggerCount&&--this.count||o(this.scope):void 0===n&&(!this.triggerCount&&this.count++||o(this.scope))}_clean(){this.collection.removeObserver(g,this)}}class f extends d{constructor(e,t,n,i,r,s){super(e,t,n),this.byPosition=[],this.byIndex=new Map,this.newIndexes=new Set,this.removedIndexes=new Set,this.collection=i,this.renderer=r,this.makeSortKey=s}onChange(e,t,n){void 0===n?this.removedIndexes.has(e)?this.removedIndexes.delete(e):(this.newIndexes.add(e),o(this)):void 0===t&&(this.newIndexes.has(e)?this.newIndexes.delete(e):(this.removedIndexes.add(e),o(this)))}queueRun(){if(this.isDead)return;let e=this.removedIndexes;this.removedIndexes=new Set,e.forEach(e=>{this.removeChild(e)}),e=this.newIndexes,this.newIndexes=new Set,e.forEach(e=>{this.addChild(e)})}_clean(){super._clean(),this.collection.observers.delete(this);for(const[e,t]of this.byIndex)t._clean();this.byPosition.length=0,this.byIndex.clear()}renderInitial(){if(!a)return N(3);let e=a;this.collection.iterateIndexes(this),a=e}addChild(e){let t=new p(this.parentElement,void 0,this.queueOrder+1,this,e);this.byIndex.set(e,t),t.update()}removeChild(e){let t=this.byIndex.get(e);if(!t)return N(6);t.remove(),this.byIndex.delete(e),this.removeFromPosition(t)}findPosition(e){let t=this.byPosition,n=0,i=t.length;if(!i||e>t[i-1].sortStr)return i;for(;n<i;){let r=n+i>>1;t[r].sortStr<e?n=r+1:i=r}return n}insertAtPosition(e){let t=this.findPosition(e.sortStr);this.byPosition.splice(t,0,e);let n=this.byPosition[t+1];n?(e.precedingSibling=n.precedingSibling,n.precedingSibling=e):(e.precedingSibling=this.lastChild||this.precedingSibling,this.lastChild=e)}removeFromPosition(e){if(""===e.sortStr)return;let t=this.findPosition(e.sortStr);for(;;){if(this.byPosition[t]===e){if(this.byPosition.splice(t,1),t<this.byPosition.length){let n=this.byPosition[t];if(!n)return N(8);if(n.precedingSibling!==e)return N(13);n.precedingSibling=e.precedingSibling}else{if(e!==this.lastChild)return N(12);this.lastChild=e.precedingSibling===this.precedingSibling?void 0:e.precedingSibling}return}if(++t>=this.byPosition.length||this.byPosition[t].sortStr!==e.sortStr)return N(5)}}}class p extends d{constructor(e,t,n,i,r){super(e,t,n),this.sortStr="",this.parent=i,this.itemIndex=r}queueRun(){a&&N(4),this.isDead||(this.remove(),this.isDead=!1,this.update())}update(){let e=a;a=this;let t,n=new Store(this.parent.collection,this.itemIndex);try{t=this.parent.makeSortKey(n)}catch(e){P(e)}let i=this.sortStr,r=null==t?"":(s=t)instanceof Array?s.map(h).join(""):h(s);var s;if(""!==i&&i!==r&&this.parent.removeFromPosition(this),this.sortStr=r,""!==r){r!==i&&this.parent.insertAtPosition(this);try{this.parent.renderer(n)}catch(e){P(e)}}a=e}}const g={};class m{constructor(){this.observers=new Map}addObserver(e,t){t=t;let n=this.observers.get(e);if(n){if(n.has(t))return!1;n.add(t)}else this.observers.set(e,new Set([t]));return!0}removeObserver(e,t){this.observers.get(e).delete(t)}emitChange(e,n,i){if(t)M(t,this,e,n,i);else{let t=this.observers.get(e);t&&t.forEach(t=>t.onChange(e,n,i)),t=this.observers.get(g),t&&t.forEach(t=>t.onChange(e,n,i))}}_clean(e){this.removeObserver(g,e)}setIndex(e,t,n){const i=this.rawGet(e);if(!(i instanceof m)||t instanceof Store||!i.merge(t,n)){let n=I(t);n!==i&&(this.rawSet(e,n),this.emitChange(e,n,i))}}}class v extends m{constructor(){super(...arguments),this.data=[]}getType(){return"array"}getRecursive(e){a&&this.addObserver(g,a)&&a.cleaners.push(this);let t=[];for(let n=0;n<this.data.length;n++){let i=this.data[n];t.push(i instanceof m?e?i.getRecursive(e-1):new Store(this,n):i)}return t}rawGet(e){return this.data[e]}rawSet(e,t){if(e!==(0|e)||e<0||e>999999)throw new Error("Invalid array index "+JSON.stringify(e));for(this.data[e]=t;this.data.length>0&&void 0===this.data[this.data.length-1];)this.data.pop()}merge(e,t){if(!(e instanceof Array))return!1;for(let n=0;n<e.length;n++)this.setIndex(n,e[n],t);if(t&&this.data.length>e.length){for(let t=e.length;t<this.data.length;t++){let e=this.data[t];void 0!==e&&this.emitChange(t,void 0,e)}this.data.length=e.length}return!0}iterateIndexes(e){for(let t=0;t<this.data.length;t++)void 0!==this.data[t]&&e.addChild(t)}normalizeIndex(e){if("number"==typeof e)return e;if("string"==typeof e){let t=0|e;if(e.length&&t==e)return e}throw new Error("Invalid array index "+JSON.stringify(e))}getCount(){return this.data.length}}class y extends m{constructor(){super(...arguments),this.data=new Map}getType(){return"map"}getRecursive(e){a&&this.addObserver(g,a)&&a.cleaners.push(this);let t=new Map;return this.data.forEach((n,i)=>{t.set(i,n instanceof m?e?n.getRecursive(e-1):new Store(this,i):n)}),t}rawGet(e){return this.data.get(e)}rawSet(e,t){void 0===t?this.data.delete(e):this.data.set(e,t)}merge(e,t){return e instanceof Map&&(e.forEach((e,n)=>{this.setIndex(n,e,t)}),t&&this.data.forEach((t,n)=>{e.has(n)||this.setIndex(n,void 0,!1)}),!0)}iterateIndexes(e){this.data.forEach((t,n)=>{e.addChild(n)})}normalizeIndex(e){return e}getCount(){return this.data.size}}class w extends y{getType(){return"object"}getRecursive(e){a&&this.addObserver(g,a)&&a.cleaners.push(this);let t={};return this.data.forEach((n,i)=>{t[i]=n instanceof m?e?n.getRecursive(e-1):new Store(this,i):n}),t}merge(e,t){if(!e||e.constructor!==Object)return!1;for(let n in e)this.setIndex(n,e[n],t);return t&&this.data.forEach((t,n)=>{e.hasOwnProperty(n)||this.setIndex(n,void 0,!1)}),!0}normalizeIndex(e){let t=typeof e;if("string"===t)return e;if("number"===t)return""+e;throw new Error("Invalid object index "+JSON.stringify(e))}getCount(){let e=0;for(let t of this.data)e++;return e}}export class Store{constructor(e,t){if(void 0===t)this.collection=new v,this.idx=0,void 0!==e&&this.collection.rawSet(0,I(e));else{if(!(e instanceof m))throw new Error("1st parameter should be an ObsCollection if the 2nd is also given");this.collection=e,this.idx=t}}index(){return this.idx}_clean(e){this.collection.removeObserver(this.idx,e)}get(...e){return this.query({path:e})}peek(...e){return this.query({path:e,peek:!0})}getNumber(...e){return this.query({path:e,type:"number"})}getString(...e){return this.query({path:e,type:"string"})}getBoolean(...e){return this.query({path:e,type:"boolean"})}getFunction(...e){return this.query({path:e,type:"function"})}getArray(...e){return this.query({path:e,type:"array"})}getObject(...e){return this.query({path:e,type:"object"})}getMap(...e){return this.query({path:e,type:"map"})}getOr(e,...t){let n=typeof e;return"object"===n&&(e instanceof Map?n="map":e instanceof Array&&(n="array")),this.query({type:n,defaultValue:e,path:t})}query(e){if(e.peek&&a){let t=a;a=void 0;let n=this.query(e);return a=t,n}let t=(e.path&&e.path.length?this.ref(...e.path):this)._observe();if(e.type&&(void 0!==t||void 0===e.defaultValue)){let n=t instanceof m?t.getType():null===t?"null":typeof t;if(n!==e.type)throw new TypeError(`Expecting ${e.type} but got ${n}`)}return t instanceof m?t.getRecursive(null==e.depth?-1:e.depth-1):void 0===t?e.defaultValue:t}isEmpty(...e){let t=this.ref(...e)._observe();if(t instanceof m){if(a){return!new c(a,t,!1).count}return!t.getCount()}if(void 0===t)return!0;throw new Error("isEmpty() expects a collection or undefined, but got "+JSON.stringify(t))}count(...e){let t=this.ref(...e)._observe();if(t instanceof m){if(a){return new c(a,t,!0).count}return t.getCount()}if(void 0===t)return 0;throw new Error("count() expects a collection or undefined, but got "+JSON.stringify(t))}getType(...e){let t=this.ref(...e)._observe();return t instanceof m?t.getType():null===t?"null":typeof t}set(...e){let t=e.pop(),n=this.makeRef(...e);n.collection.setIndex(n.idx,t,!0)}merge(...e){let t=e.pop(),n=this.makeRef(...e);n.collection.setIndex(n.idx,t,!1)}delete(...e){let t=this.makeRef(...e);t.collection.setIndex(t.idx,void 0,!0)}push(...e){let t=e.pop(),n=this.makeRef(...e),i=n.collection.rawGet(n.idx);if(void 0===i)i=new v,n.collection.setIndex(n.idx,i,!0);else if(!(i instanceof v))throw new Error("push() is only allowed for an array or undefined (which would become an array)");let r=I(t),s=i.data.length;return i.data.push(r),i.emitChange(s,r,void 0),s}modify(e){this.set(e(this.query({peek:!0})))}ref(...e){let t=this;for(let n=0;n<e.length;n++){let i=t._observe();if(!(i instanceof m)){if(void 0!==i)throw new Error(`Value ${JSON.stringify(i)} is not a collection (nor undefined) in step ${n} of $(${JSON.stringify(e)})`);return new x}t=new Store(i,i.normalizeIndex(e[n]))}return t}makeRef(...e){let t=this;for(let n=0;n<e.length;n++){let i=t.collection.rawGet(t.idx);if(!(i instanceof m)){if(void 0!==i)throw new Error(`Value ${JSON.stringify(i)} is not a collection (nor undefined) in step ${n} of $(${JSON.stringify(e)})`);i=new w,t.collection.rawSet(t.idx,i),t.collection.emitChange(t.idx,i,void 0)}t=new Store(i,i.normalizeIndex(e[n]))}return t}_observe(){return a&&this.collection.addObserver(this.idx,a)&&a.cleaners.push(this),this.collection.rawGet(this.idx)}onEach(...e){let t=q,n=e.pop();if("function"!=typeof e[e.length-1]||"function"!=typeof n&&null!=n||(null!=n&&(t=n),n=e.pop()),"function"!=typeof n)throw new Error("onEach() expects a render function as its last argument but got "+JSON.stringify(n));if(!a)throw new k(!1);let i=this.ref(...e)._observe();if(i instanceof m){let e=new f(a.parentElement,a.lastChild||a.precedingSibling,a.queueOrder+1,i,n,t);i.addObserver(g,e),a.cleaners.push(e),a.lastChild=e,e.renderInitial()}else if(void 0!==i)throw new Error("onEach() attempted on a value that is neither a collection nor undefined")}map(e){let t=new Store(new Map);return this.onEach(n=>{let i=e(n);if(void 0!==i){let e=n.index();t.set(e,i),clean(()=>{t.delete(e)})}}),t}multiMap(e){let t=new Store(new Map);return this.onEach(n=>{let i,r=e(n);if(r.constructor===Object){for(let e in r)t.set(e,r[e]);i=Object.keys(r)}else{if(!(r instanceof Map))return;r.forEach((e,n)=>{t.set(n,e)}),i=[...r.keys()]}i.length&&clean(()=>{for(let e of i)t.delete(e)})}),t}isDetached(){return!1}dump(){let e=this.getType();"array"===e||"object"===e||"map"===e?(text("<"+e+">"),node("ul",()=>{this.onEach(e=>{node("li",()=>{text(JSON.stringify(e.index())+": "),e.dump()})})})):text(JSON.stringify(this.get()))}}class x extends Store{isDetached(){return!0}}let b=!1,S=new WeakMap;function E(e,t){e.classList.add(t),setTimeout(()=>e.remove(),2e3)}export function node(e="",...t){if(!a)throw new k(!0);let n;if(e instanceof Element)n=e;else{let t,i=e.indexOf(".");i>=0&&(t=e.substr(i+1),e=e.substr(0,i)),n=document.createElement(e||"div"),t&&(n.className=t.replaceAll("."," "))}a.addNode(n);for(let e of t){let t=typeof e;if("function"===t){let t=new u(n,void 0,a.queueOrder+1,e);b?(b=!1,t.update(),b=!0):t.update(),a.cleaners.push(t)}else if("string"===t||"number"===t)n.textContent=e;else if("object"===t&&e&&e.constructor===Object)for(let t in e)O(n,t,e[t]);else if(e instanceof Store)C(n,e);else if(null!=e)throw new Error("Unexpected argument "+JSON.stringify(e))}}export function html(e){if(!a||!a.parentElement)throw new k(!0);let t=document.createElement(a.parentElement.tagName);for(t.innerHTML=""+e;t.firstChild;)a.addNode(t.firstChild)}function C(e,t){let n,i,r=e.getAttribute("type"),s=t.query({peek:!0});"checkbox"===r?(void 0===s&&t.set(e.checked),n=t=>e.checked=t,i=()=>t.set(e.checked)):"radio"===r?(void 0===s&&e.checked&&t.set(e.value),n=t=>e.checked=t===e.value,i=()=>{e.checked&&t.set(e.value)}):(i=()=>t.set("number"===r||"range"===r?""===e.value?null:+e.value:e.value),void 0===s&&i(),n=t=>{e.value!==t&&(e.value=t)}),observe(()=>{n(t.get())}),e.addEventListener("input",i),clean(()=>{e.removeEventListener("input",i)})}export function text(e){if(!a)throw new k(!0);null!=e&&a.addNode(document.createTextNode(e))}export function prop(e,t){if(!a||!a.parentElement)throw new k(!0);if("object"==typeof e)for(let t in e)O(a.parentElement,t,e[t]);else O(a.parentElement,e,t)}export function getParentElement(){if(!a||!a.parentElement)throw new k(!0);return a.parentElement}export function clean(e){if(!a)throw new k(!1);a.cleaners.push({_clean:e})}export function observe(e){mount(void 0,e)}export function mount(e,t){let n;e||!a?n=new u(e,void 0,0,t):(n=new u(a.parentElement,a.lastChild||a.precedingSibling,a.queueOrder+1,t),a.lastChild=n),n.update(),a&&a.cleaners.push(n)}export function peek(e){let t=a;a=void 0;try{return e()}finally{a=t}}function O(e,t,n){if("create"===t)b&&("function"==typeof n?n(e):(e.classList.add(n),setTimeout((function(){e.classList.remove(n)}),0)));else if("destroy"===t)S.set(e,n);else if("function"==typeof n)e.addEventListener(t,n),clean(()=>e.removeEventListener(t,n));else if("value"===t||"className"===t||"selectedIndex"===t||!0===n||!1===n)e[t]=n;else if("text"===t)e.textContent=n;else if("class"!==t&&"className"!==t||"object"!=typeof n)"style"===t&&"object"==typeof n?Object.assign(e.style,n):e.setAttribute(t,n);else for(let t in n)n[t]?e.classList.add(t):e.classList.remove(t)}function I(e){if("object"==typeof e&&e){if(e instanceof Store)return e._observe();if(e instanceof Map){let t=new y;return e.forEach((e,n)=>{let i=I(e);void 0!==i&&t.rawSet(n,i)}),t}if(e instanceof Array){let t=new v;for(let n=0;n<e.length;n++){let i=I(e[n]);void 0!==i&&t.rawSet(n,i)}return t}if(e.constructor===Object){let t=new w;for(let n in e){let i=I(e[n]);void 0!==i&&t.rawSet(n,i)}return t}return e}return e}function q(e){return e.index()}function N(e){let t=new Error("Aberdeen internal error "+e);setTimeout(()=>{throw t},0)}function P(e){setTimeout(()=>{throw e},0)}class k extends Error{constructor(e){super(`Operation not permitted outside of ${e?"a mount":"an observe"}() scope`)}}function R(e){const t=e.parentElement?getComputedStyle(e.parentElement):{};return"flex"===t.display&&(t.flexDirection||"").startsWith("row")?{marginLeft:`-${e.offsetWidth/2}px`,marginRight:`-${e.offsetWidth/2}px`,transform:"scaleX(0)"}:{marginBottom:`-${e.offsetHeight/2}px`,marginTop:`-${e.offsetHeight/2}px`,transform:"scaleY(0)"}}export function grow(e){scheduleDomReader(()=>{let t=R(e);scheduleDomWriter(()=>{Object.assign(e.style,t),scheduleDomReader(()=>{e.offsetHeight,scheduleDomWriter(()=>{e.style.transition="margin 400ms ease-out, transform 400ms ease-out";for(let n in t)e.style[n]="";setTimeout(()=>{e.style.transition=""},400)})})})})}export function shrink(e){scheduleDomReader(()=>{const t=R(e);scheduleDomWriter(()=>{e.style.transition="margin 400ms ease-out, transform 400ms ease-out",Object.assign(e.style,t),setTimeout(()=>e.remove(),400)})})}function j(e){if(t)throw new Error("already recording a patch");t=new Map;try{e()}catch(e){throw t=void 0,e}const n=t;return t=void 0,n}function M(e,t,n,i,r){let s=e.get(t);null==s&&(s=new Map,e.set(t,s));let o=s.get(n);s.set(n,[i,null==o?r:o[1]])}function T(e){for(let[t,n]of e)for(let[e,[i,r]]of n)t.emitChange(e,i,r)}function D(e,t,n=!1){for(let[i,r]of t)for(let[t,[s,o]]of r)M(e,i,t,n?o:s,n?s:o)}function $(e,t=!1){for(let[n,i]of e)for(let[e,[r,s]]of i){let i=n.rawGet(e);if(i!==s){if(!t)return!1;P(new Error(`Applying invalid patch: data ${i} is unequal to expected old data ${s} for index ${e}`))}}for(let[t,n]of e)for(let[e,[i,r]]of n)t.rawSet(e,i);return!0}const _=[];export function applyPrediction(e){let t=j(e);return _.push(t),T(t),t}export function applyCanon(e,t=[]){let n=new Map;for(let e of _)D(n,e,!0);$(n,!0);for(let e of t){let t=_.indexOf(e);t>=0&&_.splice(t,1)}e&&D(n,j(e));for(let e=0;e<_.length;e++)$(_[e])?D(n,_[e]):(_.splice(e,1),e--);T(n)}String.prototype.replaceAll||(String.prototype.replaceAll=function(e,t){return this.split(e).join(t)});

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "aberdeen",
-  "version": "0.0.16",
+  "version": "0.1.0",
   "description": "A TypeScript/JavaScript library for quickly building performant declarative user interfaces without the use of a virtual DOM.",
   "main": "dist/aberdeen.js",
   "types": "dist/aberdeen.d.js",
   "scripts": {
     "build": "$npm_execpath run build-dist && $npm_execpath run build-docs",
-    "build-dist": "tsc && terser --module --compress --mangle -- dist/aberdeen.js > dist/aberdeen.min.js",
+    "build-dist": "rm -f dist/aberdeen.js && tsc && chmod a-w dist/aberdeen.js && terser --module --compress --mangle -- dist/aberdeen.js > dist/aberdeen.min.js",
     "build-docs": "typedoc --excludePrivate --excludeInternal src/aberdeen.ts",
-    "build-test": "[ tests/build/aberdeen.js -nt src/aberdeen.ts ] || tsc -t ES2015 -m commonjs --outdir tests/build src/aberdeen.ts",
+    "build-test": "[ tests/build/aberdeen.js -nt src/aberdeen.ts ] || ( rm -f tests/build/aberdeen.js && tsc -t ES2015 -m commonjs --outdir tests/build src/aberdeen.ts && chmod a-w tests/build/aberdeen.js )",
     "coverage": "$npm_execpath run build-test && nyc mocha --file tests/_init.js tests/[^_]*.js",
     "test": "$npm_execpath run build-test && mocha --file tests/_init.js tests/[^_]*.js",
     "prepack": "$npm_execpath run test && $npm_execpath run build"