aberdeen 0.0.15 → 0.0.17

package/README.md

@@ -1,6 +1,3 @@
-Aberdeen
---------
-
 A TypeScript/JavaScript library for quickly building performant declarative user interfaces *without* the use of a virtual DOM.
 
 The key insight is the use of many small anonymous functions, that will automatically rerun when the underlying data changes. In order to trigger updates, that data should be encapsulated in any number of `Store` objects. They can hold anything, from simple values to deeply nested data structures, in which case user-interface functions can (automatically) subscribe to just the parts they depend upon.
@@ -10,5 +7,112 @@ The key insight is the use of many small anonymous functions, that will automati
 
 - It provides a flexible and simple to understand model for reactive user-interface building.
 - It allows you to express user-interfaces in plain JavaScript (or TypeScript) in an easy to read form, without (JSX-like) compilation steps.
-- It's fast, as it doesn't use a *virtual DOM* and only reruns small pieces of code in response to updated data.
-- It's lightweight, at less than 15kb when minimized.
+- It's fast, as it doesn't use a *virtual DOM* and only reruns small pieces of code in response to updated data. It also makes displaying and updating sorted lists very easy and very fast.
+- It's lightweight, at about 15kb minimized.
+
+
+## Examples
+
+- [Tic-tac-toe demo](https://vanviegen.github.io/aberdeen/examples/tic-tac-toe/) - [Source](https://github.com/vanviegen/aberdeen/tree/master/examples/tic-tac-toe)
+- [Input example demo](https://vanviegen.github.io/aberdeen/examples/input/) - [Source](https://github.com/vanviegen/aberdeen/tree/master/examples/input)
+
+
+To get a quick impression of what Aberdeen code looks like, this is all of the JavaScript for the above Tic-tac-toe demo:
+
+```javascript
+import {node, prop, mount, Store, text} from 'https://cdn.jsdelivr.net/npm/aberdeen/+esm';
+
+const store = new Store({
+	squares: [],
+	turn: 'X',
+	history: [{}],
+})
+
+const drawSquare = (position) => {
+	node('button.square', () => {
+		let value = store.get('squares', position)
+		if (value) text(value)
+		else prop('click', () => fillSquare(position))
+	})
+}
+
+const drawBoard = () => {
+	for(let y=0; y<3; y++) {
+		node('div.board-row', () => {
+			for(let x=0; x<3; x++) {
+				drawSquare(y*3 + x)
+			}
+		})
+	}
+}
+
+const drawInfo = () => {
+	node('div', () => {
+		let winner = calculateWinner(store.get('squares'))
+		if (winner) {
+			text(`Winner: ${winner}`)
+		} else {
+			text(`Next player: ${store.get('turn')}`)			
+		}
+	})
+	node('ol', () => {
+		store.onEach('history', item => {
+			node('li', () => {
+				node('button', () => {
+					text(item.index() ? `Go to move ${item.index()}` : `Go to game start`)
+					prop('click', () => {
+						store.set('historyPos', item.index())
+						store.set('squares', item.get())
+					})
+				})
+			})
+		})
+	})
+}
+
+const fillSquare = (position) => {
+	// If there's already a winner, don't allow a new square to be filled
+	if (calculateWinner(store.get('squares'))) return
+
+	// Fill the square
+	store.set('squares', position, store.get('turn'))
+	
+	// Next player's turn
+	store.set('turn', store.get('turn')==='X' ? 'O' : 'X')
+	
+	if (store.get('historyPos') != null) {
+		// Truncate everything after history pos
+		store.set('history', store.get('history').slice(0,store.get('historyPos')+1))
+		// Stop 'time traveling'
+		store.delete('historyPos')
+	}
+	
+	// Append the current squares-state to the history array 
+	store.push('history', store.get('squares'))
+}
+
+const calculateWinner = (squares) => {
+	const lines = [
+		[0, 1, 2], [3, 4, 5], [6, 7, 8], // horizontal
+		[0, 3, 6], [1, 4, 7], [2, 5, 8], // vertical
+		[0, 4, 8], [2, 4, 6] // diagonal
+	];
+	for (const [a, b, c] of lines) {
+		if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+			return squares[a];
+		}
+	}
+}
+ 
+mount(document.body, () => {
+	node('div.game', () => {
+		node('div.game-board', drawBoard)
+		node('div.game-info', drawInfo)
+	})
+})
+```
+
+
+## Reference documentation
+
+https://vanviegen.github.io/aberdeen/modules.html

package/dist/aberdeen.d.ts

@@ -2,6 +2,21 @@ interface QueueRunner {
     queueOrder: number;
     queueRun(): void;
 }
+/**
+ * Schedule a function to be executed by Aberdeen's internal task queue. This
+ * can be useful to batch together DOM layout read operations and DOM write
+ * operations, so that we're not forcing the browser to do more layout calculations
+ * than needed. Also, unlike setTimeout or requestAnimationFrame, this doesn't
+ * give the browser the chance to render partial DOM states to the screen (which
+ * would be seen as glitches/flashes).
+ * @param func The function to be called soon.
+ * @param order Higher mean later. Defaults to 0, which would still be *after* all
+ * node/observe redraws have been handled.
+ *
+ * **EXPERIMENTAL:** There's a good chance this function will be replaced by
+ * something that explicitly addresses DOM layout reads and DOM writes.
+ */
+export declare function scheduleTask(func: () => void, order?: number): void;
 type SortKeyType = number | string | Array<number | string>;
 interface Observer {
     onChange(index: any, newData: DatumType, oldData: DatumType): void;
@@ -16,7 +31,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 +117,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 +125,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 +168,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 +221,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 +278,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 +355,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 +365,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 +390,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 +435,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 +446,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 +472,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 +567,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 +582,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 +607,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 +629,22 @@ 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;
 export {};

package/dist/aberdeen.js

@@ -18,6 +18,7 @@ function queue(runner) {
     queueSet.add(runner);
 }
 function runQueue() {
+    onCreateEnabled = true;
     for (let index = 0; index < queueArray.length;) {
         if (!queueOrdered) {
             queueArray.splice(0, index);
@@ -36,6 +37,24 @@ function runQueue() {
     }
     queueArray.length = 0;
     runQueueDepth = 0;
+    onCreateEnabled = false;
+}
+/**
+ * Schedule a function to be executed by Aberdeen's internal task queue. This
+ * can be useful to batch together DOM layout read operations and DOM write
+ * operations, so that we're not forcing the browser to do more layout calculations
+ * than needed. Also, unlike setTimeout or requestAnimationFrame, this doesn't
+ * give the browser the chance to render partial DOM states to the screen (which
+ * would be seen as glitches/flashes).
+ * @param func The function to be called soon.
+ * @param order Higher mean later. Defaults to 0, which would still be *after* all
+ * node/observe redraws have been handled.
+ *
+ * **EXPERIMENTAL:** There's a good chance this function will be replaced by
+ * something that explicitly addresses DOM layout reads and DOM writes.
+ */
+export function scheduleTask(func, order = 0) {
+    queue({ queueOrder: 1000 + 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 +115,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 +149,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
                     }
-                    let nextLastNode = lastNode.previousSibling || undefined;
-                    this.parentElement.removeChild(lastNode);
-                    lastNode = nextLastNode;
+                    else {
+                        this.parentElement.removeChild(node);
+                    }
+                    if (node === lastNode)
+                        break;
                 }
             }
-            this.lastChild = undefined;
         }
         // run cleaners
         this._clean();
@@ -223,6 +262,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 +330,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 +357,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 +377,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 +409,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 +469,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);
@@ -639,7 +699,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 +754,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 +818,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 +910,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 +1014,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 +1026,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 +1079,7 @@ export class Store {
         }
         return store;
     }
-    /** @Internal */
+    /** @internal */
     _observe() {
         if (currentScope) {
             if (this.collection.addObserver(this.idx, currentScope)) {
@@ -1031,7 +1091,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.
      *
      *
      *
@@ -1138,7 +1198,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 +1227,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 +1273,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 +1335,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 +1361,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 +1420,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 +1435,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 +1476,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 +1511,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 +1617,67 @@ 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
+    scheduleTask(() => {
+        // 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.
+        scheduleTask(() => {
+            Object.assign(el.style, props);
+            // This timeout is to combine multiple transitions into a single browser layout
+            scheduleTask(() => {
+                // Make sure the layouting has been performed, to cause transitions to trigger
+                el.offsetHeight;
+                // 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);
+            }, 2);
+        }, 1);
+    });
+}
+/** 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) {
+    const props = getGrowShrinkProps(el);
+    // The timeout is in order to batch all reads and then all writes when there
+    // are multiple simultaneous shrink transitions.
+    scheduleTask(() => {
+        el.style.transition = GROW_SHRINK_TRANSITION;
+        Object.assign(el.style, props);
+        setTimeout(() => el.remove(), FADE_TIME);
+    }, 1);
+}
 // @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=[],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(){w=!0;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,w=!1}export function scheduleTask(e,t=0){s({queueOrder:1e3+t,queueRun:e})}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(e){let t,i=this;for(;(t=i.precedingSibling)&&t!==e;){if(t instanceof Node)return t;let e=t.findLastNode();if(e)return e;i=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 I(1);const i=t;t=i.nextSibling||void 0;let n=b.get(i);if(n&&i instanceof Element?!0!==n&&("function"==typeof n?n(i):x(i,n),b.set(i,!0)):this.parentElement.removeChild(i),i===e)break}}}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&&I(2),this.isDead||(this.remove(),this.isDead=!1,this.update())}update(){let t=e;e=this;try{this.renderer()}catch(e){N(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 I(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 I(6);t.remove(),this.byIndex.delete(e),this.removeFromPosition(t)}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);let i=this.byPosition[t+1];i?(e.precedingSibling=i.precedingSibling,i.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 i=this.byPosition[t];if(!i)return I(8);if(i.precedingSibling!==e)return I(13);i.precedingSibling=e.precedingSibling}else{if(e!==this.lastChild)return I(12);this.lastChild=e.precedingSibling===this.precedingSibling?void 0:e.precedingSibling}return}if(++t>=this.byPosition.length||this.byPosition[t].sortStr!==e.sortStr)return I(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&&I(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){N(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){N(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=C(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 m 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 v extends m{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,C(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=C(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 y}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 v,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=O,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 k(!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 y extends Store{isDetached(){return!0}}let w=!1,b=new WeakMap;function x(e,t){e.classList.add(t),setTimeout(()=>e.remove(),2e3)}export function node(t="",...i){if(!e)throw new k(!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);w?(w=!1,i.update(),w=!0):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)E(n,e,t[e]);else if(t instanceof Store)S(n,t);else if(null!=t)throw new Error("Unexpected argument "+JSON.stringify(t))}}export function html(t){if(!e||!e.parentElement)throw new k(!0);let i=document.createElement(e.parentElement.tagName);for(i.innerHTML=""+t;i.firstChild;)e.addNode(i.firstChild)}function S(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)}):(n=()=>t.set("number"===r||"range"===r?""===e.value?null:+e.value:e.value),void 0===s&&n(),i=t=>{e.value!==t&&(e.value=t)}),observe(()=>{i(t.get())}),e.addEventListener("input",n),clean(()=>{e.removeEventListener("input",n)})}export function text(t){if(!e)throw new k(!0);null!=t&&e.addNode(document.createTextNode(t))}export function prop(t,i){if(!e||!e.parentElement)throw new k(!0);if("object"==typeof t)for(let i in t)E(e.parentElement,i,t[i]);else E(e.parentElement,t,i)}export function getParentElement(){if(!e||!e.parentElement)throw new k(!0);return e.parentElement}export function clean(t){if(!e)throw new k(!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 E(e,t,i){if("create"===t)w&&("function"==typeof i?i(e):(e.classList.add(i),setTimeout((function(){e.classList.remove(i)}),0)));else if("destroy"===t)b.set(e,i);else if("function"==typeof i)e.addEventListener(t,i),clean(()=>e.removeEventListener(t,i));else if("value"===t||"className"===t||"selectedIndex"===t||!0===i||!1===i)e[t]=i;else if("text"===t)e.textContent=i;else if("class"!==t&&"className"!==t||"object"!=typeof i)"style"===t&&"object"==typeof i?Object.assign(e.style,i):e.setAttribute(t,i);else for(let t in i)i[t]?e.classList.add(t):e.classList.remove(t)}function C(e){if("object"==typeof e&&e){if(e instanceof Store)return e._observe();if(e instanceof Map){let t=new m;return e.forEach((e,i)=>{let n=C(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=C(e[i]);void 0!==n&&t.rawSet(i,n)}return t}if(e.constructor===Object){let t=new v;for(let i in e){let n=C(e[i]);void 0!==n&&t.rawSet(i,n)}return t}return e}return e}function O(e){return e.index()}function I(e){let t=new Error("Aberdeen internal error "+e);setTimeout(()=>{throw t},0)}function N(e){setTimeout(()=>{throw e},0)}class k extends Error{constructor(e){super(`Operation not permitted outside of ${e?"a mount":"an observe"}() scope`)}}function q(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){scheduleTask(()=>{let t=q(e);scheduleTask(()=>{Object.assign(e.style,t),scheduleTask(()=>{e.offsetHeight,e.style.transition="margin 400ms ease-out, transform 400ms ease-out";for(let i in t)e.style[i]="";setTimeout(()=>{e.style.transition=""},400)},2)},1)})}export function shrink(e){const t=q(e);scheduleTask(()=>{e.style.transition="margin 400ms ease-out, transform 400ms ease-out",Object.assign(e.style,t),setTimeout(()=>e.remove(),400)},1)}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.15",
+  "version": "0.0.17",
   "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"