@b9g/crank 0.6.1 → 0.7.1

package/dom.js

@@ -1,310 +1,441 @@
 /// <reference types="dom.d.ts" />
 import { Renderer, Portal } from './crank.js';
+import { camelToKebabCase, formatStyleValue } from './_css.js';
 
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-const impl = {
-    scope(xmlns, tag, props) {
+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;
+    do {
+        if (Object.prototype.hasOwnProperty.call(propOwner, name)) {
+            break;
+        }
+    } while ((propOwner = Object.getPrototypeOf(propOwner)));
+    if (propOwner === null) {
+        return false;
+    }
+    // get the descriptor for the named property and check whether it implies
+    // that the property is writable
+    const descriptor = Object.getOwnPropertyDescriptor(propOwner, name);
+    if (descriptor != null &&
+        (descriptor.writable === true || descriptor.set !== undefined)) {
+        return true;
+    }
+    return false;
+}
+function emitHydrationWarning(propName, quietProps, expectedValue, actualValue, element, displayName) {
+    const checkName = propName;
+    const showName = displayName || propName;
+    if (!quietProps || !quietProps.has(checkName)) {
+        if (expectedValue === null || expectedValue === false) {
+            console.warn(`Expected "${showName}" to be missing but found ${String(actualValue)} while hydrating:`, element);
+        }
+        else if (expectedValue === true || expectedValue === "") {
+            console.warn(`Expected "${showName}" to be ${expectedValue === true ? "present" : '""'} but found ${String(actualValue)} while hydrating:`, element);
+        }
+        else if (typeof window !== "undefined" &&
+            window.location &&
+            new URL(expectedValue, window.location.origin).href ===
+                new URL(actualValue, window.location.origin).href) ;
+        else {
+            console.warn(`Expected "${showName}" to be "${String(expectedValue)}" but found ${String(actualValue)} while hydrating:`, element);
+        }
+    }
+}
+const adapter = {
+    scope({ scope: xmlns, tag, props, }) {
         switch (tag) {
             case Portal:
+                // TODO: read the namespace from the portal root element
                 xmlns = undefined;
                 break;
             case "svg":
                 xmlns = SVG_NAMESPACE;
                 break;
+            case "math":
+                xmlns = MATHML_NAMESPACE;
+                break;
         }
         return props.xmlns || xmlns;
     },
-    create(tag, _props, xmlns) {
+    create({ tag, tagName, scope: xmlns, }) {
         if (typeof tag !== "string") {
-            throw new Error(`Unknown tag: ${tag.toString()}`);
+            throw new Error(`Unknown tag: ${tagName}`);
         }
         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);
     },
-    hydrate(tag, node, props) {
+    adopt({ tag, tagName, node, }) {
         if (typeof tag !== "string" && tag !== Portal) {
-            throw new Error(`Unknown tag: ${tag.toString()}`);
+            throw new Error(`Unknown tag: ${tagName}`);
         }
-        if (typeof tag === "string" &&
-            tag.toUpperCase() !== node.tagName) {
-            // TODO: consider pros and cons of hydration warnings
-            //console.error(`Expected <${tag}> while hydrating but found:`, node);
-            return undefined;
+        if (node === document.body ||
+            node === document.head ||
+            node === document.documentElement ||
+            node === document) {
+            console.warn(`Hydrating ${node.nodeName.toLowerCase()} is discouraged as it is destructive and may remove unknown nodes.`);
         }
-        const children = [];
-        for (let i = 0; i < node.childNodes.length; i++) {
-            const child = node.childNodes[i];
-            if (child.nodeType === Node.TEXT_NODE) {
-                children.push(child.data);
-            }
-            else if (child.nodeType === Node.ELEMENT_NODE) {
-                children.push(child);
-            }
+        if (node == null ||
+            (typeof tag === "string" &&
+                (node.nodeType !== Node.ELEMENT_NODE ||
+                    tag.toLowerCase() !== node.tagName.toLowerCase()))) {
+            console.warn(`Expected <${tagName}> while hydrating but found: `, node);
+            return;
         }
-        // TODO: extract props from nodes
-        return { props, children };
+        return Array.from(node.childNodes);
     },
-    patch(_tag, 
-    // TODO: Why does this assignment work?
-    node, name, 
-    // TODO: Stricter typings?
-    value, oldValue, xmlns) {
+    patch({ tagName, node, props, oldProps, scope: xmlns, copyProps, quietProps, isHydrating, }) {
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            throw new TypeError(`Cannot patch node: ${String(node)}`);
+        }
+        else if (props.class && props.className) {
+            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 colonIndex = name.indexOf(":");
-        if (colonIndex !== -1) {
-            const ns = name.slice(0, colonIndex);
-            const name1 = name.slice(colonIndex + 1);
-            switch (ns) {
-                case "prop":
-                    node[name1] = value;
-                    return;
-                case "attr":
+        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)) {
+                    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) {
-                        node.removeAttribute(name1);
+                        if (isHydrating && style.cssText !== "") {
+                            emitHydrationWarning(name, quietProps, value, style.cssText, element);
+                        }
+                        element.removeAttribute("style");
                     }
                     else if (value === true) {
-                        node.setAttribute(name1, "");
+                        if (isHydrating && style.cssText !== "") {
+                            emitHydrationWarning(name, quietProps, "", style.cssText, element);
+                        }
+                        element.setAttribute("style", "");
                     }
                     else if (typeof value === "string") {
-                        node.setAttribute(name1, value);
+                        if (style.cssText !== value) {
+                            // TODO: Fix hydration warnings for styles
+                            //if (isHydrating) {
+                            //	emitHydrationWarning(
+                            //		name,
+                            //		quietProps,
+                            //		value,
+                            //		style.cssText,
+                            //		element,
+                            //	);
+                            //}
+                            style.cssText = value;
+                        }
                     }
                     else {
-                        node.setAttribute(name, String(value));
+                        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);
+                                }
+                            }
+                        }
                     }
-                    return;
-            }
-        }
-        switch (name) {
-            case "style": {
-                const style = node.style;
-                if (style == null) {
-                    node.setAttribute("style", value);
+                    break;
                 }
-                else if (value == null || value === false) {
-                    node.removeAttribute("style");
-                }
-                else if (value === true) {
-                    node.setAttribute("style", "");
-                }
-                else if (typeof value === "string") {
-                    if (style.cssText !== value) {
-                        style.cssText = value;
+                case "class":
+                case "className":
+                    if (value === true) {
+                        if (isHydrating && element.getAttribute("class") !== "") {
+                            emitHydrationWarning(name, quietProps, "", element.getAttribute("class"), element);
+                        }
+                        element.setAttribute("class", "");
                     }
-                }
-                else {
-                    if (typeof oldValue === "string") {
-                        style.cssText = "";
+                    else if (value == null) {
+                        if (isHydrating && element.hasAttribute("class")) {
+                            emitHydrationWarning(name, quietProps, value, element.getAttribute("class"), element);
+                        }
+                        element.removeAttribute("class");
                     }
-                    for (const styleName in { ...oldValue, ...value }) {
-                        const styleValue = value && value[styleName];
-                        if (styleValue == null) {
-                            style.removeProperty(styleName);
+                    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;
+                        for (const className in { ...oldValue, ...value }) {
+                            const classValue = value && value[className];
+                            if (classValue) {
+                                element.classList.add(className);
+                                if (hydratingClasses && hydratingClasses.has(className)) {
+                                    hydratingClasses.delete(className);
+                                }
+                                else if (isHydrating) {
+                                    shouldIssueWarning = true;
+                                }
+                            }
+                            else {
+                                element.classList.remove(className);
+                            }
                         }
-                        else if (style.getPropertyValue(styleName) !== styleValue) {
-                            style.setProperty(styleName, styleValue);
+                        if (shouldIssueWarning ||
+                            (hydratingClasses && hydratingClasses.size > 0)) {
+                            emitHydrationWarning(name, quietProps, Object.keys(value)
+                                .filter((k) => value[k])
+                                .join(" "), hydratingClassName || "", element);
                         }
                     }
-                }
-                break;
-            }
-            case "class":
-            case "className":
-                if (value === true) {
-                    node.setAttribute("class", "");
-                }
-                else if (value == null) {
-                    node.removeAttribute("class");
-                }
-                else if (!isSVG) {
-                    if (node.className !== value) {
-                        node["className"] = value;
+                    else if (!isSVG && !isMathML) {
+                        if (element.className !== value) {
+                            if (isHydrating) {
+                                emitHydrationWarning(name, quietProps, value, element.className, element);
+                            }
+                            element.className = value;
+                        }
                     }
-                }
-                else if (node.getAttribute("class") !== value) {
-                    node.setAttribute("class", value);
-                }
-                break;
-            case "innerHTML":
-                if (value !== oldValue) {
-                    node.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();
-                }
-                if (name in node &&
-                    // boolean properties will coerce strings, but sometimes they map to
-                    // enumerated attributes, where truthy strings ("false", "no") map to
-                    // falsy properties, so we use attributes in this case.
-                    !(typeof value === "string" &&
-                        typeof node[name] === "boolean")) {
-                    // walk up the object's prototype chain to find the owner of the
-                    // named property
-                    let obj = node;
-                    do {
-                        if (Object.prototype.hasOwnProperty.call(obj, name)) {
-                            break;
+                    else if (element.getAttribute("class") !== value) {
+                        if (isHydrating) {
+                            emitHydrationWarning(name, quietProps, value, element.getAttribute("class"), element);
                         }
-                    } while ((obj = Object.getPrototypeOf(obj)));
-                    // get the descriptor for the named property and check whether it
-                    // implies that the property is writable
-                    const descriptor = Object.getOwnPropertyDescriptor(obj, name);
-                    if (descriptor != null &&
-                        (descriptor.writable === true || descriptor.set !== undefined)) {
-                        if (node[name] !== value || oldValue === undefined) {
-                            node[name] = value;
+                        element.setAttribute("class", value);
+                    }
+                    break;
+                case "innerHTML":
+                    if (value !== oldValue) {
+                        if (isHydrating) {
+                            emitHydrationWarning(name, quietProps, value, element.innerHTML, element);
                         }
-                        return;
+                        element.innerHTML = value;
                     }
-                    // if the property wasn't writable, fall through to the code below
-                    // which uses setAttribute() instead of assigning directly.
-                }
-                if (value === true) {
-                    value = "";
-                }
-                else if (value == null || value === false) {
-                    node.removeAttribute(name);
-                    return;
-                }
-                if (node.getAttribute(name) !== value) {
-                    node.setAttribute(name, value);
-                }
-            }
-        }
-    },
-    arrange(tag, node, props, children, _oldProps, oldChildren) {
-        if (tag === Portal && (node == null || typeof node.nodeType !== "number")) {
-            throw new TypeError(`Portal root is not a node. Received: ${JSON.stringify(node && node.toString())}`);
-        }
-        if (!("innerHTML" in props) &&
-            // We don’t want to update elements without explicit children (<div/>),
-            // because these elements sometimes have child nodes added via raw
-            // DOM manipulations.
-            // However, if an element has previously rendered children, we clear the
-            // them because it would be surprising not to clear Crank managed
-            // children, even if the new element does not have explicit children.
-            ("children" in props || (oldChildren && oldChildren.length))) {
-            if (children.length === 0) {
-                node.textContent = "";
-            }
-            else {
-                let oldChild = node.firstChild;
-                let i = 0;
-                while (oldChild !== null && i < children.length) {
-                    const newChild = children[i];
-                    if (oldChild === newChild) {
-                        oldChild = oldChild.nextSibling;
-                        i++;
+                    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();
                     }
-                    else if (typeof newChild === "string") {
-                        if (oldChild.nodeType === Node.TEXT_NODE) {
-                            if (oldChild.data !== newChild) {
-                                oldChild.data = newChild;
+                    // 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)) {
+                        if (element[name] !== value || oldValue === undefined) {
+                            if (isHydrating &&
+                                typeof element[name] === "string" &&
+                                element[name] !== value) {
+                                emitHydrationWarning(name, quietProps, value, element[name], element);
                             }
-                            oldChild = oldChild.nextSibling;
+                            // if the property is writable, assign it directly
+                            element[name] = value;
                         }
-                        else {
-                            node.insertBefore(document.createTextNode(newChild), oldChild);
+                        continue;
+                    }
+                    if (value === true) {
+                        value = "";
+                    }
+                    else if (value == null || value === false) {
+                        if (isHydrating && element.hasAttribute(name)) {
+                            emitHydrationWarning(name, quietProps, value, element.getAttribute(name), element);
                         }
-                        i++;
+                        element.removeAttribute(name);
+                        continue;
                     }
-                    else if (oldChild.nodeType === Node.TEXT_NODE) {
-                        const nextSibling = oldChild.nextSibling;
-                        node.removeChild(oldChild);
-                        oldChild = nextSibling;
+                    else if (typeof value !== "string") {
+                        value = String(value);
                     }
-                    else {
-                        node.insertBefore(newChild, oldChild);
-                        i++;
-                        // TODO: This is an optimization but we need to think a little more about other cases like prepending.
-                        if (oldChild !== children[i]) {
-                            const nextSibling = oldChild.nextSibling;
-                            node.removeChild(oldChild);
-                            oldChild = nextSibling;
+                    if (element.getAttribute(name) !== value) {
+                        if (isHydrating) {
+                            emitHydrationWarning(name, quietProps, value, element.getAttribute(name), element);
                         }
+                        element.setAttribute(name, value);
                     }
                 }
-                // remove excess DOM nodes
-                while (oldChild !== null) {
-                    const nextSibling = oldChild.nextSibling;
-                    node.removeChild(oldChild);
-                    oldChild = nextSibling;
+            }
+        }
+    },
+    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)) {
+            let oldChild = node.firstChild;
+            for (let i = 0; i < children.length; i++) {
+                const newChild = children[i];
+                if (oldChild === newChild) {
+                    // the child is already in the right place, so we can skip it
+                    oldChild = oldChild.nextSibling;
                 }
-                // append excess children
-                for (; i < children.length; i++) {
-                    const newChild = children[i];
-                    node.appendChild(typeof newChild === "string"
-                        ? document.createTextNode(newChild)
-                        : newChild);
+                else {
+                    node.insertBefore(newChild, oldChild);
+                    if (tag !== Portal &&
+                        oldChild &&
+                        i + 1 < children.length &&
+                        oldChild !== children[i + 1]) {
+                        oldChild = oldChild.nextSibling;
+                    }
                 }
             }
         }
     },
-    text(text, _scope, hydrationData) {
-        if (hydrationData != null) {
-            let value = hydrationData.children.shift();
-            if (typeof value !== "string" || !value.startsWith(text)) ;
-            else if (text.length < value.length) {
-                value = value.slice(text.length);
-                hydrationData.children.unshift(value);
+    remove({ node, parentNode, isNested, }) {
+        if (!isNested && node.parentNode === parentNode) {
+            parentNode.removeChild(node);
+        }
+    },
+    text({ value, oldNode, hydrationNodes, }) {
+        if (hydrationNodes != null) {
+            let node = hydrationNodes.shift();
+            if (!node || node.nodeType !== Node.TEXT_NODE) {
+                console.warn(`Expected "${value}" while hydrating but found:`, node);
+            }
+            else {
+                // value is a text node, check if it matches the expected text
+                const textData = node.data;
+                if (textData.length > value.length) {
+                    if (textData.startsWith(value)) {
+                        // the text node is longer than the expected text, so we
+                        // reuse the existing text node, but truncate it and unshift the rest
+                        node.data = value;
+                        hydrationNodes.unshift(document.createTextNode(textData.slice(value.length)));
+                        return node;
+                    }
+                }
+                else if (textData === value) {
+                    return node;
+                }
+                // We log textData and not node because node will be mutated
+                console.warn(`Expected "${value}" while hydrating but found:`, textData);
+                oldNode = node;
+            }
+        }
+        if (oldNode != null) {
+            if (oldNode.data !== value) {
+                oldNode.data = value;
             }
+            return oldNode;
         }
-        return text;
+        return document.createTextNode(value);
     },
-    raw(value, xmlns, hydrationData) {
-        let result;
+    raw({ value, scope: xmlns, hydrationNodes, }) {
+        let nodes;
         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;
-            if (el.childNodes.length === 0) {
-                result = undefined;
-            }
-            else if (el.childNodes.length === 1) {
-                result = el.childNodes[0];
-            }
-            else {
-                result = Array.from(el.childNodes);
-            }
+            nodes = Array.from(el.childNodes);
         }
         else {
-            result = value;
+            nodes = value == null ? [] : Array.isArray(value) ? [...value] : [value];
         }
-        if (hydrationData != null) {
-            // TODO: maybe we should warn on incorrect values
-            if (Array.isArray(result)) {
-                for (let i = 0; i < result.length; i++) {
-                    const node = result[i];
-                    if (typeof node !== "string" &&
-                        (node.nodeType === Node.ELEMENT_NODE ||
-                            node.nodeType === Node.TEXT_NODE)) {
-                        hydrationData.children.shift();
-                    }
+        if (hydrationNodes != null) {
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                // check if node is equal to the next node in the hydration array
+                const hydrationNode = hydrationNodes.shift();
+                if (hydrationNode &&
+                    typeof hydrationNode === "object" &&
+                    typeof hydrationNode.nodeType === "number" &&
+                    node.isEqualNode(hydrationNode)) {
+                    nodes[i] = hydrationNode;
                 }
-            }
-            else if (result != null && typeof result !== "string") {
-                if (result.nodeType === Node.ELEMENT_NODE ||
-                    result.nodeType === Node.TEXT_NODE) {
-                    hydrationData.children.shift();
+                else {
+                    console.warn(`Expected <Raw value="${String(value)}"> while hydrating but found:`, hydrationNode);
                 }
             }
         }
-        return result;
+        return nodes.length === 0
+            ? undefined
+            : nodes.length === 1
+                ? nodes[0]
+                : nodes;
     },
 };
 class DOMRenderer extends Renderer {
     constructor() {
-        super(impl);
+        super(adapter);
     }
     render(children, root, ctx) {
         validateRoot(root);
@@ -316,12 +447,15 @@ class DOMRenderer extends Renderer {
     }
 }
 function validateRoot(root) {
-    if (root === null ||
+    if (root == null ||
         (typeof root === "object" && typeof root.nodeType !== "number")) {
-        throw new TypeError(`Render root is not a node. Received: ${JSON.stringify(root && root.toString())}`);
+        throw new TypeError(`Render root is not a node. Received: ${String(root)}`);
+    }
+    else if (root.nodeType !== Node.ELEMENT_NODE) {
+        throw new TypeError(`Render root must be an element node. Received: ${String(root)}`);
     }
 }
 const renderer = new DOMRenderer();
 
-export { DOMRenderer, impl, renderer };
+export { DOMRenderer, adapter, renderer };
 //# sourceMappingURL=dom.js.map