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

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "2.1.0-beta.5",
+  "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);
     }
@@ -169,59 +157,20 @@ export function useSlot<K, V extends HTMLElement>(
   // @ts-ignore
   context._registerMethod = _registerMethod;
 
-  // `onRender`-style registered methods are replayed on every
-  // `handleLifeCycleRender` pass (see `_registerMethod`/`methodsRef` above),
-  // and `handleLifeCycleRender` always resets `children` to the fallback
-  // before replaying them -- so `replaceWith`/`appendChild`/`prependChild`
-  // must genuinely re-apply their VNode on every replay, not just once.
-  // Without caching, each replay would call `createElement` fresh, handing
-  // Preact a brand new VNode (and new `ref` identity) for content that's
-  // already grafted, forcing it to detach/reattach the `ref` for no reason.
-  // Caching per `elem` means repeat calls return the *same* VNode object;
-  // Preact's diff treats `oldVNode === newVNode` as an explicit "unchanged,
-  // skip" signal, so it never re-touches the grafted subtree. See
-  // docs/slot-dom-graft-race.md.
-  const htmlElementVNodeCache = useMemo(
-    () => new Map<HTMLElement, VNode<any>>(),
-    // `contentTag` isn't read by the factory -- it's a deliberate cache-bust
-    // key, so a `contentTag` change starts a fresh cache instead of handing
-    // out VNodes built for the old wrapper tag.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [contentTag],
-  );
-
   const _htmlElementToVNode = useCallback(
     (elem: HTMLElement) => {
-      const cached = htmlElementVNodeCache.get(elem);
-      if (cached) return cached;
-
-      const vnode = createElement(
+      return createElement(
         contentTag,
         {
           'data-slot-html-element': elem.tagName.toLowerCase(),
           ref: (refElem: HTMLElement | null): void => {
-            if (refElem) {
-              refElem.appendChild(elem);
-              return;
-            }
-
-            // Preact calls `ref` with `null` when this specific VNode is
-            // detached -- either superseded by a different element at the
-            // same position (a later replaceWith/appendChild/prependChild
-            // call) or because the Slot unmounted entirely. Either way,
-            // `elem` is no longer part of the tree, so drop it from the
-            // cache now instead of holding onto it (and the DOM node it
-            // wraps) for the Slot's remaining lifetime.
-            htmlElementVNodeCache.delete(elem);
+            refElem?.appendChild(elem);
           },
         },
         null,
       );
-
-      htmlElementVNodeCache.set(elem, vnode);
-      return vnode;
     },
-    [contentTag, htmlElementVNodeCache],
+    [contentTag],
   );
 
   // @ts-ignore
@@ -388,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;