@b9g/crank 0.7.4 → 0.7.6

package/dom.js

@@ -1,6 +1,7 @@
 /// <reference types="dom.d.ts" />
 import { Renderer, Portal } from './crank.js';
 import { camelToKebabCase, formatStyleValue } from './_css.js';
+import { REACT_SVG_PROPS } from './_svg.js';
 
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 const MATHML_NAMESPACE = "http://www.w3.org/1998/Math/MathML";
@@ -59,19 +60,325 @@ function emitHydrationWarning(propName, quietProps, expectedValue, actualValue,
         }
     }
 }
+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;
     },
@@ -85,6 +392,9 @@ const adapter = {
         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);
     },
@@ -108,7 +418,7 @@ const adapter = {
         }
         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)}`);
         }
@@ -116,268 +426,26 @@ const adapter = {
             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];