@b9g/crank 0.7.4 → 0.7.6

package/crank.js

@@ -248,9 +248,15 @@ function getValue(ret, isNested = false, index) {
 function getChildValues(ret, startIndex) {
     const values = [];
     const lingerers = ret.lingerers;
-    const children = wrap(ret.children);
+    const rawChildren = ret.children;
+    const isChildrenArray = Array.isArray(rawChildren);
+    const childrenLength = rawChildren === undefined
+        ? 0
+        : isChildrenArray
+            ? rawChildren.length
+            : 1;
     let currentIndex = startIndex;
-    for (let i = 0; i < children.length; i++) {
+    for (let i = 0; i < childrenLength; i++) {
         if (lingerers != null && lingerers[i] != null) {
             const rets = lingerers[i];
             for (const ret of rets) {
@@ -271,7 +277,9 @@ function getChildValues(ret, startIndex) {
                 }
             }
         }
-        const child = children[i];
+        const child = isChildrenArray
+            ? rawChildren[i]
+            : rawChildren;
         if (child) {
             const value = getValue(child, true, currentIndex);
             if (Array.isArray(value)) {
@@ -290,8 +298,8 @@ function getChildValues(ret, startIndex) {
             }
         }
     }
-    if (lingerers != null && lingerers.length > children.length) {
-        for (let i = children.length; i < lingerers.length; i++) {
+    if (lingerers != null && lingerers.length > childrenLength) {
+        for (let i = childrenLength; i < lingerers.length; i++) {
             const rets = lingerers[i];
             if (rets != null) {
                 for (const ret of rets) {
@@ -450,7 +458,155 @@ function renderRoot(adapter, root, ret, children) {
     }
     return adapter.read(unwrap(getChildValues(ret)));
 }
+function diffChild(adapter, root, host, ctx, scope, parent, newChildren) {
+    let child = narrow(newChildren);
+    let ret = parent.children;
+    let graveyard;
+    let diff;
+    if (typeof child === "object") {
+        let childCopied = false;
+        // Check key match
+        const oldKey = typeof ret === "object" ? ret.el.props.key : undefined;
+        const newKey = child.props.key;
+        if (oldKey !== newKey) {
+            if (typeof ret === "object") {
+                (graveyard = graveyard || []).push(ret);
+            }
+            ret = undefined;
+        }
+        if (child.tag === Copy) {
+            childCopied = true;
+        }
+        else if (typeof ret === "object" &&
+            ret.el === child &&
+            getFlag(ret, DidCommit)) {
+            childCopied = true;
+        }
+        else {
+            if (ret && ret.el.tag === child.tag) {
+                ret.el = child;
+                if (child.props.copy && typeof child.props.copy !== "string") {
+                    childCopied = true;
+                }
+            }
+            else if (ret) {
+                let candidateFound = false;
+                for (let predecessor = ret, candidate = ret.fallback; candidate; predecessor = candidate, candidate = candidate.fallback) {
+                    if (candidate.el.tag === child.tag) {
+                        const clone = cloneRetainer(candidate);
+                        setFlag(clone, IsResurrecting);
+                        predecessor.fallback = clone;
+                        const fallback = ret;
+                        ret = candidate;
+                        ret.el = child;
+                        ret.fallback = fallback;
+                        setFlag(ret, DidDiff, false);
+                        candidateFound = true;
+                        break;
+                    }
+                }
+                if (!candidateFound) {
+                    const fallback = ret;
+                    ret = new Retainer(child);
+                    ret.fallback = fallback;
+                }
+            }
+            else {
+                ret = new Retainer(child);
+            }
+            if (childCopied && getFlag(ret, DidCommit)) ;
+            else if (child.tag === Raw || child.tag === Text) ;
+            else if (child.tag === Fragment) {
+                diff = diffChildren(adapter, root, host, ctx, scope, ret, ret.el.props.children);
+            }
+            else if (typeof child.tag === "function") {
+                diff = diffComponent(adapter, root, host, ctx, scope, ret);
+            }
+            else {
+                diff = diffHost(adapter, root, ctx, scope, ret);
+            }
+        }
+        if (typeof ret === "object") {
+            if (childCopied) {
+                setFlag(ret, IsCopied);
+                diff = getInflightDiff(ret);
+            }
+            else {
+                setFlag(ret, IsCopied, false);
+            }
+        }
+    }
+    else if (typeof child === "string") {
+        if (typeof ret === "object" && ret.el.tag === Text) {
+            ret.el.props.value = child;
+        }
+        else {
+            if (typeof ret === "object") {
+                (graveyard = graveyard || []).push(ret);
+            }
+            ret = new Retainer(createElement(Text, { value: child }));
+        }
+    }
+    else {
+        if (typeof ret === "object") {
+            (graveyard = graveyard || []).push(ret);
+        }
+        ret = undefined;
+    }
+    parent.children = ret;
+    if (isPromiseLike(diff)) {
+        const diff1 = diff.finally(() => {
+            setFlag(parent, DidDiff);
+            if (graveyard) {
+                if (parent.graveyard) {
+                    for (let i = 0; i < graveyard.length; i++) {
+                        parent.graveyard.push(graveyard[i]);
+                    }
+                }
+                else {
+                    parent.graveyard = graveyard;
+                }
+            }
+        });
+        let onNextDiffs;
+        const diff2 = (parent.pendingDiff = safeRace([
+            diff1,
+            new Promise((resolve) => (onNextDiffs = resolve)),
+        ]));
+        if (parent.onNextDiff) {
+            parent.onNextDiff(diff2);
+        }
+        parent.onNextDiff = onNextDiffs;
+        return diff2;
+    }
+    else {
+        setFlag(parent, DidDiff);
+        if (graveyard) {
+            if (parent.graveyard) {
+                for (let i = 0; i < graveyard.length; i++) {
+                    parent.graveyard.push(graveyard[i]);
+                }
+            }
+            else {
+                parent.graveyard = graveyard;
+            }
+        }
+        if (parent.onNextDiff) {
+            parent.onNextDiff(diff);
+            parent.onNextDiff = undefined;
+        }
+        parent.pendingDiff = undefined;
+    }
+}
 function diffChildren(adapter, root, host, ctx, scope, parent, newChildren) {
+    // Fast path for the common single non-keyed child case
+    if (!Array.isArray(newChildren) &&
+        (typeof newChildren !== "object" ||
+            newChildren === null ||
+            typeof newChildren[Symbol.iterator] !== "function") &&
+        !Array.isArray(parent.children)) {
+        return diffChild(adapter, root, host, ctx, scope, parent, newChildren);
+    }
     const oldRetained = wrap(parent.children);
     const newRetained = [];
     const newChildren1 = arrayify(newChildren);
@@ -751,7 +907,7 @@ function commit(adapter, host, ret, ctx, scope, root, index, schedulePromises, h
         }
     }
     if (skippedHydrationNodes) {
-        skippedHydrationNodes.splice(0, wrap(value).length);
+        skippedHydrationNodes.splice(0, value == null ? 0 : Array.isArray(value) ? value.length : 1);
     }
     if (!getFlag(ret, DidCommit)) {
         setFlag(ret, DidCommit);
@@ -766,8 +922,17 @@ function commit(adapter, host, ret, ctx, scope, root, index, schedulePromises, h
 }
 function commitChildren(adapter, host, ctx, scope, root, parent, index, schedulePromises, hydrationNodes) {
     let values = [];
-    for (let i = 0, children = wrap(parent.children); i < children.length; i++) {
-        let child = children[i];
+    const rawChildren = parent.children;
+    const isChildrenArray = Array.isArray(rawChildren);
+    const childrenLength = rawChildren === undefined
+        ? 0
+        : isChildrenArray
+            ? rawChildren.length
+            : 1;
+    for (let i = 0; i < childrenLength; i++) {
+        let child = isChildrenArray
+            ? rawChildren[i]
+            : rawChildren;
         let schedulePromises1;
         let isSchedulingFallback = false;
         while (child &&
@@ -1052,6 +1217,7 @@ function commitHost(adapter, ret, ctx, root, schedulePromises, hydrationNodes) {
             props,
             children,
             oldProps,
+            scope,
             root,
         });
     }
@@ -1209,12 +1375,18 @@ function unmountChildren(adapter, host, ctx, root, ret, isNested) {
         }
         ret.graveyard = undefined;
     }
-    for (let i = 0, children = wrap(ret.children); i < children.length; i++) {
-        const child = children[i];
-        if (typeof child === "object") {
-            unmount(adapter, host, ctx, root, child, isNested);
+    const rawChildren = ret.children;
+    if (Array.isArray(rawChildren)) {
+        for (let i = 0; i < rawChildren.length; i++) {
+            const child = rawChildren[i];
+            if (typeof child === "object") {
+                unmount(adapter, host, ctx, root, child, isNested);
+            }
         }
     }
+    else if (rawChildren !== undefined) {
+        unmount(adapter, host, ctx, root, rawChildren, isNested);
+    }
 }
 const provisionMaps = new WeakMap();
 const scheduleMap = new WeakMap();
@@ -2084,12 +2256,16 @@ function isRetainerActive(target, 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);
+            if (Array.isArray(current.children)) {
+                for (const child of current.children) {
+                    if (child) {
+                        stack.push(child);
+                    }
                 }
             }
+            else {
+                stack.push(current.children);
+            }
         }
         // Add fallback chains (only if current retainer is using fallback)
         if (current.fallback && !getFlag(current, DidDiff)) {
@@ -2113,6 +2289,11 @@ function propagateComponent(ctx) {
     if (!isRetainerActive(initiator, host)) {
         return;
     }
+    // Check if host has been committed (has a node)
+    // Fixes #334: refresh() called before component yields
+    if (!getFlag(host, DidCommit)) {
+        return;
+    }
     const props = stripSpecialProps(host.el.props);
     const hostChildren = getChildValues(host, 0);
     ctx.adapter.arrange({
@@ -2122,6 +2303,7 @@ function propagateComponent(ctx) {
         props,
         oldProps: props,
         children: hostChildren,
+        scope: host.scope,
         root: ctx.root,
     });
     flush(ctx.adapter, ctx.root, ctx);