@adobe-commerce/elsie 1.6.0-alpha999 → 1.6.0-beta1

package/src/lib/slot.tsx

@@ -15,7 +15,7 @@ import {
   RefObject,
   VNode,
 } from 'preact';
-import { HTMLAttributes } from 'preact/compat';
+import { Children, HTMLAttributes, isValidElement } from 'preact/compat';
 import {
   StateUpdater,
   useCallback,
@@ -41,6 +41,7 @@ interface SlotElement {
   prependChild: MutateElement;
   appendSibling: MutateElement;
   prependSibling: MutateElement;
+  remove: () => void;
 }
 
 interface PrivateContext<T> {
@@ -60,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;
 }
@@ -85,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
@@ -207,6 +209,10 @@ export function useSlot<K, V extends HTMLElement>(
           const parent = element.parentNode;
           parent?.insertBefore(elem, element);
         },
+
+        remove: () => {
+          element.remove();
+        },
       };
     },
     [name]
@@ -301,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;
 
@@ -363,9 +377,51 @@ 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'> {
@@ -398,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,
@@ -426,7 +482,7 @@ export function Slot<T>({
       ref: elementRef,
       'data-slot': name,
     },
-    slotProps.children
+    processChildren(slotProps.children, status === 'ready')
   );
 }