@b9g/crank 0.7.0 → 0.7.2

package/crank.cjs

@@ -3,103 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var eventTarget = require('./event-target.cjs');
-
-function wrap(value) {
-    return value === undefined ? [] : Array.isArray(value) ? value : [value];
-}
-function unwrap(arr) {
-    return arr.length === 0 ? undefined : arr.length === 1 ? arr[0] : arr;
-}
-/**
- * Ensures a value is an array.
- *
- * This function does the same thing as wrap() above except it handles nulls
- * and iterables, so it is appropriate for wrapping user-provided element
- * children.
- */
-function arrayify(value) {
-    return value == null
-        ? []
-        : Array.isArray(value)
-            ? value
-            : typeof value === "string" ||
-                typeof value[Symbol.iterator] !== "function"
-                ? [value]
-                : [...value];
-}
-function isIteratorLike(value) {
-    return value != null && typeof value.next === "function";
-}
-function isPromiseLike(value) {
-    return value != null && typeof value.then === "function";
-}
-function createRaceRecord(contender) {
-    const deferreds = new Set();
-    const record = { deferreds, settled: false };
-    // This call to `then` happens once for the lifetime of the value.
-    Promise.resolve(contender).then((value) => {
-        for (const { resolve } of deferreds) {
-            resolve(value);
-        }
-        deferreds.clear();
-        record.settled = true;
-    }, (err) => {
-        for (const { reject } of deferreds) {
-            reject(err);
-        }
-        deferreds.clear();
-        record.settled = true;
-    });
-    return record;
-}
-// Promise.race is memory unsafe. This is alternative which is. See:
-// https://github.com/nodejs/node/issues/17469#issuecomment-685235106
-// Keys are the values passed to race.
-// Values are a record of data containing a set of deferreds and whether the
-// value has settled.
-const wm = new WeakMap();
-function safeRace(contenders) {
-    let deferred;
-    const result = new Promise((resolve, reject) => {
-        deferred = { resolve, reject };
-        for (const contender of contenders) {
-            if (!isPromiseLike(contender)) {
-                // If the contender is a not a then-able, attempting to use it as a key
-                // in the weakmap would throw an error. Luckily, it is safe to call
-                // `Promise.resolve(contender).then` on regular values multiple
-                // times because the promise fulfills immediately.
-                Promise.resolve(contender).then(resolve, reject);
-                continue;
-            }
-            let record = wm.get(contender);
-            if (record === undefined) {
-                record = createRaceRecord(contender);
-                record.deferreds.add(deferred);
-                wm.set(contender, record);
-            }
-            else if (record.settled) {
-                // If the value has settled, it is safe to call
-                // `Promise.resolve(contender).then` on it.
-                Promise.resolve(contender).then(resolve, reject);
-            }
-            else {
-                record.deferreds.add(deferred);
-            }
-        }
-    });
-    // The finally callback executes when any value settles, preventing any of
-    // the unresolved values from retaining a reference to the resolved value.
-    return result.finally(() => {
-        for (const contender of contenders) {
-            if (isPromiseLike(contender)) {
-                const record = wm.get(contender);
-                if (record) {
-                    record.deferreds.delete(deferred);
-                }
-            }
-        }
-    });
-}
+var _utils = require('./_utils.cjs');
 
 const NOOP = () => { };
 function getTagName(tag) {
@@ -264,6 +168,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);
 }
@@ -331,7 +236,7 @@ function getValue(ret, isNested = false, index) {
         if (index != null && ret.ctx) {
             ret.ctx.index = index;
         }
-        return unwrap(getChildValues(ret, index));
+        return _utils.unwrap(getChildValues(ret, index));
     }
     return ret.value;
 }
@@ -346,7 +251,7 @@ function getValue(ret, isNested = false, index) {
 function getChildValues(ret, startIndex) {
     const values = [];
     const lingerers = ret.lingerers;
-    const children = wrap(ret.children);
+    const children = _utils.wrap(ret.children);
     let currentIndex = startIndex;
     for (let i = 0; i < children.length; i++) {
         if (lingerers != null && lingerers[i] != null) {
@@ -516,7 +421,7 @@ function getRootRetainer(renderer, bridge, { children, root, hydrate, }) {
 function renderRoot(adapter, root, ret, children) {
     const diff = diffChildren(adapter, root, ret, ret.ctx, ret.scope, ret, children);
     const schedulePromises = [];
-    if (isPromiseLike(diff)) {
+    if (_utils.isPromiseLike(diff)) {
         return diff.then(() => {
             commit(adapter, ret, ret, ret.ctx, ret.scope, 0, schedulePromises, undefined);
             if (schedulePromises.length > 0) {
@@ -524,13 +429,13 @@ function renderRoot(adapter, root, ret, children) {
                     if (typeof root !== "object" || root === null) {
                         unmount(adapter, ret, ret.ctx, ret, false);
                     }
-                    return adapter.read(unwrap(getChildValues(ret)));
+                    return adapter.read(_utils.unwrap(getChildValues(ret)));
                 });
             }
             if (typeof root !== "object" || root === null) {
                 unmount(adapter, ret, ret.ctx, ret, false);
             }
-            return adapter.read(unwrap(getChildValues(ret)));
+            return adapter.read(_utils.unwrap(getChildValues(ret)));
         });
     }
     commit(adapter, ret, ret, ret.ctx, ret.scope, 0, schedulePromises, undefined);
@@ -539,18 +444,18 @@ function renderRoot(adapter, root, ret, children) {
             if (typeof root !== "object" || root === null) {
                 unmount(adapter, ret, ret.ctx, ret, false);
             }
-            return adapter.read(unwrap(getChildValues(ret)));
+            return adapter.read(_utils.unwrap(getChildValues(ret)));
         });
     }
     if (typeof root !== "object" || root === null) {
         unmount(adapter, ret, ret.ctx, ret, false);
     }
-    return adapter.read(unwrap(getChildValues(ret)));
+    return adapter.read(_utils.unwrap(getChildValues(ret)));
 }
 function diffChildren(adapter, root, host, ctx, scope, parent, newChildren) {
-    const oldRetained = wrap(parent.children);
+    const oldRetained = _utils.wrap(parent.children);
     const newRetained = [];
-    const newChildren1 = arrayify(newChildren);
+    const newChildren1 = _utils.arrayify(newChildren);
     const diffs = [];
     let childrenByKey;
     let seenKeys;
@@ -617,10 +522,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,
@@ -669,7 +574,7 @@ function diffChildren(adapter, root, host, ctx, scope, parent, newChildren) {
                     setFlag(ret, IsCopied, false);
                 }
             }
-            if (isPromiseLike(diff)) {
+            if (_utils.isPromiseLike(diff)) {
                 isAsync = true;
             }
         }
@@ -709,7 +614,7 @@ function diffChildren(adapter, root, host, ctx, scope, parent, newChildren) {
             graveyard.push(ret);
         }
     }
-    parent.children = unwrap(newRetained);
+    parent.children = _utils.unwrap(newRetained);
     if (isAsync) {
         const diffs1 = Promise.all(diffs)
             .then(() => undefined)
@@ -727,7 +632,7 @@ function diffChildren(adapter, root, host, ctx, scope, parent, newChildren) {
             }
         });
         let onNextDiffs;
-        const diffs2 = (parent.pendingDiff = safeRace([
+        const diffs2 = (parent.pendingDiff = _utils.safeRace([
             diffs1,
             new Promise((resolve) => (onNextDiffs = resolve)),
         ]));
@@ -847,7 +752,7 @@ function commit(adapter, host, ret, ctx, scope, index, schedulePromises, hydrati
         }
     }
     if (skippedHydrationNodes) {
-        skippedHydrationNodes.splice(0, wrap(value).length);
+        skippedHydrationNodes.splice(0, _utils.wrap(value).length);
     }
     if (!getFlag(ret, DidCommit)) {
         setFlag(ret, DidCommit);
@@ -862,7 +767,7 @@ function commit(adapter, host, ret, ctx, scope, index, schedulePromises, hydrati
 }
 function commitChildren(adapter, host, ctx, scope, parent, index, schedulePromises, hydrationNodes) {
     let values = [];
-    for (let i = 0, children = wrap(parent.children); i < children.length; i++) {
+    for (let i = 0, children = _utils.wrap(parent.children); i < children.length; i++) {
         let child = children[i];
         let schedulePromises1;
         let isSchedulingFallback = false;
@@ -939,7 +844,7 @@ function commitChildren(adapter, host, ctx, scope, parent, index, schedulePromis
             }
         }
         if (schedulePromises1 && schedulePromises1.length > 1) {
-            schedulePromises.push(safeRace(schedulePromises1));
+            schedulePromises.push(_utils.safeRace(schedulePromises1));
         }
         if (child) {
             const value = commit(adapter, host, child, ctx, scope, index, schedulePromises, hydrationNodes);
@@ -981,7 +886,7 @@ function commitText(adapter, ret, el, scope, hydrationNodes) {
 }
 function commitRaw(adapter, host, ret, scope, hydrationNodes) {
     if (!ret.oldProps || ret.oldProps.value !== ret.el.props.value) {
-        const oldNodes = wrap(ret.value);
+        const oldNodes = _utils.wrap(ret.value);
         for (let i = 0; i < oldNodes.length; i++) {
             const oldNode = oldNodes[i];
             adapter.remove({
@@ -1293,7 +1198,7 @@ function unmountChildren(adapter, host, ctx, ret, isNested) {
         }
         ret.graveyard = undefined;
     }
-    for (let i = 0, children = wrap(ret.children); i < children.length; i++) {
+    for (let i = 0, children = _utils.wrap(ret.children); i < children.length; i++) {
         const child = children[i];
         if (typeof child === "object") {
             unmount(adapter, host, ctx, child, isNested);
@@ -1446,7 +1351,7 @@ class Context extends eventTarget.CustomEventTarget {
         }
         if (callback) {
             const result = callback();
-            if (isPromiseLike(result)) {
+            if (_utils.isPromiseLike(result)) {
                 return Promise.resolve(result).then(() => {
                     if (!getFlag(ctx.ret, IsUnmounted)) {
                         return this.refresh();
@@ -1455,12 +1360,15 @@ class Context extends eventTarget.CustomEventTarget {
                 });
             }
         }
+        if (getFlag(ctx.ret, IsScheduling)) {
+            setFlag(ctx.ret, IsSchedulingRefresh);
+        }
         let diff;
         const schedulePromises = [];
         try {
             setFlag(ctx.ret, IsRefreshing);
             diff = enqueueComponent(ctx);
-            if (isPromiseLike(diff)) {
+            if (_utils.isPromiseLike(diff)) {
                 return diff
                     .then(() => ctx.adapter.read(commitComponent(ctx, schedulePromises)))
                     .then((result) => {
@@ -1522,7 +1430,7 @@ class Context extends eventTarget.CustomEventTarget {
             return ctx.adapter.read(getValue(ctx.ret));
         }
         finally {
-            if (!isPromiseLike(diff)) {
+            if (!_utils.isPromiseLike(diff)) {
                 setFlag(ctx.ret, IsRefreshing, false);
             }
         }
@@ -1736,10 +1644,10 @@ function runComponent(ctx) {
         finally {
             setFlag(ctx.ret, IsExecuting, false);
         }
-        if (isIteratorLike(returned)) {
+        if (_utils.isIteratorLike(returned)) {
             ctx.iterator = returned;
         }
-        else if (!isPromiseLike(returned)) {
+        else if (!_utils.isPromiseLike(returned)) {
             // sync function component
             return [
                 undefined,
@@ -1771,7 +1679,7 @@ function runComponent(ctx) {
         finally {
             setFlag(ctx.ret, IsExecuting, false);
         }
-        if (isPromiseLike(iteration)) {
+        if (_utils.isPromiseLike(iteration)) {
             setFlag(ctx.ret, IsAsyncGen);
         }
         else {
@@ -1794,22 +1702,23 @@ function runComponent(ctx) {
                 setFlag(ctx.ret, IsExecuting, false);
             }
         }
-        if (isPromiseLike(iteration)) {
+        if (_utils.isPromiseLike(iteration)) {
             throw new Error("Mixed generator component");
         }
         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;
         }
         const diff = diffComponentChildren(ctx, iteration.value, !iteration.done);
-        const block = isPromiseLike(diff) ? diff.catch(NOOP) : undefined;
+        const block = _utils.isPromiseLike(diff) ? diff.catch(NOOP) : undefined;
         return [block, diff];
     }
     else {
@@ -1837,7 +1746,7 @@ function runComponent(ctx) {
                     setFlag(ctx.ret, IsExecuting, false);
                 }
             }
-            if (!isPromiseLike(iteration)) {
+            if (!_utils.isPromiseLike(iteration)) {
                 throw new Error("Mixed generator component");
             }
             const diff = iteration.then((iteration) => {
@@ -1849,11 +1758,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;
@@ -1907,7 +1817,7 @@ async function pullComponent(ctx, iterationP) {
     try {
         let childError;
         while (!done) {
-            if (isPromiseLike(iterationP)) {
+            if (_utils.isPromiseLike(iterationP)) {
                 ctx.pull.iterationP = iterationP;
             }
             let onDiff;
@@ -1994,7 +1904,7 @@ async function pullComponent(ctx, iterationP) {
             done = !!iteration.done;
             let diff;
             try {
-                if (!isPromiseLike(iterationP)) {
+                if (!_utils.isPromiseLike(iterationP)) {
                     // if iterationP is an iteration and not a promise, the component was
                     // not in a for await...of loop when the iteration started, so we can
                     // skip the diffing of children as it is handled elsewhere.
@@ -2085,29 +1995,28 @@ 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;
     }
     eventTarget.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));
+        const result = ctx.adapter.read(_utils.unwrap(values));
         for (const callback of callbacks) {
             const scheduleResult = callback(result);
-            if (isPromiseLike(scheduleResult)) {
+            if (_utils.isPromiseLike(scheduleResult)) {
                 (schedulePromises1 = schedulePromises1 || []).push(scheduleResult);
             }
         }
         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);
@@ -2115,7 +2024,7 @@ function commitComponent(ctx, schedulePromises, hydrationNodes) {
                 ctx.ret.fallback = undefined;
             });
             let onAbort;
-            const scheduleP = safeRace([
+            const scheduleP = _utils.safeRace([
                 scheduleCallbacksP,
                 new Promise((resolve) => (onAbort = resolve)),
             ]).finally(() => {
@@ -2147,6 +2056,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 = _utils.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
@@ -2157,14 +2097,20 @@ function propagateComponent(ctx) {
     const values = getChildValues(ctx.ret, ctx.index);
     eventTarget.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);
 }
@@ -2180,7 +2126,7 @@ async function unmountComponent(ctx, isNested) {
         cleanupMap.delete(ctx);
         for (const callback of callbacks) {
             const cleanup = callback(oldResult);
-            if (isPromiseLike(cleanup)) {
+            if (_utils.isPromiseLike(cleanup)) {
                 (cleanupPromises = cleanupPromises || []).push(cleanup);
             }
         }
@@ -2243,7 +2189,7 @@ async function unmountComponent(ctx, isNested) {
                 setFlag(ctx.ret, IsExecuting);
                 const oldResult = ctx.adapter.read(getValue(ctx.ret));
                 const iterationP = ctx.iterator.next(oldResult);
-                if (isPromiseLike(iterationP)) {
+                if (_utils.isPromiseLike(iterationP)) {
                     if (!getFlag(ctx.ret, IsAsyncGen)) {
                         throw new Error("Mixed generator component");
                     }
@@ -2270,7 +2216,7 @@ async function unmountComponent(ctx, isNested) {
             try {
                 setFlag(ctx.ret, IsExecuting);
                 const iterationP = ctx.iterator.return();
-                if (isPromiseLike(iterationP)) {
+                if (_utils.isPromiseLike(iterationP)) {
                     if (!getFlag(ctx.ret, IsAsyncGen)) {
                         throw new Error("Mixed generator component");
                     }
@@ -2319,7 +2265,7 @@ function handleChildError(ctx, err) {
     finally {
         setFlag(ctx.ret, IsExecuting, false);
     }
-    if (isPromiseLike(iteration)) {
+    if (_utils.isPromiseLike(iteration)) {
         return iteration.then((iteration) => {
             if (iteration.done) {
                 setFlag(ctx.ret, IsSyncGen, false);
@@ -2358,7 +2304,7 @@ function propagateError(ctx, err, schedulePromises) {
     catch (err) {
         return propagateError(parent, err, schedulePromises);
     }
-    if (isPromiseLike(diff)) {
+    if (_utils.isPromiseLike(diff)) {
         return diff.then(() => void commitComponent(parent, schedulePromises), (err) => propagateError(parent, err, schedulePromises));
     }
     commitComponent(parent, schedulePromises);