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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @adobe-commerce/elsie
 
+## 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.3",
   "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);
 }