aberdeen 1.0.7 → 1.0.10

package/README.md

@@ -12,7 +12,7 @@ Aberdeen's approach is refreshingly simple:
 - ⏩ **Fast:** No virtual DOM. Aberdeen intelligently updates only the minimal, necessary parts of your UI when proxied data changes.
 - 👥 **Awesome lists**: It's very easy and performant to reactively display data sorted by whatever you like.
 - 🔬 **Tiny:** Around 5KB (minimized and gzipped) and with zero runtime dependencies.
-- 🔋 **Batteries included**: Comes with client-side routing, revertible patches for optimistic user-interface updates, component-local CSS, helper functions for transforming reactive data (mapping, partitioning, filtering, etc) and hide/unhide transition effects. No bikeshedding required!
+- 🔋 **Batteries included**: Comes with client-side routing, revertible patches for optimistic user-interface updates, component-local CSS, SVG support, helper functions for transforming reactive data (mapping, partitioning, filtering, etc) and hide/unhide transition effects. No bikeshedding required!
 
 ## Why *not* use Aberdeen?
 

package/dist/aberdeen.d.ts

@@ -66,7 +66,7 @@ export type SortKeyType = number | string | Array<number | string> | undefined;
  * @see {@link onEach} for usage with sorting.
  */
 export declare function invertString(input: string): string;
-export declare function onEach<T>(target: Array<undefined | T>, render: (value: T, index: number) => void, makeKey?: (value: T, key: any) => SortKeyType): void;
+export declare function onEach<T>(target: ReadonlyArray<undefined | T>, render: (value: T, index: number) => void, makeKey?: (value: T, key: any) => SortKeyType): void;
 export declare function onEach<K extends string | number | symbol, T>(target: Record<K, undefined | T>, render: (value: T, index: K) => void, makeKey?: (value: T, key: K) => SortKeyType): void;
 /**
  * Reactively checks if an observable array or object is empty.
@@ -306,7 +306,7 @@ export declare function ref<T extends TargetType, K extends keyof T>(target: T,
  *      This is often used together with {@link ref}, in order to use properties other than `.value`.
  *   - `{text: string|number}`: Add the value as a `TextNode` to the *current* element.
  *   - `{html: string}`: Add the value as HTML to the *current* element. This should only be used in exceptional situations. And of course, beware of XSS.
- *   - `{element: Node}`: Add a pre-existing HTML `Node` to the *current* element.
+   - `Node`: If a DOM Node (Element or TextNode) is passed in, it is added as a child to the *current* element. If the Node is an Element, it becomes the new *current* element for the rest of this `$` function execution.
  *
  * @returns The most inner DOM element that was created (not counting text nodes nor elements created by content functions),
  *          or undefined if no elements were created.

package/dist/aberdeen.js

@@ -44,8 +44,8 @@ class ReverseSortedSet {
   }
   get(indexValue) {
     const keyProp = this.keyProp;
-    let current = this.tail;
     let prev;
+    let current = this.tail;
     for (let l = this.symbols.length - 1;l >= 0; l--) {
       const symbol = this.symbols[l];
       while ((prev = current[symbol]) && prev[keyProp] > indexValue)
@@ -138,7 +138,7 @@ function partToStr(part) {
   let num = Math.abs(Math.round(part));
   const negative = part < 0;
   while (num > 0) {
-    result += String.fromCharCode(negative ? 65534 - num % 65533 : 2 + num % 65533);
+    result = String.fromCharCode(negative ? 65534 - num % 65533 : 2 + num % 65533) + result;
     num = Math.floor(num / 65533);
   }
   return String.fromCharCode(128 + (negative ? -result.length : result.length)) + result;
@@ -164,6 +164,7 @@ class Scope {
 
 class ContentScope extends Scope {
   cleaners;
+  inSvgNamespace = false;
   constructor(cleaners = []) {
     super();
     this.cleaners = cleaners;
@@ -207,6 +208,7 @@ class ChainedScope extends ContentScope {
   constructor(parentElement, useParentCleaners = false) {
     super(useParentCleaners ? currentScope.cleaners : []);
     this.parentElement = parentElement;
+    this.inSvgNamespace = currentScope.inSvgNamespace;
     if (parentElement === currentScope.parentElement) {
       this.prevSibling = currentScope.getChildPrevSibling();
       currentScope.lastChild = this;
@@ -255,6 +257,7 @@ class MountScope extends ContentScope {
     super();
     this.parentElement = parentElement;
     this.renderer = renderer;
+    this.inSvgNamespace = currentScope.inSvgNamespace;
     this.redraw();
     currentScope.cleaners.push(this);
   }
@@ -444,6 +447,7 @@ class OnEachItemScope extends ContentScope {
     this.parent = parent;
     this.itemIndex = itemIndex;
     this.parentElement = parent.parentElement;
+    this.inSvgNamespace = currentScope.inSvgNamespace;
     this.parent.byIndex.set(this.itemIndex, this);
     this.lastChild = this;
     if (topRedraw)
@@ -906,9 +910,9 @@ var SPECIAL_PROPS = {
     addNode(document.createTextNode(value));
   },
   element: (value) => {
-    if (!(value instanceof Node))
-      throw new Error(`Unexpected element-argument: ${JSON.parse(value)}`);
+    console.log("Aberdeen: $({element: myElement}) is deprecated, use $(myElement) instead");
     addNode(value);
+    SPECIAL_PROPS.element = addNode;
   }
 };
 function $(...args) {
@@ -945,7 +949,12 @@ function $(...args) {
         err = `Tag '${arg}' cannot contain space`;
         break;
       } else {
-        result = document.createElement(arg);
+        const useNamespace = currentScope.inSvgNamespace || arg === "svg";
+        if (useNamespace) {
+          result = document.createElementNS("http://www.w3.org/2000/svg", arg);
+        } else {
+          result = document.createElement(arg);
+        }
         if (classes)
           result.className = classes.replaceAll(".", " ");
         if (text)
@@ -955,6 +964,9 @@ function $(...args) {
           savedCurrentScope = currentScope;
         }
         const newScope = new ChainedScope(result, true);
+        if (arg === "svg") {
+          newScope.inSvgNamespace = true;
+        }
         newScope.lastChild = result.lastChild || undefined;
         if (topRedrawScope === currentScope)
           topRedrawScope = newScope;
@@ -962,12 +974,23 @@ function $(...args) {
       }
     } else if (typeof arg === "object") {
       if (arg.constructor !== Object) {
-        err = `Unexpected argument: ${arg}`;
-        break;
-      }
-      for (const key in arg) {
-        const val = arg[key];
-        applyArg(key, val);
+        if (arg instanceof Node) {
+          addNode(arg);
+          if (arg instanceof Element) {
+            if (!savedCurrentScope)
+              savedCurrentScope = currentScope;
+            currentScope = new ChainedScope(arg, true);
+            currentScope.lastChild = arg.lastChild || undefined;
+          }
+        } else {
+          err = `Unexpected argument: ${arg}`;
+          break;
+        }
+      } else {
+        for (const key in arg) {
+          const val = arg[key];
+          applyArg(key, val);
+        }
       }
     } else if (typeof arg === "function") {
       new RegularScope(currentScope.parentElement, arg);
@@ -1205,5 +1228,5 @@ export {
   $
 };
 
-//# debugId=22FD247DC29D103664756E2164756E21
+//# debugId=4D9B4C45440E57B664756E2164756E21
 //# sourceMappingURL=aberdeen.js.map