mtrl-addons 0.2.1 → 0.2.2

package/src/core/viewport/features/rendering.ts

@@ -17,7 +17,7 @@ import { createLayout } from "../../layout";
 export interface RenderingConfig {
   template?: (
     item: any,
-    index: number
+    index: number,
   ) => string | HTMLElement | any[] | Record<string, any>;
   overscan?: number;
   measureItems?: boolean;
@@ -52,11 +52,18 @@ export const withRendering = (config: RenderingConfig = {}) => {
     const renderedElements = new Map<number, HTMLElement>();
     const collectionItems: Record<number, any> = {};
     const elementPool: HTMLElement[] = [];
-    const poolStats = { created: 0, recycled: 0, poolSize: 0 };
+    const poolStats = { created: 0, recycled: 0, poolSize: 0, released: 0 };
+
+    // Store layout results for proper cleanup (prevents memory leak)
+    const layoutResults = new WeakMap<HTMLElement, { destroy: () => void }>();
+
+    // Reusable template element for HTML string parsing (more efficient than div)
+    const templateParser = document.createElement("template");
 
     let viewportState: ViewportState | null = null;
     let currentVisibleRange = { start: 0, end: 0 };
     let lastRenderTime = 0;
+    let isRemovingItem = false;
 
     // Element pool management
     const getPooledElement = (): HTMLElement => {
@@ -71,30 +78,309 @@ export const withRendering = (config: RenderingConfig = {}) => {
     };
 
     const releaseElement = (element: HTMLElement): void => {
+      poolStats.released++;
+
+      // CRITICAL: Call destroy on layoutResult to clean up components and event listeners
+      // This fixes the memory leak when using layout templates
+      const layoutResult = layoutResults.get(element);
+      if (layoutResult && typeof layoutResult.destroy === "function") {
+        try {
+          layoutResult.destroy();
+        } catch (e) {
+          // Ignore destroy errors - element may already be cleaned up
+        }
+        layoutResults.delete(element);
+      }
+
       if (!enableRecycling) {
         element.remove();
         return;
       }
-      // Clean and clone for reuse
+      // Clean element for reuse (no cloning - reuse the actual element)
       element.className = "mtrl-viewport-item";
       element.removeAttribute("data-index");
       element.style.cssText = "";
       element.innerHTML = "";
-      const cleanElement = element.cloneNode(false) as HTMLElement;
 
+      // Remove from DOM first
+      if (element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+
+      // Add to pool if not full
       if (elementPool.length < maxPoolSize) {
-        elementPool.push(cleanElement);
+        elementPool.push(element);
         poolStats.poolSize = elementPool.length;
       }
-      element.remove();
+      // If pool is full, element is just dereferenced and GC'd
     };
 
     // Initialize
     wrapInitialize(component, () => {
       viewportState = getViewportState(component) as ViewportState;
 
+      // Set initial items container height from current virtual size
+      if (viewportState?.itemsContainer && viewportState.virtualTotalSize > 0) {
+        viewportState.itemsContainer.style.height = `${viewportState.virtualTotalSize}px`;
+      }
+
+      // Listen for item update requests from API
+      component.on?.("item:update-request", (data: any) => {
+        const { index, item, previousItem } = data;
+
+        // Update the item in collectionItems
+        collectionItems[index] = item;
+
+        // Check if this item is currently rendered
+        const existingElement = renderedElements.get(index);
+        const wasVisible = !!existingElement;
+
+        // Check if item was selected before update
+        const wasSelected = existingElement
+          ? hasClass(
+              existingElement,
+              VIEWPORT_CONSTANTS.SELECTION.SELECTED_CLASS,
+            ) || hasClass(existingElement, "mtrl-viewport-item--selected")
+          : false;
+
+        if (existingElement && existingElement.parentNode) {
+          // Re-render the item
+          const newElement = renderItem(item, index);
+
+          if (newElement) {
+            // Copy position styles from existing element
+            Object.assign(newElement.style, {
+              position: existingElement.style.position,
+              transform: existingElement.style.transform,
+              width: existingElement.style.width,
+            });
+
+            // Preserve selected state
+            if (wasSelected) {
+              addClass(newElement, VIEWPORT_CONSTANTS.SELECTION.SELECTED_CLASS);
+              addClass(newElement, "mtrl-viewport-item--selected");
+            }
+
+            // Add update animation class to inner content for visibility
+            addClass(newElement, "viewport-item--updated");
+            // Also try to add to first child if it exists (the actual item content)
+            const innerItem = newElement.firstElementChild as HTMLElement;
+            if (innerItem) {
+              addClass(innerItem, "item--updated");
+            }
+
+            // Replace in DOM
+            existingElement.parentNode.replaceChild(
+              newElement,
+              existingElement,
+            );
+            renderedElements.set(index, newElement);
+            releaseElement(existingElement);
+
+            // Remove the animation class after transition
+            setTimeout(() => {
+              removeClass(newElement, "viewport-item--updated");
+              if (innerItem) {
+                removeClass(innerItem, "item--updated");
+              }
+            }, 500);
+          }
+        }
+
+        // Emit completion event
+        component.emit?.("item:updated", {
+          item,
+          index,
+          previousItem,
+          wasVisible,
+          wasSelected,
+        });
+      });
+
+      // Listen for item remove requests from API
+      component.on?.("item:remove-request", (data: any) => {
+        const { index, item } = data;
+        isRemovingItem = true;
+
+        // console.log(
+        //   `[RENDER-FIX] ========== ITEM REMOVE START (v4) ==========`,
+        // );
+        // console.log(`[RENDER-FIX] Removing index: ${index}`);
+
+        // Get the source of truth - collection.items has already been spliced by api.ts
+        const collectionItemsSource =
+          (component as any).collection?.items ||
+          (component as any).items ||
+          [];
+
+        // console.log(
+        //   `[RENDER-FIX] collectionItemsSource.length: ${collectionItemsSource.length}`,
+        // );
+        // console.log(
+        //   `[RENDER-FIX] collectionItems cache size BEFORE: ${Object.keys(collectionItems).length}`,
+        // );
+
+        // Strategy: Shift collectionItems cache indices down, but use actual data
+        // from collection.items (which has been spliced) for the loaded range.
+        // For indices beyond the loaded range, shift the cached data.
+
+        const keys = Object.keys(collectionItems)
+          .map(Number)
+          .filter((k) => !isNaN(k))
+          .sort((a, b) => a - b);
+
+        // Delete the removed index
+        delete collectionItems[index];
+
+        // Shift all indices after the removed one down by 1
+        // For indices within the loaded range, use data from collection.items
+        // For indices beyond, shift the existing cached data
+        const loadedLength = collectionItemsSource.length;
+
+        for (const key of keys) {
+          if (key > index) {
+            const newIndex = key - 1;
+            // If newIndex is within loaded data, use source; otherwise shift cache
+            if (newIndex < loadedLength && collectionItemsSource[newIndex]) {
+              collectionItems[newIndex] = collectionItemsSource[newIndex];
+            } else {
+              // Shift cached data for indices beyond loaded range
+              collectionItems[newIndex] = collectionItems[key];
+            }
+            delete collectionItems[key];
+          }
+        }
+
+        const finalKeys = Object.keys(collectionItems)
+          .map(Number)
+          .filter((k) => !isNaN(k))
+          .sort((a, b) => a - b);
+        // console.log(
+        //   `[RENDER-FIX] collectionItems cache size AFTER: ${finalKeys.length}`,
+        // );
+        // console.log(
+        //   `[RENDER-FIX] collectionItems keys: [${finalKeys.slice(0, 10).join(", ")}${finalKeys.length > 10 ? "..." : ""}]`,
+        // );
+        // console.log(
+        //   `[RENDER-FIX] viewportState.totalItems: ${viewportState?.totalItems}`,
+        // );
+        // console.log(
+        //   `[RENDER-FIX] viewportState.visibleRange: ${JSON.stringify(viewportState?.visibleRange)}`,
+        // );
+
+        // Check for any undefined/null values in first 30 items
+        const badIndices: number[] = [];
+        for (let i = 0; i < Math.min(30, finalKeys.length); i++) {
+          const k = finalKeys[i];
+          if (!collectionItems[k] || collectionItems[k]._placeholder) {
+            badIndices.push(k);
+          }
+        }
+
+        // Remove the rendered element at this index
+        const existingElement = renderedElements.get(index);
+        if (existingElement && existingElement.parentNode) {
+          releaseElement(existingElement);
+        }
+        renderedElements.delete(index);
+
+        // Shift rendered elements indices down
+        const renderedKeys = Array.from(renderedElements.keys()).sort(
+          (a, b) => a - b,
+        );
+        const newRenderedElements = new Map<number, HTMLElement>();
+        for (const key of renderedKeys) {
+          if (key > index) {
+            const element = renderedElements.get(key);
+            if (element) {
+              // Update data-index attribute
+              element.dataset.index = String(key - 1);
+              newRenderedElements.set(key - 1, element);
+            }
+          } else if (key < index) {
+            const element = renderedElements.get(key);
+            if (element) {
+              newRenderedElements.set(key, element);
+            }
+          }
+        }
+        renderedElements.clear();
+        for (const [key, element] of newRenderedElements) {
+          renderedElements.set(key, element);
+        }
+
+        // Decrement totalItems NOW so renderItems() uses the correct count
+        // setTotalItems() will be called later by the API, which will emit
+        // viewport:total-items-changed for virtual size recalculation
+        if (viewportState && viewportState.totalItems > 0) {
+          viewportState.totalItems--;
+        }
+
+        // Reset visible range to force re-render
+        currentVisibleRange = { start: -1, end: -1 };
+
+        // Emit completion event
+        component.emit?.("item:removed", {
+          item,
+          index,
+        });
+
+        // After item removal, clear ALL loadedRanges and collectionItems cache
+        // This forces a complete reload which is more reliable than trying to
+        // track shifted indices. The items array has been spliced and all indices
+        // are now different from what loadedRanges thinks they are.
+        const collection = (component.viewport as any)?.collection;
+        if (collection?.getLoadedRanges) {
+          const loadedRanges = collection.getLoadedRanges();
+          loadedRanges.clear();
+        }
+
+        // Clear the entire collectionItems cache - it's all stale after removal
+        // Keep only the items we actually have in the source array
+        const loadedItemsCount = collectionItemsSource.length;
+        const cacheKeys = Object.keys(collectionItems)
+          .map(Number)
+          .filter((k) => !isNaN(k));
+        cacheKeys.forEach((key) => {
+          if (key >= loadedItemsCount) {
+            delete collectionItems[key];
+          }
+        });
+
+        // Trigger reload of visible range
+        const visibleRange = component.viewport?.getVisibleRange?.();
+        if (visibleRange && collection?.loadMissingRanges) {
+          collection.loadMissingRanges(
+            { start: 0, end: Math.max(visibleRange.end, loadedItemsCount) },
+            "item-removal",
+          );
+        }
+
+        // Trigger re-render
+        renderItems();
+        isRemovingItem = false;
+      });
+
+      // Listen for collection items evicted - clean up our cache too
+      component.on?.("collection:items-evicted", (data: any) => {
+        const { keepStart, keepEnd, evictedCount } = data;
+        let cleanedCount = 0;
+
+        // Remove evicted items from our cache
+        for (const key in collectionItems) {
+          const index = parseInt(key, 10);
+          if (index < keepStart || index > keepEnd) {
+            delete collectionItems[index];
+            cleanedCount++;
+          }
+        }
+      });
+
       // Listen for collection data loaded
       component.on?.("collection:range-loaded", (data: any) => {
+        // console.log(
+        //   `[RENDER-FIX] collection:range-loaded - offset: ${data.offset}, items: ${data.items?.length}`,
+        // );
         if (!data.items?.length) return;
 
         // Analyze data structure on first load
@@ -104,23 +390,34 @@ export const withRendering = (config: RenderingConfig = {}) => {
         }
 
         // Update collection items and replace placeholders
+        // console.log(
+        //   `[RENDER-FIX] Updating collectionItems for indices ${data.offset} to ${data.offset + data.items.length - 1}`,
+        // );
+        let replacedCount = 0;
+        let skippedCount = 0;
         data.items.forEach((item: any, i: number) => {
           const index = data.offset + i;
           const oldItem = collectionItems[index];
           collectionItems[index] = item;
 
           // Replace placeholder in DOM if needed
-          if (
-            oldItem &&
-            isPlaceholder(oldItem) &&
-            renderedElements.has(index)
-          ) {
+          const wasPlaceholder = oldItem && isPlaceholder(oldItem);
+          const hasElement = renderedElements.has(index);
+          if (wasPlaceholder && hasElement) {
+            replacedCount++;
             const element = renderedElements.get(index);
             if (element) {
               const newElement = renderItem(item, index);
               if (newElement) {
-                // Remove placeholder classes
+                // Remove placeholder classes from wrapper
                 removeClass(newElement, VIEWPORT_CONSTANTS.PLACEHOLDER.CLASS);
+                // Also remove from inner element (for string templates)
+                if (newElement.firstElementChild) {
+                  removeClass(
+                    newElement.firstElementChild as HTMLElement,
+                    VIEWPORT_CONSTANTS.PLACEHOLDER.CLASS,
+                  );
+                }
 
                 // Add replaced class for fade-in animation
                 addClass(newElement, "viewport-item--replaced");
@@ -139,10 +436,21 @@ export const withRendering = (config: RenderingConfig = {}) => {
                 setTimeout(() => {
                   removeClass(newElement, "viewport-item--replaced");
                 }, 300);
+              } else {
+                // renderItem returned null - still release the old element
+                releaseElement(element);
+                renderedElements.delete(index);
               }
             }
+          } else if (wasPlaceholder && !hasElement) {
+            skippedCount++;
           }
         });
+        // if (replacedCount > 0 || skippedCount > 0) {
+        //   console.log(
+        //     `[RENDER-FIX] Placeholder replacement: ${replacedCount} replaced, ${skippedCount} skipped (not rendered)`,
+        //   );
+        // }
 
         // Check if we need to render
         const { visibleRange } = viewportState || {};
@@ -150,7 +458,7 @@ export const withRendering = (config: RenderingConfig = {}) => {
           const renderStart = Math.max(0, visibleRange.start - overscan);
           const renderEnd = Math.min(
             viewportState?.totalItems ?? 0 - 1,
-            visibleRange.end + overscan
+            visibleRange.end + overscan,
           );
           const loadedStart = data.offset;
           const loadedEnd = data.offset + data.items.length - 1;
@@ -158,7 +466,7 @@ export const withRendering = (config: RenderingConfig = {}) => {
           // Check for placeholders in range
           const hasPlaceholdersInRange = Array.from(
             { length: Math.min(loadedEnd, renderEnd) - loadedStart + 1 },
-            (_, i) => collectionItems[loadedStart + i]
+            (_, i) => collectionItems[loadedStart + i],
           ).some((item) => item && isPlaceholder(item));
 
           const needsRender =
@@ -174,6 +482,16 @@ export const withRendering = (config: RenderingConfig = {}) => {
       // Listen for events
       component.on?.("viewport:range-changed", renderItems);
       component.on?.("viewport:scroll", updateItemPositions);
+
+      // Update items container height when virtual size changes
+      component.on?.("viewport:virtual-size-changed", (data: any) => {
+        if (
+          viewportState?.itemsContainer &&
+          data.totalVirtualSize !== undefined
+        ) {
+          viewportState.itemsContainer.style.height = `${data.totalVirtualSize}px`;
+        }
+      });
     });
 
     // Template helpers
@@ -195,7 +513,7 @@ export const withRendering = (config: RenderingConfig = {}) => {
     const processLayoutSchema = (
       schema: any,
       item: any,
-      index: number
+      index: number,
     ): any => {
       if (typeof schema === "string") {
         // Handle variable substitution like {{name}}, {{index}}
@@ -234,12 +552,21 @@ export const withRendering = (config: RenderingConfig = {}) => {
       totalItems: number,
       itemSize: number,
       virtualTotalSize: number,
-      containerSize: number
+      containerSize: number,
+      targetScrollIndex?: number,
     ): number => {
       const actualTotalSize = totalItems * itemSize;
       const isCompressed =
         actualTotalSize > virtualTotalSize && virtualTotalSize > 0;
 
+      // If we have a targetScrollIndex (from initialScrollIndex), use it directly
+      // This ensures items are positioned correctly even with compression
+      if (targetScrollIndex !== undefined && targetScrollIndex > 0) {
+        // Position items relative to the target index
+        // The target index should appear at the top of the viewport
+        return (index - targetScrollIndex) * itemSize;
+      }
+
       if (!isCompressed || totalItems === 0) {
         return index * itemSize - scrollPosition;
       }
@@ -260,7 +587,7 @@ export const withRendering = (config: RenderingConfig = {}) => {
         const exactScrollIndex = scrollRatio * totalItems;
         const interpolation = Math.max(
           0,
-          Math.min(1, 1 - distanceFromBottom / nearBottomThreshold)
+          Math.min(1, 1 - distanceFromBottom / nearBottomThreshold),
         );
 
         const bottomPosition = (index - firstVisibleAtBottom) * itemSize;
@@ -300,18 +627,37 @@ export const withRendering = (config: RenderingConfig = {}) => {
           // If the layout created a wrapper, use it directly
           if (element && element.nodeType === 1) {
             // Element is already created by layout system
+            // Store layoutResult for cleanup when element is released (prevents memory leak)
+            layoutResults.set(element, layoutResult);
           } else {
             // Fallback if layout didn't create a proper element
             element = getPooledElement();
             if (layoutResult.element) {
               element.appendChild(layoutResult.element);
+              // Store layoutResult on wrapper element for cleanup
+              layoutResults.set(element, layoutResult);
             }
           }
         } else if (typeof result === "string") {
-          element = getPooledElement();
-          element.innerHTML = result;
-          if (element.children.length === 1) {
-            addClass(element.firstElementChild as HTMLElement, "viewport-item");
+          // Parse HTML using template element - optimized path
+          // Move nodes directly instead of cloning - much faster, no memory overhead
+          templateParser.innerHTML = result;
+          const content = templateParser.content;
+
+          if (content.children.length === 1) {
+            // Single root element - move directly (faster than cloneNode)
+            element = content.firstElementChild as HTMLElement;
+            content.removeChild(element);
+            addClass(element, "mtrl-viewport-item");
+            if (isPlaceholder(item)) {
+              addClass(element, VIEWPORT_CONSTANTS.PLACEHOLDER.CLASS);
+            }
+          } else {
+            // Multiple children - move all into pooled element
+            element = getPooledElement();
+            while (content.firstChild) {
+              element.appendChild(content.firstChild);
+            }
           }
         } else if (result instanceof HTMLElement) {
           element = getPooledElement();
@@ -352,7 +698,7 @@ export const withRendering = (config: RenderingConfig = {}) => {
         actualTotalSize > virtualTotalSize && virtualTotalSize > 0;
 
       const sortedIndices = Array.from(renderedElements.keys()).sort(
-        (a, b) => a - b
+        (a, b) => a - b,
       );
       if (!sortedIndices.length) return;
 
@@ -371,7 +717,7 @@ export const withRendering = (config: RenderingConfig = {}) => {
           const exactScrollIndex = scrollRatio * totalItems;
           const interpolation = Math.max(
             0,
-            Math.min(1, 1 - distanceFromBottom / containerSize)
+            Math.min(1, 1 - distanceFromBottom / containerSize),
           );
 
           const bottomPos = (firstIndex - firstVisibleAtBottom) * itemSize;
@@ -390,7 +736,7 @@ export const withRendering = (config: RenderingConfig = {}) => {
         const element = renderedElements.get(index);
         if (element) {
           element.style.transform = `translateY(${Math.round(
-            currentPosition
+            currentPosition,
           )}px)`;
 
           // Strategic log for last items
@@ -409,7 +755,9 @@ export const withRendering = (config: RenderingConfig = {}) => {
 
     // Main render function
     const renderItems = () => {
-      if (!viewportState?.itemsContainer) return;
+      if (!viewportState?.itemsContainer) {
+        return;
+      }
 
       const {
         visibleRange,
@@ -421,15 +769,24 @@ export const withRendering = (config: RenderingConfig = {}) => {
         virtualTotalSize,
       } = viewportState;
 
-      // Validate range
+      // Validate range - skip rendering if no items or range is invalid
       if (
         !visibleRange ||
+        totalItems <= 0 ||
         visibleRange.start < 0 ||
         visibleRange.start >= totalItems ||
         visibleRange.end < visibleRange.start ||
         isNaN(visibleRange.start) ||
         isNaN(visibleRange.end)
       ) {
+        // If totalItems is 0, clear all rendered elements to remove stale placeholders
+        if (totalItems <= 0 && renderedElements.size > 0) {
+          Array.from(renderedElements.entries()).forEach(([index, element]) => {
+            if (element.parentNode) releaseElement(element);
+            renderedElements.delete(index);
+          });
+          currentVisibleRange = { start: -1, end: -1 };
+        }
         return;
       }
 
@@ -447,6 +804,15 @@ export const withRendering = (config: RenderingConfig = {}) => {
       const renderStart = Math.max(0, visibleRange.start - overscan);
       const renderEnd = Math.min(totalItems - 1, visibleRange.end + overscan);
 
+      // if (isRemovingItem) {
+      //   console.log(
+      //     `[RENDER-FIX] renderItems calc: visibleRange=${JSON.stringify(visibleRange)}, overscan=${overscan}, totalItems=${totalItems}`,
+      //   );
+      //   console.log(
+      //     `[RENDER-FIX] renderItems calc: renderStart=${renderStart}, renderEnd=${renderEnd}`,
+      //   );
+      // }
+
       // Remove items outside range
       Array.from(renderedElements.entries())
         .filter(([index]) => index < renderStart || index > renderEnd)
@@ -468,6 +834,8 @@ export const withRendering = (config: RenderingConfig = {}) => {
 
         let item = items[i];
         if (!item) {
+          // Only log during removal to avoid spam during scroll
+
           missingItems.push(i);
           // Generate placeholder
           const placeholders = (component as any).placeholders;
@@ -485,13 +853,16 @@ export const withRendering = (config: RenderingConfig = {}) => {
 
         const element = renderItem(item, i);
         if (element) {
+          // Get targetScrollIndex from viewportState if available
+          const targetScrollIndex = (viewportState as any)?.targetScrollIndex;
           const position = calculateItemPosition(
             i,
             scrollPosition,
             totalItems,
             itemSize,
             virtualTotalSize,
-            containerSize
+            containerSize,
+            targetScrollIndex,
           );
 
           Object.assign(element.style, {
@@ -515,12 +886,17 @@ export const withRendering = (config: RenderingConfig = {}) => {
             start: Math.min(...missingItems),
             end: Math.max(...missingItems),
           },
-          "rendering:missing-items"
+          "rendering:missing-items",
         );
       }
 
       currentVisibleRange = visibleRange;
 
+      // Log DOM stats periodically (every 10 renders)
+      if (poolStats.created % 50 === 0 && poolStats.created > 0) {
+        logDOMStats(`render:${poolStats.created}`);
+      }
+
       // Emit items rendered event with elements for size calculation
       const renderedElementsArray = Array.from(renderedElements.values());
       component.emit?.("viewport:items-rendered", {
@@ -542,7 +918,7 @@ export const withRendering = (config: RenderingConfig = {}) => {
       ) {
         component.viewport.collection.loadMissingRanges(
           visibleRange,
-          "rendering:no-items"
+          "rendering:no-items",
         );
       }
     };
@@ -556,11 +932,29 @@ export const withRendering = (config: RenderingConfig = {}) => {
 
     // Cleanup
     wrapDestroy(component, () => {
+      // Release all rendered elements - use releaseElement to properly destroy layoutResults
       renderedElements.forEach((element) => {
-        if (element.parentNode) releaseElement(element);
+        releaseElement(element);
       });
       renderedElements.clear();
+
+      // Clear element pool
       elementPool.length = 0;
+
+      // Clear collection items cache - this is critical for memory!
+      for (const key in collectionItems) {
+        delete collectionItems[key];
+      }
+
+      // Reset state
+      currentVisibleRange = { start: -1, end: -1 };
+      viewportState = null;
+      lastRenderTime = 0;
+
+      // Reset pool stats
+      poolStats.created = 0;
+      poolStats.recycled = 0;
+      poolStats.poolSize = 0;
     });
 
     return component;