aberdeen 0.0.16 → 0.0.17

package/README.md

@@ -115,4 +115,4 @@ mount(document.body, () => {
 
 ## Reference documentation
 
-https://vanviegen.github.io/aberdeen/
+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.16",
+  "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"