@b9g/crank 0.7.1 → 0.7.3

package/crank.js

@@ -165,6 +165,7 @@ const IsInForOfLoop = 1 << 13;
 const IsInForAwaitOfLoop = 1 << 14;
 const NeedsToYield = 1 << 15;
 const PropsAvailable = 1 << 16;
+const IsSchedulingRefresh = 1 << 17;
 function getFlag(ret, flag) {
     return !!(ret.f & flag);
 }
@@ -518,10 +519,10 @@ function diffChildren(adapter, root, host, ctx, scope, parent, newChildren) {
                     }
                 }
                 else if (ret) {
+                    let candidateFound = false;
                     // we do not need to add the retainer to the graveyard if it is the
                     // fallback of another retainer
                     // search for the tag in fallback chain
-                    let candidateFound = false;
                     for (let predecessor = ret, candidate = ret.fallback; candidate; predecessor = candidate, candidate = candidate.fallback) {
                         if (candidate.el.tag === child.tag) {
                             // If we find a retainer in the fallback chain with the same tag,
@@ -1356,6 +1357,9 @@ class Context extends CustomEventTarget {
                 });
             }
         }
+        if (getFlag(ctx.ret, IsScheduling)) {
+            setFlag(ctx.ret, IsSchedulingRefresh);
+        }
         let diff;
         const schedulePromises = [];
         try {
@@ -1701,10 +1705,11 @@ function runComponent(ctx) {
         if (getFlag(ctx.ret, IsInForOfLoop) &&
             !getFlag(ctx.ret, NeedsToYield) &&
             !getFlag(ctx.ret, IsUnmounted) &&
-            !getFlag(ctx.ret, IsScheduling)) {
+            !getFlag(ctx.ret, IsSchedulingRefresh)) {
             console.error(`Component <${getTagName(ctx.ret.el.tag)}> yielded/returned more than once in for...of loop`);
         }
         setFlag(ctx.ret, NeedsToYield, false);
+        setFlag(ctx.ret, IsSchedulingRefresh, false);
         if (iteration.done) {
             setFlag(ctx.ret, IsSyncGen, false);
             ctx.iterator = undefined;
@@ -1750,11 +1755,12 @@ function runComponent(ctx) {
                     if (getFlag(ctx.ret, IsInForOfLoop) &&
                         !getFlag(ctx.ret, NeedsToYield) &&
                         !getFlag(ctx.ret, IsUnmounted) &&
-                        !getFlag(ctx.ret, IsScheduling)) {
+                        !getFlag(ctx.ret, IsSchedulingRefresh)) {
                         console.error(`Component <${getTagName(ctx.ret.el.tag)}> yielded/returned more than once in for...of loop`);
                     }
                 }
                 setFlag(ctx.ret, NeedsToYield, false);
+                setFlag(ctx.ret, IsSchedulingRefresh, false);
                 if (iteration.done) {
                     setFlag(ctx.ret, IsAsyncGen, false);
                     ctx.iterator = undefined;
@@ -1986,18 +1992,17 @@ function commitComponent(ctx, schedulePromises, hydrationNodes) {
         });
         return getValue(ctx.ret);
     }
-    const wasScheduling = getFlag(ctx.ret, IsScheduling);
     const values = commitChildren(ctx.adapter, ctx.host, ctx, ctx.scope, ctx.ret, ctx.index, schedulePromises, hydrationNodes);
     if (getFlag(ctx.ret, IsUnmounted)) {
         return;
     }
     addEventTargetDelegates(ctx.ctx, values);
     // Execute schedule callbacks early to check for async deferral
-    const callbacks = scheduleMap.get(ctx);
+    const wasScheduling = getFlag(ctx.ret, IsScheduling);
     let schedulePromises1;
+    const callbacks = scheduleMap.get(ctx);
     if (callbacks) {
         scheduleMap.delete(ctx);
-        // TODO: think about error handling for schedule callbacks
         setFlag(ctx.ret, IsScheduling);
         const result = ctx.adapter.read(unwrap(values));
         for (const callback of callbacks) {
@@ -2008,7 +2013,7 @@ function commitComponent(ctx, schedulePromises, hydrationNodes) {
         }
         if (schedulePromises1 && !getFlag(ctx.ret, DidCommit)) {
             const scheduleCallbacksP = Promise.all(schedulePromises1).then(() => {
-                setFlag(ctx.ret, IsScheduling, false);
+                setFlag(ctx.ret, IsScheduling, wasScheduling);
                 propagateComponent(ctx);
                 if (ctx.ret.fallback) {
                     unmount(ctx.adapter, ctx.host, ctx.parent, ctx.ret.fallback, false);
@@ -2048,6 +2053,37 @@ function commitComponent(ctx, schedulePromises, hydrationNodes) {
     // if schedule callbacks call refresh() or async mounting is happening.
     return getValue(ctx.ret, true);
 }
+/**
+ * Checks if a target retainer is active (contributing) in the host's retainer tree.
+ * Performs a downward traversal from host to find if target is in the active path.
+ */
+function isRetainerActive(target, host) {
+    const stack = [host];
+    while (stack.length > 0) {
+        const current = stack.pop();
+        if (current === target) {
+            return true;
+        }
+        // Add direct children to stack (skip if this is a host boundary)
+        // Host boundaries are: DOM elements (string tags) or Portal, but NOT Fragment
+        const isHostBoundary = current !== host &&
+            ((typeof current.el.tag === "string" && current.el.tag !== Fragment) ||
+                current.el.tag === Portal);
+        if (current.children && !isHostBoundary) {
+            const children = wrap(current.children);
+            for (const child of children) {
+                if (child) {
+                    stack.push(child);
+                }
+            }
+        }
+        // Add fallback chains (only if current retainer is using fallback)
+        if (current.fallback && !getFlag(current, DidDiff)) {
+            stack.push(current.fallback);
+        }
+    }
+    return false;
+}
 /**
  * Propagates component changes up to ancestors when rendering starts from a
  * component via refresh() or multiple for await...of renders. This handles
@@ -2058,14 +2094,20 @@ function propagateComponent(ctx) {
     const values = getChildValues(ctx.ret, ctx.index);
     addEventTargetDelegates(ctx.ctx, values, (ctx1) => ctx1[_ContextState].host === ctx.host);
     const host = ctx.host;
+    const initiator = ctx.ret;
+    // Check if initiator is active in the host's tree
+    if (!isRetainerActive(initiator, host)) {
+        return;
+    }
     const props = stripSpecialProps(host.el.props);
+    const hostChildren = getChildValues(host, 0);
     ctx.adapter.arrange({
         tag: host.el.tag,
         tagName: getTagName(host.el.tag),
         node: host.value,
         props,
         oldProps: props,
-        children: getChildValues(host, 0),
+        children: hostChildren,
     });
     flush(ctx.adapter, ctx.root, ctx);
 }