@adobe-commerce/elsie 2.1.0-beta.2 → 2.1.0-beta.4

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @adobe-commerce/elsie
 
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- 8fc53e5: Fix `Slot` silently dropping
+  `replaceWith`/`appendChild`/`prependChild`/
+  `appendSibling`/`prependSibling`/`remove` calls made from a `slot` callback
+  that doesn't `return`/`await` its own async work (e.g. a non-`async` callback
+  that calls an `async` helper as a bare statement). Previously, nothing was
+  left to trigger the render that would have picked up the queued method once
+  the slot's normal init-triggered render pass had already completed. `Slot` now
+  detects that case and flushes the pending update itself. Existing callers that
+  already `return`/`await` their `slot` callback are unaffected.
+
+  See `docs/slot-dom-graft-race.md` for the full trace.
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- 3bfb136: Fix an intermittent `insertBefore` crash in AEM Assets image slots
+  (`tryRenderAemAssetsImage`/`makeAemAssetsImageSlot`) that surfaced after the
+  preact 10.29 bump. The image render into its container was never awaited
+  before handing the container to `Slot`'s `replaceWith`, so it could be grafted
+  into the DOM before it had any content. See `docs/slot-dom-graft-race.md` for
+  the full trace.
+
 ## 2.1.0-beta.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "2.1.0-beta.2",
+  "version": "2.1.0-beta.4",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {

package/src/lib/aem/assets.ts

@@ -238,7 +238,7 @@ export function tryGenerateAemAssetsOptimizedUrl(
 
 /** Creates a slot that renders an AEM Assets image. */
 export function makeAemAssetsImageSlot(config: AemAssetsImageSlotConfig) {
-  return (ctx: RenderContext) => {
+  return async (ctx: RenderContext): Promise<void> => {
     const { wrapper, alias, params, imageProps } = config;
 
     if (!imageProps.src) {
@@ -274,17 +274,25 @@ export function makeAemAssetsImageSlot(config: AemAssetsImageSlotConfig) {
       params: imageComponentParams,
     };
 
-    UI.render(Image, imageComponentProps)(container);
+    // Wait for the Image (and any of its own nested slots) to finish
+    // rendering into `container` before handing it to `ctx.replaceWith`.
+    // Slot grafts `container` into the DOM via an imperative `ref` callback
+    // that Preact's own diffing doesn't track (see docs/slot-dom-graft-race.md)
+    // -- handing it over before it has content means it gets grafted empty,
+    // then mutated again later outside Preact's bookkeeping, which is what
+    // was corrupting Preact's internal DOM pointers and causing sporadic
+    // `insertBefore` crashes after the preact 10.29 bump.
+    await UI.render(Image, imageComponentProps)(container);
     ctx.replaceWith(container);
   };
 }
 
-export function tryRenderAemAssetsImage(
+export async function tryRenderAemAssetsImage(
   ctx: RenderContext,
   config: AemAssetsImageSlotConfig,
-): void {
+): Promise<void> {
   // Renders an equivalent of the default image.
-  function renderDefaultImage(): void {
+  async function renderDefaultImage(): Promise<void> {
     const container = config.wrapper ?? document.createElement('div');
     const { imageProps, params } = config;
     const imageComponentProps: ImageProps = {
@@ -293,7 +301,8 @@ export function tryRenderAemAssetsImage(
       height: params.height,
     };
 
-    UI.render(Image, imageComponentProps)(container);
+    // See the comment in `makeAemAssetsImageSlot` above.
+    await UI.render(Image, imageComponentProps)(container);
     ctx.replaceWith(container);
   }
 
@@ -301,7 +310,7 @@ export function tryRenderAemAssetsImage(
 
   if (!assetsEnabled) {
     // No-op, render the default image.
-    renderDefaultImage();
+    await renderDefaultImage();
     return;
   }
 
@@ -315,9 +324,9 @@ export function tryRenderAemAssetsImage(
 
   if (!isAemAssetsUrl(assetsUrl)) {
     // Not an AEM Assets URL, so render the default image.
-    renderDefaultImage();
+    await renderDefaultImage();
     return;
   }
 
-  makeAemAssetsImageSlot(config)(ctx);
+  await makeAemAssetsImageSlot(config)(ctx);
 }

package/src/lib/slot.tsx

@@ -146,9 +146,21 @@ export function useSlot<K, V extends HTMLElement>(
     });
   };
 
+  const handleLifeCycleRenderRef = useRef<() => Promise<void>>();
+
   const _registerMethod = useCallback((cb: Function) => {
     if (typeof cb === 'function') {
       methodsRef.current.push(cb);
+
+      // If the slot already finished its normal init-triggered render pass
+      // (status is back to 'ready'), nothing else will flush this method.
+      // This happens when an async `slot` callback doesn't `return`/`await`
+      // its own async work before calling replaceWith/appendChild/etc. --
+      // `handleLifeCycleInit` moves on before this method gets registered.
+      // Flush it ourselves rather than silently dropping it.
+      if (status.current === 'ready') {
+        handleLifeCycleRenderRef.current?.();
+      }
     } else {
       console.warn('Skipped: Invalid _registerMethod', cb);
     }
@@ -337,6 +349,8 @@ export function useSlot<K, V extends HTMLElement>(
     status.current = 'ready';
   }, [children, context, name, props, render, state]);
 
+  handleLifeCycleRenderRef.current = handleLifeCycleRender;
+
   // Initialization
   const handleLifeCycleInit = useCallback(async () => {
     if (!callback) return;