aberdeen 1.0.11 → 1.0.13

package/README.md

@@ -11,7 +11,7 @@ Aberdeen's approach is refreshingly simple:
 - 🎩 **Simple:** Express UIs naturally in JavaScript/TypeScript, without build steps or JSX, and with a minimal amount of concepts you need to learn.
 - ⏩ **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.
+- 🔬 **Tiny:** Around 6KB (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, 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

@@ -30,14 +30,6 @@
  * ```
  */
 export declare function runQueue(): void;
-/**
- * A sort key, as used by {@link onEach}, is a value that determines the order of items. It can
- * be a number, string, or an array of numbers/strings. The sort key is used to sort items
- * based on their values. The sort key can also be `undefined`, which indicates that the item
- * should be ignored.
- * @private
- */
-export type SortKeyType = number | string | Array<number | string> | undefined;
 /**
  * Creates a new string that has the opposite sort order compared to the input string.
  *
@@ -66,7 +58,7 @@ export type SortKeyType = number | string | Array<number | string> | undefined;
  * @see {@link onEach} for usage with sorting.
  */
 export declare function invertString(input: string): string;
-type KeyToString<K> = K extends number ? string : K extends string | symbol ? K : K extends number | infer U ? string | U : K;
+export declare function onEach<K, T>(target: Map<K, undefined | T>, render: (value: T, key: K) => void, makeKey?: (value: T, key: K) => SortKeyType): void;
 export declare function onEach<T>(target: ReadonlyArray<undefined | T>, render: (value: T, index: number) => void, makeKey?: (value: T, index: number) => SortKeyType): void;
 export declare function onEach<K extends string | number | symbol, T>(target: Record<K, undefined | T>, render: (value: T, index: KeyToString<K>) => void, makeKey?: (value: T, index: KeyToString<K>) => SortKeyType): void;
 /**
@@ -133,9 +125,9 @@ export interface ValueRef<T> {
  * ```
  */
 export declare function count(proxied: TargetType): ValueRef<number>;
-export declare function proxy<T extends DatumType>(target: Array<T>): Array<T extends number ? number : T extends string ? string : T extends boolean ? boolean : T>;
+export declare function proxy<T extends any>(target: Array<T>): Array<T extends number ? number : T extends string ? string : T extends boolean ? boolean : T>;
 export declare function proxy<T extends object>(target: T): T;
-export declare function proxy<T extends DatumType>(target: T): ValueRef<T extends number ? number : T extends string ? string : T extends boolean ? boolean : T>;
+export declare function proxy<T extends any>(target: T): ValueRef<T extends number ? number : T extends string ? string : T extends boolean ? boolean : T>;
 /**
  * Returns the original, underlying data target from a reactive proxy created by {@link proxy}.
  * If the input `target` is not a proxy, it is returned directly.
@@ -180,14 +172,17 @@ export declare function unproxy<T>(target: T): T;
  *   will recursively copy properties into the existing `dst` object instead of replacing it.
  *   This minimizes change notifications for reactive updates.
  * - **Handles Proxies:** Can accept proxied or unproxied objects/arrays for both `dst` and `src`.
+ * - **Cross-Type Copying:** Supports copying between Maps and objects. When copying from an object
+ *   to a Map, object properties become Map entries. When copying from a Map to an object, Map entries
+ *   become object properties (only for Maps with string/number/symbol keys).
  *
- * @param dst - The destination object/array (proxied or unproxied).
- * @param src - The source object/array (proxied or unproxied). It won't be modified.
+ * @param dst - The destination object/array/Map (proxied or unproxied).
+ * @param src - The source object/array/Map (proxied or unproxied). It won't be modified.
  * @param flags - Bitmask controlling copy behavior:
  *   - {@link MERGE}: Performs a partial update. Properties in `dst` not present in `src` are kept.
  *     `null`/`undefined` in `src` delete properties in `dst`. Handles partial array updates via object keys.
  *   - {@link SHALLOW}: Performs a shallow copy; when an array/object of the right type doesn't exist in `dst` yet, a reference to the array/object in `src` will be made, instead of creating a copy. If the array/object already exists, it won't be replaced (by a reference), but all items will be individually checked and copied like normal, keeping changes (and therefore UI updates) to a minimum.
- * @template T - The type of the objects being copied.
+ * @template T - The type of the destination object.
  * @throws Error if attempting to copy an array into a non-array or vice versa (unless {@link MERGE} is set, allowing for sparse array updates).
  *
  * @example Basic Copy
@@ -198,6 +193,22 @@ export declare function unproxy<T>(target: T): T;
  * console.log(dest); // proxy({ a: 1, b: { c: 2 } })
  * ```
  *
+ * @example Map to Object
+ * ```typescript
+ * const source = new Map([['x', 3], ['y', 4]]);
+ * const dest = proxy({});
+ * copy(dest, source);
+ * console.log(dest); // proxy({ x: 3, y: 4 })
+ * ```
+ *
+ * @example Object to Map
+ * ```typescript
+ * const source = { x: 3, y: 4 };
+ * const dest = proxy(new Map());
+ * copy(dest, source);
+ * console.log(dest); // proxy(Map([['x', 3], ['y', 4]]))
+ * ```
+ *
  * @example MERGE
  * ```typescript
  * const source = { b: { c: 99 }, d: undefined }; // d: undefined will delete
@@ -223,6 +234,9 @@ export declare function unproxy<T>(target: T): T;
  * console.log(source.nested); // [1, 2, 3] (source was modified)
  * ```
  */
+export declare function copy<K, V>(dst: Map<K, V>, src: Record<K extends string | number | symbol ? K : never, V> | Partial<Record<K extends string | number | symbol ? K : never, V>>, flags?: number): void;
+export declare function copy<K, V>(dst: Map<K, V>, src: Map<K, V> | Partial<Map<K, V>>, flags?: number): void;
+export declare function copy<T extends Record<string | number | symbol, any>>(dst: T, src: Map<keyof T, T[keyof 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;
@@ -685,22 +699,30 @@ export declare function unmountAll(): void;
  *
  */
 export declare function peek<T>(func: () => T): T;
+/** When using a Map as `source`. */
+export declare function map<K, IN, OUT>(source: Map<K, IN>, func: (value: IN, key: K) => undefined | OUT): Map<K, OUT>;
 /** When using an object as `source`. */
 export declare function map<IN, const IN_KEY extends string | number | symbol, OUT>(source: Record<IN_KEY, IN>, func: (value: IN, index: KeyToString<IN_KEY>) => undefined | OUT): Record<string | symbol, OUT>;
 /** When using an array as `source`. */
 export declare function map<IN, OUT>(source: Array<IN>, func: (value: IN, index: number) => undefined | OUT): Array<OUT>;
 /** When using an array as `source`. */
 export declare function multiMap<IN, OUT extends {
-    [key: string | symbol]: DatumType;
+    [key: string | symbol]: any;
 }>(source: Array<IN>, func: (value: IN, index: number) => OUT | undefined): OUT;
 /** When using an object as `source`. */
 export declare function multiMap<K extends string | number | symbol, IN, OUT extends {
-    [key: string | symbol]: DatumType;
+    [key: string | symbol]: any;
 }>(source: Record<K, IN>, func: (value: IN, index: KeyToString<K>) => OUT | undefined): OUT;
+/** When using a Map as `source`. */
+export declare function multiMap<K, IN, OUT extends {
+    [key: string | symbol]: any;
+}>(source: Map<K, IN>, func: (value: IN, key: K) => OUT | undefined): OUT;
 /** When using an object as `array`. */
 export declare function partition<OUT_K extends string | number | symbol, IN_V>(source: IN_V[], func: (value: IN_V, key: number) => undefined | OUT_K | OUT_K[]): Record<OUT_K, Record<number, IN_V>>;
 /** When using an object as `source`. */
 export declare function partition<IN_K extends string | number | symbol, OUT_K extends string | number | symbol, IN_V>(source: Record<IN_K, IN_V>, func: (value: IN_V, key: IN_K) => undefined | OUT_K | OUT_K[]): Record<OUT_K, Record<IN_K, IN_V>>;
+/** When using a Map as `source`. */
+export declare function partition<IN_K extends string | number | symbol, OUT_K extends string | number | symbol, IN_V>(source: Map<IN_K, IN_V>, func: (value: IN_V, key: IN_K) => undefined | OUT_K | OUT_K[]): Record<OUT_K, Record<IN_K, IN_V>>;
 /**
  * Renders a live, recursive dump of a proxied data structure (or any value)
  * into the DOM at the current {@link $} insertion point.
@@ -729,4 +751,3 @@ export declare function partition<IN_K extends string | number | symbol, OUT_K e
  * ```
  */
 export declare function dump<T>(data: T): T;
-export {};

package/dist/aberdeen.js

@@ -388,8 +388,8 @@ class OnEachScope extends Scope {
         }
       }
     } else {
-      for (const key in target) {
-        if (target[key] !== undefined) {
+      for (const [key, value] of getEntries(target)) {
+        if (value !== undefined) {
           new OnEachItemScope(this, key, false);
         }
       }
@@ -410,7 +410,13 @@ class OnEachScope extends Scope {
       const oldScope = this.byIndex.get(index);
       if (oldScope)
         oldScope.remove();
-      if (this.target[index] === undefined) {
+      let hasValue;
+      if (this.target instanceof Map) {
+        hasValue = this.target.has(index);
+      } else {
+        hasValue = this.target[index] !== undefined;
+      }
+      if (!hasValue) {
         this.byIndex.delete(index);
       } else {
         new OnEachItemScope(this, index, true);
@@ -490,17 +496,25 @@ class OnEachItemScope extends ContentScope {
     topRedrawScope = undefined;
   }
   redraw() {
-    const value = optProxy(this.parent.target[this.itemIndex]);
+    let value;
+    const target = this.parent.target;
+    let itemIndex = this.itemIndex;
+    if (target instanceof Map) {
+      value = optProxy(target.get(itemIndex));
+      itemIndex = optProxy(itemIndex);
+    } else {
+      value = optProxy(target[itemIndex]);
+    }
     const savedScope = currentScope;
     currentScope = this;
     let sortKey;
     try {
       if (this.parent.makeSortKey) {
-        const rawSortKey = this.parent.makeSortKey(value, this.itemIndex);
+        const rawSortKey = this.parent.makeSortKey(value, itemIndex);
         if (rawSortKey != null)
           sortKey = rawSortKey instanceof Array ? rawSortKey.map(partToStr).join("") : rawSortKey;
       } else {
-        sortKey = this.itemIndex;
+        sortKey = itemIndex;
       }
       if (typeof sortKey === "number")
         sortKey = partToStr(sortKey);
@@ -509,7 +523,7 @@ class OnEachItemScope extends ContentScope {
         this.sortKey = sortKey;
       }
       if (sortKey != null)
-        this.parent.renderer(value, this.itemIndex);
+        this.parent.renderer(value, itemIndex);
     } catch (e) {
       handleError(e, sortKey != null);
     }
@@ -541,6 +555,7 @@ var ROOT_SCOPE = new RootScope;
 var currentScope = ROOT_SCOPE;
 var ANY_SYMBOL = Symbol("any");
 var TARGET_SYMBOL = Symbol("target");
+var MAP_SIZE_SYMBOL = Symbol("mapSize");
 var subscribers = new WeakMap;
 var peeking = 0;
 function subscribe(target, index, observer = currentScope) {
@@ -586,6 +601,13 @@ function isEmpty(proxied) {
     });
     return !target.length;
   }
+  if (target instanceof Map) {
+    subscribe(target, MAP_SIZE_SYMBOL, (index, newData, oldData) => {
+      if (!newData !== !oldData)
+        queue(scope);
+    });
+    return !target.size;
+  }
   const result = isObjEmpty(target);
   subscribe(target, ANY_SYMBOL, (index, newData, oldData) => {
     if (result ? oldData === undefined : newData === undefined)
@@ -596,6 +618,8 @@ function isEmpty(proxied) {
 function count(proxied) {
   if (proxied instanceof Array)
     return ref(proxied, "length");
+  if (proxied instanceof Map)
+    return ref(proxied, "size");
   const target = proxied[TARGET_SYMBOL] || proxied;
   let cnt = 0;
   for (const k in target)
@@ -707,6 +731,129 @@ var arrayHandler = {
     return arraySet(target, prop, undefined);
   }
 };
+function wrapIteratorSingle(iterator) {
+  return {
+    [Symbol.iterator]() {
+      return this;
+    },
+    next() {
+      const result = iterator.next();
+      if (result.done)
+        return result;
+      return {
+        done: false,
+        value: optProxy(result.value)
+      };
+    }
+  };
+}
+function wrapIteratorPair(iterator) {
+  return {
+    [Symbol.iterator]() {
+      return this;
+    },
+    next() {
+      const result = iterator.next();
+      if (result.done)
+        return result;
+      return {
+        done: false,
+        value: [optProxy(result.value[0]), optProxy(result.value[1])]
+      };
+    }
+  };
+}
+var mapMethodHandlers = {
+  get(key) {
+    const target = this[TARGET_SYMBOL];
+    if (typeof key === "object" && key)
+      key = key[TARGET_SYMBOL] || key;
+    subscribe(target, key);
+    return optProxy(target.get(key));
+  },
+  set(key, newData) {
+    const target = this[TARGET_SYMBOL];
+    if (typeof key === "object" && key)
+      key = key[TARGET_SYMBOL] || key;
+    if (typeof newData === "object" && newData)
+      newData = newData[TARGET_SYMBOL] || newData;
+    const oldData = target.get(key);
+    if (newData !== oldData) {
+      const oldSize = target.size;
+      target.set(key, newData);
+      emit(target, key, newData, oldData);
+      emit(target, MAP_SIZE_SYMBOL, target.size, oldSize);
+      runImmediateQueue();
+    }
+    return this;
+  },
+  delete(key) {
+    const target = this[TARGET_SYMBOL];
+    if (typeof key === "object" && key)
+      key = key[TARGET_SYMBOL] || key;
+    const oldData = target.get(key);
+    const result = target.delete(key);
+    if (result) {
+      emit(target, key, undefined, oldData);
+      emit(target, MAP_SIZE_SYMBOL, target.size, target.size + 1);
+      runImmediateQueue();
+    }
+    return result;
+  },
+  clear() {
+    const target = this[TARGET_SYMBOL];
+    const oldSize = target.size;
+    for (const key of target.keys()) {
+      const oldData = target.get(key);
+      emit(target, key, undefined, oldData);
+    }
+    target.clear();
+    emit(target, MAP_SIZE_SYMBOL, 0, oldSize);
+    runImmediateQueue();
+  },
+  has(key) {
+    const target = this[TARGET_SYMBOL];
+    if (typeof key === "object" && key)
+      key = key[TARGET_SYMBOL] || key;
+    subscribe(target, key);
+    return target.has(key);
+  },
+  keys() {
+    const target = this[TARGET_SYMBOL];
+    subscribe(target, ANY_SYMBOL);
+    return wrapIteratorSingle(target.keys());
+  },
+  values() {
+    const target = this[TARGET_SYMBOL];
+    subscribe(target, ANY_SYMBOL);
+    return wrapIteratorSingle(target.values());
+  },
+  entries() {
+    const target = this[TARGET_SYMBOL];
+    subscribe(target, ANY_SYMBOL);
+    return wrapIteratorPair(target.entries());
+  },
+  [Symbol.iterator]() {
+    const target = this[TARGET_SYMBOL];
+    subscribe(target, ANY_SYMBOL);
+    return wrapIteratorPair(target[Symbol.iterator]());
+  }
+};
+var mapHandler = {
+  get(target, prop) {
+    if (prop === TARGET_SYMBOL)
+      return target;
+    if (prop in mapMethodHandlers) {
+      return mapMethodHandlers[prop];
+    }
+    if (prop === "size") {
+      subscribe(target, MAP_SIZE_SYMBOL);
+      return target.size;
+    }
+    subscribe(target, prop);
+    return optProxy(target[prop]);
+  }
+};
 var proxyMap = new WeakMap;
 function optProxy(value) {
   if (typeof value !== "object" || !value || value[TARGET_SYMBOL] !== undefined) {
@@ -715,7 +862,15 @@ function optProxy(value) {
   let proxied = proxyMap.get(value);
   if (proxied)
     return proxied;
-  proxied = new Proxy(value, value instanceof Array ? arrayHandler : objectHandler);
+  let handler;
+  if (value instanceof Array) {
+    handler = arrayHandler;
+  } else if (value instanceof Map) {
+    handler = mapHandler;
+  } else {
+    handler = objectHandler;
+  }
+  proxied = new Proxy(value, handler);
   proxyMap.set(value, proxied);
   return proxied;
 }
@@ -740,10 +895,21 @@ var SHALLOW = 2;
 var COPY_SUBSCRIBE = 32;
 var COPY_EMIT = 64;
 function clone(src, flags = 0) {
-  const dst = Object.create(Object.getPrototypeOf(src));
+  let dst;
+  if (src instanceof Map) {
+    dst = new Map;
+  } else {
+    dst = Object.create(Object.getPrototypeOf(src));
+  }
   copyRecurse(dst, src, flags);
   return dst;
 }
+function getEntries(subject) {
+  return subject instanceof Map ? subject.entries() : Object.entries(subject);
+}
+function getKeys(subject) {
+  return subject instanceof Map ? subject.keys() : Object.keys(subject);
+}
 function copyRecurse(dst, src, flags) {
   let unproxied = dst[TARGET_SYMBOL];
   if (unproxied) {
@@ -764,7 +930,7 @@ function copyRecurse(dst, src, flags) {
     const dstLen = dst.length;
     const srcLen = src.length;
     for (let i = 0;i < srcLen; i++) {
-      copyValue(dst, src, i, flags);
+      copyValue(dst, i, src[i], flags);
     }
     if (srcLen !== dstLen) {
       if (flags & COPY_EMIT) {
@@ -780,25 +946,41 @@ function copyRecurse(dst, src, flags) {
       }
     }
   } else {
-    for (const k in src) {
-      copyValue(dst, src, k, flags);
+    for (const [key, value] of getEntries(src)) {
+      copyValue(dst, key, value, flags);
     }
     if (!(flags & MERGE)) {
-      for (const k in dst) {
-        if (!(k in src)) {
-          const old = dst[k];
-          delete dst[k];
-          if (flags & COPY_EMIT && old !== undefined) {
-            emit(dst, k, undefined, old);
+      if (src instanceof Map) {
+        for (const key of getKeys(dst)) {
+          if (!src.has(key)) {
+            deleteKey(dst, key, flags);
+          }
+        }
+      } else {
+        for (const key of getKeys(dst)) {
+          if (!(key in src)) {
+            deleteKey(dst, key, flags);
           }
         }
       }
     }
   }
 }
-function copyValue(dst, src, index, flags) {
-  const dstValue = dst[index];
-  let srcValue = src[index];
+function deleteKey(dst, key, flags) {
+  let old;
+  if (dst instanceof Map) {
+    old = dst.get(key);
+    dst.delete(key);
+  } else {
+    old = dst[key];
+    delete dst[key];
+  }
+  if (flags & COPY_EMIT && old !== undefined) {
+    emit(dst, key, undefined, old);
+  }
+}
+function copyValue(dst, index, srcValue, flags) {
+  const dstValue = dst instanceof Map ? dst.get(index) : dst[index];
   if (srcValue !== dstValue) {
     if (srcValue && dstValue && typeof srcValue === "object" && typeof dstValue === "object" && (srcValue.constructor === dstValue.constructor || flags & MERGE && dstValue instanceof Array)) {
       copyRecurse(dstValue, srcValue, flags);
@@ -809,13 +991,19 @@ function copyValue(dst, src, index, flags) {
       copyRecurse(copy2, srcValue, 0);
       srcValue = copy2;
     }
-    const old = dst[index];
-    if (flags & MERGE && srcValue == null)
-      delete dst[index];
-    else
-      dst[index] = srcValue;
+    if (dst instanceof Map) {
+      if (flags & MERGE && srcValue == null)
+        dst.delete(index);
+      else
+        dst.set(index, srcValue);
+    } else {
+      if (flags & MERGE && srcValue == null)
+        delete dst[index];
+      else
+        dst[index] = srcValue;
+    }
     if (flags & COPY_EMIT)
-      emit(dst, index, srcValue, old);
+      emit(dst, index, srcValue, dstValue);
   }
 }
 var refHandler = {
@@ -1105,14 +1293,28 @@ function peek(func) {
   }
 }
 function map(source, func) {
-  const out = optProxy(source instanceof Array ? [] : {});
+  let out;
+  if (source instanceof Array) {
+    out = optProxy([]);
+  } else if (source instanceof Map) {
+    out = optProxy(new Map);
+  } else {
+    out = optProxy({});
+  }
   onEach(source, (item, key) => {
     const value = func(item, key);
     if (value !== undefined) {
-      out[key] = value;
-      clean(() => {
-        delete out[key];
-      });
+      if (out instanceof Map) {
+        out.set(key, value);
+        clean(() => {
+          out.delete(key);
+        });
+      } else {
+        out[key] = value;
+        clean(() => {
+          delete out[key];
+        });
+      }
     }
   });
   return out;
@@ -1160,7 +1362,15 @@ function partition(source, func) {
 }
 function dump(data) {
   if (data && typeof data === "object") {
-    $({ text: data instanceof Array ? "<array>" : "<object>" });
+    let label;
+    if (data instanceof Array) {
+      label = "<array>";
+    } else if (data instanceof Map) {
+      label = "<Map>";
+    } else {
+      label = "<object>";
+    }
+    $({ text: label });
     $("ul", () => {
       onEach(data, (value, key) => {
         $(`li:${JSON.stringify(key)}: `, () => {
@@ -1228,5 +1438,5 @@ export {
   $
 };
 
-//# debugId=4D9B4C45440E57B664756E2164756E21
+//# debugId=8143A247906C19B564756E2164756E21
 //# sourceMappingURL=aberdeen.js.map