@adobe-commerce/elsie 1.5.1-alpha003 → 1.6.0-alpha1

package/src/lib/slot.tsx

@@ -2,30 +2,35 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
-import { cloneElement, ComponentChildren, RefObject, VNode, createElement } from 'preact';
+import { IntlContext, Lang } from '@adobe-commerce/elsie/i18n';
+import {
+  cloneElement,
+  ComponentChildren,
+  createElement,
+  RefObject,
+  VNode,
+} from 'preact';
+import { Children, HTMLAttributes, isValidElement } from 'preact/compat';
 import {
   StateUpdater,
+  useCallback,
   useContext,
-  useState,
-  useRef,
   useEffect,
   useMemo,
-  useCallback,
+  useRef,
+  useState,
 } from 'preact/hooks';
-import { IntlContext, Lang } from '@adobe-commerce/elsie/i18n';
-import { HTMLAttributes } from 'preact/compat';
 import { SlotQueueContext } from './render';
 
 import '@adobe-commerce/elsie/components/UIProvider/debugger.css';
 
 type MutateElement = (elem: HTMLElement) => void;
 
-
 interface State {
   get: (key: string) => void;
   set: (key: string, value: any) => void;
@@ -36,6 +41,7 @@ interface SlotElement {
   prependChild: MutateElement;
   appendSibling: MutateElement;
   prependSibling: MutateElement;
+  remove: () => void;
 }
 
 interface PrivateContext<T> {
@@ -55,6 +61,7 @@ interface DefaultSlotContext<T> extends PrivateContext<T> {
   prependChild: MutateElement;
   appendSibling: MutateElement;
   prependSibling: MutateElement;
+  remove: () => void;
   onRender: (cb: (next: T & DefaultSlotContext<T>) => void) => void;
   onChange: (cb: (next: T & DefaultSlotContext<T>) => void) => void;
 }
@@ -80,7 +87,7 @@ export function useSlot<K, V extends HTMLElement>(
   render?: Function,
   // eslint-disable-next-line no-undef
   contentTag: keyof HTMLElementTagNameMap = 'div'
-): [RefObject<V>, Record<string, any>] {
+): [RefObject<V>, Record<string, any>, 'loading' | 'pending' | 'ready'] {
   const slotsQueue = useContext(SlotQueueContext);
 
   // HTML Element
@@ -149,18 +156,21 @@ export function useSlot<K, V extends HTMLElement>(
   // @ts-ignore
   context._registerMethod = _registerMethod;
 
-  const _htmlElementToVNode = useCallback((elem: HTMLElement) => {
-    return createElement(
-      contentTag,
-      {
-        'data-slot-html-element': elem.tagName.toLowerCase(),
-        ref: (refElem: HTMLElement | null): void => {
-          refElem?.appendChild(elem);
-        }
-      },
-      null
-    );
-  }, [contentTag]);
+  const _htmlElementToVNode = useCallback(
+    (elem: HTMLElement) => {
+      return createElement(
+        contentTag,
+        {
+          'data-slot-html-element': elem.tagName.toLowerCase(),
+          ref: (refElem: HTMLElement | null): void => {
+            refElem?.appendChild(elem);
+          },
+        },
+        null
+      );
+    },
+    [contentTag]
+  );
 
   // @ts-ignore
   context._htmlElementToVNode = _htmlElementToVNode;
@@ -199,6 +209,10 @@ export function useSlot<K, V extends HTMLElement>(
           const parent = element.parentNode;
           parent?.insertBefore(elem, element);
         },
+
+        remove: () => {
+          element.remove();
+        },
       };
     },
     [name]
@@ -293,6 +307,14 @@ export function useSlot<K, V extends HTMLElement>(
     [_registerMethod]
   );
 
+  // @ts-ignore
+  context.remove = useCallback(() => {
+    // @ts-ignore
+    _registerMethod(() => {
+      elementRef.current?.remove();
+    });
+  }, [_registerMethod]);
+
   const handleLifeCycleRender = useCallback(async () => {
     if (status.current === 'loading') return;
 
@@ -322,7 +344,10 @@ export function useSlot<K, V extends HTMLElement>(
       status.current = 'loading';
 
       log(`🟩 "${name}" Slot Initialized`);
-      await callback(context as K & DefaultSlotContext<K>, elementRef.current as HTMLDivElement | null);
+      await callback(
+        context as K & DefaultSlotContext<K>,
+        elementRef.current as HTMLDivElement | null
+      );
     } catch (error) {
       console.error(`Error in "${callback.name}" Slot callback`, error);
     } finally {
@@ -336,7 +361,7 @@ export function useSlot<K, V extends HTMLElement>(
   // Initialization
   useEffect(() => {
     handleLifeCycleInit().finally(() => {
-      if (slotsQueue) {
+      if (slotsQueue && slotsQueue.value.has(name)) {
         slotsQueue.value.delete(name);
         slotsQueue.value = new Set(slotsQueue.value);
       }
@@ -352,13 +377,56 @@ export function useSlot<K, V extends HTMLElement>(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(context), JSON.stringify(_state)]);
 
-  return [elementRef, props];
+  return [elementRef, props, status.current];
 }
 
+/**
+ * Recursively processes children elements to conditionally prevent image loading.
+ * 
+ * This function traverses the children tree and modifies img elements to prevent
+ * premature loading during slot initialization. When isReady is false, img src
+ * attributes are set to empty string to prevent network requests, while preserving
+ * the original src in a data attribute for debugging purposes.
+ * 
+ * @param children - The children elements to process (can be any React/Preact children)
+ * @param isReady - Whether the slot is ready to load images (true) or should prevent loading (false)
+ * @returns Processed children with conditional image src attributes
+ */
+const processChildren = (children: any, isReady: boolean): any => {
+  return Children.map(children, child => {
+    // Handle text nodes, numbers, etc.
+    if (!isValidElement(child)) {
+      return child;
+    }
+
+    // Handle img elements - conditionally set src
+    if (child.props.src) {
+      return cloneElement(child, {
+        ...child.props,
+        src: isReady ? child.props.src : "",
+        // Optionally preserve original src in data attribute for debugging
+        'data-original-src': child.props.src,
+      });
+    }
+
+    // Handle elements with children - recursively process them
+    if (child.props && child.props.children) {
+      return cloneElement(child, {
+        ...child.props,
+        children: processChildren(child.props.children, isReady),
+      });
+    }
+
+    // Return other elements as-is
+    return child;
+  });
+};
+
 // Slot Component
 interface SlotPropsComponent<T>
   extends Omit<HTMLAttributes<HTMLElement>, 'slot'> {
   name: string;
+  lazy?: boolean;
   slot?: SlotProps<T>;
   context?: Context<T>;
   render?: (props: Record<string, any>) => VNode | VNode[];
@@ -371,6 +439,7 @@ interface SlotPropsComponent<T>
 
 export function Slot<T>({
   name,
+  lazy = false,
   context,
   slot,
   children,
@@ -385,7 +454,7 @@ export function Slot<T>({
 }> {
   const slotsQueue = useContext(SlotQueueContext);
 
-  const [elementRef, slotProps] = useSlot<T, HTMLElement>(
+  const [elementRef, slotProps, status] = useSlot<T, HTMLElement>(
     name,
     context,
     slot,
@@ -400,11 +469,11 @@ export function Slot<T>({
     }
 
     // add slot to queue
-    if (slotsQueue) {
+    if (slotsQueue && lazy === false) {
       slotsQueue.value.add(name);
       slotsQueue.value = new Set(slotsQueue.value);
     }
-  }, [name, slotsQueue]);
+  }, [name, lazy, slotsQueue]);
 
   return createElement(
     slotTag,
@@ -413,7 +482,7 @@ export function Slot<T>({
       ref: elementRef,
       'data-slot': name,
     },
-    slotProps.children
+    processChildren(slotProps.children, status === 'ready')
   );
 }