aberdeen 0.2.4 → 0.4.0

package/dist/aberdeen.js

@@ -1,8 +1,18 @@
-let queueArray = [];
-let queueSet = new Set();
-let queueOrdered = true;
-let runQueueDepth = 0;
-let queueIndex;
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+let queueArray = []; // When not empty, a runQueue is scheduled or currently running.
+let queueIndex = 0; // This first element in queueArray that still needs to be processed.
+let queueSet = new Set(); // Contains the subset of queueArray at index >= queueIndex.
+let queueOrdered = true; // Set to `false` when `queue()` appends a runner to `queueArray` that should come before the previous last item in the array. Will trigger a sort.
+let runQueueDepth = 0; // Incremented when a queue event causes another queue event to be added. Reset when queue is empty. Throw when >= 42 to break (infinite) recursion.
+let showCreateTransitions = false; // Set to `true` only when creating top level elements in response to `Store` changes, triggering `create` transitions.
 function queue(runner) {
     if (queueSet.has(runner))
         return;
@@ -18,9 +28,18 @@ function queue(runner) {
     queueArray.push(runner);
     queueSet.add(runner);
 }
-function runQueue() {
-    onCreateEnabled = true;
-    for (queueIndex = 0; queueIndex < queueArray.length;) {
+/**
+ * Normally, changes to `Store`s are reacted to asynchronously, in an (optimized)
+ * batch, after a timeout of 0s. Calling `runQueue()` will do so immediately
+ * and synchronously. Doing so may be helpful in cases where you need some DOM
+ * modification to be done synchronously.
+ *
+ * This function is re-entrant, meaning it is safe to call `runQueue` from a
+ * function that is called due to another (automatic) invocation of `runQueue`.
+ */
+export function runQueue() {
+    showCreateTransitions = true;
+    for (; queueIndex < queueArray.length;) {
         // Sort queue if new unordered items have been added since last time.
         if (!queueOrdered) {
             queueArray.splice(0, queueIndex);
@@ -31,8 +50,8 @@ function runQueue() {
         }
         // Process the rest of what's currently in the queue.
         let batchEndIndex = queueArray.length;
-        for (; queueIndex < batchEndIndex && queueOrdered; queueIndex++) {
-            let runner = queueArray[queueIndex];
+        while (queueIndex < batchEndIndex && queueOrdered) {
+            let runner = queueArray[queueIndex++];
             queueSet.delete(runner);
             runner._queueRun();
         }
@@ -40,17 +59,17 @@ function runQueue() {
         // batch, we'll need to run this loop again.
         runQueueDepth++;
     }
+    queueIndex = 0;
     queueArray.length = 0;
-    queueIndex = undefined;
     runQueueDepth = 0;
-    onCreateEnabled = false;
+    showCreateTransitions = false;
 }
+let domWaiters = [];
+let domInReadPhase = false;
 /**
- * Schedule a DOM read operation to be executed in Aberdeen's internal task queue.
- *
- * This function is used to batch DOM read operations together, avoiding unnecessary
- * layout recalculations and improving browser performance. A DOM read operation should
- * only *read* from the DOM, such as measuring element dimensions or retrieving computed styles.
+ * A promise-like object that you can `await`. It will resolve *after* the current batch
+ * of DOM-write operations has completed. This is the best time to retrieve DOM properties
+ * that dependent on a layout being completed, such as `offsetHeight`.
  *
  * By batching DOM reads separately from DOM writes, this prevents the browser from
  * interleaving layout reads and writes, which can force additional layout recalculations.
@@ -60,18 +79,25 @@ function runQueue() {
  * Unlike `setTimeout` or `requestAnimationFrame`, this mechanism ensures that DOM read
  * operations happen before any DOM writes in the same queue cycle, minimizing layout thrashing.
  *
- * @param func The function to be executed as a DOM read operation.
+ * See `transitions.js` for some examples.
  */
-export function scheduleDomReader(func) {
-    let order = (queueIndex != null && queueIndex < queueArray.length && queueArray[queueIndex]._queueOrder >= 1000) ? ((queueArray[queueIndex]._queueOrder + 1) & (~1)) : 1000;
-    queue({ _queueOrder: order, _queueRun: func });
-}
+export const DOM_READ_PHASE = {
+    then: function (fulfilled) {
+        if (domInReadPhase)
+            fulfilled();
+        else {
+            if (!domWaiters.length)
+                queue(DOM_PHASE_RUNNER);
+            domWaiters.push(fulfilled);
+        }
+        return this;
+    }
+};
 /**
- * Schedule a DOM write operation to be executed in Aberdeen's internal task queue.
- *
- * This function is used to batch DOM write operations together, avoiding unnecessary
- * layout recalculations and improving browser performance. A DOM write operation should
- * only *write* to the DOM, such as modifying element properties or applying styles.
+ * A promise-like object that you can `await`. It will resolve *after* the current
+ * DOM_READ_PHASE has completed (if any) and after any DOM triggered by Aberdeen
+ * have completed. This is a good time to do little manual DOM tweaks that depend
+ * on a *read phase* first, like triggering transitions.
  *
  * By batching DOM writes separately from DOM reads, this prevents the browser from
  * interleaving layout reads and writes, which can force additional layout recalculations.
@@ -81,12 +107,36 @@ export function scheduleDomReader(func) {
  * Unlike `setTimeout` or `requestAnimationFrame`, this mechanism ensures that DOM write
  * operations happen after all DOM reads in the same queue cycle, minimizing layout thrashing.
  *
- * @param func The function to be executed as a DOM write operation.
+ * See `transitions.js` for some examples.
  */
-export function scheduleDomWriter(func) {
-    let order = (queueIndex != null && queueIndex < queueArray.length && queueArray[queueIndex]._queueOrder >= 1000) ? (queueArray[queueIndex]._queueOrder | 1) : 1001;
-    queue({ _queueOrder: order, _queueRun: func });
-}
+export const DOM_WRITE_PHASE = {
+    then: function (fulfilled) {
+        if (!domInReadPhase)
+            fulfilled();
+        else {
+            if (!domWaiters.length)
+                queue(DOM_PHASE_RUNNER);
+            domWaiters.push(fulfilled);
+        }
+        return this;
+    }
+};
+const DOM_PHASE_RUNNER = {
+    _queueOrder: 99999,
+    _queueRun: function () {
+        let waiters = domWaiters;
+        domWaiters = [];
+        domInReadPhase = !domInReadPhase;
+        for (let waiter of waiters) {
+            try {
+                waiter();
+            }
+            catch (e) {
+                console.error(e);
+            }
+        }
+    }
+};
 /**
  * Given an integer number, a string or an array of these, this function returns a string that can be used
  * to compare items in a natural sorting order. So `[3, 'ab']` should be smaller than `[3, 'ac']`.
@@ -136,16 +186,21 @@ function numToString(num, neg) {
  * and the `clean` functions for the scope and all sub-scopes are called.
  */
 class Scope {
-    constructor(parentElement, precedingSibling, queueOrder) {
+    constructor(_parentElement, 
+    // The node or scope right before this scope that has the same `parentElement`
+    _precedingSibling, 
+    // How deep is this scope nested in other scopes; we use this to make sure events
+    // at lower depths are handled before events at higher depths.
+    _queueOrder) {
+        this._parentElement = _parentElement;
+        this._precedingSibling = _precedingSibling;
+        this._queueOrder = _queueOrder;
         // 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;
-        this._queueOrder = queueOrder;
     }
     // Get a reference to the last Node preceding this Scope, or undefined if there is none
     _findPrecedingNode(stopAt = undefined) {
@@ -170,8 +225,6 @@ class Scope {
         }
     }
     _addNode(node) {
-        if (!this._parentElement)
-            throw new ScopeError(true);
         let prevNode = this._findLastNode() || this._findPrecedingNode();
         this._parentElement.insertBefore(node, prevNode ? prevNode.nextSibling : this._parentElement.firstChild);
         this._lastChild = node;
@@ -230,8 +283,15 @@ class Scope {
 class SimpleScope extends Scope {
     constructor(parentElement, precedingSibling, queueOrder, renderer) {
         super(parentElement, precedingSibling, queueOrder);
-        this._renderer = renderer;
+        if (renderer)
+            this._renderer = renderer;
     }
+    /* c8 ignore start */
+    _renderer() {
+        // Should be overriden by a subclass or the constructor
+        internalError(14);
+    }
+    /* c8 ignore stop */
     _queueRun() {
         /* c8 ignore next */
         if (currentScope)
@@ -250,10 +310,38 @@ class SimpleScope extends Scope {
         }
         catch (e) {
             // Throw the error async, so the rest of the rendering can continue
-            handleError(e);
+            handleError(e, true);
         }
         currentScope = savedScope;
     }
+    _install() {
+        if (showCreateTransitions) {
+            showCreateTransitions = false;
+            this._update();
+            showCreateTransitions = true;
+        }
+        else {
+            this._update();
+        }
+        // Add it to our list of cleaners. Even if `childScope` currently has
+        // no cleaners, it may get them in a future refresh.
+        currentScope._cleaners.push(this);
+    }
+}
+/**
+ * This could have been done with a SimpleScope, but then we'd have to draw along an instance of
+ * that as well as a renderer function that closes over quite a few variables, which probably
+ * wouldn't be great for the performance of this common feature.
+ */
+class SetArgScope extends SimpleScope {
+    constructor(parentElement, precedingSibling, queueOrder, _key, _value) {
+        super(parentElement, precedingSibling, queueOrder);
+        this._key = _key;
+        this._value = _value;
+    }
+    _renderer() {
+        applyArg(this._parentElement, this._key, this._value.get());
+    }
 }
 let immediateQueue = new Set();
 class ImmediateScope extends SimpleScope {
@@ -494,7 +582,7 @@ class OnEachItemScope extends Scope {
             sortKey = this._parent._makeSortKey(itemStore);
         }
         catch (e) {
-            handleError(e);
+            handleError(e, false);
         }
         let oldSortStr = this._sortStr;
         let newSortStr = sortKey == null ? '' : sortKeyToString(sortKey);
@@ -510,7 +598,7 @@ class OnEachItemScope extends Scope {
                 this._parent._renderer(itemStore);
             }
             catch (e) {
-                handleError(e);
+                handleError(e, true);
             }
         }
         currentScope = savedScope;
@@ -518,7 +606,7 @@ class OnEachItemScope extends Scope {
 }
 /**
  * This global is set during the execution of a `Scope.render`. It is used by
- * functions like `node`, `text` and `clean`.
+ * functions like `$` and `clean`.
  */
 let currentScope;
 /**
@@ -760,33 +848,52 @@ class ObsObject extends ObsMap {
         return cnt;
     }
 }
-/**
- * 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`-objects.
- */
+const DETACHED_KEY = {};
 export class Store {
+    /** @internal */
     constructor(value = undefined, index = undefined) {
+        /**
+         * Create and return a new `Store` that represents the subtree at `path` of
+         * the current `Store`.
+         *
+         * The `path` is only actually resolved when this new `Store` is first used,
+         * and how this is done depends on whether a read or a write operation is
+         * performed. Read operations will just use an `undefined` value when a
+         * subtree that we're diving into does not exist. Also, they'll subscribe
+         * to changes at each level of the tree indexed by `path`.
+         *
+         * Write operations will create any missing subtrees as objects. They don't
+         * subscribe to changes (as they are the ones causing the changes).
+         *
+         * Both read and write operations will throw an error if, while resolving
+         * `path`, they encounters a non-collection data type (such as a number)
+         */
+        const ref = function (...path) {
+            const result = new Store(ref._collection, ref._idx);
+            if (path.length || ref._virtual) {
+                result._virtual = ref._virtual ? ref._virtual.concat(path) : path;
+            }
+            return result;
+        };
+        Object.setPrototypeOf(ref, Store.prototype);
         if (index === undefined) {
-            this._collection = new ObsArray();
-            this._idx = 0;
+            ref._collection = new ObsArray();
+            ref._idx = 0;
             if (value !== undefined) {
-                this._collection.rawSet(0, valueToData(value));
+                ref._collection.rawSet(0, valueToData(value));
             }
         }
         else {
             if (!(value instanceof ObsCollection)) {
                 throw new Error("1st parameter should be an ObsCollection if the 2nd is also given");
             }
-            this._collection = value;
-            this._idx = index;
+            ref._collection = value;
+            ref._idx = index;
         }
+        // @ts-ignore
+        return ref;
     }
     /**
-     *
      * @returns The index for this Store within its parent collection. This will be a `number`
      * when the parent collection is an array, a `string` when it's an object, or any data type
      * when it's a `Map`.
@@ -795,8 +902,8 @@ export class Store {
      * ```
      * let store = new Store({x: 123})
      * let subStore = store.ref('x')
-     * assert(subStore.get() === 123)
-     * assert(subStore.index() === 'x') // <----
+     * subStore.get() // 123
+     * subStore.index() // 'x'
      * ```
      */
     index() {
@@ -807,118 +914,121 @@ export class Store {
         this._collection._removeObserver(this._idx, scope);
     }
     /**
-     * @returns Resolves `path` and then retrieves the value that is there, subscribing
-     * to all read `Store` values. If `path` does not exist, `undefined` is returned.
-     * @param path - Any path terms to resolve before retrieving the value.
-     * @example
-     * ```
-     * let store = new Store({a: {b: {c: {d: 42}}}})
-     * assert('a' in store.get())
-     * assert(store.get('a', 'b') === {c: {d: 42}})
-     * ```
+     * Retrieve the value for store, subscribing the observe scope to changes.
+     *
+     * @param depth 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.
+     *
+     * @returns The resulting value (or `undefined` if the `Store` does not exist).
+     */
+    get(depth = 0) {
+        let value = this._observe();
+        return value instanceof ObsCollection ? value._getRecursive(depth - 1) : value;
+    }
+    /**
+     * Exactly like {@link Store.get}, except that when executed from an observe scope,
+     * we will not subscribe to changes in the data retrieved data.
      */
-    get(...path) {
-        return this.query({ path });
+    peek(depth = 0) {
+        let savedScope = currentScope;
+        currentScope = undefined;
+        let result = this.get(depth);
+        currentScope = savedScope;
+        return result;
     }
     /**
-     * Like {@link Store.get}, but doesn't subscribe to changes.
+     * Like {@link Store.get}, but with return type checking.
+     *
+     * @param expectType A string specifying what type the.get is expected to return. Options are:
+     *    "undefined", "null", "boolean", "number", "string", "function", "array", "map"
+     *    and "object". If the store holds a different type of value, a `TypeError`
+     *    exception is thrown.
+     * @returns
      */
-    peek(...path) {
-        return this.query({ path, peek: true });
+    getTyped(expectType, depth = 0) {
+        let value = this._observe();
+        let type = (value instanceof ObsCollection) ? value._getType() : (value === null ? "null" : typeof value);
+        if (type !== expectType)
+            throw new TypeError(`Expecting ${expectType} but got ${type}`);
+        return value instanceof ObsCollection ? value._getRecursive(depth - 1) : value;
     }
     /**
      * @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' }); }
+    getNumber() { return this.getTyped('number'); }
     /**
      * @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' }); }
+    getString() { return this.getTyped('string'); }
     /**
      * @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' }); }
+    getBoolean() { return this.getTyped('boolean'); }
     /**
      * @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' }); }
+    getFunction() { return this.getTyped('function'); }
     /**
      * @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' }); }
+    getArray(depth = 0) { return this.getTyped('array', depth); }
     /**
      * @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' }); }
+    getObject(depth = 0) { return this.getTyped('object', depth); }
     /**
      * @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' }); }
+    getMap(depth = 0) { return this.getTyped('map', depth); }
     /**
-     * Like {@link Store.get}, but the first parameter is the default value (returned when the Store
+     * Like {@link Store.get}, but with a 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)
+     * let store = new Store({x: 42})
+     * store('x').getOr(99) // 42
+     * store('y').getOr(99) // 99
+     * store('x').getOr('hello') // throws TypeError (because 42 is not a string)
      * ```
      */
-    getOr(defaultValue, ...path) {
-        let type = typeof defaultValue;
-        if (type === 'object') {
+    getOr(defaultValue) {
+        let value = this._observe();
+        if (value === undefined)
+            return defaultValue;
+        let expectType = typeof defaultValue;
+        if (expectType === 'object') {
             if (defaultValue instanceof Map)
-                type = 'map';
+                expectType = 'map';
             else if (defaultValue instanceof Array)
-                type = 'array';
+                expectType = 'array';
+            else if (defaultValue === null)
+                expectType = 'null';
         }
-        return this.query({ type, defaultValue, path });
-    }
-    /** Retrieve a value, subscribing to all read `Store` values. This is a more flexible
-     * form of the {@link Store.get} and {@link Store.peek} methods.
-     *
-     * @returns The resulting value, or `undefined` if the `path` does not exist.
-     */
-    query(opts) {
-        if (opts.peek && currentScope) {
-            let savedScope = currentScope;
-            currentScope = undefined;
-            let result = this.query(opts);
-            currentScope = savedScope;
-            return result;
-        }
-        let store = opts.path && opts.path.length ? this.ref(...opts.path) : this;
-        let value = store._observe();
-        if (opts.type && (value !== undefined || opts.defaultValue === undefined)) {
-            let type = (value instanceof ObsCollection) ? value._getType() : (value === null ? "null" : typeof value);
-            if (type !== opts.type)
-                throw new TypeError(`Expecting ${opts.type} but got ${type}`);
-        }
-        if (value instanceof ObsCollection) {
-            return value._getRecursive(opts.depth == null ? -1 : opts.depth - 1);
-        }
-        return value === undefined ? opts.defaultValue : value;
+        let type = (value instanceof ObsCollection) ? value._getType() : (value === null ? "null" : typeof value);
+        if (type !== expectType)
+            throw new TypeError(`Expecting ${expectType} but got ${type}`);
+        return (value instanceof ObsCollection ? value._getRecursive(-1) : value);
     }
     /**
-     * Checks if the specified collection is empty, and subscribes the current scope to changes of the emptiness of this collection.
+     * Checks if the collection held in `Store` 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.
+     * @returns When the 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();
+    isEmpty() {
+        let value = this._observe();
         if (value instanceof ObsCollection) {
             if (currentScope) {
                 let observer = new IsEmptyObserver(currentScope, value, false);
@@ -936,15 +1046,13 @@ export class Store {
         }
     }
     /**
-     * Returns the number of items in the specified collection, and subscribes the current scope to changes in this count.
+     * Returns the number of items in the collection held in Store, 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();
+    count() {
+        let value = this._observe();
         if (value instanceof ObsCollection) {
             if (currentScope) {
                 let observer = new IsEmptyObserver(currentScope, value, true);
@@ -962,22 +1070,38 @@ export class Store {
         }
     }
     /**
-     * Returns a strings describing the type of the store value, subscribing to changes of this type.
+     * 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);
-        let value = store._observe();
+    getType() {
+        let value = this._observe();
         return (value instanceof ObsCollection) ? value._getType() : (value === null ? "null" : typeof value);
     }
     /**
-     * Sets the value to the last given argument. Any earlier argument are a Store-path that is first
-     * resolved/created using {@link Store.makeRef}.
+     * Returns a new `Store` that will always hold either the value of `whenTrue` or the value
+     * of `whenFalse` depending on whether the original `Store` is truthy or not.
+     *
+     * @param whenTrue The value set to the return-`Store` while `this` is truthy. This can be
+     *     any type of value. If it's a `Store`, the return-`Store` will reference the same
+     *     data (so *no* deep copy will be made).
+     * @param whenFalse Like `whenTrue`, but for falsy values (false, undefined, null, 0, "").
+     * @returns A store holding the result value. The value will keep getting updated while
+     * the observe context from which `if()` was called remains active.
+     */
+    if(whenTrue, whenFalse) {
+        const result = new Store();
+        observe(() => {
+            const value = this.get() ? whenTrue : whenFalse;
+            result.set(value);
+        });
+        return result;
+    }
+    /**
+     * Sets the `Store` value to the given argument.
      *
      * 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
@@ -987,95 +1111,140 @@ export class Store {
      *
      * If you intent to make a copy instead of a reference, call {@link Store.get} on the origin `Store`.
      *
+     * @returns The `Store` itself, for chaining other methods.
      *
      * @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(6)
+     * store.get() // 6
      *
-     * store.set('a', 'b', 'c', 'd') // Create parent path as objects
-     * assert(store.get() == {x: 6, a: {b: {c: 'd'}}})
+     * store.set({}) // Change  value to an empty object
+     * store('a', 'b', 'c').set('d') // Create parent path as objects
+     * store.get() // {x: 6, a: {b: {c: 'd'}}}
      *
      * store.set(42) // Overwrites all of the above
-     * assert(store.get() == 42)
+     * store.get() // 42
      *
-     * store.set('x', 6) // Throw Error (42 is not a collection)
+     * store('x').set(6) // Throw Error (42 is not a collection)
      * ```
      */
-    set(...pathAndValue) {
-        let newValue = pathAndValue.pop();
-        let store = this.makeRef(...pathAndValue);
-        store._collection._setIndex(store._idx, newValue, true);
+    set(newValue) {
+        this._materialize(true);
+        this._collection._setIndex(this._idx, newValue, true);
         runImmediateQueue();
+        return this;
+    }
+    /** @internal */
+    _materialize(forWriting) {
+        if (!this._virtual)
+            return true;
+        let collection = this._collection;
+        let idx = this._idx;
+        for (let i = 0; i < this._virtual.length; i++) {
+            if (!forWriting && currentScope) {
+                if (collection._addObserver(idx, currentScope)) {
+                    currentScope._cleaners.push(this);
+                }
+            }
+            let value = collection.rawGet(idx);
+            if (!(value instanceof ObsCollection)) {
+                // Throw an error if trying to index a primitive type
+                if (value !== undefined)
+                    throw new Error(`While resolving ${JSON.stringify(this._virtual)}, found ${JSON.stringify(value)} at index ${i} instead of a collection.`);
+                // For reads, we'll just give up. We might reactively get another shot at this.
+                if (!forWriting)
+                    return false;
+                // For writes, create a new collection.
+                value = new ObsObject();
+                collection.rawSet(idx, value);
+                collection.emitChange(idx, value, undefined);
+            }
+            collection = value;
+            const prop = this._virtual[i];
+            idx = collection._normalizeIndex(prop);
+        }
+        this._collection = collection;
+        this._idx = idx;
+        delete this._virtual;
+        return true;
     }
     /**
      * 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.
      *
+     * @returns The `Store` itself, for chaining other methods.
+     *
      * @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})
+     * store.get() // {a: {x: 1, y: 2}, b: 3}
      * ```
      */
-    merge(...pathAndValue) {
-        let mergeValue = pathAndValue.pop();
-        let store = this.makeRef(...pathAndValue);
-        store._collection._setIndex(store._idx, mergeValue, false);
+    merge(mergeValue) {
+        this._materialize(true);
+        this._collection._setIndex(this._idx, mergeValue, false);
         runImmediateQueue();
+        return this;
     }
     /**
      * 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)
      *
+     * @returns The `Store` itself, for chaining other methods.
+     *
      * @example
      * ```
      * let store = new Store({a: 1, b: 2})
-     * store.delete('a')
-     * assert(store.get() == {b: 2})
+     * store('a').delete()
+     * 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'])
+     * store(1).delete()
+     * store.get() // ['a', undefined, 'c']
+     * store(2).delete()
+     * store.get() // ['a']
+     * store.delete()
+     * store.get() // undefined
      * ```
      */
-    delete(...path) {
-        let store = this.makeRef(...path);
-        store._collection._setIndex(store._idx, undefined, true);
+    delete() {
+        this._materialize(true);
+        this._collection._setIndex(this._idx, undefined, true);
         runImmediateQueue();
+        return this;
     }
     /**
      * Pushes a value to the end of the Array that is at the specified path in the store.
      * 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.
      *
+     * @returns The index at which the item was appended.
+     * @throws TypeError when the store contains a primitive data type.
+     *
      * @example
      * ```
      * let store = new Store()
      * store.push(3) // Creates the array
      * store.push(6)
-     * assert(store.get() == [3,6])
+     * store.get() // [3,6]
      *
      * store = new Store({myArray: [1,2]})
-     * store.push('myArray', 3)
-     * assert(store.get() == {myArray: [1,2,3]})
+     * store('myArray').push(3)
+     * store.get() // {myArray: [1,2,3]}
      * ```
      */
-    push(...pathAndValue) {
-        let newValue = pathAndValue.pop();
-        let store = this.makeRef(...pathAndValue);
-        let obsArray = store._collection.rawGet(store._idx);
+    push(newValue) {
+        this._materialize(true);
+        let obsArray = this._collection.rawGet(this._idx);
         if (obsArray === undefined) {
             obsArray = new ObsArray();
-            store._collection._setIndex(store._idx, obsArray, true);
+            this._collection._setIndex(this._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)`);
+            throw new TypeError(`push() is only allowed for an array or undefined (which would become an array)`);
         }
         let newData = valueToData(newValue);
         let pos = obsArray._data.length;
@@ -1088,71 +1257,16 @@ export class Store {
      * {@link Store.peek} the current value, pass it through `func`, and {@link Store.set} the resulting
      * value.
      * @param func The function transforming the value.
+     * @returns The `Store` itself, for chaining other methods.
      */
     modify(func) {
-        this.set(func(this.query({ peek: true })));
-    }
-    /**
-     * Return a `Store` deeper within the tree by resolving the given `path`,
-     * 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 {@link Store.isDetached} method will return `true`.
-     * In case something other than a collection is encountered, an error is thrown.
-     */
-    ref(...path) {
-        let store = this;
-        for (let i = 0; i < path.length; i++) {
-            let value = store._observe();
-            if (value instanceof ObsCollection) {
-                store = new Store(value, value._normalizeIndex(path[i]));
-            }
-            else {
-                if (value !== undefined)
-                    throw new Error(`Value ${JSON.stringify(value)} is not a collection (nor undefined) in step ${i} of $(${JSON.stringify(path)})`);
-                return new DetachedStore();
-            }
-        }
-        return store;
-    }
-    /**
-     * Similar to `ref()`, but instead of returning `undefined`, new objects are created when
-     * a path does not exist yet. An error is still thrown when the path tries to index an invalid
-     * 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;
-        for (let i = 0; i < path.length; i++) {
-            let value = store._collection.rawGet(store._idx);
-            if (!(value instanceof ObsCollection)) {
-                if (value !== undefined)
-                    throw new Error(`Value ${JSON.stringify(value)} is not a collection (nor undefined) in step ${i} of $(${JSON.stringify(path)})`);
-                value = new ObsObject();
-                store._collection.rawSet(store._idx, value);
-                store._collection.emitChange(store._idx, value, undefined);
-            }
-            store = new Store(value, value._normalizeIndex(path[i]));
-        }
-        runImmediateQueue();
-        return store;
+        this.set(func(this.peek()));
+        return this;
     }
     /** @internal */
     _observe() {
+        if (!this._materialize(false))
+            return undefined;
         if (currentScope) {
             if (this._collection._addObserver(this._idx, currentScope)) {
                 currentScope._cleaners.push(this);
@@ -1165,24 +1279,17 @@ export class Store {
      * 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 {@link Store.clean} handlers left by its code block are executed.
      *
-     *
-     *
-     * @param pathAndFuncs
+     * @param renderer The function to be called for each item. It receives the item's `Store` object as its only argument.
+     * @param makeSortKey An optional function that, given an items `Store` object, returns a value to be sorted on.
+     *   This value can be a number, a string, or an array containing a combination of both. When undefined is returned,
+     *   the item is *not* rendered. If `makeSortKey` is not specified, the output will be sorted by `index()`.
      */
-    onEach(...pathAndFuncs) {
-        let makeSortKey = defaultMakeSortKey;
-        let renderer = pathAndFuncs.pop();
-        if (typeof pathAndFuncs[pathAndFuncs.length - 1] === 'function' && (typeof renderer === 'function' || renderer == null)) {
-            if (renderer != null)
-                makeSortKey = renderer;
-            renderer = pathAndFuncs.pop();
-        }
-        if (typeof renderer !== 'function')
-            throw new Error(`onEach() expects a render function as its last argument but got ${JSON.stringify(renderer)}`);
-        if (!currentScope)
-            throw new ScopeError(false);
-        let store = this.ref(...pathAndFuncs);
-        let val = store._observe();
+    onEach(renderer, makeSortKey = defaultMakeSortKey) {
+        if (!currentScope) { // Do this in a new top-level scope
+            _mount(undefined, () => this.onEach(renderer, makeSortKey), SimpleScope);
+            return;
+        }
+        let val = this._observe();
         if (val instanceof ObsCollection) {
             // Subscribe to changes using the specialized OnEachScope
             let onEachScope = new OnEachScope(currentScope._parentElement, currentScope._lastChild || currentScope._precedingSibling, currentScope._queueOrder + 1, val, renderer, makeSortKey);
@@ -1195,6 +1302,30 @@ export class Store {
             throw new Error(`onEach() attempted on a value that is neither a collection nor undefined`);
         }
     }
+    /**
+     * Derive a new `Store` from this `Store`, by reactively passing its value
+     * through the specified function.
+     * @param func Your function. It should accept a the input store's value, and return
+     *   a result to be reactively set to the output store.
+     * @returns The output `Store`.
+     * @example
+     * ```javascript
+     * const store = new Store(21)
+     * const double = store.derive(v => v*2)
+     * double.get() // 42
+     *
+     * store.set(100)
+     * runQueue() // Or after a setTimeout 0, due to batching
+     * double.get() // 200
+     * ```
+     */
+    derive(func) {
+        let out = new Store();
+        observe(() => {
+            out.set(func(this.get()));
+        });
+        return out;
+    }
     /**
      * Applies a filter/map function on each item within the `Store`'s collection,
      * and reactively manages the returned `Map` `Store` to hold any results.
@@ -1202,24 +1333,29 @@ export class Store {
      * @param func - Function that transform the given store into an output value or
      * `undefined` in case this value should be skipped:
      *
-     * @returns - A map `Store` with the values returned by `func` and the corresponding
-     * keys from the original map, array or object `Store`.
+     * @returns - A array/map/object `Store` with the values returned by `func` and the
+     * corresponding keys from the original map, array or object `Store`.
      *
      * 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.
      */
     map(func) {
-        let out = new Store(new Map());
-        this.onEach((item) => {
-            let value = func(item);
-            if (value !== undefined) {
-                let key = item.index();
-                out.set(key, value);
-                clean(() => {
-                    out.delete(key);
-                });
-            }
+        let out = new Store();
+        observe(() => {
+            let t = this.getType();
+            out.set(t === 'array' ? [] : (t === 'object' ? {} : new Map()));
+            this.onEach((item) => {
+                let value = func(item);
+                if (value !== undefined) {
+                    let key = item.index();
+                    const ref = out(key);
+                    ref.set(value);
+                    clean(() => {
+                        ref.delete();
+                    });
+                }
+            });
         });
         return out;
     }
@@ -1243,154 +1379,80 @@ export class Store {
         let out = new Store(new Map());
         this.onEach((item) => {
             let result = func(item);
-            let keys;
+            let refs = [];
             if (result.constructor === Object) {
                 for (let key in result) {
-                    out.set(key, result[key]);
+                    const ref = out(key);
+                    ref.set(result[key]);
+                    refs.push(ref);
                 }
-                keys = Object.keys(result);
             }
             else if (result instanceof Map) {
                 result.forEach((value, key) => {
-                    out.set(key, value);
+                    const ref = out(key);
+                    ref.set(value);
+                    refs.push(ref);
                 });
-                keys = [...result.keys()];
             }
             else {
                 return;
             }
-            if (keys.length) {
+            if (refs.length) {
                 clean(() => {
-                    for (let key of keys) {
-                        out.delete(key);
+                    for (let ref of refs) {
+                        ref.delete();
                     }
                 });
             }
         });
         return out;
     }
-    /**
-     * @returns Returns `true` when the `Store` was created by {@link Store.ref}ing a path that
-     * does not exist.
-     */
-    isDetached() { return false; }
     /**
     * Dump a live view of the `Store` tree as HTML text, `ul` and `li` nodes at
     * the current mount position. Meant for debugging purposes.
+    * @returns The `Store` itself, for chaining other methods.
     */
     dump() {
         let type = this.getType();
         if (type === 'array' || type === 'object' || type === 'map') {
-            text('<' + type + '>');
-            node('ul', () => {
+            $({ text: `<${type}>` });
+            $('ul', () => {
                 this.onEach((sub) => {
-                    node('li', () => {
-                        text(JSON.stringify(sub.index()) + ': ');
+                    $('li:' + JSON.stringify(sub.index()) + ": ", () => {
                         sub.dump();
                     });
                 });
             });
         }
         else {
-            text(JSON.stringify(this.get()));
+            $({ text: JSON.stringify(this.get()) });
         }
+        return this;
     }
 }
-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 {@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
- * node('aside.editorial', 'Yada yada yada....', () => {
- *	 node('a', {href: '/bio'}, () => {
- *		 node('img.author', {src: '/me.jpg', alt: 'The author'})
- *	 })
- * })
- */
-export function node(tag = "", ...rest) {
-    if (!currentScope)
-        throw new ScopeError(true);
-    let el;
-    if (tag instanceof Element) {
-        el = tag;
+function addLeafNode(deepEl, node) {
+    if (deepEl === currentScope._parentElement) {
+        currentScope._addNode(node);
     }
     else {
-        let pos = tag.indexOf('.');
-        let classes;
-        if (pos >= 0) {
-            classes = tag.substr(pos + 1);
-            tag = tag.substr(0, pos);
-        }
-        el = document.createElement(tag || 'div');
-        if (classes) {
-            // @ts-ignore (replaceAll is polyfilled)
-            el.className = classes.replaceAll('.', ' ');
-        }
-    }
-    currentScope._addNode(el);
-    for (let item of rest) {
-        let type = typeof item;
-        if (type === 'function') {
-            let scope = new SimpleScope(el, undefined, currentScope._queueOrder + 1, item);
-            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);
-        }
-        else if (type === 'string' || type === 'number') {
-            el.textContent = item;
-        }
-        else if (type === 'object' && item && item.constructor === Object) {
-            for (let k in item) {
-                applyProp(el, k, item[k]);
-            }
-        }
-        else if (item instanceof Store) {
-            bindInput(el, item);
-        }
-        else if (item != null) {
-            throw new Error(`Unexpected argument ${JSON.stringify(item)}`);
-        }
+        deepEl.appendChild(node);
     }
 }
-/**
- * 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) {
+function applyBinding(_el, _key, store) {
+    if (store == null)
+        return;
+    if (!(store instanceof Store))
+        throw new Error(`Unexpect bind-argument: ${JSON.parse(store)}`);
+    const el = _el;
     let onStoreChange;
     let onInputChange;
     let type = el.getAttribute('type');
-    let value = store.query({ peek: true });
+    let value = store.peek();
     if (type === 'checkbox') {
         if (value === undefined)
             store.set(el.checked);
@@ -1423,30 +1485,268 @@ function bindInput(el, store) {
         el.removeEventListener('input', onInputChange);
     });
 }
+const SPECIAL_PROPS = {
+    create: function (el, value) {
+        if (!showCreateTransitions)
+            return;
+        if (typeof value === 'function') {
+            value(el);
+        }
+        else {
+            el.classList.add(value);
+            (function () {
+                return __awaiter(this, void 0, void 0, function* () {
+                    yield DOM_READ_PHASE;
+                    el.offsetHeight;
+                    yield DOM_WRITE_PHASE;
+                    el.classList.remove(value);
+                });
+            })();
+        }
+    },
+    destroy: function (deepEl, value) {
+        onDestroyMap.set(deepEl, value);
+    },
+    html: function (deepEl, value) {
+        if (!value)
+            return;
+        let tmpParent = document.createElement(deepEl.tagName);
+        tmpParent.innerHTML = '' + value;
+        while (tmpParent.firstChild)
+            addLeafNode(deepEl, tmpParent.firstChild);
+    },
+    text: function (deepEl, value) {
+        if (value != null)
+            addLeafNode(deepEl, document.createTextNode(value));
+    },
+    element: function (deepEl, value) {
+        if (value == null)
+            return;
+        if (!(value instanceof Node))
+            throw new Error(`Unexpect element-argument: ${JSON.parse(value)}`);
+        addLeafNode(deepEl, value);
+    },
+};
 /**
- * Add a text node at the current Scope position.
+ * Modifies the *parent* DOM element in the current reactive scope, or adds
+ * new DOM elements to it.
+ *
+ * @param args - Arguments that define how to modify/create elements.
+ *
+ * ### String arguments
+ * Create new elements with optional classes and text content:
+ * ```js
+ * $('div.myClass')              // <div class="myClass"></div>
+ * $('span.c1.c2:Hello')         // <span class="c1 c2">Hello</span>
+ * $('p:Some text')              // <p>Some text</p>
+ * $('.my-thing')                // <div class="my-thing"></div>
+ * $('div', 'span', 'p.cls')     // <div><span<p class="cls"></p></span></div>
+ * $(':Just some text!')		 // Just some text! (No new element, just a text node)
+ * ```
+ *
+ * ### Object arguments
+ * Set properties, attributes, events and special features:
+ * ```js
+ * // Classes (dot prefix)
+ * $('div', {'.active': true})           // Add class
+ * $('div', {'.hidden': false})          // Remove (or don't add) class
+ * $('div', {'.selected': myStore})      // Reactively add/remove class
+ *
+ * // Styles (dollar prefixed and camel-cased CSS properties)
+ * $('div', {$color: 'red'})             // style.color = 'red'
+ * $('div', {$marginTop: '10px'})        // style.marginTop = '10px'
+ * $('div', {$color: myColorStore})      // Reactively change color
+ *
+ * // Events (function values)
+ * $('button', {click: () => alert()})   // Add click handler
+ *
+ * // Properties (boolean values, `selectedIndex`, `value`)
+ * $('input', {disabled: true})          // el.disabled = true
+ * $('input', {value: 'test'})           // el.value = 'test'
+ * $('select', {selectedIndex: 2})       // el.selectedIndex = 2
+ *
+ * // Transitions
+ * $('div', {create: 'fade-in'})         // Add class on create
+ * $('div', {create: el => {...}})       // Run function on create
+ * $('div', {destroy: 'fade-out'})       // Add class before remove
+ * $('div', {destroy: el => {...}})      // Run function before remove
+ *
+ * // Content
+ * $('div', {html: '<b>Bold</b>'})       // Set innerHTML
+ * $('div', {text: 'Plain text'})        // Add text node
+ * const myElement = document.createElement('video')
+ * $('div', {element: myElement})        // Add existing DOM element
+ *
+ * // Regular attributes (everything else)
+ * $('div', {title: 'Info'})             // el.setAttribute('title', 'info')
+ * ```
+ *
+ * When a `Store` is passed as a value, a seperate observe-scope will
+ * be created for it, such that when the `Store` changes, only *that*
+ * UI property will need to be updated.
+ * So in the following example, when `colorStore` changes, only the
+ * `color` CSS property will be updated.
+ * ```js
+ * $('div', {
+ *   '.active': activeStore,             // Reactive class
+ *   $color: colorStore,                 // Reactive style
+ *   text: textStore                     // Reactive text
+ * })
+ * ```
+ *
+ * ### Two-way input binding
+ * Set the initial value of an <input> <textarea> or <select> to that
+ * of a `Store`, and then start reflecting user changes to the former
+ * in the latter.
+ * ```js
+ * $('input', {bind: myStore})           // Binds input.value
+ * ```
+ * This is a special case, as changes to the `Store` will *not* be
+ * reflected in the UI.
+ *
+ * ### Function arguments
+ * Create child scopes that re-run on observed `Store` changes:
+ * ```js
+ * $('div', () => {
+ *   $(myStore.get() ? 'span' : 'p')     // Reactive element type
+ * })
+ * ```
+ * When *only* a function is given, `$` behaves exactly like {@link Store.observe},
+ * except that it will only work when we're inside a `mount`.
+ *
+ * @throws {ScopeError} If called outside an observable scope.
+ * @throws {Error} If invalid arguments are provided.
  */
-export function text(text) {
-    if (!currentScope)
-        throw new ScopeError(true);
-    if (text == null)
-        return;
-    currentScope._addNode(document.createTextNode(text));
-}
-export function prop(name, value = undefined) {
+export function $(...args) {
     if (!currentScope || !currentScope._parentElement)
         throw new ScopeError(true);
-    if (typeof name === 'object') {
-        for (let k in name) {
-            applyProp(currentScope._parentElement, k, name[k]);
+    let deepEl = currentScope._parentElement;
+    for (let arg of args) {
+        if (arg == null || arg === false)
+            continue;
+        if (typeof arg === 'string') {
+            let text, classes;
+            const textPos = arg.indexOf(':');
+            if (textPos >= 0) {
+                text = arg.substring(textPos + 1);
+                if (textPos === 0) { // Just a string to add as text, no new node
+                    addLeafNode(deepEl, document.createTextNode(text));
+                    continue;
+                }
+                arg = arg.substring(0, textPos);
+            }
+            const classPos = arg.indexOf('.');
+            if (classPos >= 0) {
+                classes = arg.substring(classPos + 1).replaceAll('.', ' ');
+                arg = arg.substring(0, classPos);
+            }
+            if (arg.indexOf(' ') >= 0)
+                throw new Error(`Tag '${arg}' cannot contain space`);
+            const el = document.createElement(arg || 'div');
+            if (classes)
+                el.className = classes;
+            if (text)
+                el.textContent = text;
+            addLeafNode(deepEl, el);
+            deepEl = el;
+        }
+        else if (typeof arg === 'object') {
+            if (arg.constructor !== Object)
+                throw new Error(`Unexpected argument: ${arg}`);
+            for (const key in arg) {
+                const val = arg[key];
+                if (key === 'bind') { // Special case, as for this prop we *don't* want to resolve the Store to a value first.
+                    applyBinding(deepEl, key, val);
+                }
+                else if (val instanceof Store) {
+                    let childScope = new SetArgScope(deepEl, deepEl.lastChild, currentScope._queueOrder + 1, key, val);
+                    childScope._install();
+                }
+                else {
+                    applyArg(deepEl, key, val);
+                }
+            }
+        }
+        else if (typeof arg === 'function') {
+            if (deepEl === currentScope._parentElement) { // do what observe does
+                _mount(undefined, args[0], SimpleScope);
+            }
+            else { // new scope for a new node without any scope attached yet
+                let childScope = new SimpleScope(deepEl, deepEl.lastChild, currentScope._queueOrder + 1, arg);
+                childScope._install();
+            }
+        }
+        else {
+            throw new Error(`Unexpected argument: ${JSON.stringify(arg)}`);
         }
     }
-    else {
-        applyProp(currentScope._parentElement, name, value);
+}
+function applyArg(deepEl, key, value) {
+    if (key[0] === '.') { // CSS class(es)
+        const classes = key.substring(1).split('.');
+        if (value)
+            deepEl.classList.add(...classes);
+        else
+            deepEl.classList.remove(...classes);
+    }
+    else if (key[0] === '$') { // Style
+        const name = key.substring(1);
+        if (value == null || value === false)
+            deepEl.style[name] = '';
+        else
+            deepEl.style[name] = '' + value;
+    }
+    else if (key in SPECIAL_PROPS) { // Special property
+        SPECIAL_PROPS[key](deepEl, value);
+    }
+    else if (typeof value === 'function') { // Event listener
+        deepEl.addEventListener(key, value);
+        clean(() => deepEl.removeEventListener(key, value));
+    }
+    else if (value === true || value === false || key === 'value' || key === 'selectedIndex') { // DOM property
+        deepEl[key] = value;
+    }
+    else { // HTML attribute
+        deepEl.setAttribute(key, value);
     }
 }
+function defaultOnError(error) {
+    console.error('Error while in Aberdeen render:', error);
+    return true;
+}
+let onError = defaultOnError;
+/**
+ * Set a custome error handling function, thast is called when an error occurs during rendering
+ * while in a reactive scope. The default implementation logs the error to the console, and then
+ * just returns `true`, which causes an 'Error' message to be displayed in the UI. When this function
+ * returns `false`, the error is suppressed. This mechanism exists because rendering errors can occur
+ * at any time, not just synchronous when making a call to Aberdeen, thus normal exception handling
+ * is not always possible.
+ *
+ * @param handler The handler function, getting an `Error` as its argument, and returning `false`
+ *    if it does *not* want an error message to be added to the DOM.
+ *    When `handler is `undefined`, the default error handling will be reinstated.
+ *
+ * @example
+ * ```javascript
+ * //
+ * setErrorHandler(error => {
+ *    // Tell our developers about the problem.
+ * 	  fancyErrorLogger(error)
+ *    // Add custom error message to the DOM.
+ *    try {
+ *        $('.error:Sorry, something went wrong!')
+ *    } catch() {} // In case there is no parent element.
+ *    // Don't add default error message to the DOM.
+ * 	  return false
+ * })
+ * ```
+ */
+export function setErrorHandler(handler) {
+    onError = handler || defaultOnError;
+}
 /**
- * Return the browser Element that `node()`s would be rendered to at this point.
+ * Return the browser Element that nodes would be rendered to at this point.
  * NOTE: Manually changing the DOM is not recommended in most cases. There is
  * usually a better, declarative way. Although there are no hard guarantees on
  * how your changes interact with Aberdeen, in most cases results will not be
@@ -1505,10 +1805,10 @@ export function immediateObserve(func) {
     return _mount(undefined, func, ImmediateScope);
 }
 /**
- * Like {@link Store.observe}, but allow the function to create DOM elements using {@link Store.node}.
+ * Reactively run the function, adding any DOM-elements created using {@link $} to the given parent element.
 
  * @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`.
+ * @param parentElement - A DOM element that will be used as the parent element for calls to `$`.
  * @returns The mount id (usable for `unmount`) if this is a top-level mount.
  *
  * @example
@@ -1517,7 +1817,7 @@ export function immediateObserve(func) {
  * setInterval(() => store.modify(v => v+1), 1000)
  *
  * mount(document.body, () => {
- * 	   node('h2', `${store.get()} seconds have passed`)
+ * 	   $(`h2:${store.get()} seconds have passed`)
  * })
  * ```
  *
@@ -1527,25 +1827,30 @@ export function immediateObserve(func) {
  * let colors = new Store(new Map())
  *
  * mount(document.body, () => {
- * 	// This function will never rerun (as it does not read any `Store`s)
- * 	node('button', '<<', {click: () => selected.modify(n => n-1)})
- * 	node('button', '>>', {click: () => selected.modify(n => n+1)})
+ *   // This function will never rerun (as it does not read any `Store`s)
+ *   $('button:<<', {click: () => selected.modify(n => n-1)})
+ *   $('button:>>', {click: () => selected.modify(n => n+1)})
  *
- * 	observe(() => {
- * 		// This will rerun whenever `selected` changes, recreating the <h2> and <input>.
- * 		node('h2', '#'+selected.get())
- * 		node('input', {type: 'color', value: '#ffffff'}, colors.ref(selected.get()))
- * 	})
+ *   observe(() => {
+ *     // This will rerun whenever `selected` changes, recreating the <h2> and <input>.
+ *     $('h2', {text: '#' + selected.get()})
+ *     $('input', {type: 'color', value: '#ffffff' bind: colors(selected.get())})
+ *   })
  *
- * 	observe(() => {
- * 		// This function will rerun when `selected` or the selected color changes.
- * 		// It will change the <body> background-color.
- * 		prop({style: {backgroundColor: colors.get(selected.get()) || 'white'}})
- * 	})
+ *   observe(() => {
+ *     // This function will rerun when `selected` or the selected color changes.
+ *     // It will change the <body> background-color.
+ *     $({$backgroundColor: colors.get(selected.get()) || 'white'})
+ *   })
  * })
  * ```
 */
 export function mount(parentElement, func) {
+    for (let scope of topScopes.values()) {
+        if (parentElement === scope._parentElement) {
+            throw new Error("Only a single mount per parent element");
+        }
+    }
     return _mount(parentElement, func, SimpleScope);
 }
 let maxTopScopeId = 0;
@@ -1586,6 +1891,7 @@ export function unmount(id) {
         let scope = topScopes.get(id);
         if (!scope)
             throw new Error("No such mount " + id);
+        topScopes.delete(id);
         scope._remove();
     }
 }
@@ -1623,63 +1929,16 @@ export function peek(func) {
 /*
  * Helper functions
  */
-function applyProp(el, prop, value) {
-    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 === '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 === '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);
-    }
-}
 function valueToData(value) {
-    if (typeof value !== "object" || !value) {
-        // Simple data types
-        return value;
-    }
-    else if (value instanceof Store) {
+    if (value instanceof Store) {
         // When a Store is passed pointing at a collection, a reference
         // is made to that collection.
         return value._observe();
     }
+    else if (typeof value !== "object" || !value) {
+        // Simple data types
+        return value;
+    }
     else if (value instanceof Map) {
         let result = new ObsMap();
         value.forEach((v, k) => {
@@ -1718,13 +1977,17 @@ function defaultMakeSortKey(store) {
 }
 /* c8 ignore start */
 function internalError(code) {
-    let error = new Error("Aberdeen internal error " + code);
-    setTimeout(() => { throw error; }, 0);
+    throw new Error("Aberdeen internal error " + code);
 }
 /* c8 ignore end */
-function handleError(e) {
-    // Throw the error async, so the rest of the rendering can continue
-    setTimeout(() => { throw e; }, 0);
+function handleError(e, showMessage) {
+    try {
+        if (onError(e) === false)
+            showMessage = false;
+    }
+    catch (_a) { }
+    if (showMessage && (currentScope === null || currentScope === void 0 ? void 0 : currentScope._parentElement))
+        $('.aberdeen-error:Error');
 }
 class ScopeError extends Error {
     constructor(mount) {
@@ -1742,13 +2005,6 @@ export function withEmitHandler(handler, func) {
         ObsCollection.prototype.emitChange = oldEmitHandler;
     }
 }
-/**
- * Run a function, while *not* causing reactive effects for any changes it makes to `Store`s.
- * @param func The function to be executed once immediately.
- */
-export function inhibitEffects(func) {
-    withEmitHandler(() => { }, func);
-}
 // @ts-ignore
 // c8 ignore next
 if (!String.prototype.replaceAll)