aberdeen 1.0.4 → 1.0.6

package/README.md

@@ -1,12 +1,10 @@
 # [Aberdeen](https://aberdeenjs.org/) [![](https://img.shields.io/badge/license-ISC-blue.svg)](https://github.com/vanviegen/aberdeen/blob/master/LICENSE.txt) [![](https://badge.fury.io/js/aberdeen.svg)](https://badge.fury.io/js/aberdeen) ![](https://img.shields.io/bundlejs/size/aberdeen) [![](https://img.shields.io/github/last-commit/vanviegen/aberdeen)](https://github.com/vanviegen/aberdeen)
 
-Build blazing-fast, reactive UIs in pure TypeScript/JavaScript – no virtual DOM.
+Build fast reactive UIs in pure TypeScript/JavaScript without a virtual DOM.
 
-Aberdeen offers a refreshingly simple approach to reactive UIs. Its core idea:
+Aberdeen's approach is refreshingly simple:
 
-> Use many small, anonymous functions for emitting DOM elements, and automatically rerun them when their underlying *proxied* data changes. This proxied data can be anything from simple values to complex, typed, and deeply nested data structures.
-
-Now, let's dive into why this matters...
+> Use many small anonymous functions for emitting DOM elements, and automatically rerun them when their underlying data changes. JavaScript `Proxy` is used to track reads and updates to this data, which can consist of anything, from simple values to complex, typed, and deeply nested data structures. 
 
 ## Why use Aberdeen?
 
@@ -54,7 +52,7 @@ Okay, next up is a somewhat more complex app - a todo-list with the following be
 - Pressing one of the buttons, or pressing enter will transition from 'editing state' to 'viewing state', saving the new label text unless cancel was pressed.
 - In 'viewing state', the label is shown as non-editable. There's an 'Edit' link, that will transition the item to 'editing state'. Clicking anywhere else will toggle the done status.
 - The list of items is sorted alphabetically by label. Items move when 'save' changes their label.
-- Items that are created, moved or deleted are grown and shrink as appropriate.
+- Items that are created, moved or deleted grow and shrink as appropriate.
 
 Pfew.. now let's look at the code:
 

package/dist/aberdeen.d.ts

@@ -222,7 +222,7 @@ export declare function unproxy<T>(target: T): T;
  * console.log(source.nested); // [1, 2, 3] (source was modified)
  * ```
  */
-export declare function copy<T extends object>(dst: T, src: T, flags?: number): void;
+export declare function copy<T extends object>(dst: T, src: Partial<T>, flags?: number): void;
 /** Flag to {@link copy} causing it to use merge semantics. See {@link copy} for details. */
 export declare const MERGE = 1;
 /** Flag to {@link copy} and {@link clone} causing them to create a shallow copy (instead of the deep copy done by default).*/
@@ -358,7 +358,7 @@ export declare function ref<T extends TargetType, K extends keyof T>(target: T,
  * });
  * ```
  */
-export declare function $(...args: (string | null | undefined | false | (() => void) | Record<string, any>)[]): void | Element;
+export declare function $(...args: (string | null | undefined | false | (() => void) | Record<string, any>)[]): undefined | Element;
 /**
  * Inserts CSS rules into the document, optionally scoping them with a unique class name.
  *
@@ -579,7 +579,7 @@ export declare function clean(cleaner: () => void): void;
  * @overload
  * @param func Func without a return value.
  */
-export declare function observe<T extends (DatumType | void)>(func: () => T): ValueRef<T>;
+export declare function observe<T>(func: () => T): ValueRef<T>;
 /**
  * Similar to {@link observe}, creates a reactive scope that re-executes the function
  * when its proxied dependencies change.
@@ -728,8 +728,3 @@ export declare function partition<IN_K extends string | number | symbol, OUT_K e
  * ```
  */
 export declare function dump<T>(data: T): T;
-declare global {
-    interface String {
-        replaceAll(from: string, to: string): string;
-    }
-}

package/dist/aberdeen.js

@@ -33,7 +33,7 @@ class ReverseSortedSet {
     return this.symbols[0] in item;
   }
   fetchLast() {
-    let item = this.tail[this.symbols[0]];
+    const item = this.tail[this.symbols[0]];
     if (item) {
       this.remove(item);
       return item;
@@ -54,7 +54,7 @@ class ReverseSortedSet {
     return current[this.symbols[0]]?.[keyProp] === indexValue ? current[this.symbols[0]] : undefined;
   }
   *[Symbol.iterator]() {
-    let symbol = this.symbols[0];
+    const symbol = this.symbols[0];
     let node = this.tail[symbol];
     while (node) {
       yield node;
@@ -132,7 +132,7 @@ function runQueue() {
 }
 function partToStr(part) {
   if (typeof part === "string") {
-    return part + "\x01";
+    return `${part}\x01`;
   }
   let result = "";
   let num = Math.abs(Math.round(part));
@@ -174,7 +174,7 @@ class ContentScope extends Scope {
     return findLastNodeInPrevSiblings(this.lastChild);
   }
   delete() {
-    for (let cleaner of this.cleaners) {
+    for (const cleaner of this.cleaners) {
       if (typeof cleaner === "function")
         cleaner();
       else
@@ -230,7 +230,7 @@ class RegularScope extends ChainedScope {
     this.redraw();
   }
   redraw() {
-    let savedScope = currentScope;
+    const savedScope = currentScope;
     currentScope = this;
     try {
       this.renderer();
@@ -275,7 +275,7 @@ class MountScope extends ContentScope {
 function removeNodes(node, preNode) {
   while (node && node !== preNode) {
     const prevNode = node.previousSibling;
-    let onDestroy = onDestroyMap.get(node);
+    const onDestroy = onDestroyMap.get(node);
     if (onDestroy && node instanceof Element) {
       if (onDestroy !== true) {
         if (typeof onDestroy === "function") {
@@ -306,7 +306,7 @@ class ResultScope extends ChainedScope {
     this.redraw();
   }
   redraw() {
-    let savedScope = currentScope;
+    const savedScope = currentScope;
     currentScope = this;
     try {
       this.result.value = this.renderer();
@@ -327,7 +327,7 @@ class SetArgScope extends ChainedScope {
     this.redraw();
   }
   redraw() {
-    let savedScope = currentScope;
+    const savedScope = currentScope;
     currentScope = this;
     applyArg(this.key, this.target.value);
     currentScope = savedScope;
@@ -348,7 +348,7 @@ function runImmediateQueue() {
       throw new Error("Too many immediate-mode recursive updates");
     }
     immediateQueueRunning = true;
-    let copy = immediateQueue;
+    const copy = immediateQueue;
     immediateQueue = new ReverseSortedSet("prio");
     try {
       for (const scope of copy) {
@@ -401,9 +401,9 @@ class OnEachScope extends Scope {
     queue(this);
   }
   queueRun() {
-    let indexes = this.changedIndexes;
+    const indexes = this.changedIndexes;
     this.changedIndexes = new Set;
-    for (let index of indexes) {
+    for (const index of indexes) {
       const oldScope = this.byIndex.get(index);
       if (oldScope)
         oldScope.remove();
@@ -425,7 +425,7 @@ class OnEachScope extends Scope {
     }, 1);
   }
   getLastNode() {
-    for (let scope of this.sortedSet) {
+    for (const scope of this.sortedSet) {
       const node = scope.getActualLastNode();
       if (node)
         return node;
@@ -486,12 +486,12 @@ class OnEachItemScope extends ContentScope {
   }
   redraw() {
     const value = optProxy(this.parent.target[this.itemIndex]);
-    let savedScope = currentScope;
+    const savedScope = currentScope;
     currentScope = this;
     let sortKey;
     try {
       if (this.parent.makeSortKey) {
-        let rawSortKey = this.parent.makeSortKey(value, this.itemIndex);
+        const rawSortKey = this.parent.makeSortKey(value, this.itemIndex);
         if (rawSortKey != null)
           sortKey = rawSortKey instanceof Array ? rawSortKey.map(partToStr).join("") : rawSortKey;
       } else {
@@ -555,7 +555,7 @@ function subscribe(target, index, observer = currentScope) {
   if (observer === currentScope) {
     currentScope.cleaners.push(byIndex);
   } else {
-    currentScope.cleaners.push(function() {
+    currentScope.cleaners.push(() => {
       byIndex.delete(observer);
     });
   }
@@ -567,7 +567,7 @@ function onEach(target, render, makeKey) {
   new OnEachScope(target, render, makeKey);
 }
 function isObjEmpty(obj) {
-  for (let k in obj)
+  for (const k in obj)
     return false;
   return true;
 }
@@ -575,30 +575,29 @@ function isEmpty(proxied) {
   const target = proxied[TARGET_SYMBOL] || proxied;
   const scope = currentScope;
   if (target instanceof Array) {
-    subscribe(target, "length", function(index, newData, oldData) {
+    subscribe(target, "length", (index, newData, oldData) => {
       if (!newData !== !oldData)
         queue(scope);
     });
     return !target.length;
-  } else {
-    const result = isObjEmpty(target);
-    subscribe(target, ANY_SYMBOL, function(index, newData, oldData) {
-      if (result ? oldData === undefined : newData === undefined)
-        queue(scope);
-    });
-    return result;
   }
+  const result = isObjEmpty(target);
+  subscribe(target, ANY_SYMBOL, (index, newData, oldData) => {
+    if (result ? oldData === undefined : newData === undefined)
+      queue(scope);
+  });
+  return result;
 }
 function count(proxied) {
   if (proxied instanceof Array)
     return ref(proxied, "length");
   const target = proxied[TARGET_SYMBOL] || proxied;
   let cnt = 0;
-  for (let k in target)
+  for (const k in target)
     if (target[k] !== undefined)
       cnt++;
   const result = proxy(cnt);
-  subscribe(target, ANY_SYMBOL, function(index, newData, oldData) {
+  subscribe(target, ANY_SYMBOL, (index, newData, oldData) => {
     if (oldData === newData) {} else if (oldData === undefined)
       result.value = ++cnt;
     else if (newData === undefined)
@@ -613,9 +612,9 @@ function defaultEmitHandler(target, index, newData, oldData) {
   if (byTarget === undefined)
     return;
   for (const what of [index, ANY_SYMBOL]) {
-    let byIndex = byTarget.get(what);
+    const byIndex = byTarget.get(what);
     if (byIndex) {
-      for (let observer of byIndex) {
+      for (const observer of byIndex) {
         if (typeof observer === "function")
           observer(index, newData, oldData);
         else
@@ -665,14 +664,14 @@ function arraySet(target, prop, newData) {
     newData = newData[TARGET_SYMBOL] || newData;
   const oldData = target[prop];
   if (newData !== oldData) {
-    let oldLength = target.length;
+    const oldLength = target.length;
     if (prop === "length") {
       target.length = newData;
       for (let i = newData;i < oldLength; i++) {
         emit(target, i, undefined, target[i]);
       }
     } else {
-      const intProp = parseInt(prop);
+      const intProp = Number.parseInt(prop);
       if (intProp.toString() === prop)
         prop = intProp;
       target[prop] = newData;
@@ -691,7 +690,7 @@ var arrayHandler = {
       return target;
     let subProp = prop;
     if (typeof prop !== "symbol") {
-      const intProp = parseInt(prop);
+      const intProp = Number.parseInt(prop);
       if (intProp.toString() === prop)
         subProp = intProp;
     }
@@ -776,11 +775,11 @@ function copyRecurse(dst, src, flags) {
       }
     }
   } else {
-    for (let k in src) {
+    for (const k in src) {
       copyValue(dst, src, k, flags);
     }
     if (!(flags & MERGE)) {
-      for (let k in dst) {
+      for (const k in dst) {
         if (!(k in src)) {
           const old = dst[k];
           delete dst[k];
@@ -793,7 +792,7 @@ function copyRecurse(dst, src, flags) {
   }
 }
 function copyValue(dst, src, index, flags) {
-  let dstValue = dst[index];
+  const dstValue = dst[index];
   let srcValue = src[index];
   if (srcValue !== dstValue) {
     if (srcValue && dstValue && typeof srcValue === "object" && typeof dstValue === "object" && (srcValue.constructor === dstValue.constructor || flags & MERGE && dstValue instanceof Array)) {
@@ -801,7 +800,7 @@ function copyValue(dst, src, index, flags) {
       return;
     }
     if (!(flags & SHALLOW) && srcValue && typeof srcValue === "object") {
-      let copy2 = Object.create(Object.getPrototypeOf(srcValue));
+      const copy2 = Object.create(Object.getPrototypeOf(srcValue));
       copyRecurse(copy2, srcValue, 0);
       srcValue = copy2;
     }
@@ -834,30 +833,41 @@ var refHandler = {
 function ref(target, index) {
   return new Proxy({ proxy: target, index }, refHandler);
 }
-function applyBind(_el, target) {
-  const el = _el;
+function applyBind(el, target) {
   let onProxyChange;
   let onInputChange;
-  let type = el.getAttribute("type");
-  let value = unproxy(target).value;
+  const type = el.getAttribute("type");
+  const value = unproxy(target).value;
   if (type === "checkbox") {
     if (value === undefined)
       target.value = el.checked;
-    onProxyChange = () => el.checked = target.value;
-    onInputChange = () => target.value = el.checked;
+    onProxyChange = () => {
+      el.checked = target.value;
+    };
+    onInputChange = () => {
+      target.value = el.checked;
+    };
   } else if (type === "radio") {
     if (value === undefined && el.checked)
       target.value = el.value;
-    onProxyChange = () => el.checked = target.value === el.value;
+    onProxyChange = () => {
+      el.checked = target.value === el.value;
+    };
     onInputChange = () => {
       if (el.checked)
         target.value = el.value;
     };
   } else {
-    onInputChange = () => target.value = type === "number" || type === "range" ? el.value === "" ? null : +el.value : el.value;
+    onInputChange = () => {
+      target.value = type === "number" || type === "range" ? el.value === "" ? null : +el.value : el.value;
+    };
     if (value === undefined)
       onInputChange();
-    onProxyChange = () => el.value = target.value;
+    onProxyChange = () => {
+      el.value = target.value;
+      if (el.tagName === "SELECT" && el.value != target.value)
+        throw new Error(`SELECT has no '${target.value}' OPTION (yet)`);
+    };
   }
   observe(onProxyChange);
   el.addEventListener("input", onInputChange);
@@ -866,7 +876,7 @@ function applyBind(_el, target) {
   });
 }
 var SPECIAL_PROPS = {
-  create: function(value) {
+  create: (value) => {
     const el = currentScope.parentElement;
     if (currentScope !== topRedrawScope)
       return;
@@ -875,26 +885,26 @@ var SPECIAL_PROPS = {
     } else {
       const classes = value.split(".").filter((c) => c);
       el.classList.add(...classes);
-      (async function() {
+      (async () => {
         el.offsetHeight;
         el.classList.remove(...classes);
       })();
     }
   },
-  destroy: function(value) {
+  destroy: (value) => {
     const el = currentScope.parentElement;
     onDestroyMap.set(el, value);
   },
-  html: function(value) {
-    let tmpParent = document.createElement(currentScope.parentElement.tagName);
-    tmpParent.innerHTML = "" + value;
+  html: (value) => {
+    const tmpParent = document.createElement(currentScope.parentElement.tagName);
+    tmpParent.innerHTML = `${value}`;
     while (tmpParent.firstChild)
       addNode(tmpParent.firstChild);
   },
-  text: function(value) {
+  text: (value) => {
     addNode(document.createTextNode(value));
   },
-  element: function(value) {
+  element: (value) => {
     if (!(value instanceof Node))
       throw new Error(`Unexpected element-argument: ${JSON.parse(value)}`);
     addNode(value);
@@ -908,7 +918,8 @@ function $(...args) {
     if (arg == null || arg === false)
       continue;
     if (typeof arg === "string") {
-      let text, classes;
+      let text;
+      let classes;
       const textPos = arg.indexOf(":");
       if (textPos >= 0) {
         text = arg.substring(textPos + 1);
@@ -942,7 +953,7 @@ function $(...args) {
         if (!savedCurrentScope) {
           savedCurrentScope = currentScope;
         }
-        let newScope = new ChainedScope(result, true);
+        const newScope = new ChainedScope(result, true);
         newScope.lastChild = result.lastChild || undefined;
         if (topRedrawScope === currentScope)
           topRedrawScope = newScope;
@@ -973,10 +984,10 @@ function $(...args) {
 }
 var cssCount = 0;
 function insertCss(style, global = false) {
-  const prefix = global ? "" : ".AbdStl" + ++cssCount;
-  let css = styleToCss(style, prefix);
+  const prefix = global ? "" : `.AbdStl${++cssCount}`;
+  const css = styleToCss(style, prefix);
   if (css)
-    $("style:" + css);
+    $(`style:${css}`);
   return prefix;
 }
 function styleToCss(style, prefix) {
@@ -987,20 +998,20 @@ function styleToCss(style, prefix) {
     for (const k of kOr.split(/, ?/g)) {
       if (v && typeof v === "object") {
         if (k.startsWith("@")) {
-          rules += k + `{
-` + styleToCss(v, prefix) + `}
+          rules += `${k}{
+${styleToCss(v, prefix)}}
 `;
         } else {
-          rules += styleToCss(v, k.includes("&") ? k.replace(/&/g, prefix) : prefix + " " + k);
+          rules += styleToCss(v, k.includes("&") ? k.replace(/&/g, prefix) : `${prefix} ${k}`);
         }
       } else {
-        props += k.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase()) + ":" + v + ";";
+        props += `${k.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}:${v};`;
       }
     }
   }
   if (props)
-    rules = (prefix.trimStart() || "*") + "{" + props + `}
-` + rules;
+    rules = `${prefix.trimStart() || "*"}{${props}}
+${rules}`;
   return rules;
 }
 function applyArg(key, value) {
@@ -1022,7 +1033,7 @@ function applyArg(key, value) {
     if (value == null || value === false)
       el.style[name] = "";
     else
-      el.style[name] = "" + value;
+      el.style[name] = `${value}`;
   } else if (value == null) {} else if (key in SPECIAL_PROPS) {
     SPECIAL_PROPS[key](value);
   } else if (typeof value === "function") {
@@ -1070,9 +1081,9 @@ function peek(func) {
   }
 }
 function map(source, func) {
-  let out = optProxy(source instanceof Array ? [] : {});
+  const out = optProxy(source instanceof Array ? [] : {});
   onEach(source, (item, key) => {
-    let value = func(item, key);
+    const value = func(item, key);
     if (value !== undefined) {
       out[key] = value;
       clean(() => {
@@ -1083,14 +1094,14 @@ function map(source, func) {
   return out;
 }
 function multiMap(source, func) {
-  let out = optProxy({});
+  const out = optProxy({});
   onEach(source, (item, key) => {
-    let pairs = func(item, key);
+    const pairs = func(item, key);
     if (pairs) {
-      for (let key2 in pairs)
+      for (const key2 in pairs)
         out[key2] = pairs[key2];
       clean(() => {
-        for (let key2 in pairs)
+        for (const key2 in pairs)
           delete out[key2];
       });
     }
@@ -1101,18 +1112,18 @@ function partition(source, func) {
   const unproxiedOut = {};
   const out = proxy(unproxiedOut);
   onEach(source, (item, key) => {
-    let rsp = func(item, key);
+    const rsp = func(item, key);
     if (rsp != null) {
       const buckets = rsp instanceof Array ? rsp : [rsp];
       if (buckets.length) {
-        for (let bucket of buckets) {
+        for (const bucket of buckets) {
           if (unproxiedOut[bucket])
             out[bucket][key] = item;
           else
             out[bucket] = { [key]: item };
         }
         clean(() => {
-          for (let bucket of buckets) {
+          for (const bucket of buckets) {
             delete out[bucket][key];
             if (isObjEmpty(unproxiedOut[bucket]))
               delete out[bucket];
@@ -1128,7 +1139,7 @@ function dump(data) {
     $({ text: data instanceof Array ? "<array>" : "<object>" });
     $("ul", () => {
       onEach(data, (value, key) => {
-        $("li:" + JSON.stringify(key) + ": ", () => {
+        $(`li:${JSON.stringify(key)}: `, () => {
           dump(value);
         });
       });
@@ -1139,7 +1150,7 @@ function dump(data) {
   return data;
 }
 function internalError(code) {
-  throw new Error("Aberdeen internal error " + code);
+  throw new Error(`Aberdeen internal error ${code}`);
 }
 function handleError(e, showMessage) {
   try {
@@ -1162,10 +1173,6 @@ function withEmitHandler(handler, func) {
     emit = oldEmitHandler;
   }
 }
-if (!String.prototype.replaceAll)
-  String.prototype.replaceAll = function(from, to) {
-    return this.split(from).join(to);
-  };
 export {
   withEmitHandler,
   unproxy,
@@ -1197,5 +1204,5 @@ export {
   $
 };
 
-//# debugId=96472D32607348EB64756E2164756E21
+//# debugId=7D3AE73408804D7B64756E2164756E21
 //# sourceMappingURL=aberdeen.js.map