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

package/src/lib/get-price-formatter.ts

@@ -0,0 +1,69 @@
+/********************************************************************
+ *  Copyright 2025 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.
+ *******************************************************************/
+
+import { getGlobalLocale } from '@adobe-commerce/elsie/lib';
+
+export interface PriceFormatterOptions {
+  currency?: string | null;
+  locale?: string;
+  formatOptions?: Intl.NumberFormatOptions;
+}
+
+/**
+ * Determines the effective locale to use for price formatting
+ * Priority: prop locale > global locale > browser locale > default 'en-US'
+ */
+export function getEffectiveLocale(locale?: string): string {
+  if (locale) {
+    return locale;
+  }
+  const globalLocale = getGlobalLocale();
+  if (globalLocale) {
+    return globalLocale;
+  }
+  // Fallback to browser locale or default
+  return process.env.LOCALE && process.env.LOCALE !== 'undefined' ? process.env.LOCALE : 'en-US';
+}
+
+/**
+ * Gets an Intl.NumberFormat instance for price formatting
+ * Uses getEffectiveLocale internally to determine the best locale
+ *
+ * @example
+ * // Single price formatting
+ * const formatter = getPriceFormatter({ currency: 'USD', locale: 'en-US' });
+ * const price = formatter.format(10.99); // "$10.99"
+ *
+ * @example
+ * // Bulk price formatting (more efficient)
+ * const formatter = getPriceFormatter({ currency: 'EUR', locale: 'fr-FR' });
+ * const prices = [10.99, 25.50, 99.99].map(amount => formatter.format(amount));
+ */
+export function getPriceFormatter(
+  options: PriceFormatterOptions = {}
+): Intl.NumberFormat {
+  const { currency, locale, formatOptions = {} } = options;
+  const effectiveLocale = getEffectiveLocale(locale);
+
+  const params: Intl.NumberFormatOptions = {
+    style: 'currency',
+    currency: currency || 'USD',
+    // These options are needed to round to whole numbers if that's what you want.
+    minimumFractionDigits: 2, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
+    maximumFractionDigits: 2, // (causes 2500.99 to be printed as $2,501)
+    ...formatOptions,
+  };
+
+  try {
+    return new Intl.NumberFormat(effectiveLocale, params);
+  } catch (error) {
+    console.error(`Error creating Intl.NumberFormat instance for locale ${effectiveLocale}. Falling back to en-US.`, error);
+    return new Intl.NumberFormat('en-US', params);
+  }
+}

package/src/lib/index.ts

@@ -2,9 +2,9 @@
  *  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.
  *******************************************************************/
 
 export * from '@adobe-commerce/elsie/lib/form-values';
@@ -25,3 +25,4 @@ export * from '@adobe-commerce/elsie/lib/is-number';
 export * from '@adobe-commerce/elsie/lib/deviceUtils';
 export * from '@adobe-commerce/elsie/lib/get-path-value';
 export * from '@adobe-commerce/elsie/lib/get-cookie';
+export * from '@adobe-commerce/elsie/lib/get-price-formatter';

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')
   );
 }