@alloy-js/core 0.22.0-dev.0 → 0.22.0-dev.3

package/src/utils.tsx

@@ -1,9 +1,11 @@
-import { toRaw } from "@vue/reactivity";
+import { ref, Ref, toRaw } from "@vue/reactivity";
 import { BaseListProps } from "./components/List.jsx";
 import {
   createCustomContext,
   CustomContext,
   Disposable,
+  effect,
+  getContext,
   memo,
   onCleanup,
   root,
@@ -92,16 +94,173 @@ export function mapJoin<T, U, V>(
   cb: (key: T, valueOrIndex: U | number, index: number) => V,
   rawOptions: JoinOptions = {},
 ): () => Children {
+  /**
+   * Strategy overview:
+   * - Initial render: collect a stable array of mapper outputs, cache
+   *   per-index slot metadata, and create joiner `Ref`s for the gaps between
+   *   items so the rendered list can be mutated without recreating siblings.
+   * - List mutations: diff the incoming iterable against slot metadata, reuse
+   *   entries with matching keys, recycle disposers past the change point, and
+   *   prune caches while recalculating first/last non-empty indices so we only
+   *   edit joiners that are affected by the change.
+   * - Content transitions: each child renders inside a custom context that
+   *   exposes an `isEmpty` flag; when a child gains or loses content we update
+   *   neighbor joiner refs so separators appear and disappear reactively
+   *   without re-running the mapper.
+   */
   const options = { ...defaultJoinOptions, ...rawOptions };
   const ender =
     options.ender === true ? options.joiner : options.ender || undefined;
-  const currentItems: (T | [T, U])[] = [];
-  const disposables: Disposable[] = [];
+  type MapJoinItem = T | [T, U];
+  interface MapJoinSlot {
+    item?: MapJoinItem;
+    disposer?: Disposable;
+    joiner?: Ref<Children | undefined>;
+    isEmpty: Ref<boolean>;
+  }
+  const itemSlots: MapJoinSlot[] = [];
+
+  function getOrCreateSlot(index: number): MapJoinSlot {
+    let slot = itemSlots[index];
+    if (!slot) {
+      slot = { isEmpty: ref(true) };
+      itemSlots[index] = slot;
+    }
+    return slot;
+  }
+  const firstNonEmptyIndex = ref(-1);
+  const lastNonEmptyIndex = ref(-1);
   const mapped: Children[] = [];
+  let enderMemo: (() => Children) | undefined;
+
+  // Creates a ref placeholder that stores the joiner node for a boundary.
+  function createJoinerRef(): Ref<Children | undefined> {
+    return ref<unknown>(undefined) as Ref<Children | undefined>;
+  }
+
+  // Makes sure we have a joiner ref at the requested boundary index.
+  function ensureJoinerSlot(index: number) {
+    if (index === 0 || options.joiner === undefined) {
+      return;
+    }
+
+    const slot = getOrCreateSlot(index);
+    slot.joiner ??= createJoinerRef();
+    mapped[index * 2 - 1] = slot.joiner!;
+  }
+
+  // Sets the joiner ref based on whether neighboring children have content.
+  function updateJoinerForIndex(index: number) {
+    if (index === 0 || options.joiner === undefined) {
+      return;
+    }
+
+    const slot = itemSlots[index];
+    const joinerRef = slot?.joiner;
+    if (!joinerRef) {
+      return;
+    }
+
+    if (index >= itemSlots.length) {
+      if (joinerRef.value !== undefined) {
+        joinerRef.value = undefined;
+      }
+      return;
+    }
+
+    const previousNonEmpty = findPrevNonEmpty(index - 1);
+    const rightSlot = itemSlots[index];
+    const shouldShow =
+      previousNonEmpty !== -1 &&
+      rightSlot !== undefined &&
+      rightSlot.isEmpty.value === false;
+
+    const newValue = shouldShow ? options.joiner : undefined;
+    if (joinerRef.value !== newValue) {
+      joinerRef.value = newValue;
+    }
+  }
+
+  // Finds the next child that is not empty starting at or after `from`.
+  function findNextNonEmpty(from: number) {
+    for (let i = Math.max(from, 0); i < itemSlots.length; i++) {
+      const slot = itemSlots[i];
+      if (slot && slot.isEmpty.value === false) {
+        return i;
+      }
+    }
+    return -1;
+  }
+
+  // Finds the previous child that is not empty before or at `from`.
+  function findPrevNonEmpty(from: number) {
+    for (let i = Math.min(from, itemSlots.length - 1); i >= 0; i--) {
+      const slot = itemSlots[i];
+      if (slot && slot.isEmpty.value === false) {
+        return i;
+      }
+    }
+    return -1;
+  }
+
+  // Recomputes the cached first and last non-empty indices after changes.
+  function recalculateNonEmptyBounds() {
+    const first = findNextNonEmpty(0);
+    firstNonEmptyIndex.value = first;
+    lastNonEmptyIndex.value =
+      first === -1 ? -1 : findPrevNonEmpty(itemSlots.length - 1);
+    refreshJoiners();
+  }
+
+  // Syncs all joiner refs after the structural shape of the list updates.
+  function refreshJoiners() {
+    if (options.joiner === undefined) {
+      return;
+    }
+
+    for (let i = 1; i < itemSlots.length; i++) {
+      const slot = itemSlots[i];
+      if (slot?.joiner) {
+        updateJoinerForIndex(i);
+      }
+    }
+  }
+
+  // Applies empty-state bookkeeping for an item and updates neighbor joiners.
+  function applyEmptyStateChange(
+    index: number,
+    isEmpty: boolean,
+    wasEmpty: boolean,
+  ) {
+    if (wasEmpty === isEmpty) {
+      return;
+    }
+
+    if (isEmpty) {
+      if (firstNonEmptyIndex.value === index) {
+        firstNonEmptyIndex.value = findNextNonEmpty(index + 1);
+      }
+      if (lastNonEmptyIndex.value === index) {
+        lastNonEmptyIndex.value = findPrevNonEmpty(index - 1);
+      }
+    } else {
+      if (firstNonEmptyIndex.value === -1 || index < firstNonEmptyIndex.value) {
+        firstNonEmptyIndex.value = index;
+      }
+      if (index > lastNonEmptyIndex.value) {
+        lastNonEmptyIndex.value = index;
+      }
+    }
+
+    updateJoinerForIndex(index);
+    updateJoinerForIndex(index + 1);
+  }
   let previousItemsLen = 0;
 
   onCleanup(() => {
-    for (const d of disposables) d();
+    for (const slot of itemSlots) {
+      slot.disposer?.();
+    }
   });
 
   return () => {
@@ -117,6 +276,11 @@ export function mapJoin<T, U, V>(
           item !== null && item !== undefined && typeof item !== "boolean",
       );
     }
+
+    const context = getContext();
+    if (context) {
+      context.isEmpty ??= ref(true);
+    }
     // this is important to access here in reactive context so we are
     // notified of new items from reactives.
     const itemsLen = items.length;
@@ -127,55 +291,110 @@ export function mapJoin<T, U, V>(
       let startIndex = 0;
       for (
         ;
-        startIndex < itemsLen && startIndex < currentItems.length;
+        startIndex < itemsLen && startIndex < itemSlots.length;
         startIndex++
       ) {
-        if (!compare(items[startIndex], currentItems[startIndex])) {
+        const slot = itemSlots[startIndex];
+        if (!slot || !compare(items[startIndex], slot.item as any)) {
           break;
         }
       }
 
       if (startIndex > 0 && startIndex < itemsLen) {
         // need to update the previous joiner (might be ender or absent)
-        mapped[startIndex * 2 - 1] = options.joiner;
+        ensureJoinerSlot(startIndex);
       }
 
       for (; startIndex < itemsLen; startIndex++) {
-        currentItems[startIndex] = items[startIndex];
-        if (disposables[startIndex]) {
-          disposables[startIndex]();
+        const slot = getOrCreateSlot(startIndex);
+        slot.item = items[startIndex];
+        const emptyFlag = slot.isEmpty;
+
+        if (slot.disposer) {
+          if (emptyFlag.value === false) {
+            if (context) {
+              context.childrenWithContent--;
+            }
+            emptyFlag.value = true;
+            applyEmptyStateChange(startIndex, true, false);
+          }
+          slot.disposer();
         }
+
         const cleanupIndex = startIndex;
+
         mapped[startIndex * 2] = createCustomContext((cb) => {
           return root((disposer) => {
-            disposables[cleanupIndex] = disposer;
+            const nestedContext = getContext()!;
+            const isEmptyFlag = nestedContext.isEmpty!;
+
+            slot.disposer = disposer;
             disposer();
+            effect((prev?: boolean) => {
+              const isEmpty = isEmptyFlag.value;
+              return untrack(() => {
+                if (slot.isEmpty.value !== isEmpty) {
+                  slot.isEmpty.value = isEmpty;
+                }
+                const wasEmpty = prev ?? true;
+
+                applyEmptyStateChange(cleanupIndex, isEmpty, wasEmpty);
+
+                return isEmpty;
+              });
+            });
             cb(mapper(items[cleanupIndex], cleanupIndex));
           });
         });
 
-        mapped[startIndex * 2 + 1] =
-          startIndex < items.length - 1 ? options.joiner : ender;
+        ensureJoinerSlot(startIndex);
       }
 
       mapped.length = startIndex * 2;
-      mapped[mapped.length - 1] = ender;
+      if (mapped.length > 0) {
+        if (ender !== undefined) {
+          enderMemo ??= memo(() =>
+            lastNonEmptyIndex.value === -1 ? undefined : ender,
+          );
+          mapped[mapped.length - 1] = enderMemo;
+        } else {
+          mapped[mapped.length - 1] = undefined;
+        }
+      }
       for (; startIndex < previousItemsLen; startIndex++) {
-        disposables[startIndex]?.();
+        const slot = itemSlots[startIndex];
+        if (!slot) {
+          continue;
+        }
+
+        slot.disposer?.();
+        if (slot.isEmpty.value === false) {
+          if (context) {
+            context.childrenWithContent--;
+          }
+          slot.isEmpty.value = true;
+          applyEmptyStateChange(startIndex, true, false);
+        }
       }
 
-      previousItemsLen = itemsLen;
+      if (previousItemsLen !== itemsLen) {
+        itemSlots.length = itemsLen;
+        recalculateNonEmptyBounds();
+      }
 
+      previousItemsLen = itemsLen;
       return mapped;
     });
   };
 
+  // Chooses the equality function based on the collection type in use.
   function getCompareFunction(itemsSource: Map<T, U> | T[] | Iterable<T>) {
     return Array.isArray(itemsSource) || isIterable(itemsSource) ?
         compareArray
       : compareMap;
   }
 
+  // Selects the mapper signature to match the collection type in use.
   function getMapperFunction(itemsSource: Map<T, U> | T[] | Iterable<T>) {
     return (
         Array.isArray(itemsSource) ||
@@ -185,22 +404,27 @@ export function mapJoin<T, U, V>(
         mapArray
       : mapMap;
   }
+  // Strict equality check for array-like collections.
   function compareArray(elem1: T, elem2: T) {
     return elem1 === elem2;
   }
 
+  // Equality check for map entries that includes key and value.
   function compareMap(record1: [T, U], record2: [T, U]) {
     return record1[0] === record2[0] && record1[1] === record2[1];
   }
 
+  // Invokes the user mapper for array-like collections.
   function mapArray(item: T, index: number) {
     return (cb as any)(item, index);
   }
 
+  // Invokes the user mapper for map collections.
   function mapMap(item: [T, U], index: number) {
     return cb(item[0], item[1], index);
   }
 
+  // Runtime type guard for iterables returned from custom sources.
   function isIterable<T>(x: unknown): x is Iterable<T> {
     return typeof (x as any).next === "function";
   }