aberdeen 0.0.17 → 0.1.0

package/README.md

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

package/dist/aberdeen.d.ts

@@ -2,21 +2,43 @@ interface QueueRunner {
     queueOrder: number;
     queueRun(): void;
 }
+type Patch = Map<ObsCollection, Map<any, [any, any]>>;
 /**
- * Schedule a function to be executed by Aberdeen's internal task queue. This
- * can be useful to batch together DOM layout read operations and DOM write
- * operations, so that we're not forcing the browser to do more layout calculations
- * than needed. Also, unlike setTimeout or requestAnimationFrame, this doesn't
- * give the browser the chance to render partial DOM states to the screen (which
- * would be seen as glitches/flashes).
- * @param func The function to be called soon.
- * @param order Higher mean later. Defaults to 0, which would still be *after* all
- * node/observe redraws have been handled.
+ * Schedule a DOM read operation to be executed in Aberdeen's internal task queue.
  *
- * **EXPERIMENTAL:** There's a good chance this function will be replaced by
- * something that explicitly addresses DOM layout reads and DOM writes.
+ * This function is used to batch DOM read operations together, avoiding unnecessary
+ * layout recalculations and improving browser performance. A DOM read operation should
+ * only *read* from the DOM, such as measuring element dimensions or retrieving computed styles.
+ *
+ * By batching DOM reads separately from DOM writes, this prevents the browser from
+ * interleaving layout reads and writes, which can force additional layout recalculations.
+ * This helps reduce visual glitches and flashes by ensuring the browser doesn't render
+ * intermediate DOM states during updates.
+ *
+ * Unlike `setTimeout` or `requestAnimationFrame`, this mechanism ensures that DOM read
+ * operations happen before any DOM writes in the same queue cycle, minimizing layout thrashing.
+ *
+ * @param func The function to be executed as a DOM read operation.
+ */
+export declare function scheduleDomReader(func: () => void): void;
+/**
+ * Schedule a DOM write operation to be executed in Aberdeen's internal task queue.
+ *
+ * This function is used to batch DOM write operations together, avoiding unnecessary
+ * layout recalculations and improving browser performance. A DOM write operation should
+ * only *write* to the DOM, such as modifying element properties or applying styles.
+ *
+ * By batching DOM writes separately from DOM reads, this prevents the browser from
+ * interleaving layout reads and writes, which can force additional layout recalculations.
+ * This helps reduce visual glitches and flashes by ensuring the browser doesn't render
+ * intermediate DOM states during updates.
+ *
+ * Unlike `setTimeout` or `requestAnimationFrame`, this mechanism ensures that DOM write
+ * operations happen after all DOM reads in the same queue cycle, minimizing layout thrashing.
+ *
+ * @param func The function to be executed as a DOM write operation.
  */
-export declare function scheduleTask(func: () => void, order?: number): void;
+export declare function scheduleDomWriter(func: () => void): void;
 type SortKeyType = number | string | Array<number | string>;
 interface Observer {
     onChange(index: any, newData: DatumType, oldData: DatumType): void;
@@ -630,21 +652,47 @@ export declare function mount(parentElement: Element | undefined, func: () => vo
  */
 export declare function peek<T>(func: () => T): T;
 /** Do a grow transition for the given element. This is meant to be used as a
- * handler for the `create` property.
- *
- * @param el The element to transition.
- *
- * The transition doesn't look great for table elements, and may have problems
- * for other specific cases as well.
- */
+* handler for the `create` property.
+*
+* @param el The element to transition.
+*
+* The transition doesn't look great for table elements, and may have problems
+* for other specific cases as well.
+*/
 export declare function grow(el: HTMLElement): void;
 /** Do a shrink transition for the given element, and remove it from the DOM
- * afterwards. This is meant to be used as a handler for the `destroy` property.
- *
- * @param el The element to transition and remove.
+* afterwards. This is meant to be used as a handler for the `destroy` property.
+*
+* @param el The element to transition and remove.
+*
+* The transition doesn't look great for table elements, and may have problems
+* for other specific cases as well.
+*/
+export declare function shrink(el: HTMLElement): void;
+/**
+ * Run the provided function, while treating all changes to Observables as predictions,
+ * meaning they will be reverted when changes come back from the server (or some other
+ * async source).
+ * @param predictFunc The function to run. It will generally modify some Observables
+ * 	to immediately reflect state (as closely as possible) that we expect the server
+ *  to communicate back to us later on.
+ * @returns A `Patch` object. Don't modify it. This is only meant to be passed to `applyCanon`.
+ */
+export declare function applyPrediction(predictFunc: () => void): Patch;
+/**
+ * Temporarily revert all outstanding predictions, optionally run the provided function
+ * (which will generally make authoritative changes to the data based on a server response),
+ * and then attempt to reapply the predictions on top of the new canonical state, dropping
+ * any predictions that can no longer be applied cleanly (the data has been modified) or
+ * that were specified in `dropPredictions`.
  *
- * The transition doesn't look great for table elements, and may have problems
- * for other specific cases as well.
+ * All of this is done such that redraws are only triggered if the overall effect is an
+ * actual change to an `Observable`.
+ * @param canonFunc The function to run without any predictions applied. This will typically
+ *  make authoritative changes to the data, based on a server response.
+ * @param dropPredictions An optional list of predictions (as returned by `applyPrediction`)
+ *  to undo. Typically, when a server response for a certain request is being handled,
+ *  you'd want to drop the prediction that was done for that request.
  */
-export declare function shrink(el: HTMLElement): void;
+export declare function applyCanon(canonFunc?: (() => void), dropPredictions?: Array<Patch>): void;
 export {};

package/dist/aberdeen.js

@@ -2,6 +2,8 @@ let queueArray = [];
 let queueSet = new Set();
 let queueOrdered = true;
 let runQueueDepth = 0;
+let queueIndex;
+let recordingPatch;
 function queue(runner) {
     if (queueSet.has(runner))
         return;
@@ -19,42 +21,73 @@ function queue(runner) {
 }
 function runQueue() {
     onCreateEnabled = true;
-    for (let index = 0; index < queueArray.length;) {
+    for (queueIndex = 0; queueIndex < queueArray.length;) {
+        // Sort queue if new unordered items have been added since last time.
         if (!queueOrdered) {
-            queueArray.splice(0, index);
-            index = 0;
-            // Order queued observers by depth, lowest first
+            queueArray.splice(0, queueIndex);
+            queueIndex = 0;
+            // Order queued observers by depth, lowest first.
             queueArray.sort((a, b) => a.queueOrder - b.queueOrder);
             queueOrdered = true;
         }
+        // Process the rest of what's currently in the queue.
         let batchEndIndex = queueArray.length;
-        for (; index < batchEndIndex && queueOrdered; index++) {
-            let runner = queueArray[index];
+        for (; queueIndex < batchEndIndex && queueOrdered; queueIndex++) {
+            let runner = queueArray[queueIndex];
             queueSet.delete(runner);
             runner.queueRun();
         }
+        // If new items have been added to the queue while processing the previous
+        // batch, we'll need to run this loop again.
         runQueueDepth++;
     }
     queueArray.length = 0;
+    queueIndex = undefined;
     runQueueDepth = 0;
     onCreateEnabled = false;
 }
+let scheduleOrder = 1000;
 /**
- * Schedule a function to be executed by Aberdeen's internal task queue. This
- * can be useful to batch together DOM layout read operations and DOM write
- * operations, so that we're not forcing the browser to do more layout calculations
- * than needed. Also, unlike setTimeout or requestAnimationFrame, this doesn't
- * give the browser the chance to render partial DOM states to the screen (which
- * would be seen as glitches/flashes).
- * @param func The function to be called soon.
- * @param order Higher mean later. Defaults to 0, which would still be *after* all
- * node/observe redraws have been handled.
+ * Schedule a DOM read operation to be executed in Aberdeen's internal task queue.
  *
- * **EXPERIMENTAL:** There's a good chance this function will be replaced by
- * something that explicitly addresses DOM layout reads and DOM writes.
+ * This function is used to batch DOM read operations together, avoiding unnecessary
+ * layout recalculations and improving browser performance. A DOM read operation should
+ * only *read* from the DOM, such as measuring element dimensions or retrieving computed styles.
+ *
+ * By batching DOM reads separately from DOM writes, this prevents the browser from
+ * interleaving layout reads and writes, which can force additional layout recalculations.
+ * This helps reduce visual glitches and flashes by ensuring the browser doesn't render
+ * intermediate DOM states during updates.
+ *
+ * Unlike `setTimeout` or `requestAnimationFrame`, this mechanism ensures that DOM read
+ * operations happen before any DOM writes in the same queue cycle, minimizing layout thrashing.
+ *
+ * @param func The function to be executed as a DOM read operation.
+ */
+export function scheduleDomReader(func) {
+    let order = (queueIndex != null && queueIndex < queueArray.length && queueArray[queueIndex].queueOrder >= 1000) ? ((queueArray[queueIndex].queueOrder + 1) & (~1)) : 1000;
+    queue({ queueOrder: order, queueRun: func });
+}
+/**
+ * Schedule a DOM write operation to be executed in Aberdeen's internal task queue.
+ *
+ * This function is used to batch DOM write operations together, avoiding unnecessary
+ * layout recalculations and improving browser performance. A DOM write operation should
+ * only *write* to the DOM, such as modifying element properties or applying styles.
+ *
+ * By batching DOM writes separately from DOM reads, this prevents the browser from
+ * interleaving layout reads and writes, which can force additional layout recalculations.
+ * This helps reduce visual glitches and flashes by ensuring the browser doesn't render
+ * intermediate DOM states during updates.
+ *
+ * Unlike `setTimeout` or `requestAnimationFrame`, this mechanism ensures that DOM write
+ * operations happen after all DOM reads in the same queue cycle, minimizing layout thrashing.
+ *
+ * @param func The function to be executed as a DOM write operation.
  */
-export function scheduleTask(func, order = 0) {
-    queue({ queueOrder: 1000 + order, queueRun: func });
+export function scheduleDomWriter(func) {
+    let order = (queueIndex != null && queueIndex < queueArray.length && queueArray[queueIndex].queueOrder >= 1000) ? (queueArray[queueIndex].queueOrder | 1) : 1001;
+    queue({ queueOrder: order, queueRun: func });
 }
 /**
  * Given an integer number, a string or an array of these, this function returns a string that can be used
@@ -490,12 +523,17 @@ class ObsCollection {
         obsSet.delete(observer);
     }
     emitChange(index, newData, oldData) {
-        let obsSet = this.observers.get(index);
-        if (obsSet)
-            obsSet.forEach(observer => observer.onChange(index, newData, oldData));
-        obsSet = this.observers.get(ANY_INDEX);
-        if (obsSet)
-            obsSet.forEach(observer => observer.onChange(index, newData, oldData));
+        if (recordingPatch) {
+            addToPatch(recordingPatch, this, index, newData, oldData);
+        }
+        else {
+            let obsSet = this.observers.get(index);
+            if (obsSet)
+                obsSet.forEach(observer => observer.onChange(index, newData, oldData));
+            obsSet = this.observers.get(ANY_INDEX);
+            if (obsSet)
+                obsSet.forEach(observer => observer.onChange(index, newData, oldData));
+        }
     }
     _clean(observer) {
         this.removeObserver(ANY_INDEX, observer);
@@ -1182,7 +1220,7 @@ export class Store {
                 result.forEach((value, key) => {
                     out.set(key, value);
                 });
-                keys = Array.from(result.keys());
+                keys = [...result.keys()];
             }
             else {
                 return;
@@ -1627,56 +1665,171 @@ function getGrowShrinkProps(el) {
         { marginBottom: `-${el.offsetHeight / 2}px`, marginTop: `-${el.offsetHeight / 2}px`, transform: "scaleY(0)" };
 }
 /** Do a grow transition for the given element. This is meant to be used as a
- * handler for the `create` property.
- *
- * @param el The element to transition.
- *
- * The transition doesn't look great for table elements, and may have problems
- * for other specific cases as well.
- */
+* handler for the `create` property.
+*
+* @param el The element to transition.
+*
+* The transition doesn't look great for table elements, and may have problems
+* for other specific cases as well.
+*/
 export function grow(el) {
     // This timeout is to await all other elements having been added to the Dom
-    scheduleTask(() => {
+    scheduleDomReader(() => {
         // Make the element size 0 using transforms and negative margins.
         // This causes a browser layout, as we're querying el.offset<>.
         let props = getGrowShrinkProps(el);
         // The timeout is in order to batch all reads and then all writes when there
         // are multiple simultaneous grow transitions.
-        scheduleTask(() => {
+        scheduleDomWriter(() => {
             Object.assign(el.style, props);
             // This timeout is to combine multiple transitions into a single browser layout
-            scheduleTask(() => {
+            scheduleDomReader(() => {
                 // Make sure the layouting has been performed, to cause transitions to trigger
                 el.offsetHeight;
-                // Do the transitions
-                el.style.transition = GROW_SHRINK_TRANSITION;
-                for (let prop in props)
-                    el.style[prop] = "";
-                setTimeout(() => {
-                    // Reset the element to a clean state
-                    el.style.transition = "";
-                }, FADE_TIME);
-            }, 2);
-        }, 1);
+                scheduleDomWriter(() => {
+                    // Do the transitions
+                    el.style.transition = GROW_SHRINK_TRANSITION;
+                    for (let prop in props)
+                        el.style[prop] = "";
+                    setTimeout(() => {
+                        // Reset the element to a clean state
+                        el.style.transition = "";
+                    }, FADE_TIME);
+                });
+            });
+        });
     });
 }
 /** Do a shrink transition for the given element, and remove it from the DOM
- * afterwards. This is meant to be used as a handler for the `destroy` property.
- *
- * @param el The element to transition and remove.
+* afterwards. This is meant to be used as a handler for the `destroy` property.
+*
+* @param el The element to transition and remove.
+*
+* The transition doesn't look great for table elements, and may have problems
+* for other specific cases as well.
+*/
+export function shrink(el) {
+    scheduleDomReader(() => {
+        const props = getGrowShrinkProps(el);
+        // The timeout is in order to batch all reads and then all writes when there
+        // are multiple simultaneous shrink transitions.
+        scheduleDomWriter(() => {
+            el.style.transition = GROW_SHRINK_TRANSITION;
+            Object.assign(el.style, props);
+            setTimeout(() => el.remove(), FADE_TIME);
+        });
+    });
+}
+function recordPatch(func) {
+    if (recordingPatch)
+        throw new Error(`already recording a patch`);
+    recordingPatch = new Map();
+    try {
+        func();
+    }
+    catch (e) {
+        recordingPatch = undefined;
+        throw e;
+    }
+    const result = recordingPatch;
+    recordingPatch = undefined;
+    return result;
+}
+function addToPatch(patch, collection, index, newData, oldData) {
+    let collectionMap = patch.get(collection);
+    if (collectionMap == null) {
+        collectionMap = new Map();
+        patch.set(collection, collectionMap);
+    }
+    let prev = collectionMap.get(index);
+    collectionMap.set(index, [newData, prev == null ? oldData : prev[1]]);
+}
+function emitPatch(patch) {
+    for (let [collection, collectionMap] of patch) {
+        for (let [index, [newData, oldData]] of collectionMap) {
+            collection.emitChange(index, newData, oldData);
+        }
+    }
+}
+function mergePatch(target, source, reverse = false) {
+    for (let [collection, collectionMap] of source) {
+        for (let [index, [newData, oldData]] of collectionMap) {
+            addToPatch(target, collection, index, reverse ? oldData : newData, reverse ? newData : oldData);
+        }
+    }
+}
+function silentlyApplyPatch(patch, force = false) {
+    for (let [collection, collectionMap] of patch) {
+        for (let [index, [newData, oldData]] of collectionMap) {
+            let actualData = collection.rawGet(index);
+            if (actualData !== oldData) {
+                if (force)
+                    handleError(new Error(`Applying invalid patch: data ${actualData} is unequal to expected old data ${oldData} for index ${index}`));
+                else
+                    return false;
+            }
+        }
+    }
+    for (let [collection, collectionMap] of patch) {
+        for (let [index, [newData, oldData]] of collectionMap) {
+            collection.rawSet(index, newData);
+        }
+    }
+    return true;
+}
+const appliedPredictions = [];
+/**
+ * Run the provided function, while treating all changes to Observables as predictions,
+ * meaning they will be reverted when changes come back from the server (or some other
+ * async source).
+ * @param predictFunc The function to run. It will generally modify some Observables
+ * 	to immediately reflect state (as closely as possible) that we expect the server
+ *  to communicate back to us later on.
+ * @returns A `Patch` object. Don't modify it. This is only meant to be passed to `applyCanon`.
+ */
+export function applyPrediction(predictFunc) {
+    let patch = recordPatch(predictFunc);
+    appliedPredictions.push(patch);
+    emitPatch(patch);
+    return patch;
+}
+/**
+ * Temporarily revert all outstanding predictions, optionally run the provided function
+ * (which will generally make authoritative changes to the data based on a server response),
+ * and then attempt to reapply the predictions on top of the new canonical state, dropping
+ * any predictions that can no longer be applied cleanly (the data has been modified) or
+ * that were specified in `dropPredictions`.
  *
- * The transition doesn't look great for table elements, and may have problems
- * for other specific cases as well.
+ * All of this is done such that redraws are only triggered if the overall effect is an
+ * actual change to an `Observable`.
+ * @param canonFunc The function to run without any predictions applied. This will typically
+ *  make authoritative changes to the data, based on a server response.
+ * @param dropPredictions An optional list of predictions (as returned by `applyPrediction`)
+ *  to undo. Typically, when a server response for a certain request is being handled,
+ *  you'd want to drop the prediction that was done for that request.
  */
-export function shrink(el) {
-    const props = getGrowShrinkProps(el);
-    // The timeout is in order to batch all reads and then all writes when there
-    // are multiple simultaneous shrink transitions.
-    scheduleTask(() => {
-        el.style.transition = GROW_SHRINK_TRANSITION;
-        Object.assign(el.style, props);
-        setTimeout(() => el.remove(), FADE_TIME);
-    }, 1);
+export function applyCanon(canonFunc, dropPredictions = []) {
+    let resultPatch = new Map();
+    for (let prediction of appliedPredictions)
+        mergePatch(resultPatch, prediction, true);
+    silentlyApplyPatch(resultPatch, true);
+    for (let prediction of dropPredictions) {
+        let pos = appliedPredictions.indexOf(prediction);
+        if (pos >= 0)
+            appliedPredictions.splice(pos, 1);
+    }
+    if (canonFunc)
+        mergePatch(resultPatch, recordPatch(canonFunc));
+    for (let idx = 0; idx < appliedPredictions.length; idx++) {
+        if (silentlyApplyPatch(appliedPredictions[idx])) {
+            mergePatch(resultPatch, appliedPredictions[idx]);
+        }
+        else {
+            appliedPredictions.splice(idx, 1);
+            idx--;
+        }
+    }
+    emitPatch(resultPatch);
 }
 // @ts-ignore
 // istanbul ignore next

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aberdeen",
-  "version": "0.0.17",
+  "version": "0.1.0",
   "description": "A TypeScript/JavaScript library for quickly building performant declarative user interfaces without the use of a virtual DOM.",
   "main": "dist/aberdeen.js",
   "types": "dist/aberdeen.d.js",