@b9g/crank 0.7.0 → 0.7.2

package/umd.js

@@ -510,6 +510,7 @@
 	const IsInForAwaitOfLoop = 1 << 14;
 	const NeedsToYield = 1 << 15;
 	const PropsAvailable = 1 << 16;
+	const IsSchedulingRefresh = 1 << 17;
 	function getFlag(ret, flag) {
 	    return !!(ret.f & flag);
 	}
@@ -863,10 +864,10 @@
 	                    }
 	                }
 	                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,
@@ -1701,6 +1702,9 @@
 	                });
 	            }
 	        }
+	        if (getFlag(ctx.ret, IsScheduling)) {
+	            setFlag(ctx.ret, IsSchedulingRefresh);
+	        }
 	        let diff;
 	        const schedulePromises = [];
 	        try {
@@ -2046,10 +2050,11 @@
 	        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;
@@ -2095,11 +2100,12 @@
 	                    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;
@@ -2331,18 +2337,17 @@
 	        });
 	        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) {
@@ -2353,7 +2358,7 @@
 	        }
 	        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);
@@ -2393,6 +2398,37 @@
 	    // 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
@@ -2403,14 +2439,20 @@
 	    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);
 	}
@@ -2610,7 +2652,82 @@
 	    commitComponent(parent, schedulePromises);
 	}
 
+	/**
+	 * CSS utility functions for style property transformation.
+	 *
+	 * This module handles camelCase to kebab-case conversion and automatic
+	 * px unit conversion for numeric CSS values, making Crank more React-compatible.
+	 */
+	/**
+	 * Converts camelCase CSS property names to kebab-case.
+	 * Handles vendor prefixes correctly (WebkitTransform -> -webkit-transform).
+	 */
+	function camelToKebabCase(str) {
+	    // Handle vendor prefixes that start with capital letters (WebkitTransform -> -webkit-transform)
+	    if (/^[A-Z]/.test(str)) {
+	        return `-${str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`).slice(1)}`;
+	    }
+	    // Handle normal camelCase (fontSize -> font-size)
+	    return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+	}
+	/**
+	 * CSS properties that should remain unitless when given numeric values.
+	 * Based on React's list of unitless properties.
+	 */
+	const UNITLESS_PROPERTIES = new Set([
+	    "animation-iteration-count",
+	    "aspect-ratio",
+	    "border-image-outset",
+	    "border-image-slice",
+	    "border-image-width",
+	    "box-flex",
+	    "box-flex-group",
+	    "box-ordinal-group",
+	    "column-count",
+	    "columns",
+	    "flex",
+	    "flex-grow",
+	    "flex-positive",
+	    "flex-shrink",
+	    "flex-negative",
+	    "flex-order",
+	    "font-weight",
+	    "grid-area",
+	    "grid-column",
+	    "grid-column-end",
+	    "grid-column-span",
+	    "grid-column-start",
+	    "grid-row",
+	    "grid-row-end",
+	    "grid-row-span",
+	    "grid-row-start",
+	    "line-height",
+	    "opacity",
+	    "order",
+	    "orphans",
+	    "tab-size",
+	    "widows",
+	    "z-index",
+	    "zoom",
+	]);
+	/**
+	 * Formats CSS property values, automatically adding "px" to numeric values
+	 * for properties that are not unitless.
+	 */
+	function formatStyleValue(name, value) {
+	    if (typeof value === "number") {
+	        // If the property should remain unitless, keep the number as-is
+	        if (UNITLESS_PROPERTIES.has(name)) {
+	            return String(value);
+	        }
+	        // Otherwise, append "px" for numeric values
+	        return `${value}px`;
+	    }
+	    return String(value);
+	}
+
 	const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+	const MATHML_NAMESPACE = "http://www.w3.org/1998/Math/MathML";
 	function isWritableProperty(element, name) {
 	    // walk up the object's prototype chain to find the owner
 	    let propOwner = element;
@@ -2660,6 +2777,9 @@
 	            case "svg":
 	                xmlns = SVG_NAMESPACE;
 	                break;
+	            case "math":
+	                xmlns = MATHML_NAMESPACE;
+	                break;
 	        }
 	        return props.xmlns || xmlns;
 	    },
@@ -2670,6 +2790,9 @@
 	        else if (tag.toLowerCase() === "svg") {
 	            xmlns = SVG_NAMESPACE;
 	        }
+	        else if (tag.toLowerCase() === "math") {
+	            xmlns = MATHML_NAMESPACE;
+	        }
 	        return xmlns
 	            ? document.createElementNS(xmlns, tag)
 	            : document.createElement(tag);
@@ -2702,6 +2825,7 @@
 	        }
 	        const element = node;
 	        const isSVG = xmlns === SVG_NAMESPACE;
+	        const isMathML = xmlns === MATHML_NAMESPACE;
 	        for (let name in { ...oldProps, ...props }) {
 	            let value = props[name];
 	            const oldValue = oldProps ? oldProps[name] : undefined;
@@ -2782,26 +2906,30 @@
 	                            style.cssText = "";
 	                        }
 	                        for (const styleName in { ...oldValue, ...value }) {
+	                            const cssName = camelToKebabCase(styleName);
 	                            const styleValue = value && value[styleName];
 	                            if (styleValue == null) {
-	                                if (isHydrating && style.getPropertyValue(styleName) !== "") {
-	                                    emitHydrationWarning(name, quietProps, null, style.getPropertyValue(styleName), element, `style.${styleName}`);
+	                                if (isHydrating && style.getPropertyValue(cssName) !== "") {
+	                                    emitHydrationWarning(name, quietProps, null, style.getPropertyValue(cssName), element, `style.${styleName}`);
 	                                }
-	                                style.removeProperty(styleName);
+	                                style.removeProperty(cssName);
 	                            }
-	                            else if (style.getPropertyValue(styleName) !== styleValue) {
-	                                // TODO: hydration warnings for style props
-	                                //if (isHydrating) {
-	                                //	emitHydrationWarning(
-	                                //		name,
-	                                //		quietProps,
-	                                //		styleValue,
-	                                //		style.getPropertyValue(styleName),
-	                                //		element,
-	                                //		`style.${styleName}`,
-	                                //	);
-	                                //}
-	                                style.setProperty(styleName, styleValue);
+	                            else {
+	                                const formattedValue = formatStyleValue(cssName, styleValue);
+	                                if (style.getPropertyValue(cssName) !== formattedValue) {
+	                                    // TODO: hydration warnings for style props
+	                                    //if (isHydrating) {
+	                                    //	emitHydrationWarning(
+	                                    //		name,
+	                                    //		quietProps,
+	                                    //		formattedValue,
+	                                    //		style.getPropertyValue(cssName),
+	                                    //		element,
+	                                    //		`style.${styleName}`,
+	                                    //	);
+	                                    //}
+	                                    style.setProperty(cssName, formattedValue);
+	                                }
 	                            }
 	                        }
 	                    }
@@ -2856,7 +2984,7 @@
 	                                .join(" "), hydratingClassName || "", element);
 	                        }
 	                    }
-	                    else if (!isSVG) {
+	                    else if (!isSVG && !isMathML) {
 	                        if (element.className !== value) {
 	                            if (isHydrating) {
 	                                emitHydrationWarning(name, quietProps, value, element.className, element);
@@ -2997,7 +3125,9 @@
 	        if (typeof value === "string") {
 	            const el = xmlns == null
 	                ? document.createElement("div")
-	                : document.createElementNS(xmlns, "svg");
+	                : xmlns === SVG_NAMESPACE
+	                    ? document.createElementNS(xmlns, "svg")
+	                    : document.createElementNS(xmlns, "math");
 	            el.innerHTML = value;
 	            nodes = Array.from(el.childNodes);
 	        }
@@ -3098,7 +3228,9 @@
 	    const cssStrings = [];
 	    for (const [name, value] of Object.entries(style)) {
 	        if (value != null) {
-	            cssStrings.push(`${name}:${value};`);
+	            const cssName = camelToKebabCase(name);
+	            const cssValue = formatStyleValue(cssName, value);
+	            cssStrings.push(`${cssName}:${cssValue};`);
 	        }
 	    }
 	    return cssStrings.join("");
@@ -3113,7 +3245,7 @@
 	            if (typeof value === "string") {
 	                attrs.push(`style="${escape(value)}"`);
 	            }
-	            else if (typeof value === "object") {
+	            else if (typeof value === "object" && value !== null) {
 	                attrs.push(`style="${escape(printStyleObject(value))}"`);
 	            }
 	        }