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

package/bin/builders/serve/index.js

@@ -4,7 +4,9 @@ const path = require('path');
 module.exports = async function generateResourceBuilder({ argv }) {
   const { build, preview } = await import('vite');
 
-  const configFile = argv?.config ?? path.resolve(__dirname, '../../../config/vite.mjs');
+  const configFile =
+    argv?.config ??
+    path.resolve(...[__dirname, '..', '..', '..', 'config', 'vite.mjs']);
 
   let built = false;
 

package/config/vite.mjs

@@ -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.
  *******************************************************************/
 
 import { glob } from 'glob';
@@ -25,7 +25,12 @@ import banner from 'vite-plugin-banner';
 const env = loadEnv('', process.cwd());
 
 // Load Elsie Config
-const elsieConfig = await import(path.resolve(process.cwd(), './.elsie.js')).then((m) => m.default);
+const elsieConfigPath = path.resolve(process.cwd(), './.elsie.js');
+// Convert Windows paths to file:// URLs for ES module imports
+const elsieConfigUrl = elsieConfigPath.startsWith('file://')
+  ? elsieConfigPath
+  : `file://${elsieConfigPath.replace(/\\/g, '/')}`;
+const elsieConfig = await import(elsieConfigUrl).then((m) => m.default);
 
 // Read package.json using createRequire (compatible with Node 20 and 22)
 const require = createRequire(import.meta.url);
@@ -293,19 +298,19 @@ export default {
       generateBundle(options, bundle) {
         for (const fileName in bundle) {
           const chunk = bundle[fileName];
-          
+
           // Process both .map files and JS/TS files with sourcemaps
-          if ((chunk.type === 'asset' && fileName.endsWith('.map')) || 
+          if ((chunk.type === 'asset' && fileName.endsWith('.map')) ||
               (chunk.type === 'chunk' && chunk.map)) {
             try {
               // Get the sourcemap object - either from the asset source or the chunk's map
               const map = chunk.type === 'asset' ? JSON.parse(chunk.source) : chunk.map;
-              
+
               if (map.sources) {
                 map.sources = map.sources.map((input) => {
                   return input.replace(/(?:\.\.?\/)+src\//, `/${packageJSON.name}/src/`);
                 });
-                
+
                 // Update the sourcemap in the appropriate place
                 if (chunk.type === 'asset') {
                   chunk.source = JSON.stringify(map);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.5.0-beta2",
+  "version": "1.6.0-alpha999",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {

package/src/docs/slots.mdx

@@ -32,6 +32,12 @@ The `<Slot />` component is used to define a slot in a container. It receives a
 
 The name of the slot in _PascalCase_. `string` (required).
 
+### lazy
+
+Controls whether the slot should be loaded immediately or deferred for later initialization. `boolean` (optional).
+
+When `lazy={false}`, the slot is initialized as soon as the container mounts. When `lazy={true}`, the slot can be initialized later on when it is needed. This is useful for performance optimization, especially when the slot's content is not immediately required.
+
 ### slotTag
 
 The HTML tag to use for the slot's wrapper element. This allows you to change the wrapper element from the default `div` to any valid HTML tag (e.g., 'span', 'p', 'a', etc.). When using specific tags like 'a', you can also provide their respective HTML attributes (e.g., 'href', 'target', etc.).
@@ -71,7 +77,7 @@ Example:
 
 - `ctx`: An object representing the context of the slot, including methods for manipulating the slot's content.
 
-The slot property, which is implemented as a promise function, provides developers with the flexibility to dynamically generate and manipulate content within slots. 
+The slot property, which is implemented as a promise function, provides developers with the flexibility to dynamically generate and manipulate content within slots.
 However, it's important to note that this promise is render-blocking, meaning that the component will not render until the promise is resolved.
 
 ### context

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 { HTMLAttributes } 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;
@@ -149,18 +154,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;
@@ -322,7 +330,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 +347,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);
       }
@@ -359,6 +370,7 @@ export function useSlot<K, V extends HTMLElement>(
 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 +383,7 @@ interface SlotPropsComponent<T>
 
 export function Slot<T>({
   name,
+  lazy = false,
   context,
   slot,
   children,
@@ -400,11 +413,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,