aberdeen 0.0.12 → 0.0.14

package/README.md

@@ -5,3 +5,10 @@ A TypeScript/JavaScript library for quickly building performant declarative user
 
 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.
 
+
+## Why use Aberdeen?
+
+- 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.

package/dist/aberdeen.d.ts

@@ -96,9 +96,29 @@ declare class ObsMap extends ObsCollection {
     normalizeIndex(index: any): any;
     getCount(): number;
 }
+/**
+ * A data store that automatically subscribes the current scope to updates
+ * whenever data is read from it.
+ *
+ * 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.
+ */
 export declare class Store {
     private collection;
     private idx;
+    /**
+     * 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.)
+     *
+     * @example
+     * ```
+     * let emptyStore = new Store()
+     * let numStore = new Store(42)
+     * let objStore = new Store({x: {alice: 1, bob: 2}, y: [9,7,5,3,1]})
+     * ```
+    */
     constructor();
     constructor(value: any);
     /** @internal */
@@ -127,56 +147,67 @@ export declare class Store {
      * @example
      * ```
      * let store = new Store({a: {b: {c: {d: 42}}}})
+     * assert('a' in store.get())
      * assert(store.get('a', 'b') === {c: {d: 42}})
      * ```
      */
-    get(...path: any): any;
+    get(...path: any[]): any;
     /**
-     * @returns The same as [[`get`]], but doesn't subscribe to changes.
+     * Like [[`get`]], but doesn't subscribe to changes.
      */
-    peek(...path: any): any;
+    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.
      */
-    getNumber(...path: any): number;
+    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.
      */
-    getString(...path: any): string;
+    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.
      */
-    getBoolean(...path: any): boolean;
+    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.
      */
-    getFunction(...path: any): (Function);
+    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.
      */
-    getArray(...path: any): any[];
+    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.
      */
-    getObject(...path: any): object;
+    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.
      */
-    getMap(...path: any): Map<any, any>;
+    getMap(...path: any[]): Map<any, any>;
     /**
-     * @returns Like [[`get`]], but the first parameter is the default value (returned when the Store
+     * Like [[`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.
+     *
+     * @example
+     * ```
+     * let store = {x: 42}
+     * assert(getOr(99, 'x') == 42)
+     * assert(getOr(99, 'y') == 99)
+     * getOr('hello', x') # throws TypeError (because 42 is not a string)
+     * ```
      */
-    getOr<T>(defaultValue: T, ...path: any): T;
-    /** Retrieve a value. This is a more flexible form of the [[`get`]] and [[`peek`]] methods.
+    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.
+     *
      * @returns The resulting value, or `undefined` if the `path` does not exist.
      */
     query(opts: {
@@ -189,6 +220,12 @@ export declare class Store {
          *  is done.
          */
         type?: string;
+        /** Limit the depth of the retrieved data structure to this positive integer.
+        *  When `depth` is `1`, only a single level of the value at `path` is unpacked. This
+        *  makes no difference for primitive values (like strings), but for objects, maps and
+        *  arrays, it means that each *value* in the resulting data structure will be a
+        *  reference to the `Store` for that value.
+        */
         depth?: number;
         /** Return this value when the `path` does not exist. Defaults to `undefined`. */
         defaultValue?: any;
@@ -198,33 +235,110 @@ export declare class Store {
          */
         peek?: boolean;
     }): any;
-    isEmpty(...path: any): boolean;
-    count(...path: any): number;
     /**
-     * Returns "undefined", "null", "boolean", "number", "string", "function", "array", "map" or "object"
+     * Checks if the specified collection is empty, and subscribes the current scope to changes of the emptiness of this collection.
+     *
+     * @param path Any path terms to resolve before retrieving the value.
+     * @returns When the specified collection is not empty `true` is returned. If it is empty or if the value is undefined, `false` is returned.
+     * @throws When the value is not a collection and not undefined, an Error will be thrown.
+     */
+    isEmpty(...path: any[]): boolean;
+    /**
+     * Returns the number of items in the specified collection, and subscribes the current scope to changes in this count.
+     *
+     * @param path Any path terms to resolve before retrieving the value.
+     * @returns The number of items contained in the collection, or 0 if the value is undefined.
+     * @throws When the value is not a collection and not undefined, an Error will be thrown.
+     */
+    count(...path: any[]): number;
+    /**
+     * Returns a strings describing the type of the store value, subscribing to changes of this type.
+     * Note: this currently also subscribes to changes of primitive values, so changing a value from 3 to 4
+     * would cause the scope to be rerun. This is not great, and may change in the future. This caveat does
+     * not apply to changes made *inside* an object, `Array` or `Map`.
+     *
+     * @param path Any path terms to resolve before retrieving the value.
+     * @returns Possible options: "undefined", "null", "boolean", "number", "string", "function", "array", "map" or "object".
      */
-    getType(...path: any): string;
+    getType(...path: any[]): string;
     /**
-     * Sets the Store value to the last given argument. Any earlier argument are a Store-path that is first
-     * resolved/created using `makeRef`.
+     * Sets the value to the last given argument. Any earlier argument are a Store-path that is first
+     * resolved/created using [[`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.)
+     *
+     * If you intent to make a copy instead of a reference, call [[`get`]] on the origin `Store`.
+     *
+     *
+     * @example
+     * ```
+     * let store = new Store() // Value is `undefined`
+     *
+     * store.set('x', 6) // Causes the store to become an object
+     * assert(store.get() == {x: 6})
+     *
+     * store.set('a', 'b', 'c', 'd') // Create parent path as objects
+     * assert(store.get() == {x: 6, a: {b: {c: 'd'}}})
+     *
+     * store.set(42) // Overwrites all of the above
+     * assert(store.get() == 42)
+     *
+     * store.set('x', 6) // Throw Error (42 is not a collection)
+     * ```
      */
-    set(...pathAndValue: any): void;
+    set(...pathAndValue: any[]): void;
     /**
      * Sets the `Store` to the given `mergeValue`, but without deleting any pre-existing
      * items when a collection overwrites a similarly typed collection. This results in
      * a deep merge.
+     *
+     * @example
+     * ```
+     * let store = new Store({a: {x: 1}})
+     * store.merge({a: {y: 2}, b: 3})
+     * assert(store.get() == {a: {x: 1, y: 2}, b: 3})
+     * ```
      */
-    merge(mergeValue: any): void;
+    merge(...pathAndValue: any): void;
     /**
      * Sets the value for the store to `undefined`, which causes it to be omitted from the map (or array, if it's at the end)
+     *
+     * @example
+     * ```
+     * let store = new Store({a: 1, b: 2})
+     * store.delete('a')
+     * assert(store.get() == {b: 2})
+     *
+     * store = new Store(['a','b','c'])
+     * store.delete(1)
+     * assert(store.get() == ['a', undefined, 'c'])
+     * store.delete(2)
+     * assert(store.get() == ['a'])
+     * ```
      */
     delete(...path: any): void;
     /**
      * Pushes a value to the end of the Array that is at the specified path in the store.
-     * If that Store path is `undefined`, and Array is created first.
+     * If that store path is `undefined`, an Array is created first.
      * The last argument is the value to be added, any earlier arguments indicate the path.
+     *
+     * @example
+     * ```
+     * let store = new Store()
+     * store.push(3) // Creates the array
+     * store.push(6)
+     * assert(store.get() == [3,6])
+     *
+     * store = new Store({myArray: [1,2]})
+     * store.push('myArray', 3)
+     * assert(store.get() == {myArray: [1,2,3]})
+     * ```
      */
-    push(newValue: any): number;
+    push(...pathAndValue: any[]): number;
     /**
      * [[`peek`]] the current value, pass it through `func`, and [[`set`]] the resulting
      * value.
@@ -246,10 +360,32 @@ export declare class Store {
      * type.
      * Unlike `ref`, `makeRef` does *not* subscribe to the path levels, as it is intended to be
      * a write-only operation.
+     *
+     * @example
+     * ```
+     * let store = new Store() // Value is `undefined`
+     *
+     * let ref = store.makeRef('a', 'b', 'c')
+     * assert(store.get() == {a: {b: {}}}
+     *
+     * ref.set(42)
+     * assert(store.get() == {a: {b: {c: 42}}}
+     *
+     * ref.makeRef('d') // Throw Error (42 is not a collection)
+     * ```
      */
     makeRef(...path: any[]): Store;
     /** @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.
+     *
+     *
+     *
+     * @param pathAndFuncs
+     */
     onEach(...pathAndFuncs: any): void;
     /**
      * Applies a filter/map function on each item within the `Store`'s collection,
@@ -266,6 +402,22 @@ export declare class Store {
      * input items produce the same output keys, this may lead to unexpected results.
      */
     map(func: (store: Store) => any): Store;
+    /**
+     * Applies a filter/map function on each item within the `Store`'s collection,
+     * each of which can deliver any number of key/value pairs, and reactively manages the
+     * returned map `Store` to hold any results.
+     *
+     * @param func - Function that transform the given store into output values
+     * that can take one of the following forms:
+     * - an `Object` or a `Map`: Each key/value pair will be added to the output `Store`.
+     * - anything else: No key/value pairs are added to the output `Store`.
+     *
+     * @returns - A map `Store` with the key/value pairs returned by all `func` invocations.
+     *
+     * When items disappear from the `Store` or are changed in a way that `func` depends
+     * upon, the resulting items are removed from the output `Store` as well. When multiple
+     * input items produce the same output keys, this may lead to unexpected results.
+     */
     multiMap(func: (store: Store) => any): Store;
     /**
      * @returns Returns `true` when the `Store` was created by [[`ref`]]ing a path that
@@ -275,13 +427,13 @@ export declare class Store {
     dump(): void;
 }
 /**
- * Create a new DOM element.
+ * 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 for the element. See `applyProp` on how the distinction is made.
+ *   - `object`: Used as attributes, properties or event listeners for the element. See [[`prop`]] on how the distinction is made.
  *   - `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`. After that, the `Store` will be updated when the input changes.
+ *   - `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
  * node('aside.editorial', 'Yada yada yada....', () => {
  *	 node('a', {href: '/bio'}, () => {
@@ -290,6 +442,11 @@ export declare class Store {
  * })
  */
 export declare function node(tag?: string | Element, ...rest: any[]): void;
+/**
+ * Convert an HTML string to one or more DOM elements, and add them to the current DOM scope.
+ * @param html - The HTML string. For example `"<section><h2>Test</h2><p>Info..</p></section>"`.
+ */
+export declare function html(html: string): void;
 /**
  * Add a text node at the current Scope position.
  */
@@ -317,29 +474,6 @@ export declare function getParentElement(): Element;
  * @param clean - The function to be executed.
  */
 export declare function clean(clean: (scope: Scope) => void): void;
-/**
- * Create a new reactive scope and execute the `func` within that scope. When
- * `Store`s that the `func` reads are updated, only this scope will need to be refreshed,
- * leaving the parent scope untouched.
- *
- * In case this function is called outside of a an existing scope, it will create a new
- * top-level scope (a [[`Mount`]]) without a `parentElement`, meaning that aberdeen operations
- * that create/modify DOM elements are not permitted.
- * @param func - The function to be (repeatedly) executed within the newly created scope.
- * @returns The newly created `Mount` object in case this is a top-level reactive scope.
- * @example
- * ```
- * let store = new Store('John Doe')
- * mount(document.body, () => {
- *     node('div.card', () => {
- * 	       node('input', {placeholder: 'Name'}, store)
- *         observe(() => {
- * 		       prop('class', {correct: store.get().length > 5})
- * 		   })
- * 	   })
- * })
- * ```
- */
 /**
  * Reactively run a function, meaning the function will rerun when any `Store` that was read
  * during its execution is updated.
@@ -415,9 +549,8 @@ export declare function mount(parentElement: Element | undefined, func: () => vo
  *
  * mount(document.body, () => {
  *     // Prevent rerender when store changes
- *     peek(() => {
- *         text(`Store has ${store.count()} elements, and the first is ${store.get(0)}`)
- *     })
+ *     let msg = peek(() => `Store has ${store.count()} elements, and the first is ${store.get(0)}`))
+ *     text(msg)
  * })
  * ```
  *

package/dist/aberdeen.js

@@ -89,6 +89,8 @@ class Scope {
         // The list of clean functions to be called when this scope is cleaned. These can
         // be for child scopes, subscriptions as well as `clean(..)` hooks.
         this.cleaners = [];
+        // Set to true after the scope has been cleaned, causing any spurious reruns to
+        // be ignored.
         this.isDead = false;
         this.parentElement = parentElement;
         this.precedingSibling = precedingSibling;
@@ -631,16 +633,14 @@ class ObsObject extends ObsMap {
         return cnt;
     }
 }
-/*
-* Store
-*
-* A data store that automatically subscribes the current Scope to updates
-* whenever data is read from it.
-*
-* Supported data types are: `string`, `number`, `boolean`, `undefined`, `null`,
-* `Array` and `Map` (all objects including `Array` are converted to `Map`s).
-* Map values become separate `Store`s themselves.
-*/
+/**
+ * A data store that automatically subscribes the current scope to updates
+ * whenever data is read from it.
+ *
+ * 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.
+ */
 export class Store {
     constructor(value = undefined, index = undefined) {
         if (index === undefined) {
@@ -686,6 +686,7 @@ export class Store {
      * @example
      * ```
      * let store = new Store({a: {b: {c: {d: 42}}}})
+     * assert('a' in store.get())
      * assert(store.get('a', 'b') === {c: {d: 42}})
      * ```
      */
@@ -693,7 +694,7 @@ export class Store {
         return this.query({ path });
     }
     /**
-     * @returns The same as [[`get`]], but doesn't subscribe to changes.
+     * Like [[`get`]], but doesn't subscribe to changes.
      */
     peek(...path) {
         return this.query({ path, peek: true });
@@ -734,9 +735,17 @@ export class Store {
      */
     getMap(...path) { return this.query({ path, type: 'map' }); }
     /**
-     * @returns Like [[`get`]], but the first parameter is the default value (returned when the Store
+     * Like [[`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.
+     *
+     * @example
+     * ```
+     * let store = {x: 42}
+     * assert(getOr(99, 'x') == 42)
+     * assert(getOr(99, 'y') == 99)
+     * getOr('hello', x') # throws TypeError (because 42 is not a string)
+     * ```
      */
     getOr(defaultValue, ...path) {
         let type = typeof defaultValue;
@@ -748,7 +757,9 @@ export class Store {
         }
         return this.query({ type, defaultValue, path });
     }
-    /** Retrieve a value. This is a more flexible form of the [[`get`]] and [[`peek`]] methods.
+    /** Retrieve a value, subscribing to all read `Store` values. This is a more flexible
+     * form of the [[`get`]] and [[`peek`]] methods.
+     *
      * @returns The resulting value, or `undefined` if the `path` does not exist.
      */
     query(opts) {
@@ -771,6 +782,13 @@ export class Store {
         }
         return value === undefined ? opts.defaultValue : value;
     }
+    /**
+     * Checks if the specified collection is empty, and subscribes the current scope to changes of the emptiness of this collection.
+     *
+     * @param path Any path terms to resolve before retrieving the value.
+     * @returns When the specified collection is not empty `true` is returned. If it is empty or if the value is undefined, `false` is returned.
+     * @throws When the value is not a collection and not undefined, an Error will be thrown.
+     */
     isEmpty(...path) {
         let store = this.ref(...path);
         let value = store._observe();
@@ -790,6 +808,13 @@ export class Store {
             throw new Error(`isEmpty() expects a collection or undefined, but got ${JSON.stringify(value)}`);
         }
     }
+    /**
+     * Returns the number of items in the specified collection, and subscribes the current scope to changes in this count.
+     *
+     * @param path Any path terms to resolve before retrieving the value.
+     * @returns The number of items contained in the collection, or 0 if the value is undefined.
+     * @throws When the value is not a collection and not undefined, an Error will be thrown.
+     */
     count(...path) {
         let store = this.ref(...path);
         let value = store._observe();
@@ -810,7 +835,13 @@ export class Store {
         }
     }
     /**
-     * Returns "undefined", "null", "boolean", "number", "string", "function", "array", "map" or "object"
+     * Returns a strings describing the type of the store value, subscribing to changes of this type.
+     * Note: this currently also subscribes to changes of primitive values, so changing a value from 3 to 4
+     * would cause the scope to be rerun. This is not great, and may change in the future. This caveat does
+     * not apply to changes made *inside* an object, `Array` or `Map`.
+     *
+     * @param path Any path terms to resolve before retrieving the value.
+     * @returns Possible options: "undefined", "null", "boolean", "number", "string", "function", "array", "map" or "object".
      */
     getType(...path) {
         let store = this.ref(...path);
@@ -818,8 +849,33 @@ export class Store {
         return (value instanceof ObsCollection) ? value.getType() : (value === null ? "null" : typeof value);
     }
     /**
-     * Sets the Store value to the last given argument. Any earlier argument are a Store-path that is first
-     * resolved/created using `makeRef`.
+     * Sets the value to the last given argument. Any earlier argument are a Store-path that is first
+     * resolved/created using [[`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.)
+     *
+     * If you intent to make a copy instead of a reference, call [[`get`]] on the origin `Store`.
+     *
+     *
+     * @example
+     * ```
+     * let store = new Store() // Value is `undefined`
+     *
+     * store.set('x', 6) // Causes the store to become an object
+     * assert(store.get() == {x: 6})
+     *
+     * store.set('a', 'b', 'c', 'd') // Create parent path as objects
+     * assert(store.get() == {x: 6, a: {b: {c: 'd'}}})
+     *
+     * store.set(42) // Overwrites all of the above
+     * assert(store.get() == 42)
+     *
+     * store.set('x', 6) // Throw Error (42 is not a collection)
+     * ```
      */
     set(...pathAndValue) {
         let newValue = pathAndValue.pop();
@@ -830,12 +886,34 @@ export class Store {
      * Sets the `Store` to the given `mergeValue`, but without deleting any pre-existing
      * items when a collection overwrites a similarly typed collection. This results in
      * a deep merge.
+     *
+     * @example
+     * ```
+     * let store = new Store({a: {x: 1}})
+     * store.merge({a: {y: 2}, b: 3})
+     * assert(store.get() == {a: {x: 1, y: 2}, b: 3})
+     * ```
      */
-    merge(mergeValue) {
-        this.collection.setIndex(this.idx, mergeValue, false);
+    merge(...pathAndValue) {
+        let mergeValue = pathAndValue.pop();
+        let store = this.makeRef(...pathAndValue);
+        store.collection.setIndex(store.idx, mergeValue, false);
     }
     /**
      * Sets the value for the store to `undefined`, which causes it to be omitted from the map (or array, if it's at the end)
+     *
+     * @example
+     * ```
+     * let store = new Store({a: 1, b: 2})
+     * store.delete('a')
+     * assert(store.get() == {b: 2})
+     *
+     * store = new Store(['a','b','c'])
+     * store.delete(1)
+     * assert(store.get() == ['a', undefined, 'c'])
+     * store.delete(2)
+     * assert(store.get() == ['a'])
+     * ```
      */
     delete(...path) {
         let store = this.makeRef(...path);
@@ -843,14 +921,28 @@ export class Store {
     }
     /**
      * Pushes a value to the end of the Array that is at the specified path in the store.
-     * If that Store path is `undefined`, and Array is created first.
+     * If that store path is `undefined`, an Array is created first.
      * The last argument is the value to be added, any earlier arguments indicate the path.
+     *
+     * @example
+     * ```
+     * let store = new Store()
+     * store.push(3) // Creates the array
+     * store.push(6)
+     * assert(store.get() == [3,6])
+     *
+     * store = new Store({myArray: [1,2]})
+     * store.push('myArray', 3)
+     * assert(store.get() == {myArray: [1,2,3]})
+     * ```
      */
-    push(newValue) {
-        let obsArray = this.collection.rawGet(this.idx);
+    push(...pathAndValue) {
+        let newValue = pathAndValue.pop();
+        let store = this.makeRef(...pathAndValue);
+        let obsArray = store.collection.rawGet(store.idx);
         if (obsArray === undefined) {
             obsArray = new ObsArray();
-            this.collection.setIndex(this.idx, obsArray, true);
+            store.collection.setIndex(store.idx, obsArray, true);
         }
         else if (!(obsArray instanceof ObsArray)) {
             throw new Error(`push() is only allowed for an array or undefined (which would become an array)`);
@@ -898,6 +990,19 @@ export class Store {
      * type.
      * Unlike `ref`, `makeRef` does *not* subscribe to the path levels, as it is intended to be
      * a write-only operation.
+     *
+     * @example
+     * ```
+     * let store = new Store() // Value is `undefined`
+     *
+     * let ref = store.makeRef('a', 'b', 'c')
+     * assert(store.get() == {a: {b: {}}}
+     *
+     * ref.set(42)
+     * assert(store.get() == {a: {b: {c: 42}}}
+     *
+     * ref.makeRef('d') // Throw Error (42 is not a collection)
+     * ```
      */
     makeRef(...path) {
         let store = this;
@@ -923,6 +1028,15 @@ export class Store {
         }
         return this.collection.rawGet(this.idx);
     }
+    /**
+     * 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.
+     *
+     *
+     *
+     * @param pathAndFuncs
+     */
     onEach(...pathAndFuncs) {
         let makeSortKey = defaultMakeSortKey;
         let renderer = pathAndFuncs.pop();
@@ -977,22 +1091,22 @@ export class Store {
         });
         return out;
     }
-    /*
-    * Applies a filter/map function on each item within the `Store`'s collection,
-    * each of which can deliver any number of key/value pairs, and reactively manages the
-    * returned map `Store` to hold any results.
-    *
-    * @param func - Function that transform the given store into output values
-    * that can take one of the following forms:
-    * - an `Object` or a `Map`: Each key/value pair will be added to the output `Store`.
-    * - anything else: No key/value pairs are added to the output `Store`.
-    *
-    * @returns - A map `Store` with the key/value pairs returned by all `func` invocations.
-    *
-    * When items disappear from the `Store` or are changed in a way that `func` depends
-    * upon, the resulting items are removed from the output `Store` as well. When multiple
-    * input items produce the same output keys, this may lead to unexpected results.
-    */
+    /**
+     * Applies a filter/map function on each item within the `Store`'s collection,
+     * each of which can deliver any number of key/value pairs, and reactively manages the
+     * returned map `Store` to hold any results.
+     *
+     * @param func - Function that transform the given store into output values
+     * that can take one of the following forms:
+     * - an `Object` or a `Map`: Each key/value pair will be added to the output `Store`.
+     * - anything else: No key/value pairs are added to the output `Store`.
+     *
+     * @returns - A map `Store` with the key/value pairs returned by all `func` invocations.
+     *
+     * When items disappear from the `Store` or are changed in a way that `func` depends
+     * upon, the resulting items are removed from the output `Store` as well. When multiple
+     * input items produce the same output keys, this may lead to unexpected results.
+     */
     multiMap(func) {
         let out = new Store(new Map());
         this.onEach((item) => {
@@ -1054,13 +1168,13 @@ class DetachedStore extends Store {
     isDetached() { return true; }
 }
 /**
- * Create a new DOM element.
+ * 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 for the element. See `applyProp` on how the distinction is made.
+ *   - `object`: Used as attributes, properties or event listeners for the element. See [[`prop`]] on how the distinction is made.
  *   - `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`. After that, the `Store` will be updated when the input changes.
+ *   - `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
  * node('aside.editorial', 'Yada yada yada....', () => {
  *	 node('a', {href: '/bio'}, () => {
@@ -1114,25 +1228,35 @@ export function node(tag = "", ...rest) {
         }
     }
 }
+/**
+ * Convert an HTML string to one or more DOM elements, and add them to the current DOM scope.
+ * @param html - The HTML string. For example `"<section><h2>Test</h2><p>Info..</p></section>"`.
+ */
+export function html(html) {
+    if (!currentScope || !currentScope.parentElement)
+        throw new ScopeError(true);
+    let tmpParent = document.createElement(currentScope.parentElement.tagName);
+    tmpParent.innerHTML = '' + html;
+    while (tmpParent.firstChild) {
+        currentScope.addNode(tmpParent.firstChild);
+    }
+}
 function bindInput(el, store) {
-    let updater;
+    let onStoreChange;
+    let onInputChange;
     let type = el.getAttribute('type');
     let value = store.query({ peek: true });
     if (type === 'checkbox') {
         if (value === undefined)
             store.set(el.checked);
-        else
-            el.checked = value;
-        updater = () => store.set(el.checked);
+        onStoreChange = value => el.checked = value;
+        onInputChange = () => store.set(el.checked);
     }
     else if (type === 'radio') {
-        if (value === undefined) {
-            if (el.checked)
-                store.set(el.value);
-        }
-        else
-            el.checked = value === el.value;
-        updater = () => {
+        if (value === undefined && el.checked)
+            store.set(el.value);
+        onStoreChange = value => el.checked = (value === el.value);
+        onInputChange = () => {
             if (el.checked)
                 store.set(el.value);
         };
@@ -1140,13 +1264,18 @@ function bindInput(el, store) {
     else {
         if (value === undefined)
             store.set(el.value);
-        else
-            el.value = value;
-        updater = () => store.set(el.value);
+        onStoreChange = value => {
+            if (el.value !== value)
+                el.value = value;
+        };
+        onInputChange = () => store.set(el.value);
     }
-    el.addEventListener('input', updater);
+    observe(() => {
+        onStoreChange(store.get());
+    });
+    el.addEventListener('input', onInputChange);
     clean(() => {
-        el.removeEventListener('input', updater);
+        el.removeEventListener('input', onInputChange);
     });
 }
 /**
@@ -1193,29 +1322,6 @@ export function clean(clean) {
         throw new ScopeError(false);
     currentScope.cleaners.push({ _clean: clean });
 }
-/**
- * Create a new reactive scope and execute the `func` within that scope. When
- * `Store`s that the `func` reads are updated, only this scope will need to be refreshed,
- * leaving the parent scope untouched.
- *
- * In case this function is called outside of a an existing scope, it will create a new
- * top-level scope (a [[`Mount`]]) without a `parentElement`, meaning that aberdeen operations
- * that create/modify DOM elements are not permitted.
- * @param func - The function to be (repeatedly) executed within the newly created scope.
- * @returns The newly created `Mount` object in case this is a top-level reactive scope.
- * @example
- * ```
- * let store = new Store('John Doe')
- * mount(document.body, () => {
- *     node('div.card', () => {
- * 	       node('input', {placeholder: 'Name'}, store)
- *         observe(() => {
- * 		       prop('class', {correct: store.get().length > 5})
- * 		   })
- * 	   })
- * })
- * ```
- */
 /**
  * Reactively run a function, meaning the function will rerun when any `Store` that was read
  * during its execution is updated.
@@ -1309,9 +1415,8 @@ export function mount(parentElement, func) {
  *
  * mount(document.body, () => {
  *     // Prevent rerender when store changes
- *     peek(() => {
- *         text(`Store has ${store.count()} elements, and the first is ${store.get(0)}`)
- *     })
+ *     let msg = peek(() => `Store has ${store.count()} elements, and the first is ${store.get(0)}`))
+ *     text(msg)
  * })
  * ```
  *
@@ -1413,7 +1518,7 @@ function defaultMakeSortKey(store) {
 }
 /* istanbul ignore next */
 function internalError(code) {
-    let error = new Error("internal error " + code);
+    let error = new Error("Aberdeen internal error " + code);
     setTimeout(() => { throw error; }, 0);
 }
 function handleError(e) {
@@ -1425,11 +1530,6 @@ class ScopeError extends Error {
         super(`Operation not permitted outside of ${mount ? "a mount" : "an observe"}() scope`);
     }
 }
-let arrayFromSet = Array.from || /* istanbul ignore next */ ((set) => {
-    let array = [];
-    set.forEach(item => array.push(item));
-    return array;
-});
 // @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 h{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 h?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 l extends h{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 h{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 h{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){this.collection.setIndex(this.idx,e,!1)}delete(...e){let t=this.makeRef(...e);t.collection.setIndex(t.idx,void 0,!0)}push(e){let t=this.collection.rawGet(this.idx);if(void 0===t)t=new g,this.collection.setIndex(this.idx,t,!0);else if(!(t instanceof g))throw new Error("push() is only allowed for an array or undefined (which would become an array)");let i=x(e),n=t.data.length;return t.data.push(i),t.emitChange(n,i,void 0),n}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 l(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))}}function w(e,t){let i,n=e.getAttribute("type"),r=t.query({peek:!0});"checkbox"===n?(void 0===r?t.set(e.checked):e.checked=r,i=()=>t.set(e.checked)):"radio"===n?(void 0===r?e.checked&&t.set(e.value):e.checked=r===e.value,i=()=>{e.checked&&t.set(e.value)}):(void 0===r?t.set(e.value):e.value=r,i=()=>t.set(e.value)),e.addEventListener("input",i),clean(()=>{e.removeEventListener("input",i)})}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 l(t,void 0,0,i):(n=new l(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("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`)}}Array.from;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(){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)});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aberdeen",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "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",
@@ -20,7 +20,7 @@
     "nyc": "^15.0.1",
     "terser": "^4.6.13",
     "typedoc": "^0.22.10",
-    "typescript": "^4.5.4",
+    "typescript": "^4.9.5",
     "fast-equals": "^2.0.4"
   },
   "nyc": {