@b9g/crank 0.5.6 → 0.6.0

package/dom.js

@@ -1,295 +1,302 @@
 /// <reference types="dom.d.ts" />
 import { Portal, Renderer } from './crank.js';
 
-const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-const impl = {
-    scope(xmlns, tag, props) {
-        switch (tag) {
-            case Portal:
-                xmlns = undefined;
-                break;
-            case "svg":
-                xmlns = SVG_NAMESPACE;
-                break;
-        }
-        return props.xmlns || xmlns;
-    },
-    create(tag, _props, xmlns) {
-        if (typeof tag !== "string") {
-            throw new Error(`Unknown tag: ${tag.toString()}`);
-        }
-        else if (tag.toLowerCase() === "svg") {
-            xmlns = SVG_NAMESPACE;
-        }
-        return xmlns
-            ? document.createElementNS(xmlns, tag)
-            : document.createElement(tag);
-    },
-    hydrate(tag, node, props) {
-        if (typeof tag !== "string" && tag !== Portal) {
-            throw new Error(`Unknown tag: ${tag.toString()}`);
-        }
-        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;
-        }
-        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);
-            }
-        }
-        // TODO: extract props from nodes
-        return { props, children };
-    },
-    patch(_tag, 
-    // TODO: Why does this assignment work?
-    node, name, 
-    // TODO: Stricter typings?
-    value, oldValue, xmlns) {
-        const isSVG = xmlns === SVG_NAMESPACE;
-        switch (name) {
-            case "style": {
-                const style = node.style;
-                if (style == null) {
-                    node.setAttribute("style", value);
-                }
-                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;
-                    }
-                }
-                else {
-                    if (typeof oldValue === "string") {
-                        style.cssText = "";
-                    }
-                    for (const styleName in { ...oldValue, ...value }) {
-                        const styleValue = value && value[styleName];
-                        if (styleValue == null) {
-                            style.removeProperty(styleName);
-                        }
-                        else if (style.getPropertyValue(styleName) !== styleValue) {
-                            style.setProperty(styleName, styleValue);
-                        }
-                    }
-                }
-                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 (node.getAttribute("class") !== value) {
-                    node.setAttribute("class", value);
-                }
-                break;
-            case "innerHTML":
-                if (value !== oldValue) {
-                    node.innerHTML = value;
-                }
-                break;
-            default: {
-                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;
-                        }
-                    } 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;
-                        }
-                        return;
-                    }
-                    // 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++;
-                    }
-                    else if (typeof newChild === "string") {
-                        if (oldChild.nodeType === Node.TEXT_NODE) {
-                            if (oldChild.data !== newChild) {
-                                oldChild.data = newChild;
-                            }
-                            oldChild = oldChild.nextSibling;
-                        }
-                        else {
-                            node.insertBefore(document.createTextNode(newChild), oldChild);
-                        }
-                        i++;
-                    }
-                    else if (oldChild.nodeType === Node.TEXT_NODE) {
-                        const nextSibling = oldChild.nextSibling;
-                        node.removeChild(oldChild);
-                        oldChild = nextSibling;
-                    }
-                    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;
-                        }
-                    }
-                }
-                // remove excess DOM nodes
-                while (oldChild !== null) {
-                    const nextSibling = oldChild.nextSibling;
-                    node.removeChild(oldChild);
-                    oldChild = nextSibling;
-                }
-                // append excess children
-                for (; i < children.length; i++) {
-                    const newChild = children[i];
-                    node.appendChild(typeof newChild === "string"
-                        ? document.createTextNode(newChild)
-                        : newChild);
-                }
-            }
-        }
-    },
-    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);
-            }
-        }
-        return text;
-    },
-    raw(value, xmlns, hydrationData) {
-        let result;
-        if (typeof value === "string") {
-            const el = xmlns == null
-                ? document.createElement("div")
-                : document.createElementNS(xmlns, "svg");
-            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);
-            }
-        }
-        else {
-            result = 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();
-                    }
-                }
-            }
-            else if (result != null && typeof result !== "string") {
-                if (result.nodeType === Node.ELEMENT_NODE ||
-                    result.nodeType === Node.TEXT_NODE) {
-                    hydrationData.children.shift();
-                }
-            }
-        }
-        return result;
-    },
-};
-class DOMRenderer extends Renderer {
-    constructor() {
-        super(impl);
-    }
-    render(children, root, ctx) {
-        validateRoot(root);
-        return super.render(children, root, ctx);
-    }
-    hydrate(children, root, ctx) {
-        validateRoot(root);
-        return super.hydrate(children, root, ctx);
-    }
-}
-function validateRoot(root) {
-    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())}`);
-    }
-}
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+const impl = {
+    scope(xmlns, tag, props) {
+        switch (tag) {
+            case Portal:
+                xmlns = undefined;
+                break;
+            case "svg":
+                xmlns = SVG_NAMESPACE;
+                break;
+        }
+        return props.xmlns || xmlns;
+    },
+    create(tag, _props, xmlns) {
+        if (typeof tag !== "string") {
+            throw new Error(`Unknown tag: ${tag.toString()}`);
+        }
+        else if (tag.toLowerCase() === "svg") {
+            xmlns = SVG_NAMESPACE;
+        }
+        return xmlns
+            ? document.createElementNS(xmlns, tag)
+            : document.createElement(tag);
+    },
+    hydrate(tag, node, props) {
+        if (typeof tag !== "string" && tag !== Portal) {
+            throw new Error(`Unknown tag: ${tag.toString()}`);
+        }
+        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;
+        }
+        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);
+            }
+        }
+        // TODO: extract props from nodes
+        return { props, children };
+    },
+    patch(_tag, 
+    // TODO: Why does this assignment work?
+    node, name, 
+    // TODO: Stricter typings?
+    value, oldValue, xmlns) {
+        const isSVG = xmlns === SVG_NAMESPACE;
+        switch (name) {
+            case "style": {
+                const style = node.style;
+                if (style == null) {
+                    node.setAttribute("style", value);
+                }
+                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;
+                    }
+                }
+                else {
+                    if (typeof oldValue === "string") {
+                        style.cssText = "";
+                    }
+                    for (const styleName in { ...oldValue, ...value }) {
+                        const styleValue = value && value[styleName];
+                        if (styleValue == null) {
+                            style.removeProperty(styleName);
+                        }
+                        else if (style.getPropertyValue(styleName) !== styleValue) {
+                            style.setProperty(styleName, styleValue);
+                        }
+                    }
+                }
+                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 (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;
+                        }
+                    } 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;
+                        }
+                        return;
+                    }
+                    // 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++;
+                    }
+                    else if (typeof newChild === "string") {
+                        if (oldChild.nodeType === Node.TEXT_NODE) {
+                            if (oldChild.data !== newChild) {
+                                oldChild.data = newChild;
+                            }
+                            oldChild = oldChild.nextSibling;
+                        }
+                        else {
+                            node.insertBefore(document.createTextNode(newChild), oldChild);
+                        }
+                        i++;
+                    }
+                    else if (oldChild.nodeType === Node.TEXT_NODE) {
+                        const nextSibling = oldChild.nextSibling;
+                        node.removeChild(oldChild);
+                        oldChild = nextSibling;
+                    }
+                    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;
+                        }
+                    }
+                }
+                // remove excess DOM nodes
+                while (oldChild !== null) {
+                    const nextSibling = oldChild.nextSibling;
+                    node.removeChild(oldChild);
+                    oldChild = nextSibling;
+                }
+                // append excess children
+                for (; i < children.length; i++) {
+                    const newChild = children[i];
+                    node.appendChild(typeof newChild === "string"
+                        ? document.createTextNode(newChild)
+                        : newChild);
+                }
+            }
+        }
+    },
+    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);
+            }
+        }
+        return text;
+    },
+    raw(value, xmlns, hydrationData) {
+        let result;
+        if (typeof value === "string") {
+            const el = xmlns == null
+                ? document.createElement("div")
+                : document.createElementNS(xmlns, "svg");
+            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);
+            }
+        }
+        else {
+            result = 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();
+                    }
+                }
+            }
+            else if (result != null && typeof result !== "string") {
+                if (result.nodeType === Node.ELEMENT_NODE ||
+                    result.nodeType === Node.TEXT_NODE) {
+                    hydrationData.children.shift();
+                }
+            }
+        }
+        return result;
+    },
+};
+class DOMRenderer extends Renderer {
+    constructor() {
+        super(impl);
+    }
+    render(children, root, ctx) {
+        validateRoot(root);
+        return super.render(children, root, ctx);
+    }
+    hydrate(children, root, ctx) {
+        validateRoot(root);
+        return super.hydrate(children, root, ctx);
+    }
+}
+function validateRoot(root) {
+    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())}`);
+    }
+}
 const renderer = new DOMRenderer();
 
 export { DOMRenderer, impl, renderer };