aberdeen 1.10.1 → 1.11.0

package/dist/src/aberdeen.d.ts

@@ -59,12 +59,13 @@ export declare function runQueue(): void;
  */
 export declare function invertString(input: string): string;
 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: Set<T>, render: (value: T) => void, makeKey?: (value: T) => 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;
 /** @private */
 export declare const EMPTY: unique symbol;
 /**
- * Reactively checks if an observable array or object is empty.
+ * Reactively checks if an observable array, object, Map, or Set is empty.
  *
  * This function not only returns the current emptiness state but also establishes
  * a reactive dependency. If the emptiness state of the `proxied` object or array
@@ -72,8 +73,8 @@ export declare const EMPTY: unique symbol;
  * is deleted from an object), the scope that called `isEmpty` will be automatically
  * scheduled for re-evaluation.
  *
- * @param proxied The observable array or object to check.
- * @returns `true` if the array has length 0 or the object has no own enumerable properties, `false` otherwise.
+ * @param proxied The observable array, object, Map, or Set to check.
+ * @returns `true` if the array has length 0, the Map/Set has size 0, or the object has no own enumerable properties, `false` otherwise.
  *
  * @example
  * ```typescript
@@ -101,10 +102,10 @@ export interface ValueRef<T> {
     value: T;
 }
 /**
- * Reactively counts the number of properties in an objects.
+ * Reactively counts the number of properties in an object.
  *
- * @param proxied The observable object to count. In case an `array` is passed in, a {@link ref} to its `.length` will be returned.
- * @returns an observable object for which the `value` property reflects the number of properties in `proxied` with a value other than `undefined`.
+ * @param proxied The observable object to count. In case an `array`, `Map`, or `Set` is passed in, a {@link ref} to its `.length` or `.size` will be returned.
+ * @returns an observable object for which the `value` property reflects the number of properties in `proxied` with a value other than `undefined`, or the collection size for arrays, Maps, and Sets.
  *
  * @example
  * ```typescript
@@ -306,7 +307,7 @@ export declare function setSpacingCssVars(base?: number, unit?: string): void;
  * This function is reactive - scopes that call it will re-execute when the
  * browser's color scheme preference changes (via the `prefers-color-scheme` media query).
  *
- * Use this in combination with {@link $ | A} and {@link cssVars} to implement theme switching:
+ * Use this in combination with {@link A | A} and {@link cssVars} to implement theme switching:
  *
  * @returns `true` if the browser prefers dark mode, `false` if it prefers light mode.
  *
@@ -336,8 +337,8 @@ export declare function clone<T extends object>(src: T): T;
  * Creates a reactive reference (`{ value: T }`-like object) to a specific value
  * within a proxied object or array.
  *
- * This is primarily used for the `bind` property in {@link $ | A} to create two-way data bindings
- * with form elements, and for passing a reactive property to any of the {@link $ | A} key-value pairs.
+ * This is primarily used for the `bind` property in {@link A | A} to create two-way data bindings
+ * with form elements, and for passing a reactive property to any of the {@link A | A} key-value pairs.
  *
  * Reading `ref.value` accesses the property from the underlying proxy (and subscribes the current scope).
  * Assigning to `ref.value` updates the property in the underlying proxy (triggering reactive updates).
@@ -490,7 +491,7 @@ export declare function disableCreateDestroy(): void;
  * ```
  * This is often used together with {@link ref}, in order to use properties other than `.value`.
  */
-export declare function $(...args: any[]): undefined | Element;
+export declare function A(...args: any[]): undefined | Element;
 /**
  * Inserts CSS rules into the document, scoping them with a unique class name.
  *
@@ -502,7 +503,7 @@ export declare function $(...args: any[]): undefined | Element;
  *
  * ### Concise Style Strings
  *
- * Concise style strings use two syntaxes (same as inline CSS in {@link $ | A}):
+ * Concise style strings use two syntaxes (same as inline CSS in {@link A | A}):
  * - **Short form** `key:value` (no space after colon): The value ends at the next whitespace.
  *   Example: `'m:$3 bg:red r:8px'`
  * - **Long form** `key: value;` (space after colon): The value continues until a semicolon.
@@ -510,11 +511,11 @@ export declare function $(...args: any[]): undefined | Element;
  *
  * Both forms can be mixed: `'m:$3 box-shadow: 0 2px 4px rgba(0,0,0,0.2); bg:$cardBg'`
  *
- * Supports the same CSS shortcuts as {@link $ | A} and CSS variable references with `$` (e.g., `$primary`, `$3`).
+ * Supports the same CSS shortcuts as {@link A | A} and CSS variable references with `$` (e.g., `$primary`, `$3`).
  *
  * @param style - A concise style string or a style object.
  * @returns The unique class name prefix used for scoping (e.g., `.AbdStl1`).
- *          Use this prefix with {@link $ | A} to apply the styles.
+ *          Use this prefix with {@link A | A} to apply the styles.
  *
  * @example Basic Usage with Shortcuts and CSS Variables
  * ```typescript
@@ -608,7 +609,7 @@ export declare function insertGlobalCss(style: object): void;
 /**
  * Sets a custom error handler function for errors that occur asynchronously
  * within reactive scopes (e.g., during updates triggered by proxy changes in
- * {@link derive} or {@link $ | A} render functions).
+ * {@link derive} or {@link A | A} render functions).
  *
  * The default handler logs the error to `console.error` and adds a simple
  * 'Error' message div to the DOM at the location where the error occurred (if possible).
@@ -655,7 +656,7 @@ export declare function setErrorHandler(handler?: (error: Error) => boolean | un
  * This is useful for releasing resources, removing manual event listeners, or cleaning up
  * side effects associated with the scope. Cleaners are run in reverse order of registration.
  *
- * Scopes are created by functions like {@link derive}, {@link mount}, {@link $ | A} (when given a render function),
+ * Scopes are created by functions like {@link derive}, {@link mount}, {@link A | A} (when given a render function),
  * and internally by constructs like {@link onEach}.
  *
  * @param cleaner - The function to execute during cleanup.
@@ -696,7 +697,7 @@ export declare function clean(cleaner: () => void): void;
  * Use {@link peek} or {@link unproxy} within the function to read proxied data without subscribing to it.
  *
  * @param func - The function to execute reactively. Any DOM manipulations should typically
- *   be done using {@link $ | A} within this function. Its return value will be made available as an
+ *   be done using {@link A | A} within this function. Its return value will be made available as an
  *   observable returned by the `derive()` function.
  * @returns An observable object, with its `value` property containing whatever the last run of `func` returned.
  *
@@ -737,21 +738,21 @@ export declare function clean(cleaner: () => void): void;
 export declare function derive<T>(func: () => T): ValueRef<T>;
 /**
  * Attaches a reactive Aberdeen UI fragment to an existing DOM element. Without the use of
- * this function, {@link $ | A} will assume `document.body` as its root.
+ * this function, {@link A | A} will assume `document.body` as its root.
  *
  * It creates a top-level reactive scope associated with the `parentElement`. The provided
  * function `func` is executed immediately within this scope. Any proxied data read by `func`
  * will cause it to re-execute when the data changes, updating the DOM elements created within it.
  *
- * Calls to {@link $ | A} inside `func` will append nodes to `parentElement`.
- * You can nest {@link derive} or other {@link $ | A} scopes within `func`.
+ * Calls to {@link A | A} inside `func` will append nodes to `parentElement`.
+ * You can nest {@link derive} or other {@link A | A} scopes within `func`.
  * Use {@link unmountAll} to clean up all mounted scopes and their DOM nodes.
  *
  * Mounting scopes happens reactively, meaning that if this function is called from within another
- * ({@link derive} or {@link $ | A} or {@link mount}) scope that gets cleaned up, so will the mount.
+ * ({@link derive} or {@link A | A} or {@link mount}) scope that gets cleaned up, so will the mount.
  *
  * @param parentElement - The native DOM `Element` to which the UI fragment will be appended.
- * @param func - The function that defines the UI fragment, typically containing calls to {@link $ | A}.
+ * @param func - The function that defines the UI fragment, typically containing calls to {@link A | A}.
  *
  * @example Basic Mount
  * ```javascript
@@ -780,7 +781,7 @@ export declare function derive<T>(func: () => T): ValueRef<T>;
 export declare function mount(parentElement: Element, func: () => void): void;
 /**
  * Removes all Aberdeen-managed DOM nodes and stops all active reactive scopes
- * (created by {@link mount}, {@link derive}, {@link $ | A} with functions, etc.).
+ * (created by {@link mount}, {@link derive}, {@link A | A} with functions, etc.).
  *
  * This effectively cleans up the entire Aberdeen application state. Aside from in
  * automated tests, there should probably be little reason to call this function.
@@ -789,7 +790,7 @@ export declare function unmountAll(): void;
 /**
  * Executes a function or retrieves a value *without* creating subscriptions in the current reactive scope, and returns its result.
  *
- * This is useful when you need to access reactive data inside a reactive scope (like {@link $ | A})
+ * This is useful when you need to access reactive data inside a reactive scope (like {@link A | A})
  * but do not want changes to that specific data to trigger a re-execute of the scope.
  *
  * Note: You may also use {@link unproxy} to get to the raw underlying data structure, which can be used to similar effect.
@@ -841,7 +842,7 @@ export declare function partition<IN_K extends string | number | symbol, OUT_K e
 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 $ | A} insertion point.
+ * into the DOM at the current {@link A | A} insertion point.
  *
  * Uses `<ul>` and `<li>` elements to display object properties and array items.
  * Updates reactively if the dumped data changes. Primarily intended for debugging purposes.
@@ -883,7 +884,7 @@ export declare function dump<T>(data: T): T;
  * });
  * ```
  */
-declare const A: typeof $ & {
+declare const _default: typeof A & {
     /** {@inheritDoc clean} */ clean: typeof clean;
     /** {@inheritDoc clone} */ clone: typeof clone;
     /** {@inheritDoc copy} */ copy: typeof copy;
@@ -913,4 +914,4 @@ declare const A: typeof $ & {
     /** {@inheritDoc unmountAll} */ unmountAll: typeof unmountAll;
     /** {@inheritDoc unproxy} */ unproxy: typeof unproxy;
 };
-export default A;
+export default _default;

package/dist/src/aberdeen.js

@@ -130,18 +130,26 @@ function runQueue() {
   if (time > 9)
     console.debug(`Aberdeen queue took ${time}ms`);
 }
-function partToStr(part) {
-  if (typeof part === "string") {
-    return `${part}\x01`;
-  }
+function arrayToStr(parts) {
   let result = "";
-  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;
-    num = Math.floor(num / 65533);
+  for (const part of parts) {
+    if (typeof part === "string") {
+      result += `${part}\x01`;
+      continue;
+    }
+    if (typeof part !== "number") {
+      throw new Error("onEach() sort key must be a string, number or an array of such");
+    }
+    let digits = "";
+    let num = Math.abs(Math.round(part));
+    const negative = part < 0;
+    while (num > 0) {
+      digits = String.fromCharCode(negative ? 65534 - num % 65533 : 2 + num % 65533) + digits;
+      num = Math.floor(num / 65533);
+    }
+    result += String.fromCharCode(128 + (negative ? -digits.length : digits.length)) + digits;
   }
-  return String.fromCharCode(128 + (negative ? -result.length : result.length)) + result;
+  return result;
 }
 function invertString(input) {
   let result = "";
@@ -403,7 +411,7 @@ class OnEachScope extends Scope {
         new OnEachItemScope(this, i, false);
       }
     } else {
-      for (const key of target instanceof Map ? target.keys() : Object.keys(target)) {
+      for (const key of target instanceof Map ? target.keys() : target instanceof Set ? target.values() : Object.keys(target)) {
         new OnEachItemScope(this, key, false);
       }
     }
@@ -430,7 +438,7 @@ class OnEachScope extends Scope {
       const oldScope = this.byIndex.get(index);
       if (oldScope)
         oldScope.remove();
-      if (this.target instanceof Map ? this.target.has(index) : (index in this.target)) {
+      if (this.target instanceof Set || this.target instanceof Map ? this.target.has(index) : (index in this.target)) {
         new OnEachItemScope(this, index, true);
       } else {
         this.byIndex.delete(index);
@@ -516,7 +524,9 @@ class OnEachItemScope extends ContentScope {
     let value;
     const target = this.parent.target;
     let itemIndex = this.itemIndex;
-    if (target instanceof Map) {
+    if (target instanceof Set) {
+      value = itemIndex = optProxy(itemIndex);
+    } else if (target instanceof Map) {
       value = optProxy(target.get(itemIndex));
       itemIndex = optProxy(itemIndex);
     } else {
@@ -527,14 +537,14 @@ class OnEachItemScope extends ContentScope {
     let sortKey;
     try {
       if (this.parent.makeSortKey) {
-        const rawSortKey = this.parent.makeSortKey(value, itemIndex);
-        if (rawSortKey != null)
-          sortKey = rawSortKey instanceof Array ? rawSortKey.map(partToStr).join("") : rawSortKey;
+        sortKey = this.parent.makeSortKey(value, itemIndex);
       } else {
         sortKey = itemIndex;
       }
-      if (typeof sortKey === "number")
-        sortKey = partToStr(sortKey);
+      if (sortKey instanceof Array)
+        sortKey = arrayToStr(sortKey);
+      else if (typeof sortKey !== "string" && sortKey != null)
+        sortKey = arrayToStr([sortKey]);
       if (this.sortKey !== sortKey) {
         this.parent.sortedSet.remove(this);
         this.sortKey = sortKey;
@@ -632,7 +642,7 @@ function isEmpty(proxied) {
     });
     return !target.length;
   }
-  if (target instanceof Map) {
+  if (target instanceof Map || target instanceof Set) {
     subscribe(target, MAP_SIZE_SYMBOL, (index, newData, oldData) => {
       if (!newData !== !oldData)
         scope.onChange(target, EMPTY, !newData, !oldData);
@@ -652,7 +662,7 @@ function isEmpty(proxied) {
 function count(proxied) {
   if (proxied instanceof Array)
     return ref(proxied, "length");
-  if (proxied instanceof Map)
+  if (proxied instanceof Map || proxied instanceof Set)
     return ref(proxied, "size");
   const target = proxied[TARGET_SYMBOL] || proxied;
   let cnt = 0;
@@ -807,22 +817,20 @@ function wrapIteratorPair(iterator) {
     }
   };
 }
+function unproxyCollectionValue(value) {
+  return typeof value === "object" && value ? value[TARGET_SYMBOL] || value : value;
+}
 var mapMethodHandlers = {
   get(key) {
     const target = this[TARGET_SYMBOL];
-    if (typeof key === "object" && key)
-      key = key[TARGET_SYMBOL] || key;
+    key = unproxyCollectionValue(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;
-    }
+    key = unproxyCollectionValue(key);
+    newData = unproxyCollectionValue(newData);
     let oldData = target.get(key);
     if (oldData === undefined && !target.has(key))
       oldData = EMPTY;
@@ -836,9 +844,7 @@ var mapMethodHandlers = {
   },
   delete(key) {
     const target = this[TARGET_SYMBOL];
-    if (typeof key === "object" && key) {
-      key = key[TARGET_SYMBOL] || key;
-    }
+    key = unproxyCollectionValue(key);
     let oldData = target.get(key);
     if (oldData === undefined && !target.has(key))
       oldData = EMPTY;
@@ -860,9 +866,7 @@ var mapMethodHandlers = {
   },
   has(key) {
     const target = this[TARGET_SYMBOL];
-    if (typeof key === "object" && key) {
-      key = key[TARGET_SYMBOL] || key;
-    }
+    key = unproxyCollectionValue(key);
     subscribe(target, key);
     return target.has(key);
   },
@@ -887,6 +891,66 @@ var mapMethodHandlers = {
     return wrapIteratorPair(target[Symbol.iterator]());
   }
 };
+var setMethodHandlers = {
+  add(value) {
+    const target = this[TARGET_SYMBOL];
+    value = unproxyCollectionValue(value);
+    if (!target.has(value)) {
+      const oldSize = target.size;
+      target.add(value);
+      emit(target, value, value, EMPTY);
+      emit(target, MAP_SIZE_SYMBOL, target.size, oldSize);
+    }
+    return this;
+  },
+  delete(value) {
+    const target = this[TARGET_SYMBOL];
+    value = unproxyCollectionValue(value);
+    if (!target.has(value))
+      return false;
+    const oldSize = target.size;
+    target.delete(value);
+    emit(target, value, EMPTY, value);
+    emit(target, MAP_SIZE_SYMBOL, target.size, oldSize);
+    return true;
+  },
+  clear() {
+    const target = this[TARGET_SYMBOL];
+    const oldSize = target.size;
+    if (!oldSize)
+      return;
+    for (const value of target.values())
+      emit(target, value, EMPTY, value);
+    target.clear();
+    emit(target, MAP_SIZE_SYMBOL, 0, oldSize);
+  },
+  has(value) {
+    const target = this[TARGET_SYMBOL];
+    value = unproxyCollectionValue(value);
+    subscribe(target, value);
+    return target.has(value);
+  },
+  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 wrapIteratorSingle(target[Symbol.iterator]());
+  }
+};
 var mapHandler = {
   get(target, prop) {
     if (prop === TARGET_SYMBOL)
@@ -901,6 +965,20 @@ var mapHandler = {
     return target[prop];
   }
 };
+var setHandler = {
+  get(target, prop) {
+    if (prop === TARGET_SYMBOL)
+      return target;
+    if (setMethodHandlers.hasOwnProperty(prop)) {
+      return setMethodHandlers[prop];
+    }
+    if (prop === "size") {
+      subscribe(target, MAP_SIZE_SYMBOL);
+      return target.size;
+    }
+    return target[prop];
+  }
+};
 var proxyMap = new WeakMap;
 function optProxy(value) {
   if (typeof value !== "object" || !value || value[TARGET_SYMBOL] !== undefined || NO_COPY in value) {
@@ -914,6 +992,8 @@ function optProxy(value) {
     handler = arrayHandler;
   } else if (value instanceof Map) {
     handler = mapHandler;
+  } else if (value instanceof Set) {
+    handler = setHandler;
   } else {
     handler = objectHandler;
   }
@@ -1295,7 +1375,7 @@ var SPECIAL_PROPS = {
 function disableCreateDestroy() {
   SPECIAL_PROPS.create = SPECIAL_PROPS.destroy = () => {};
 }
-function $(...args) {
+function A(...args) {
   let el = currentScope.el;
   let svg = currentScope.svg;
   const argCount = args.length;
@@ -1651,21 +1731,21 @@ function partition(source, func) {
 function dump(data) {
   if (data && typeof data === "object") {
     const name = data.constructor.name.toLowerCase() || "unknown object";
-    $(`#<${name}>`);
+    A(`#<${name}>`);
     if (NO_COPY in data) {
-      $("# [NO_COPY]");
+      A("# [NO_COPY]");
     } else {
-      $("ul", () => {
+      A("ul", () => {
         onEach(data, (value, key) => {
-          $("li", () => {
-            $(`#${JSON.stringify(key)}: `);
+          A("li", () => {
+            A(`#${JSON.stringify(key)}: `);
             dump(value);
           });
         });
       });
     }
   } else if (data !== undefined) {
-    $("#" + JSON.stringify(data));
+    A("#" + JSON.stringify(data));
   }
   return data;
 }
@@ -1681,7 +1761,7 @@ function handleError(e, showMessage) {
   }
   try {
     if (showMessage)
-      $("div.aberdeen-error#Error");
+      A("div.aberdeen-error#Error");
   } catch {}
 }
 function withEmitHandler(handler, func) {
@@ -1695,15 +1775,15 @@ function withEmitHandler(handler, func) {
 }
 if (typeof document !== "undefined") {
   leakScope(() => {
-    $(() => {
+    A(() => {
       if (isEmpty(cssSnippets) && isEmpty(cssVars))
         return;
       mount(document.head, () => {
-        $("style.abd", () => {
+        A("style.abd", () => {
           onEach(cssSnippets, (value) => {
-            $("#", value);
+            A("#", value);
           });
-          $(() => {
+          A(() => {
             if (isEmpty(cssVars))
               return;
             let css = ":root{";
@@ -1713,14 +1793,14 @@ if (typeof document !== "undefined") {
             }
             css += `}
 `;
-            $("#", css);
+            A("#", css);
           });
         });
       });
     });
   });
 }
-var A = Object.assign($, {
+var aberdeen_default = Object.assign(A, {
   clean,
   clone,
   copy,
@@ -1750,7 +1830,6 @@ var A = Object.assign($, {
   unmountAll,
   unproxy
 });
-var aberdeen_default = A;
 export {
   withEmitHandler,
   unproxy,
@@ -1786,8 +1865,8 @@ export {
   NO_COPY,
   MAP_SIZE_SYMBOL,
   EMPTY,
-  $
+  A
 };
 
-//# debugId=76C7E168F21928F864756E2164756E21
+//# debugId=3BD6C02AE5C4634B64756E2164756E21
 //# sourceMappingURL=aberdeen.js.map