@b9g/crank 0.7.4 → 0.7.6

package/umd.js

@@ -420,14 +420,14 @@
 	 * Typically, you use a helper function like createElement to create elements
 	 * rather than instatiating this class directly.
 	 */
-	class Element {
+	let Element$1 = class Element {
 	    constructor(tag, props) {
 	        this.tag = tag;
 	        this.props = props;
 	    }
-	}
+	};
 	// See Element interface
-	Element.prototype.$$typeof = ElementSymbol;
+	Element$1.prototype.$$typeof = ElementSymbol;
 	function isElement(value) {
 	    return value != null && value.$$typeof === ElementSymbol;
 	}
@@ -469,14 +469,14 @@
 	    else if (children.length === 1) {
 	        props.children = children[0];
 	    }
-	    return new Element(tag, props);
+	    return new Element$1(tag, props);
 	}
 	/** Clones a given element, shallowly copying the props object. */
 	function cloneElement(el) {
 	    if (!isElement(el)) {
 	        throw new TypeError(`Cannot clone non-element: ${String(el)}`);
 	    }
-	    return new Element(el.tag, { ...el.props });
+	    return new Element$1(el.tag, { ...el.props });
 	}
 	function narrow(value) {
 	    if (typeof value === "boolean" || value == null) {
@@ -593,9 +593,15 @@
 	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) {
@@ -616,7 +622,9 @@
 	                }
 	            }
 	        }
-	        const child = children[i];
+	        const child = isChildrenArray
+	            ? rawChildren[i]
+	            : rawChildren;
 	        if (child) {
 	            const value = getValue(child, true, currentIndex);
 	            if (Array.isArray(value)) {
@@ -635,8 +643,8 @@
 	            }
 	        }
 	    }
-	    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) {
@@ -795,7 +803,155 @@
 	    }
 	    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);
@@ -1096,7 +1252,7 @@
 	        }
 	    }
 	    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);
@@ -1111,8 +1267,17 @@
 	}
 	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 &&
@@ -1397,6 +1562,7 @@
 	            props,
 	            children,
 	            oldProps,
+	            scope,
 	            root,
 	        });
 	    }
@@ -1554,12 +1720,18 @@
 	        }
 	        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();
@@ -2429,12 +2601,16 @@
 	            ((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)) {
@@ -2458,6 +2634,11 @@
 	    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({
@@ -2467,6 +2648,7 @@
 	        props,
 	        oldProps: props,
 	        children: hostChildren,
+	        scope: host.scope,
 	        root: ctx.root,
 	    });
 	    flush(ctx.adapter, ctx.root, ctx);
@@ -2741,6 +2923,96 @@
 	    return String(value);
 	}
 
+	// React SVG camelCase → standard SVG attribute mapping.
+	// Only includes entries where the React name differs from the SVG attribute name.
+	// Canonical source: https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/shared/possibleStandardNames.js
+	const REACT_SVG_PROPS = {
+	    accentHeight: "accent-height",
+	    alignmentBaseline: "alignment-baseline",
+	    arabicForm: "arabic-form",
+	    baselineShift: "baseline-shift",
+	    capHeight: "cap-height",
+	    clipPath: "clip-path",
+	    clipRule: "clip-rule",
+	    colorInterpolation: "color-interpolation",
+	    colorInterpolationFilters: "color-interpolation-filters",
+	    colorProfile: "color-profile",
+	    colorRendering: "color-rendering",
+	    dominantBaseline: "dominant-baseline",
+	    enableBackground: "enable-background",
+	    fillOpacity: "fill-opacity",
+	    fillRule: "fill-rule",
+	    floodColor: "flood-color",
+	    floodOpacity: "flood-opacity",
+	    fontFamily: "font-family",
+	    fontSize: "font-size",
+	    fontSizeAdjust: "font-size-adjust",
+	    fontStretch: "font-stretch",
+	    fontStyle: "font-style",
+	    fontVariant: "font-variant",
+	    fontWeight: "font-weight",
+	    glyphName: "glyph-name",
+	    glyphOrientationHorizontal: "glyph-orientation-horizontal",
+	    glyphOrientationVertical: "glyph-orientation-vertical",
+	    horizAdvX: "horiz-adv-x",
+	    horizOriginX: "horiz-origin-x",
+	    imageRendering: "image-rendering",
+	    letterSpacing: "letter-spacing",
+	    lightingColor: "lighting-color",
+	    markerEnd: "marker-end",
+	    markerMid: "marker-mid",
+	    markerStart: "marker-start",
+	    overlinePosition: "overline-position",
+	    overlineThickness: "overline-thickness",
+	    paintOrder: "paint-order",
+	    pointerEvents: "pointer-events",
+	    renderingIntent: "rendering-intent",
+	    shapeRendering: "shape-rendering",
+	    stopColor: "stop-color",
+	    stopOpacity: "stop-opacity",
+	    strikethroughPosition: "strikethrough-position",
+	    strikethroughThickness: "strikethrough-thickness",
+	    strokeDasharray: "stroke-dasharray",
+	    strokeDashoffset: "stroke-dashoffset",
+	    strokeLinecap: "stroke-linecap",
+	    strokeLinejoin: "stroke-linejoin",
+	    strokeMiterlimit: "stroke-miterlimit",
+	    strokeOpacity: "stroke-opacity",
+	    strokeWidth: "stroke-width",
+	    textAnchor: "text-anchor",
+	    textDecoration: "text-decoration",
+	    textRendering: "text-rendering",
+	    transformOrigin: "transform-origin",
+	    underlinePosition: "underline-position",
+	    underlineThickness: "underline-thickness",
+	    unicodeBidi: "unicode-bidi",
+	    unicodeRange: "unicode-range",
+	    unitsPerEm: "units-per-em",
+	    vAlphabetic: "v-alphabetic",
+	    vHanging: "v-hanging",
+	    vIdeographic: "v-ideographic",
+	    vMathematical: "v-mathematical",
+	    vectorEffect: "vector-effect",
+	    vertAdvY: "vert-adv-y",
+	    vertOriginX: "vert-origin-x",
+	    vertOriginY: "vert-origin-y",
+	    wordSpacing: "word-spacing",
+	    writingMode: "writing-mode",
+	    xHeight: "x-height",
+	    // xlink/xml namespace attributes (deprecated in SVG 2 but still used)
+	    xlinkActuate: "xlink:actuate",
+	    xlinkArcrole: "xlink:arcrole",
+	    xlinkHref: "xlink:href",
+	    xlinkRole: "xlink:role",
+	    xlinkShow: "xlink:show",
+	    xlinkTitle: "xlink:title",
+	    xlinkType: "xlink:type",
+	    xmlBase: "xml:base",
+	    xmlLang: "xml:lang",
+	    xmlSpace: "xml:space",
+	    xmlnsXlink: "xmlns:xlink",
+	};
+
 	const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 	const MATHML_NAMESPACE = "http://www.w3.org/1998/Math/MathML";
 	function getRootDocument(root) {
@@ -2798,19 +3070,325 @@
 	        }
 	    }
 	}
+	function patchProp(element, name, value, oldValue, props, isSVG, isMathML, copyProps, quietProps, isHydrating) {
+	    if (copyProps != null && copyProps.has(name)) {
+	        return;
+	    }
+	    // handle prop:name or attr:name properties
+	    const colonIndex = name.indexOf(":");
+	    if (colonIndex !== -1) {
+	        const [ns, name1] = [name.slice(0, colonIndex), name.slice(colonIndex + 1)];
+	        switch (ns) {
+	            case "prop":
+	                element[name1] = value;
+	                return;
+	            case "attr":
+	                if (value == null || value === false) {
+	                    if (isHydrating && element.hasAttribute(name1)) {
+	                        emitHydrationWarning(name, quietProps, value, element.getAttribute(name1), element);
+	                    }
+	                    element.removeAttribute(name1);
+	                    return;
+	                }
+	                else if (value === true) {
+	                    if (isHydrating && !element.hasAttribute(name1)) {
+	                        emitHydrationWarning(name, quietProps, value, null, element);
+	                    }
+	                    element.setAttribute(name1, "");
+	                    return;
+	                }
+	                if (typeof value !== "string") {
+	                    value = String(value);
+	                }
+	                if (isHydrating && element.getAttribute(name1) !== value) {
+	                    emitHydrationWarning(name, quietProps, value, element.getAttribute(name1), element);
+	                }
+	                element.setAttribute(name1, value);
+	                return;
+	        }
+	    }
+	    switch (name) {
+	        // TODO: fix hydration warnings for the style prop
+	        case "style": {
+	            const style = element.style;
+	            if (value == null || value === false) {
+	                if (isHydrating && style.cssText !== "") {
+	                    emitHydrationWarning(name, quietProps, value, style.cssText, element);
+	                }
+	                element.removeAttribute("style");
+	            }
+	            else if (value === true) {
+	                if (isHydrating && style.cssText !== "") {
+	                    emitHydrationWarning(name, quietProps, "", style.cssText, element);
+	                }
+	                element.setAttribute("style", "");
+	            }
+	            else if (typeof value === "string") {
+	                if (style.cssText !== value) {
+	                    // TODO: Fix hydration warnings for styles
+	                    //if (isHydrating) {
+	                    //	emitHydrationWarning(
+	                    //		name,
+	                    //		quietProps,
+	                    //		value,
+	                    //		style.cssText,
+	                    //		element,
+	                    //	);
+	                    //}
+	                    style.cssText = value;
+	                }
+	            }
+	            else {
+	                if (typeof oldValue === "string") {
+	                    // if the old value was a string, we need to clear the style
+	                    // TODO: only clear the styles enumerated in the old value
+	                    style.cssText = "";
+	                }
+	                // First pass: remove styles present in oldValue but not in value
+	                if (oldValue) {
+	                    for (const styleName in oldValue) {
+	                        if (value && styleName in value)
+	                            continue;
+	                        const cssName = camelToKebabCase(styleName);
+	                        if (isHydrating && style.getPropertyValue(cssName) !== "") {
+	                            emitHydrationWarning(name, quietProps, null, style.getPropertyValue(cssName), element, `style.${styleName}`);
+	                        }
+	                        style.removeProperty(cssName);
+	                    }
+	                }
+	                // Second pass: apply all styles from value
+	                if (value) {
+	                    for (const styleName in value) {
+	                        const cssName = camelToKebabCase(styleName);
+	                        const styleValue = value[styleName];
+	                        if (styleValue == null) {
+	                            if (isHydrating && style.getPropertyValue(cssName) !== "") {
+	                                emitHydrationWarning(name, quietProps, null, style.getPropertyValue(cssName), element, `style.${styleName}`);
+	                            }
+	                            style.removeProperty(cssName);
+	                        }
+	                        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);
+	                            }
+	                        }
+	                    }
+	                }
+	            }
+	            break;
+	        }
+	        case "class":
+	        case "className":
+	            if (name === "className" && "class" in props)
+	                break;
+	            if (value === true) {
+	                if (isHydrating && element.getAttribute("class") !== "") {
+	                    emitHydrationWarning(name, quietProps, "", element.getAttribute("class"), element);
+	                }
+	                element.setAttribute("class", "");
+	            }
+	            else if (value == null) {
+	                if (isHydrating && element.hasAttribute("class")) {
+	                    emitHydrationWarning(name, quietProps, value, element.getAttribute("class"), element);
+	                }
+	                element.removeAttribute("class");
+	            }
+	            else if (typeof value === "object") {
+	                // class={{"included-class": true, "excluded-class": false}} syntax
+	                if (typeof oldValue === "string") {
+	                    // if the old value was a string, we need to clear all classes
+	                    element.setAttribute("class", "");
+	                }
+	                let shouldIssueWarning = false;
+	                const hydratingClasses = isHydrating
+	                    ? new Set(Array.from(element.classList))
+	                    : undefined;
+	                const hydratingClassName = isHydrating
+	                    ? element.getAttribute("class")
+	                    : undefined;
+	                // 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"
+	                // Remove pass: iterate oldValue for classes to remove
+	                if (oldValue) {
+	                    for (const classNames in oldValue) {
+	                        if (value && value[classNames])
+	                            continue;
+	                        const classes = classNames.split(/\s+/).filter(Boolean);
+	                        element.classList.remove(...classes);
+	                    }
+	                }
+	                // Add pass: iterate value for classes to add
+	                if (value) {
+	                    for (const classNames in value) {
+	                        if (!value[classNames])
+	                            continue;
+	                        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 ||
+	                    (hydratingClasses && hydratingClasses.size > 0)) {
+	                    emitHydrationWarning(name, quietProps, Object.keys(value)
+	                        .filter((k) => value[k])
+	                        .join(" "), hydratingClassName || "", element);
+	                }
+	            }
+	            else if (!isSVG && !isMathML) {
+	                if (element.className !== value) {
+	                    if (isHydrating) {
+	                        emitHydrationWarning(name, quietProps, value, element.className, element);
+	                    }
+	                    element.className = value;
+	                }
+	            }
+	            else if (element.getAttribute("class") !== value) {
+	                if (isHydrating) {
+	                    emitHydrationWarning(name, quietProps, value, element.getAttribute("class"), element);
+	                }
+	                element.setAttribute("class", value);
+	            }
+	            break;
+	        case "innerHTML":
+	            if (value !== oldValue) {
+	                if (isHydrating) {
+	                    emitHydrationWarning(name, quietProps, value, element.innerHTML, element);
+	                }
+	                element.innerHTML = value;
+	            }
+	            break;
+	        case "dangerouslySetInnerHTML": {
+	            const htmlValue = value && typeof value === "object" && "__html" in value
+	                ? (value.__html ?? "")
+	                : "";
+	            const oldHtmlValue = oldValue && typeof oldValue === "object" && "__html" in oldValue
+	                ? (oldValue.__html ?? "")
+	                : "";
+	            if (htmlValue !== oldHtmlValue) {
+	                element.innerHTML = htmlValue;
+	            }
+	            break;
+	        }
+	        case "htmlFor":
+	            if ("for" in props)
+	                break;
+	            if (value == null || value === false) {
+	                element.removeAttribute("for");
+	            }
+	            else {
+	                element.setAttribute("for", String(value === true ? "" : value));
+	            }
+	            break;
+	        default: {
+	            if (name[0] === "o" &&
+	                name[1] === "n" &&
+	                name[2] === name[2].toUpperCase() &&
+	                typeof value === "function") {
+	                // Support React-style event names (onClick, onChange, etc.)
+	                name = name.toLowerCase();
+	            }
+	            // Support React-style SVG attribute names (strokeWidth, etc.)
+	            if (isSVG && name in REACT_SVG_PROPS) {
+	                name = REACT_SVG_PROPS[name];
+	            }
+	            // try to set the property directly
+	            if (name in element &&
+	                // boolean properties will coerce strings, but sometimes they map to
+	                // enumerated attributes, where truthy strings ("false", "no") map to
+	                // falsy properties, so we force using setAttribute.
+	                !(typeof value === "string" &&
+	                    typeof element[name] === "boolean") &&
+	                isWritableProperty(element, name)) {
+	                // 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) {
+	                        emitHydrationWarning(name, quietProps, value, element[name], element);
+	                    }
+	                    // if the property is writable, assign it directly
+	                    element[name] = value;
+	                }
+	                return;
+	            }
+	            if (value === true) {
+	                value = "";
+	            }
+	            else if (value == null || value === false) {
+	                if (isHydrating && element.hasAttribute(name)) {
+	                    emitHydrationWarning(name, quietProps, value, element.getAttribute(name), element);
+	                }
+	                element.removeAttribute(name);
+	                return;
+	            }
+	            else if (typeof value !== "string") {
+	                value = String(value);
+	            }
+	            if (element.getAttribute(name) !== value) {
+	                if (isHydrating) {
+	                    emitHydrationWarning(name, quietProps, value, element.getAttribute(name), element);
+	                }
+	                element.setAttribute(name, value);
+	            }
+	        }
+	    }
+	}
 	const adapter = {
-	    scope({ scope: xmlns, tag, props, }) {
+	    scope({ scope: xmlns, tag, props, root, }) {
 	        switch (tag) {
-	            case Portal:
-	                // TODO: read the namespace from the portal root element
-	                xmlns = undefined;
+	            case Portal: {
+	                const ns = root instanceof Element ? root.namespaceURI : null;
+	                xmlns =
+	                    ns === SVG_NAMESPACE
+	                        ? SVG_NAMESPACE
+	                        : ns === MATHML_NAMESPACE
+	                            ? MATHML_NAMESPACE
+	                            : undefined;
 	                break;
+	            }
 	            case "svg":
 	                xmlns = SVG_NAMESPACE;
 	                break;
 	            case "math":
 	                xmlns = MATHML_NAMESPACE;
 	                break;
+	            case "foreignObject":
+	                xmlns = undefined;
+	                break;
 	        }
 	        return props.xmlns || xmlns;
 	    },
@@ -2824,6 +3402,9 @@
 	        else if (tag.toLowerCase() === "math") {
 	            xmlns = MATHML_NAMESPACE;
 	        }
+	        else if (tag === "foreignObject") {
+	            xmlns = SVG_NAMESPACE;
+	        }
 	        const doc = getRootDocument(root);
 	        return xmlns ? doc.createElementNS(xmlns, tag) : doc.createElement(tag);
 	    },
@@ -2847,7 +3428,7 @@
 	        }
 	        return Array.from(node.childNodes);
 	    },
-	    patch({ tagName, node, props, oldProps, scope: xmlns, copyProps, quietProps, isHydrating, }) {
+	    patch({ tag, tagName, node, props, oldProps, scope: xmlns, copyProps, quietProps, isHydrating, }) {
 	        if (node.nodeType !== Node.ELEMENT_NODE) {
 	            throw new TypeError(`Cannot patch node: ${String(node)}`);
 	        }
@@ -2855,268 +3436,26 @@
 	            console.error(`Both "class" and "className" set in props for <${tagName}>. Use one or the other.`);
 	        }
 	        const element = node;
-	        const isSVG = xmlns === SVG_NAMESPACE;
+	        const isSVG = xmlns === SVG_NAMESPACE || tag === "foreignObject";
 	        const isMathML = xmlns === MATHML_NAMESPACE;
-	        for (let name in { ...oldProps, ...props }) {
-	            let value = props[name];
-	            const oldValue = oldProps ? oldProps[name] : undefined;
-	            {
-	                if (copyProps != null && copyProps.has(name)) {
+	        // First pass: iterate oldProps to handle removals
+	        if (oldProps) {
+	            for (let name in oldProps) {
+	                if (name in props)
 	                    continue;
-	                }
-	                // handle prop:name or attr:name properties
-	                const colonIndex = name.indexOf(":");
-	                if (colonIndex !== -1) {
-	                    const [ns, name1] = [
-	                        name.slice(0, colonIndex),
-	                        name.slice(colonIndex + 1),
-	                    ];
-	                    switch (ns) {
-	                        case "prop":
-	                            node[name1] = value;
-	                            continue;
-	                        case "attr":
-	                            if (value == null || value === false) {
-	                                if (isHydrating && element.hasAttribute(name1)) {
-	                                    emitHydrationWarning(name, quietProps, value, element.getAttribute(name1), element);
-	                                }
-	                                element.removeAttribute(name1);
-	                            }
-	                            else if (value === true) {
-	                                if (isHydrating && !element.hasAttribute(name1)) {
-	                                    emitHydrationWarning(name, quietProps, value, null, element);
-	                                }
-	                                element.setAttribute(name1, "");
-	                            }
-	                            else if (typeof value !== "string") {
-	                                value = String(value);
-	                            }
-	                            if (isHydrating && element.getAttribute(name1) !== value) {
-	                                emitHydrationWarning(name, quietProps, value, element.getAttribute(name1), element);
-	                            }
-	                            element.setAttribute(name1, String(value));
-	                            continue;
-	                    }
-	                }
-	            }
-	            switch (name) {
-	                // TODO: fix hydration warnings for the style prop
-	                case "style": {
-	                    const style = element.style;
-	                    if (value == null || value === false) {
-	                        if (isHydrating && style.cssText !== "") {
-	                            emitHydrationWarning(name, quietProps, value, style.cssText, element);
-	                        }
-	                        element.removeAttribute("style");
-	                    }
-	                    else if (value === true) {
-	                        if (isHydrating && style.cssText !== "") {
-	                            emitHydrationWarning(name, quietProps, "", style.cssText, element);
-	                        }
-	                        element.setAttribute("style", "");
-	                    }
-	                    else if (typeof value === "string") {
-	                        if (style.cssText !== value) {
-	                            // TODO: Fix hydration warnings for styles
-	                            //if (isHydrating) {
-	                            //	emitHydrationWarning(
-	                            //		name,
-	                            //		quietProps,
-	                            //		value,
-	                            //		style.cssText,
-	                            //		element,
-	                            //	);
-	                            //}
-	                            style.cssText = value;
-	                        }
-	                    }
-	                    else {
-	                        if (typeof oldValue === "string") {
-	                            // if the old value was a string, we need to clear the style
-	                            // TODO: only clear the styles enumerated in the old value
-	                            style.cssText = "";
-	                        }
-	                        for (const styleName in { ...oldValue, ...value }) {
-	                            const cssName = camelToKebabCase(styleName);
-	                            const styleValue = value && value[styleName];
-	                            if (styleValue == null) {
-	                                if (isHydrating && style.getPropertyValue(cssName) !== "") {
-	                                    emitHydrationWarning(name, quietProps, null, style.getPropertyValue(cssName), element, `style.${styleName}`);
-	                                }
-	                                style.removeProperty(cssName);
-	                            }
-	                            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);
-	                                }
-	                            }
-	                        }
-	                    }
-	                    break;
-	                }
-	                case "class":
-	                case "className":
-	                    if (value === true) {
-	                        if (isHydrating && element.getAttribute("class") !== "") {
-	                            emitHydrationWarning(name, quietProps, "", element.getAttribute("class"), element);
-	                        }
-	                        element.setAttribute("class", "");
-	                    }
-	                    else if (value == null) {
-	                        if (isHydrating && element.hasAttribute("class")) {
-	                            emitHydrationWarning(name, quietProps, value, element.getAttribute("class"), element);
-	                        }
-	                        element.removeAttribute("class");
-	                    }
-	                    else if (typeof value === "object") {
-	                        // class={{"included-class": true, "excluded-class": false}} syntax
-	                        if (typeof oldValue === "string") {
-	                            // if the old value was a string, we need to clear all classes
-	                            element.setAttribute("class", "");
-	                        }
-	                        let shouldIssueWarning = false;
-	                        const hydratingClasses = isHydrating
-	                            ? new Set(Array.from(element.classList))
-	                            : undefined;
-	                        const hydratingClassName = isHydrating
-	                            ? element.getAttribute("class")
-	                            : undefined;
-	                        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);
-	                            }
-	                        }
-	                        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 ||
-	                            (hydratingClasses && hydratingClasses.size > 0)) {
-	                            emitHydrationWarning(name, quietProps, Object.keys(value)
-	                                .filter((k) => value[k])
-	                                .join(" "), hydratingClassName || "", element);
-	                        }
-	                    }
-	                    else if (!isSVG && !isMathML) {
-	                        if (element.className !== value) {
-	                            if (isHydrating) {
-	                                emitHydrationWarning(name, quietProps, value, element.className, element);
-	                            }
-	                            element.className = value;
-	                        }
-	                    }
-	                    else if (element.getAttribute("class") !== value) {
-	                        if (isHydrating) {
-	                            emitHydrationWarning(name, quietProps, value, element.getAttribute("class"), element);
-	                        }
-	                        element.setAttribute("class", value);
-	                    }
-	                    break;
-	                case "innerHTML":
-	                    if (value !== oldValue) {
-	                        if (isHydrating) {
-	                            emitHydrationWarning(name, quietProps, value, element.innerHTML, element);
-	                        }
-	                        element.innerHTML = value;
-	                    }
-	                    break;
-	                default: {
-	                    if (name[0] === "o" &&
-	                        name[1] === "n" &&
-	                        name[2] === name[2].toUpperCase() &&
-	                        typeof value === "function") {
-	                        // Support React-style event names (onClick, onChange, etc.)
-	                        name = name.toLowerCase();
-	                    }
-	                    // try to set the property directly
-	                    if (name in element &&
-	                        // boolean properties will coerce strings, but sometimes they map to
-	                        // enumerated attributes, where truthy strings ("false", "no") map to
-	                        // falsy properties, so we force using setAttribute.
-	                        !(typeof value === "string" &&
-	                            typeof element[name] === "boolean") &&
-	                        isWritableProperty(element, name)) {
-	                        // 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) {
-	                                emitHydrationWarning(name, quietProps, value, element[name], element);
-	                            }
-	                            // if the property is writable, assign it directly
-	                            element[name] = value;
-	                        }
-	                        continue;
-	                    }
-	                    if (value === true) {
-	                        value = "";
-	                    }
-	                    else if (value == null || value === false) {
-	                        if (isHydrating && element.hasAttribute(name)) {
-	                            emitHydrationWarning(name, quietProps, value, element.getAttribute(name), element);
-	                        }
-	                        element.removeAttribute(name);
-	                        continue;
-	                    }
-	                    else if (typeof value !== "string") {
-	                        value = String(value);
-	                    }
-	                    if (element.getAttribute(name) !== value) {
-	                        if (isHydrating) {
-	                            emitHydrationWarning(name, quietProps, value, element.getAttribute(name), element);
-	                        }
-	                        element.setAttribute(name, value);
-	                    }
-	                }
+	                patchProp(element, name, undefined, oldProps[name], props, isSVG, isMathML, copyProps, quietProps, isHydrating);
 	            }
 	        }
+	        // Second pass: iterate props to handle additions and updates
+	        for (let name in props) {
+	            patchProp(element, name, props[name], oldProps ? oldProps[name] : undefined, props, isSVG, isMathML, copyProps, quietProps, isHydrating);
+	        }
 	    },
 	    arrange({ tag, node, props, children, }) {
 	        if (tag === Portal && (node == null || typeof node.nodeType !== "number")) {
 	            throw new TypeError(`<Portal> root is not a node. Received: ${String(node)}`);
 	        }
-	        if (!("innerHTML" in props)) {
+	        if (!("innerHTML" in props) && !("dangerouslySetInnerHTML" in props)) {
 	            let oldChild = node.firstChild;
 	            for (let i = 0; i < children.length; i++) {
 	                const newChild = children[i];
@@ -3292,12 +3631,20 @@
 	    }
 	    return cssStrings.join("");
 	}
-	function printAttrs(props) {
+	function printAttrs(props, isSVG) {
 	    const attrs = [];
 	    for (let [name, value] of Object.entries(props)) {
-	        if (name === "innerHTML" || name.startsWith("prop:")) {
+	        if (name === "innerHTML" ||
+	            name === "dangerouslySetInnerHTML" ||
+	            name.startsWith("prop:")) {
 	            continue;
 	        }
+	        else if (name === "htmlFor") {
+	            if ("for" in props || value == null || value === false) {
+	                continue;
+	            }
+	            attrs.push(`for="${escape(String(value === true ? "" : value))}"`);
+	        }
 	        else if (name === "style") {
 	            if (typeof value === "string") {
 	                attrs.push(`style="${escape(value)}"`);
@@ -3330,6 +3677,9 @@
 	            if (name.startsWith("attr:")) {
 	                name = name.slice("attr:".length);
 	            }
+	            else if (isSVG && name in REACT_SVG_PROPS) {
+	                name = REACT_SVG_PROPS[name];
+	            }
 	            if (typeof value === "string") {
 	                attrs.push(`${escape(name)}="${escape(value)}"`);
 	            }
@@ -3352,6 +3702,20 @@
 	    return result;
 	}
 	const impl = {
+	    scope({ scope, tag, }) {
+	        if (tag === Portal) {
+	            return undefined;
+	        }
+	        switch (tag) {
+	            case "svg":
+	                return "svg";
+	            case "math":
+	                return "math";
+	            case "foreignObject":
+	                return undefined;
+	        }
+	        return scope;
+	    },
 	    create() {
 	        return { value: "" };
 	    },
@@ -3372,14 +3736,14 @@
 	            return value.value || "";
 	        }
 	    },
-	    arrange({ tag, tagName, node, props, children, }) {
+	    arrange({ tag, tagName, node, props, children, scope, }) {
 	        if (tag === Portal) {
 	            return;
 	        }
 	        else if (typeof tag !== "string") {
 	            throw new Error(`Unknown tag: ${tagName}`);
 	        }
-	        const attrs = printAttrs(props);
+	        const attrs = printAttrs(props, scope === "svg" || tag === "foreignObject");
 	        const open = `<${tag}${attrs.length ? " " : ""}${attrs}>`;
 	        let result;
 	        if (voidTags.has(tag)) {
@@ -3387,7 +3751,11 @@
 	        }
 	        else {
 	            const close = `</${tag}>`;
-	            const contents = "innerHTML" in props ? props["innerHTML"] : join(children);
+	            const contents = "innerHTML" in props
+	                ? props["innerHTML"]
+	                : "dangerouslySetInnerHTML" in props
+	                    ? (props["dangerouslySetInnerHTML"]?.__html ?? "")
+	                    : join(children);
 	            result = `${open}${contents}${close}`;
 	        }
 	        node.value = result;
@@ -3409,7 +3777,7 @@
 
 	exports.Context = Context;
 	exports.Copy = Copy;
-	exports.Element = Element;
+	exports.Element = Element$1;
 	exports.Fragment = Fragment;
 	exports.Portal = Portal;
 	exports.Raw = Raw;