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

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @adobe-commerce/elsie
 
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- 406a36d: Restore the existing Slot implementation and temporarily downgrade
+  Preact from 10.29 to 10.28.4, the latest pre-10.29 release, to avoid
+  intermittent `insertBefore` crashes in AEM Asset image Slots while the
+  underlying DOM graft and render-root ownership changes are developed and
+  validated separately.
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- 4cc7219: Fix a memory leak in `Slot`'s VNode cache (added to fix repeated
+  `insertBefore` crashes from replay churn): entries were never pruned, so a
+  `slot` callback that keeps calling `replaceWith`/`appendChild`/`prependChild`
+  with newly constructed elements over time (rather than mutating one element in
+  place) would pin every historical element in memory for the Slot's whole
+  lifetime. Entries are now evicted via the grafted element's `ref` callback
+  firing with `null`, which Preact does precisely when that VNode is detached
+  (superseded by a different element, or the Slot unmounting).
+
+  See `docs/slot-dom-graft-race.md` for the full trace, including a
+  pre-existing, unrelated gap this surfaced: calling `replaceWith` a second time
+  with a different element doesn't remove the first one.
+
+- ba3bbe7: Fix a recurring `insertBefore` crash in `Slot` when content grafted
+  via `replaceWith`/`appendChild`/`prependChild` is re-applied on unrelated
+  re-renders. `Slot` replays its registered methods on every render pass (by
+  design, so `onRender`/`onChange` can react to fresh state), but the grafted
+  content's wrapper VNode was rebuilt from scratch on every replay, handing
+  Preact a brand new `ref` closure for a DOM node that was already grafted. That
+  churn corrupted Preact's internal DOM bookkeeping for the grafted subtree over
+  repeated re-renders, especially in components with ongoing state changes. The
+  wrapper VNode is now cached per element, so repeated replays reuse the same
+  VNode instance and Preact's diff bails out instead of re-touching the subtree.
+
+  See `docs/slot-dom-graft-race.md` for the full trace, including why an earlier
+  attempt at this fix (making `replaceWith` a no-op after its first run) was
+  wrong.
+
 ## 2.1.0-beta.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "2.1.0-beta.4",
+  "version": "2.1.0-beta.6",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {
@@ -87,7 +87,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.4.2",
     "jest-environment-jsdom": "^30.0.0",
-    "preact": "~10.29.7",
+    "preact": "~10.28.4",
     "preact-i18n": "2.4.0-preactx",
     "preact-render-to-string": "^5.1.4",
     "prettier": "^3.8.4",

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 async (ctx: RenderContext): Promise<void> => {
+  return (ctx: RenderContext) => {
     const { wrapper, alias, params, imageProps } = config;
 
     if (!imageProps.src) {
@@ -274,25 +274,17 @@ export function makeAemAssetsImageSlot(config: AemAssetsImageSlotConfig) {
       params: imageComponentParams,
     };
 
-    // 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);
+    UI.render(Image, imageComponentProps)(container);
     ctx.replaceWith(container);
   };
 }
 
-export async function tryRenderAemAssetsImage(
+export function tryRenderAemAssetsImage(
   ctx: RenderContext,
   config: AemAssetsImageSlotConfig,
-): Promise<void> {
+): void {
   // Renders an equivalent of the default image.
-  async function renderDefaultImage(): Promise<void> {
+  function renderDefaultImage(): void {
     const container = config.wrapper ?? document.createElement('div');
     const { imageProps, params } = config;
     const imageComponentProps: ImageProps = {
@@ -301,8 +293,7 @@ export async function tryRenderAemAssetsImage(
       height: params.height,
     };
 
-    // See the comment in `makeAemAssetsImageSlot` above.
-    await UI.render(Image, imageComponentProps)(container);
+    UI.render(Image, imageComponentProps)(container);
     ctx.replaceWith(container);
   }
 
@@ -310,7 +301,7 @@ export async function tryRenderAemAssetsImage(
 
   if (!assetsEnabled) {
     // No-op, render the default image.
-    await renderDefaultImage();
+    renderDefaultImage();
     return;
   }
 
@@ -324,9 +315,9 @@ export async function tryRenderAemAssetsImage(
 
   if (!isAemAssetsUrl(assetsUrl)) {
     // Not an AEM Assets URL, so render the default image.
-    await renderDefaultImage();
+    renderDefaultImage();
     return;
   }
 
-  await makeAemAssetsImageSlot(config)(ctx);
+  makeAemAssetsImageSlot(config)(ctx);
 }

package/src/lib/slot.tsx

@@ -146,21 +146,9 @@ 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);
     }
@@ -349,8 +337,6 @@ 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;