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

package/CHANGELOG.md

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

package/package.json

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

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;