@b9g/crank 0.7.2 → 0.7.4

package/umd.js

@@ -743,6 +743,7 @@
 	            tagName: getTagName(Portal),
 	            props: stripSpecialProps(ret.el.props),
 	            scope: undefined,
+	            root,
 	        });
 	        // remember that typeof null === "object"
 	        if (typeof root === "object" && root !== null && children != null) {
@@ -765,32 +766,32 @@
 	    const schedulePromises = [];
 	    if (isPromiseLike(diff)) {
 	        return diff.then(() => {
-	            commit(adapter, ret, ret, ret.ctx, ret.scope, 0, schedulePromises, undefined);
+	            commit(adapter, ret, ret, ret.ctx, ret.scope, root, 0, schedulePromises, undefined);
 	            if (schedulePromises.length > 0) {
 	                return Promise.all(schedulePromises).then(() => {
 	                    if (typeof root !== "object" || root === null) {
-	                        unmount(adapter, ret, ret.ctx, ret, false);
+	                        unmount(adapter, ret, ret.ctx, root, ret, false);
 	                    }
 	                    return adapter.read(unwrap(getChildValues(ret)));
 	                });
 	            }
 	            if (typeof root !== "object" || root === null) {
-	                unmount(adapter, ret, ret.ctx, ret, false);
+	                unmount(adapter, ret, ret.ctx, root, ret, false);
 	            }
 	            return adapter.read(unwrap(getChildValues(ret)));
 	        });
 	    }
-	    commit(adapter, ret, ret, ret.ctx, ret.scope, 0, schedulePromises, undefined);
+	    commit(adapter, ret, ret, ret.ctx, ret.scope, root, 0, schedulePromises, undefined);
 	    if (schedulePromises.length > 0) {
 	        return Promise.all(schedulePromises).then(() => {
 	            if (typeof root !== "object" || root === null) {
-	                unmount(adapter, ret, ret.ctx, ret, false);
+	                unmount(adapter, ret, ret.ctx, root, ret, false);
 	            }
 	            return adapter.read(unwrap(getChildValues(ret)));
 	        });
 	    }
 	    if (typeof root !== "object" || root === null) {
-	        unmount(adapter, ret, ret.ctx, ret, false);
+	        unmount(adapter, ret, ret.ctx, root, ret, false);
 	    }
 	    return adapter.read(unwrap(getChildValues(ret)));
 	}
@@ -1040,11 +1041,12 @@
 	            tagName: getTagName(tag),
 	            props: el.props,
 	            scope,
+	            root,
 	        });
 	    }
 	    return diffChildren(adapter, root, ret, ctx, scope, ret, ret.el.props.children);
 	}
-	function commit(adapter, host, ret, ctx, scope, index, schedulePromises, hydrationNodes) {
+	function commit(adapter, host, ret, ctx, scope, root, index, schedulePromises, hydrationNodes) {
 	    if (getFlag(ret, IsCopied) && getFlag(ret, DidCommit)) {
 	        return getValue(ret);
 	    }
@@ -1077,19 +1079,19 @@
 	    }
 	    else {
 	        if (tag === Fragment) {
-	            value = commitChildren(adapter, host, ctx, scope, ret, index, schedulePromises, hydrationNodes);
+	            value = commitChildren(adapter, host, ctx, scope, root, ret, index, schedulePromises, hydrationNodes);
 	        }
 	        else if (tag === Text) {
-	            value = commitText(adapter, ret, el, scope, hydrationNodes);
+	            value = commitText(adapter, ret, el, scope, hydrationNodes, root);
 	        }
 	        else if (tag === Raw) {
-	            value = commitRaw(adapter, host, ret, scope, hydrationNodes);
+	            value = commitRaw(adapter, host, ret, scope, hydrationNodes, root);
 	        }
 	        else {
-	            value = commitHost(adapter, ret, ctx, schedulePromises, hydrationNodes);
+	            value = commitHost(adapter, ret, ctx, root, schedulePromises, hydrationNodes);
 	        }
 	        if (ret.fallback) {
-	            unmount(adapter, host, ctx, ret.fallback, false);
+	            unmount(adapter, host, ctx, root, ret.fallback, false);
 	            ret.fallback = undefined;
 	        }
 	    }
@@ -1107,7 +1109,7 @@
 	    }
 	    return value;
 	}
-	function commitChildren(adapter, host, ctx, scope, parent, index, schedulePromises, hydrationNodes) {
+	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];
@@ -1130,6 +1132,7 @@
 	                        node,
 	                        parentNode: host.value,
 	                        isNested: false,
+	                        root,
 	                    });
 	                }
 	            }
@@ -1189,7 +1192,7 @@
 	            schedulePromises.push(safeRace(schedulePromises1));
 	        }
 	        if (child) {
-	            const value = commit(adapter, host, child, ctx, scope, index, schedulePromises, hydrationNodes);
+	            const value = commit(adapter, host, child, ctx, scope, root, index, schedulePromises, hydrationNodes);
 	            if (Array.isArray(value)) {
 	                for (let j = 0; j < value.length; j++) {
 	                    values.push(value[j]);
@@ -1205,7 +1208,7 @@
 	    if (parent.graveyard) {
 	        for (let i = 0; i < parent.graveyard.length; i++) {
 	            const child = parent.graveyard[i];
-	            unmount(adapter, host, ctx, child, false);
+	            unmount(adapter, host, ctx, root, child, false);
 	        }
 	        parent.graveyard = undefined;
 	    }
@@ -1216,17 +1219,18 @@
 	    }
 	    return values;
 	}
-	function commitText(adapter, ret, el, scope, hydrationNodes) {
+	function commitText(adapter, ret, el, scope, hydrationNodes, root) {
 	    const value = adapter.text({
 	        value: el.props.value,
 	        scope,
 	        oldNode: ret.value,
 	        hydrationNodes,
+	        root,
 	    });
 	    ret.value = value;
 	    return value;
 	}
-	function commitRaw(adapter, host, ret, scope, hydrationNodes) {
+	function commitRaw(adapter, host, ret, scope, hydrationNodes, root) {
 	    if (!ret.oldProps || ret.oldProps.value !== ret.el.props.value) {
 	        const oldNodes = wrap(ret.value);
 	        for (let i = 0; i < oldNodes.length; i++) {
@@ -1235,18 +1239,20 @@
 	                node: oldNode,
 	                parentNode: host.value,
 	                isNested: false,
+	                root,
 	            });
 	        }
 	        ret.value = adapter.raw({
 	            value: ret.el.props.value,
 	            scope,
 	            hydrationNodes,
+	            root,
 	        });
 	    }
 	    ret.oldProps = stripSpecialProps(ret.el.props);
 	    return ret.value;
 	}
-	function commitHost(adapter, ret, ctx, schedulePromises, hydrationNodes) {
+	function commitHost(adapter, ret, ctx, root, schedulePromises, hydrationNodes) {
 	    if (getFlag(ret, IsCopied) && getFlag(ret, DidCommit)) {
 	        return getValue(ret);
 	    }
@@ -1299,6 +1305,7 @@
 	                    node,
 	                    props,
 	                    scope,
+	                    root,
 	                });
 	                if (childHydrationNodes) {
 	                    for (let i = 0; i < childHydrationNodes.length; i++) {
@@ -1306,6 +1313,7 @@
 	                            node: childHydrationNodes[i],
 	                            parentNode: node,
 	                            isNested: false,
+	                            root,
 	                        });
 	                    }
 	                }
@@ -1334,6 +1342,7 @@
 	                    node: nextChild,
 	                    props,
 	                    scope,
+	                    root,
 	                });
 	                if (childHydrationNodes) {
 	                    node = nextChild;
@@ -1342,6 +1351,7 @@
 	                            node: childHydrationNodes[i],
 	                            parentNode: node,
 	                            isNested: false,
+	                            root,
 	                        });
 	                    }
 	                }
@@ -1356,6 +1366,7 @@
 	                    tagName: getTagName(tag),
 	                    props,
 	                    scope,
+	                    root,
 	                });
 	            }
 	            ret.value = node;
@@ -1369,13 +1380,14 @@
 	            props,
 	            oldProps,
 	            scope,
+	            root,
 	            copyProps,
 	            isHydrating: !!childHydrationNodes,
 	            quietProps,
 	        });
 	    }
 	    if (!copyChildren) {
-	        const children = commitChildren(adapter, ret, ctx, scope, ret, 0, schedulePromises, hydrationMetaProp && !hydrationMetaProp.includes("children")
+	        const children = commitChildren(adapter, ret, ctx, scope, tag === Portal ? node : root, ret, 0, schedulePromises, hydrationMetaProp && !hydrationMetaProp.includes("children")
 	            ? undefined
 	            : childHydrationNodes);
 	        adapter.arrange({
@@ -1385,6 +1397,7 @@
 	            props,
 	            children,
 	            oldProps,
+	            root,
 	        });
 	    }
 	    ret.oldProps = props;
@@ -1485,10 +1498,10 @@
 	        }
 	    }
 	}
-	function unmount(adapter, host, ctx, ret, isNested) {
+	function unmount(adapter, host, ctx, root, ret, isNested) {
 	    // TODO: set the IsUnmounted flag consistently for all retainers
 	    if (ret.fallback) {
-	        unmount(adapter, host, ctx, ret.fallback, isNested);
+	        unmount(adapter, host, ctx, root, ret.fallback, isNested);
 	        ret.fallback = undefined;
 	    }
 	    if (getFlag(ret, IsResurrecting)) {
@@ -1499,7 +1512,7 @@
 	            const lingerers = ret.lingerers[i];
 	            if (lingerers) {
 	                for (const lingerer of lingerers) {
-	                    unmount(adapter, host, ctx, lingerer, isNested);
+	                    unmount(adapter, host, ctx, root, lingerer, isNested);
 	                }
 	            }
 	        }
@@ -1509,16 +1522,16 @@
 	        unmountComponent(ret.ctx, isNested);
 	    }
 	    else if (ret.el.tag === Fragment) {
-	        unmountChildren(adapter, host, ctx, ret, isNested);
+	        unmountChildren(adapter, host, ctx, root, ret, isNested);
 	    }
 	    else if (ret.el.tag === Portal) {
-	        unmountChildren(adapter, ret, ctx, ret, false);
+	        unmountChildren(adapter, ret, ctx, ret.value, ret, false);
 	        if (ret.value != null) {
 	            adapter.finalize(ret.value);
 	        }
 	    }
 	    else {
-	        unmountChildren(adapter, ret, ctx, ret, true);
+	        unmountChildren(adapter, ret, ctx, root, ret, true);
 	        if (getFlag(ret, DidCommit)) {
 	            if (ctx) {
 	                // Remove the value from every context which shares the same host.
@@ -1528,22 +1541,23 @@
 	                node: ret.value,
 	                parentNode: host.value,
 	                isNested,
+	                root,
 	            });
 	        }
 	    }
 	}
-	function unmountChildren(adapter, host, ctx, ret, isNested) {
+	function unmountChildren(adapter, host, ctx, root, ret, isNested) {
 	    if (ret.graveyard) {
 	        for (let i = 0; i < ret.graveyard.length; i++) {
 	            const child = ret.graveyard[i];
-	            unmount(adapter, host, ctx, child, isNested);
+	            unmount(adapter, host, ctx, root, child, 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, child, isNested);
+	            unmount(adapter, host, ctx, root, child, isNested);
 	        }
 	    }
 	}
@@ -2337,7 +2351,7 @@
 	        });
 	        return getValue(ctx.ret);
 	    }
-	    const values = commitChildren(ctx.adapter, ctx.host, ctx, ctx.scope, ctx.ret, ctx.index, schedulePromises, hydrationNodes);
+	    const values = commitChildren(ctx.adapter, ctx.host, ctx, ctx.scope, ctx.root, ctx.ret, ctx.index, schedulePromises, hydrationNodes);
 	    if (getFlag(ctx.ret, IsUnmounted)) {
 	        return;
 	    }
@@ -2361,7 +2375,7 @@
 	                setFlag(ctx.ret, IsScheduling, wasScheduling);
 	                propagateComponent(ctx);
 	                if (ctx.ret.fallback) {
-	                    unmount(ctx.adapter, ctx.host, ctx.parent, ctx.ret.fallback, false);
+	                    unmount(ctx.adapter, ctx.host, ctx.parent, ctx.root, ctx.ret.fallback, false);
 	                }
 	                ctx.ret.fallback = undefined;
 	            });
@@ -2387,7 +2401,7 @@
 	            propagateComponent(ctx);
 	        }
 	        if (ctx.ret.fallback) {
-	            unmount(ctx.adapter, ctx.host, ctx.parent, ctx.ret.fallback, false);
+	            unmount(ctx.adapter, ctx.host, ctx.parent, ctx.root, ctx.ret.fallback, false);
 	        }
 	        ctx.ret.fallback = undefined;
 	        setFlag(ctx.ret, IsUpdating, false);
@@ -2453,6 +2467,7 @@
 	        props,
 	        oldProps: props,
 	        children: hostChildren,
+	        root: ctx.root,
 	    });
 	    flush(ctx.adapter, ctx.root, ctx);
 	}
@@ -2507,7 +2522,7 @@
 	        ctx.schedule = undefined;
 	    }
 	    clearEventListeners(ctx.ctx);
-	    unmountChildren(ctx.adapter, ctx.host, ctx, ctx.ret, isNested);
+	    unmountChildren(ctx.adapter, ctx.host, ctx, ctx.root, ctx.ret, isNested);
 	    if (didLinger) {
 	        // If we lingered, we call finalize to ensure rendering is finalized
 	        if (ctx.root != null) {
@@ -2728,6 +2743,15 @@
 
 	const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 	const MATHML_NAMESPACE = "http://www.w3.org/1998/Math/MathML";
+	function getRootDocument(root) {
+	    if (root && root.ownerDocument) {
+	        return root.ownerDocument;
+	    }
+	    if (root && root.nodeType === Node.DOCUMENT_NODE) {
+	        return root;
+	    }
+	    return document;
+	}
 	function isWritableProperty(element, name) {
 	    // walk up the object's prototype chain to find the owner
 	    let propOwner = element;
@@ -2758,11 +2782,18 @@
 	        else if (expectedValue === true || expectedValue === "") {
 	            console.warn(`Expected "${showName}" to be ${expectedValue === true ? "present" : '""'} but found ${String(actualValue)} while hydrating:`, element);
 	        }
-	        else if (typeof window !== "undefined" &&
-	            window.location &&
-	            new URL(expectedValue, window.location.origin).href ===
-	                new URL(actualValue, window.location.origin).href) ;
 	        else {
+	            // Check if this is a URL mismatch that's actually just resolution
+	            const win = element.ownerDocument.defaultView;
+	            if (win && win.location) {
+	                const origin = win.location.origin;
+	                if (new URL(expectedValue, origin).href ===
+	                    new URL(actualValue, origin).href) {
+	                    // attrs which are URLs will often be resolved to their full
+	                    // href in the DOM, so we squash these errors
+	                    return;
+	                }
+	            }
 	            console.warn(`Expected "${showName}" to be "${String(expectedValue)}" but found ${String(actualValue)} while hydrating:`, element);
 	        }
 	    }
@@ -2783,7 +2814,7 @@
 	        }
 	        return props.xmlns || xmlns;
 	    },
-	    create({ tag, tagName, scope: xmlns, }) {
+	    create({ tag, tagName, scope: xmlns, root, }) {
 	        if (typeof tag !== "string") {
 	            throw new Error(`Unknown tag: ${tagName}`);
 	        }
@@ -2793,18 +2824,18 @@
 	        else if (tag.toLowerCase() === "math") {
 	            xmlns = MATHML_NAMESPACE;
 	        }
-	        return xmlns
-	            ? document.createElementNS(xmlns, tag)
-	            : document.createElement(tag);
+	        const doc = getRootDocument(root);
+	        return xmlns ? doc.createElementNS(xmlns, tag) : doc.createElement(tag);
 	    },
-	    adopt({ tag, tagName, node, }) {
+	    adopt({ tag, tagName, node, root, }) {
 	        if (typeof tag !== "string" && tag !== Portal) {
 	            throw new Error(`Unknown tag: ${tagName}`);
 	        }
-	        if (node === document.body ||
-	            node === document.head ||
-	            node === document.documentElement ||
-	            node === document) {
+	        const doc = getRootDocument(root);
+	        if (node === doc.body ||
+	            node === doc.head ||
+	            node === doc.documentElement ||
+	            node === doc) {
 	            console.warn(`Hydrating ${node.nodeName.toLowerCase()} is discouraged as it is destructive and may remove unknown nodes.`);
 	        }
 	        if (node == null ||
@@ -2962,19 +2993,28 @@
 	                        const hydratingClassName = isHydrating
 	                            ? element.getAttribute("class")
 	                            : undefined;
-	                        for (const className in { ...oldValue, ...value }) {
-	                            const classValue = value && value[className];
-	                            if (classValue) {
-	                                element.classList.add(className);
-	                                if (hydratingClasses && hydratingClasses.has(className)) {
-	                                    hydratingClasses.delete(className);
-	                                }
-	                                else if (isHydrating) {
-	                                    shouldIssueWarning = true;
-	                                }
+	                        const allClassNames = { ...oldValue, ...value };
+	                        // Two passes: removes first, then adds. This ensures that
+	                        // overlapping classes in different keys are handled correctly.
+	                        // e.g. {"a b": false, "b c": true} should result in "b c"
+	                        for (const classNames in allClassNames) {
+	                            if (!(value && value[classNames])) {
+	                                const classes = classNames.split(/\s+/).filter(Boolean);
+	                                element.classList.remove(...classes);
 	                            }
-	                            else {
-	                                element.classList.remove(className);
+	                        }
+	                        for (const classNames in allClassNames) {
+	                            if (value && value[classNames]) {
+	                                const classes = classNames.split(/\s+/).filter(Boolean);
+	                                element.classList.add(...classes);
+	                                for (const className of classes) {
+	                                    if (hydratingClasses && hydratingClasses.has(className)) {
+	                                        hydratingClasses.delete(className);
+	                                    }
+	                                    else if (isHydrating) {
+	                                        shouldIssueWarning = true;
+	                                    }
+	                                }
 	                            }
 	                        }
 	                        if (shouldIssueWarning ||
@@ -3023,7 +3063,22 @@
 	                        !(typeof value === "string" &&
 	                            typeof element[name] === "boolean") &&
 	                        isWritableProperty(element, name)) {
-	                        if (element[name] !== value || oldValue === undefined) {
+	                        // For URL properties like src and href, the DOM property returns the
+	                        // resolved absolute URL. We need to resolve the prop value the same way
+	                        // to compare correctly.
+	                        let domValue = element[name];
+	                        let propValue = value;
+	                        if ((name === "src" || name === "href") &&
+	                            typeof value === "string" &&
+	                            typeof domValue === "string") {
+	                            try {
+	                                propValue = new URL(value, element.baseURI).href;
+	                            }
+	                            catch {
+	                                // Invalid URL, use original value for comparison
+	                            }
+	                        }
+	                        if (propValue !== domValue || oldValue === undefined) {
 	                            if (isHydrating &&
 	                                typeof element[name] === "string" &&
 	                                element[name] !== value) {
@@ -3086,7 +3141,8 @@
 	            parentNode.removeChild(node);
 	        }
 	    },
-	    text({ value, oldNode, hydrationNodes, }) {
+	    text({ value, oldNode, hydrationNodes, root, }) {
+	        const doc = getRootDocument(root);
 	        if (hydrationNodes != null) {
 	            let node = hydrationNodes.shift();
 	            if (!node || node.nodeType !== Node.TEXT_NODE) {
@@ -3100,7 +3156,7 @@
 	                        // the text node is longer than the expected text, so we
 	                        // reuse the existing text node, but truncate it and unshift the rest
 	                        node.data = value;
-	                        hydrationNodes.unshift(document.createTextNode(textData.slice(value.length)));
+	                        hydrationNodes.unshift(doc.createTextNode(textData.slice(value.length)));
 	                        return node;
 	                    }
 	                }
@@ -3118,16 +3174,17 @@
 	            }
 	            return oldNode;
 	        }
-	        return document.createTextNode(value);
+	        return doc.createTextNode(value);
 	    },
-	    raw({ value, scope: xmlns, hydrationNodes, }) {
+	    raw({ value, scope: xmlns, hydrationNodes, root, }) {
 	        let nodes;
 	        if (typeof value === "string") {
+	            const doc = getRootDocument(root);
 	            const el = xmlns == null
-	                ? document.createElement("div")
+	                ? doc.createElement("div")
 	                : xmlns === SVG_NAMESPACE
-	                    ? document.createElementNS(xmlns, "svg")
-	                    : document.createElementNS(xmlns, "math");
+	                    ? doc.createElementNS(xmlns, "svg")
+	                    : doc.createElementNS(xmlns, "math");
 	            el.innerHTML = value;
 	            nodes = Array.from(el.childNodes);
 	        }
@@ -3255,6 +3312,20 @@
 	            }
 	            attrs.push(`class="${escape(value)}"`);
 	        }
+	        else if (name === "class") {
+	            if (typeof value === "string") {
+	                attrs.push(`class="${escape(value)}"`);
+	            }
+	            else if (typeof value === "object" && value !== null) {
+	                // class={{"foo bar": true, "baz": false}} syntax
+	                const classes = Object.keys(value)
+	                    .filter((k) => value[k])
+	                    .join(" ");
+	                if (classes) {
+	                    attrs.push(`class="${escape(classes)}"`);
+	                }
+	            }
+	        }
 	        else {
 	            if (name.startsWith("attr:")) {
 	                name = name.slice("attr:".length);