npm - @b9g/crank - Versions diffs - 0.7.0 → 0.7.2 - Mend

@b9g/crank 0.7.0 → 0.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/dom.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dom.js","sources":["../src/dom.ts"],"sourcesContent":["import {\n\tChildren,\n\tContext,\n\tElementValue,\n\tPortal,\n\tRenderer,\n\tRenderAdapter,\n} from \"./crank.js\";\n\nconst SVG_NAMESPACE = \"http://www.w3.org/2000/svg\";\n\nfunction isWritableProperty(element: Element, name: string): boolean {\n\t// walk up the object's prototype chain to find the owner\n\tlet propOwner = element;\n\tdo {\n\t\tif (Object.prototype.hasOwnProperty.call(propOwner, name)) {\n\t\t\tbreak;\n\t\t}\n\t} while ((propOwner = Object.getPrototypeOf(propOwner)));\n\n\tif (propOwner === null) {\n\t\treturn false;\n\t}\n\n\t// get the descriptor for the named property and check whether it implies\n\t// that the property is writable\n\tconst descriptor = Object.getOwnPropertyDescriptor(propOwner, name);\n\tif (\n\t\tdescriptor != null &&\n\t\t(descriptor.writable === true \|\| descriptor.set !== undefined)\n\t) {\n\t\treturn true;\n\t}\n\n\treturn false;\n}\n\nfunction emitHydrationWarning(\n\tpropName: string,\n\tquietProps: Set<string> \| undefined,\n\texpectedValue: any,\n\tactualValue: any,\n\telement: Element,\n\tdisplayName?: string,\n) {\n\tconst checkName = propName;\n\tconst showName = displayName \|\| propName;\n\tif (!quietProps \|\| !quietProps.has(checkName)) {\n\t\tif (expectedValue === null \|\| expectedValue === false) {\n\t\t\tconsole.warn(\n\t\t\t\t`Expected \"${showName}\" to be missing but found ${String(actualValue)} while hydrating:`,\n\t\t\t\telement,\n\t\t\t);\n\t\t} else if (expectedValue === true \|\| expectedValue === \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`Expected \"${showName}\" to be ${expectedValue === true ? \"present\" : '\"\"'} but found ${String(actualValue)} while hydrating:`,\n\t\t\t\telement,\n\t\t\t);\n\t\t} else if (\n\t\t\ttypeof window !== \"undefined\" &&\n\t\t\twindow.location &&\n\t\t\tnew URL(expectedValue, window.location.origin).href ===\n\t\t\t\tnew URL(actualValue, window.location.origin).href\n\t\t) {\n\t\t\t// attrs which are URLs will often be resolved to their full\n\t\t\t// href in the DOM, so we squash these errors\n\t\t} else {\n\t\t\tconsole.warn(\n\t\t\t\t`Expected \"${showName}\" to be \"${String(expectedValue)}\" but found ${String(actualValue)} while hydrating:`,\n\t\t\t\telement,\n\t\t\t);\n\t\t}\n\t}\n}\n\nexport const adapter: Partial<RenderAdapter<Node, string, Element>> = {\n\tscope({\n\t\tscope: xmlns,\n\t\ttag,\n\t\tprops,\n\t}: {\n\t\tscope: string \| undefined;\n\t\ttag: string \| symbol;\n\t\tprops: Record<string, any>;\n\t}): string \| undefined {\n\t\tswitch (tag) {\n\t\t\tcase Portal:\n\t\t\t\t// TODO: read the namespace from the portal root element\n\t\t\t\txmlns = undefined;\n\t\t\t\tbreak;\n\t\t\tcase \"svg\":\n\t\t\t\txmlns = SVG_NAMESPACE;\n\t\t\t\tbreak;\n\t\t}\n\n\t\treturn props.xmlns \|\| xmlns;\n\t},\n\n\tcreate({\n\t\ttag,\n\t\ttagName,\n\t\tscope: xmlns,\n\t}: {\n\t\ttag: string \| symbol;\n\t\ttagName: string;\n\t\tscope: string \| undefined;\n\t}): Node {\n\t\tif (typeof tag !== \"string\") {\n\t\t\tthrow new Error(`Unknown tag: ${tagName}`);\n\t\t} else if (tag.toLowerCase() === \"svg\") {\n\t\t\txmlns = SVG_NAMESPACE;\n\t\t}\n\n\t\treturn xmlns\n\t\t\t? document.createElementNS(xmlns, tag)\n\t\t\t: document.createElement(tag);\n\t},\n\n\tadopt({\n\t\ttag,\n\t\ttagName,\n\t\tnode,\n\t}: {\n\t\ttag: string \| symbol;\n\t\ttagName: string;\n\t\tnode: Node \| undefined;\n\t}): Array<Node> \| undefined {\n\t\tif (typeof tag !== \"string\" && tag !== Portal) {\n\t\t\tthrow new Error(`Unknown tag: ${tagName}`);\n\t\t}\n\n\t\tif (\n\t\t\tnode === document.body \|\|\n\t\t\tnode === document.head \|\|\n\t\t\tnode === document.documentElement \|\|\n\t\t\tnode === document\n\t\t) {\n\t\t\tconsole.warn(\n\t\t\t\t`Hydrating ${node.nodeName.toLowerCase()} is discouraged as it is destructive and may remove unknown nodes.`,\n\t\t\t);\n\t\t}\n\n\t\tif (\n\t\t\tnode == null \|\|\n\t\t\t(typeof tag === \"string\" &&\n\t\t\t\t(node.nodeType !== Node.ELEMENT_NODE \|\|\n\t\t\t\t\ttag.toLowerCase() !== (node as Element).tagName.toLowerCase()))\n\t\t) {\n\t\t\tconsole.warn(`Expected <${tagName}> while hydrating but found: `, node);\n\t\t\treturn;\n\t\t}\n\n\t\treturn Array.from(node.childNodes);\n\t},\n\n\tpatch({\n\t\ttagName,\n\t\tnode,\n\t\tprops,\n\t\toldProps,\n\t\tscope: xmlns,\n\t\tcopyProps,\n\t\tquietProps,\n\t\tisHydrating,\n\t}: {\n\t\tnode: Node;\n\t\ttagName: string;\n\t\tprops: Record<string, any>;\n\t\toldProps: Record<string, any> \| undefined;\n\t\tscope: string \| undefined;\n\t\tcopyProps: Set<string> \| undefined;\n\t\tquietProps: Set<string> \| undefined;\n\t\tisHydrating: boolean;\n\t}): void {\n\t\tif (node.nodeType !== Node.ELEMENT_NODE) {\n\t\t\tthrow new TypeError(`Cannot patch node: ${String(node)}`);\n\t\t} else if (props.class && props.className) {\n\t\t\tconsole.error(\n\t\t\t\t`Both \"class\" and \"className\" set in props for <${tagName}>. Use one or the other.`,\n\t\t\t);\n\t\t}\n\n\t\tconst element = node as Element;\n\t\tconst isSVG = xmlns === SVG_NAMESPACE;\n\t\tfor (let name in {...oldProps, ...props}) {\n\t\t\tlet value = props[name];\n\t\t\tconst oldValue = oldProps ? oldProps[name] : undefined;\n\t\t\t{\n\t\t\t\tif (copyProps != null && copyProps.has(name)) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\t// handle prop:name or attr:name properties\n\t\t\t\tconst colonIndex = name.indexOf(\":\");\n\t\t\t\tif (colonIndex !== -1) {\n\t\t\t\t\tconst [ns, name1] = [\n\t\t\t\t\t\tname.slice(0, colonIndex),\n\t\t\t\t\t\tname.slice(colonIndex + 1),\n\t\t\t\t\t];\n\t\t\t\t\tswitch (ns) {\n\t\t\t\t\t\tcase \"prop\":\n\t\t\t\t\t\t\t(node as any)[name1] = value;\n\t\t\t\t\t\t\tcontinue;\n\t\t\t\t\t\tcase \"attr\":\n\t\t\t\t\t\t\tif (value == null \|\| value === false) {\n\t\t\t\t\t\t\t\tif (isHydrating && element.hasAttribute(name1)) {\n\t\t\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\t\t\telement.getAttribute(name1),\n\t\t\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\telement.removeAttribute(name1);\n\t\t\t\t\t\t\t} else if (value === true) {\n\t\t\t\t\t\t\t\tif (isHydrating && !element.hasAttribute(name1)) {\n\t\t\t\t\t\t\t\t\temitHydrationWarning(name, quietProps, value, null, element);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\telement.setAttribute(name1, \"\");\n\t\t\t\t\t\t\t} else if (typeof value !== \"string\") {\n\t\t\t\t\t\t\t\tvalue = String(value);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (isHydrating && element.getAttribute(name1) !== value) {\n\t\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\t\telement.getAttribute(name1),\n\t\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\telement.setAttribute(name1, String(value));\n\t\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tswitch (name) {\n\t\t\t\t// TODO: fix hydration warnings for the style prop\n\t\t\t\tcase \"style\": {\n\t\t\t\t\tconst style = (element as HTMLElement \| SVGElement).style;\n\t\t\t\t\tif (value == null \|\| value === false) {\n\t\t\t\t\t\tif (isHydrating && style.cssText !== \"\") {\n\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\tstyle.cssText,\n\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t\telement.removeAttribute(\"style\");\n\t\t\t\t\t} else if (value === true) {\n\t\t\t\t\t\tif (isHydrating && style.cssText !== \"\") {\n\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\t\"\",\n\t\t\t\t\t\t\t\tstyle.cssText,\n\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t\telement.setAttribute(\"style\", \"\");\n\t\t\t\t\t} else if (typeof value === \"string\") {\n\t\t\t\t\t\tif (style.cssText !== value) {\n\t\t\t\t\t\t\t// TODO: Fix hydration warnings for styles\n\t\t\t\t\t\t\t//if (isHydrating) {\n\t\t\t\t\t\t\t//\temitHydrationWarning(\n\t\t\t\t\t\t\t//\t\tname,\n\t\t\t\t\t\t\t//\t\tquietProps,\n\t\t\t\t\t\t\t//\t\tvalue,\n\t\t\t\t\t\t\t//\t\tstyle.cssText,\n\t\t\t\t\t\t\t//\t\telement,\n\t\t\t\t\t\t\t//\t);\n\t\t\t\t\t\t\t//}\n\n\t\t\t\t\t\t\tstyle.cssText = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (typeof oldValue === \"string\") {\n\t\t\t\t\t\t\t// if the old value was a string, we need to clear the style\n\t\t\t\t\t\t\t// TODO: only clear the styles enumerated in the old value\n\t\t\t\t\t\t\tstyle.cssText = \"\";\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tfor (const styleName in {...oldValue, ...value}) {\n\t\t\t\t\t\t\tconst styleValue = value && (value as any)[styleName];\n\t\t\t\t\t\t\tif (styleValue == null) {\n\t\t\t\t\t\t\t\tif (isHydrating && style.getPropertyValue(styleName) !== \"\") {\n\t\t\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\t\t\tnull,\n\t\t\t\t\t\t\t\t\t\tstyle.getPropertyValue(styleName),\n\t\t\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t\t\t\t`style.${styleName}`,\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tstyle.removeProperty(styleName);\n\t\t\t\t\t\t\t} else if (style.getPropertyValue(styleName) !== styleValue) {\n\t\t\t\t\t\t\t\t// TODO: hydration warnings for style props\n\t\t\t\t\t\t\t\t//if (isHydrating) {\n\t\t\t\t\t\t\t\t//\temitHydrationWarning(\n\t\t\t\t\t\t\t\t//\t\tname,\n\t\t\t\t\t\t\t\t//\t\tquietProps,\n\t\t\t\t\t\t\t\t//\t\tstyleValue,\n\t\t\t\t\t\t\t\t//\t\tstyle.getPropertyValue(styleName),\n\t\t\t\t\t\t\t\t//\t\telement,\n\t\t\t\t\t\t\t\t//\t\t`style.${styleName}`,\n\t\t\t\t\t\t\t\t//\t);\n\t\t\t\t\t\t\t\t//}\n\t\t\t\t\t\t\t\tstyle.setProperty(styleName, styleValue);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\tcase \"class\":\n\t\t\t\tcase \"className\":\n\t\t\t\t\tif (value === true) {\n\t\t\t\t\t\tif (isHydrating && element.getAttribute(\"class\") !== \"\") {\n\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\t\"\",\n\t\t\t\t\t\t\t\telement.getAttribute(\"class\"),\n\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t\telement.setAttribute(\"class\", \"\");\n\t\t\t\t\t} else if (value == null) {\n\t\t\t\t\t\tif (isHydrating && element.hasAttribute(\"class\")) {\n\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\telement.getAttribute(\"class\"),\n\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\telement.removeAttribute(\"class\");\n\t\t\t\t\t} else if (typeof value === \"object\") {\n\t\t\t\t\t\t// class={{\"included-class\": true, \"excluded-class\": false}} syntax\n\t\t\t\t\t\tif (typeof oldValue === \"string\") {\n\t\t\t\t\t\t\t// if the old value was a string, we need to clear all classes\n\t\t\t\t\t\t\telement.setAttribute(\"class\", \"\");\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tlet shouldIssueWarning = false;\n\t\t\t\t\t\tconst hydratingClasses = isHydrating\n\t\t\t\t\t\t\t? new Set(Array.from(element.classList))\n\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\tconst hydratingClassName = isHydrating\n\t\t\t\t\t\t\t? element.getAttribute(\"class\")\n\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\tfor (const className in {...oldValue, ...value}) {\n\t\t\t\t\t\t\tconst classValue = value && value[className];\n\t\t\t\t\t\t\tif (classValue) {\n\t\t\t\t\t\t\t\telement.classList.add(className);\n\t\t\t\t\t\t\t\tif (hydratingClasses && hydratingClasses.has(className)) {\n\t\t\t\t\t\t\t\t\thydratingClasses.delete(className);\n\t\t\t\t\t\t\t\t} else if (isHydrating) {\n\t\t\t\t\t\t\t\t\tshouldIssueWarning = true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\telement.classList.remove(className);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tshouldIssueWarning \|\|\n\t\t\t\t\t\t\t(hydratingClasses && hydratingClasses.size > 0)\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\tObject.keys(value)\n\t\t\t\t\t\t\t\t\t.filter((k) => value[k])\n\t\t\t\t\t\t\t\t\t.join(\" \"),\n\t\t\t\t\t\t\t\thydratingClassName \|\| \"\",\n\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} else if (!isSVG) {\n\t\t\t\t\t\tif (element.className !== value) {\n\t\t\t\t\t\t\tif (isHydrating) {\n\t\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\t\telement.className,\n\t\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\telement.className = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t} else if (element.getAttribute(\"class\") !== value) {\n\t\t\t\t\t\tif (isHydrating) {\n\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\telement.getAttribute(\"class\"),\n\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t\telement.setAttribute(\"class\", value as string);\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"innerHTML\":\n\t\t\t\t\tif (value !== oldValue) {\n\t\t\t\t\t\tif (isHydrating) {\n\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\telement.innerHTML,\n\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t\telement.innerHTML = value as any;\n\t\t\t\t\t}\n\n\t\t\t\t\tbreak;\n\t\t\t\tdefault: {\n\t\t\t\t\tif (\n\t\t\t\t\t\tname[0] === \"o\" &&\n\t\t\t\t\t\tname[1] === \"n\" &&\n\t\t\t\t\t\tname[2] === name[2].toUpperCase() &&\n\t\t\t\t\t\ttypeof value === \"function\"\n\t\t\t\t\t) {\n\t\t\t\t\t\t// Support React-style event names (onClick, onChange, etc.)\n\t\t\t\t\t\tname = name.toLowerCase();\n\t\t\t\t\t}\n\n\t\t\t\t\t// try to set the property directly\n\t\t\t\t\tif (\n\t\t\t\t\t\tname in element &&\n\t\t\t\t\t\t// boolean properties will coerce strings, but sometimes they map to\n\t\t\t\t\t\t// enumerated attributes, where truthy strings (\"false\", \"no\") map to\n\t\t\t\t\t\t// falsy properties, so we force using setAttribute.\n\t\t\t\t\t\t!(\n\t\t\t\t\t\t\ttypeof value === \"string\" &&\n\t\t\t\t\t\t\ttypeof (element as any)[name] === \"boolean\"\n\t\t\t\t\t\t) &&\n\t\t\t\t\t\tisWritableProperty(element, name)\n\t\t\t\t\t) {\n\t\t\t\t\t\tif ((element as any)[name] !== value \|\| oldValue === undefined) {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tisHydrating &&\n\t\t\t\t\t\t\t\ttypeof (element as any)[name] === \"string\" &&\n\t\t\t\t\t\t\t\t(element as any)[name] !== value\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\t\t(element as any)[name],\n\t\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// if the property is writable, assign it directly\n\t\t\t\t\t\t\t(element as any)[name] = value;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (value === true) {\n\t\t\t\t\t\tvalue = \"\";\n\t\t\t\t\t} else if (value == null \|\| value === false) {\n\t\t\t\t\t\tif (isHydrating && element.hasAttribute(name)) {\n\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\telement.getAttribute(name),\n\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\telement.removeAttribute(name);\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t} else if (typeof value !== \"string\") {\n\t\t\t\t\t\tvalue = String(value);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (element.getAttribute(name) !== value) {\n\t\t\t\t\t\tif (isHydrating) {\n\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\telement.getAttribute(name),\n\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\telement.setAttribute(name, value as any);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t},\n\n\tarrange({\n\t\ttag,\n\t\tnode,\n\t\tprops,\n\t\tchildren,\n\t}: {\n\t\ttag: string \| symbol;\n\t\tnode: Node;\n\t\tprops: Record<string, any>;\n\t\tchildren: Array<Node>;\n\t}): void {\n\t\tif (tag === Portal && (node == null \|\| typeof node.nodeType !== \"number\")) {\n\t\t\tthrow new TypeError(\n\t\t\t\t`<Portal> root is not a node. nodes: Array<Node>;\n\t\tif (typeof value === \"string\") {\n\t\t\tconst el =\n\t\t\t\txmlns == null\n\t\t\t\t\t? document.createElement(\"div\")\n\t\t\t\t\t: document.createElementNS(xmlns, \"svg\");\n\t\t\tel.innerHTML = value;\n\t\t\tnodes = Array.from(el.childNodes);\n\t\t} else {\n\t\t\tnodes = value == null ? [] : Array.isArray(value) ? [...value] : [value];\n\t\t}\n\n\t\tif (hydrationNodes != null) {\n\t\t\tfor (let i = 0; i < nodes.length; i++) {\n\t\t\t\tconst node = nodes[i];\n\t\t\t\t// check if node is equal to the next node in the hydration array\n\t\t\t\tconst hydrationNode = hydrationNodes.shift();\n\t\t\t\tif (\n\t\t\t\t\thydrationNode &&\n\t\t\t\t\ttypeof hydrationNode === \"object\" &&\n\t\t\t\t\ttypeof hydrationNode.nodeType === \"number\" &&\n\t\t\t\t\tnode.isEqualNode(hydrationNode as Node)\n\t\t\t\t) {\n\t\t\t\t\tnodes[i] = hydrationNode as Node;\n\t\t\t\t} else {\n\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t`Expected <Raw value=\"${String(value)}\"> while hydrating but found:`,\n\t\t\t\t\t\thydrationNode,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn nodes.length === 0\n\t\t\t? undefined\n\t\t\t: nodes.length === 1\n\t\t\t\t? nodes[0]\n\t\t\t\t: nodes;\n\t},\n};\n\nexport class DOMRenderer extends Renderer<Node, string, Element> {\n\tconstructor() {\n\t\tsuper(adapter);\n\t}\n\n\trender(\n\t\tchildren: Children,\n\t\troot: Element,\n\t\tctx?: Context,\n\t): Promise<ElementValue<Node>> \| ElementValue<Node> {\n\t\tvalidateRoot(root);\n\t\treturn super.render(children, root, ctx);\n\t}\n\n\thydrate(\n\t\tchildren: Children,\n\t\troot: Element,\n\t\tctx?: Context,\n\t): Promise<ElementValue<Node>> \| ElementValue<Node> {\n\t\tvalidateRoot(root);\n\t\treturn super.hydrate(children, root, ctx);\n\t}\n}\n\nfunction validateRoot(root: unknown): asserts root is Element {\n\tif (\n\t\troot == null \|\|\n\t\t(typeof root === \"object\" && typeof (root as any).nodeType !== \"number\")\n\t) {\n\t\tthrow new TypeError(`Render root is not a node.
1	+ {"version":3,"file":"dom.js","sources":["../src/dom.ts"],"sourcesContent":["import {\n\tChildren,\n\tContext,\n\tElementValue,\n\tPortal,\n\tRenderer,\n\tRenderAdapter,\n} from \"./crank.js\";\nimport {camelToKebabCase, formatStyleValue} from \"./_css.js\";\n\nconst SVG_NAMESPACE = \"http://www.w3.org/2000/svg\";\nconst MATHML_NAMESPACE = \"http://www.w3.org/1998/Math/MathML\";\n\nfunction isWritableProperty(element: Element, name: string): boolean {\n\t// walk up the object's prototype chain to find the owner\n\tlet propOwner = element;\n\tdo {\n\t\tif (Object.prototype.hasOwnProperty.call(propOwner, name)) {\n\t\t\tbreak;\n\t\t}\n\t} while ((propOwner = Object.getPrototypeOf(propOwner)));\n\n\tif (propOwner === null) {\n\t\treturn false;\n\t}\n\n\t// get the descriptor for the named property and check whether it implies\n\t// that the property is writable\n\tconst descriptor = Object.getOwnPropertyDescriptor(propOwner, name);\n\tif (\n\t\tdescriptor != null &&\n\t\t(descriptor.writable === true \|\| descriptor.set !== undefined)\n\t) {\n\t\treturn true;\n\t}\n\n\treturn false;\n}\n\nfunction emitHydrationWarning(\n\tpropName: string,\n\tquietProps: Set<string> \| undefined,\n\texpectedValue: any,\n\tactualValue: any,\n\telement: Element,\n\tdisplayName?: string,\n) {\n\tconst checkName = propName;\n\tconst showName = displayName \|\| propName;\n\tif (!quietProps \|\| !quietProps.has(checkName)) {\n\t\tif (expectedValue === null \|\| expectedValue === false) {\n\t\t\tconsole.warn(\n\t\t\t\t`Expected \"${showName}\" to be missing but found ${String(actualValue)} while hydrating:`,\n\t\t\t\telement,\n\t\t\t);\n\t\t} else if (expectedValue === true \|\| expectedValue === \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`Expected \"${showName}\" to be ${expectedValue === true ? \"present\" : '\"\"'} but found ${String(actualValue)} while hydrating:`,\n\t\t\t\telement,\n\t\t\t);\n\t\t} else if (\n\t\t\ttypeof window !== \"undefined\" &&\n\t\t\twindow.location &&\n\t\t\tnew URL(expectedValue, window.location.origin).href ===\n\t\t\t\tnew URL(actualValue, window.location.origin).href\n\t\t) {\n\t\t\t// attrs which are URLs will often be resolved to their full\n\t\t\t// href in the DOM, so we squash these errors\n\t\t} else {\n\t\t\tconsole.warn(\n\t\t\t\t`Expected \"${showName}\" to be \"${String(expectedValue)}\" but found ${String(actualValue)} while hydrating:`,\n\t\t\t\telement,\n\t\t\t);\n\t\t}\n\t}\n}\n\nexport const adapter: Partial<RenderAdapter<Node, string, Element>> = {\n\tscope({\n\t\tscope: xmlns,\n\t\ttag,\n\t\tprops,\n\t}: {\n\t\tscope: string \| undefined;\n\t\ttag: string \| symbol;\n\t\tprops: Record<string, any>;\n\t}): string \| undefined {\n\t\tswitch (tag) {\n\t\t\tcase Portal:\n\t\t\t\t// TODO: read the namespace from the portal root element\n\t\t\t\txmlns = undefined;\n\t\t\t\tbreak;\n\t\t\tcase \"svg\":\n\t\t\t\txmlns = SVG_NAMESPACE;\n\t\t\t\tbreak;\n\t\t\tcase \"math\":\n\t\t\t\txmlns = MATHML_NAMESPACE;\n\t\t\t\tbreak;\n\t\t}\n\n\t\treturn props.xmlns \|\| xmlns;\n\t},\n\n\tcreate({\n\t\ttag,\n\t\ttagName,\n\t\tscope: xmlns,\n\t}: {\n\t\ttag: string \| symbol;\n\t\ttagName: string;\n\t\tscope: string \| undefined;\n\t}): Node {\n\t\tif (typeof tag !== \"string\") {\n\t\t\tthrow new Error(`Unknown tag: ${tagName}`);\n\t\t} else if (tag.toLowerCase() === \"svg\") {\n\t\t\txmlns = SVG_NAMESPACE;\n\t\t} else if (tag.toLowerCase() === \"math\") {\n\t\t\txmlns = MATHML_NAMESPACE;\n\t\t}\n\n\t\treturn xmlns\n\t\t\t? document.createElementNS(xmlns, tag)\n\t\t\t: document.createElement(tag);\n\t},\n\n\tadopt({\n\t\ttag,\n\t\ttagName,\n\t\tnode,\n\t}: {\n\t\ttag: string \| symbol;\n\t\ttagName: string;\n\t\tnode: Node \| undefined;\n\t}): Array<Node> \| undefined {\n\t\tif (typeof tag !== \"string\" && tag !== Portal) {\n\t\t\tthrow new Error(`Unknown tag: ${tagName}`);\n\t\t}\n\n\t\tif (\n\t\t\tnode === document.body \|\|\n\t\t\tnode === document.head \|\|\n\t\t\tnode === document.documentElement \|\|\n\t\t\tnode === document\n\t\t) {\n\t\t\tconsole.warn(\n\t\t\t\t`Hydrating ${node.nodeName.toLowerCase()} is discouraged as it is destructive and may remove unknown nodes.`,\n\t\t\t);\n\t\t}\n\n\t\tif (\n\t\t\tnode == null \|\|\n\t\t\t(typeof tag === \"string\" &&\n\t\t\t\t(node.nodeType !== Node.ELEMENT_NODE \|\|\n\t\t\t\t\ttag.toLowerCase() !== (node as Element).tagName.toLowerCase()))\n\t\t) {\n\t\t\tconsole.warn(`Expected <${tagName}> while hydrating but found: `, node);\n\t\t\treturn;\n\t\t}\n\n\t\treturn Array.from(node.childNodes);\n\t},\n\n\tpatch({\n\t\ttagName,\n\t\tnode,\n\t\tprops,\n\t\toldProps,\n\t\tscope: xmlns,\n\t\tcopyProps,\n\t\tquietProps,\n\t\tisHydrating,\n\t}: {\n\t\tnode: Node;\n\t\ttagName: string;\n\t\tprops: Record<string, any>;\n\t\toldProps: Record<string, any> \| undefined;\n\t\tscope: string \| undefined;\n\t\tcopyProps: Set<string> \| undefined;\n\t\tquietProps: Set<string> \| undefined;\n\t\tisHydrating: boolean;\n\t}): void {\n\t\tif (node.nodeType !== Node.ELEMENT_NODE) {\n\t\t\tthrow new TypeError(`Cannot patch node: ${String(node)}`);\n\t\t} else if (props.class && props.className) {\n\t\t\tconsole.error(\n\t\t\t\t`Both \"class\" and \"className\" set in props for <${tagName}>. Use one or the other.`,\n\t\t\t);\n\t\t}\n\n\t\tconst element = node as Element;\n\t\tconst isSVG = xmlns === SVG_NAMESPACE;\n\t\tconst isMathML = xmlns === MATHML_NAMESPACE;\n\t\tfor (let name in {...oldProps, ...props}) {\n\t\t\tlet value = props[name];\n\t\t\tconst oldValue = oldProps ? oldProps[name] : undefined;\n\t\t\t{\n\t\t\t\tif (copyProps != null && copyProps.has(name)) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\t// handle prop:name or attr:name properties\n\t\t\t\tconst colonIndex = name.indexOf(\":\");\n\t\t\t\tif (colonIndex !== -1) {\n\t\t\t\t\tconst [ns, name1] = [\n\t\t\t\t\t\tname.slice(0, colonIndex),\n\t\t\t\t\t\tname.slice(colonIndex + 1),\n\t\t\t\t\t];\n\t\t\t\t\tswitch (ns) {\n\t\t\t\t\t\tcase \"prop\":\n\t\t\t\t\t\t\t(node as any)[name1] = value;\n\t\t\t\t\t\t\tcontinue;\n\t\t\t\t\t\tcase \"attr\":\n\t\t\t\t\t\t\tif (value == null \|\| value === false) {\n\t\t\t\t\t\t\t\tif (isHydrating && element.hasAttribute(name1)) {\n\t\t\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\t\t\telement.getAttribute(name1),\n\t\t\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\telement.removeAttribute(name1);\n\t\t\t\t\t\t\t} else if (value === true) {\n\t\t\t\t\t\t\t\tif (isHydrating && !element.hasAttribute(name1)) {\n\t\t\t\t\t\t\t\t\temitHydrationWarning(name, quietProps, value, null, element);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\telement.setAttribute(name1, \"\");\n\t\t\t\t\t\t\t} else if (typeof value !== \"string\") {\n\t\t\t\t\t\t\t\tvalue = String(value);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (isHydrating && element.getAttribute(name1) !== value) {\n\t\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\t\telement.getAttribute(name1),\n\t\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\telement.setAttribute(name1, String(value));\n\t\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tswitch (name) {\n\t\t\t\t// TODO: fix hydration warnings for the style prop\n\t\t\t\tcase \"style\": {\n\t\t\t\t\tconst style = (element as HTMLElement \| SVGElement).style;\n\t\t\t\t\tif (value == null \|\| value === false) {\n\t\t\t\t\t\tif (isHydrating && style.cssText !== \"\") {\n\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\tstyle.cssText,\n\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t\telement.removeAttribute(\"style\");\n\t\t\t\t\t} else if (value === true) {\n\t\t\t\t\t\tif (isHydrating && style.cssText !== \"\") {\n\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\t\"\",\n\t\t\t\t\t\t\t\tstyle.cssText,\n\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t\telement.setAttribute(\"style\", \"\");\n\t\t\t\t\t} else if (typeof value === \"string\") {\n\t\t\t\t\t\tif (style.cssText !== value) {\n\t\t\t\t\t\t\t// TODO: Fix hydration warnings for styles\n\t\t\t\t\t\t\t//if (isHydrating) {\n\t\t\t\t\t\t\t//\temitHydrationWarning(\n\t\t\t\t\t\t\t//\t\tname,\n\t\t\t\t\t\t\t//\t\tquietProps,\n\t\t\t\t\t\t\t//\t\tvalue,\n\t\t\t\t\t\t\t//\t\tstyle.cssText,\n\t\t\t\t\t\t\t//\t\telement,\n\t\t\t\t\t\t\t//\t);\n\t\t\t\t\t\t\t//}\n\n\t\t\t\t\t\t\tstyle.cssText = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (typeof oldValue === \"string\") {\n\t\t\t\t\t\t\t// if the old value was a string, we need to clear the style\n\t\t\t\t\t\t\t// TODO: only clear the styles enumerated in the old value\n\t\t\t\t\t\t\tstyle.cssText = \"\";\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tfor (const styleName in {...oldValue, ...value}) {\n\t\t\t\t\t\t\tconst cssName = camelToKebabCase(styleName);\n\t\t\t\t\t\t\tconst styleValue = value && (value as any)[styleName];\n\t\t\t\t\t\t\tif (styleValue == null) {\n\t\t\t\t\t\t\t\tif (isHydrating && style.getPropertyValue(cssName) !== \"\") {\n\t\t\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\t\t\tnull,\n\t\t\t\t\t\t\t\t\t\tstyle.getPropertyValue(cssName),\n\t\t\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t\t\t\t`style.${styleName}`,\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tstyle.removeProperty(cssName);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tconst formattedValue = formatStyleValue(cssName, styleValue);\n\t\t\t\t\t\t\t\tif (style.getPropertyValue(cssName) !== formattedValue) {\n\t\t\t\t\t\t\t\t\t// TODO: hydration warnings for style props\n\t\t\t\t\t\t\t\t\t//if (isHydrating) {\n\t\t\t\t\t\t\t\t\t//\temitHydrationWarning(\n\t\t\t\t\t\t\t\t\t//\t\tname,\n\t\t\t\t\t\t\t\t\t//\t\tquietProps,\n\t\t\t\t\t\t\t\t\t//\t\tformattedValue,\n\t\t\t\t\t\t\t\t\t//\t\tstyle.getPropertyValue(cssName),\n\t\t\t\t\t\t\t\t\t//\t\telement,\n\t\t\t\t\t\t\t\t\t//\t\t`style.${styleName}`,\n\t\t\t\t\t\t\t\t\t//\t);\n\t\t\t\t\t\t\t\t\t//}\n\t\t\t\t\t\t\t\t\tstyle.setProperty(cssName, formattedValue);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\tcase \"class\":\n\t\t\t\tcase \"className\":\n\t\t\t\t\tif (value === true) {\n\t\t\t\t\t\tif (isHydrating && element.getAttribute(\"class\") !== \"\") {\n\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\t\"\",\n\t\t\t\t\t\t\t\telement.getAttribute(\"class\"),\n\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t\telement.setAttribute(\"class\", \"\");\n\t\t\t\t\t} else if (value == null) {\n\t\t\t\t\t\tif (isHydrating && element.hasAttribute(\"class\")) {\n\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\telement.getAttribute(\"class\"),\n\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\telement.removeAttribute(\"class\");\n\t\t\t\t\t} else if (typeof value === \"object\") {\n\t\t\t\t\t\t// class={{\"included-class\": true, \"excluded-class\": false}} syntax\n\t\t\t\t\t\tif (typeof oldValue === \"string\") {\n\t\t\t\t\t\t\t// if the old value was a string, we need to clear all classes\n\t\t\t\t\t\t\telement.setAttribute(\"class\", \"\");\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tlet shouldIssueWarning = false;\n\t\t\t\t\t\tconst hydratingClasses = isHydrating\n\t\t\t\t\t\t\t? new Set(Array.from(element.classList))\n\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\tconst hydratingClassName = isHydrating\n\t\t\t\t\t\t\t? element.getAttribute(\"class\")\n\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\tfor (const className in {...oldValue, ...value}) {\n\t\t\t\t\t\t\tconst classValue = value && value[className];\n\t\t\t\t\t\t\tif (classValue) {\n\t\t\t\t\t\t\t\telement.classList.add(className);\n\t\t\t\t\t\t\t\tif (hydratingClasses && hydratingClasses.has(className)) {\n\t\t\t\t\t\t\t\t\thydratingClasses.delete(className);\n\t\t\t\t\t\t\t\t} else if (isHydrating) {\n\t\t\t\t\t\t\t\t\tshouldIssueWarning = true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\telement.classList.remove(className);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tshouldIssueWarning \|\|\n\t\t\t\t\t\t\t(hydratingClasses && hydratingClasses.size > 0)\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\tObject.keys(value)\n\t\t\t\t\t\t\t\t\t.filter((k) => value[k])\n\t\t\t\t\t\t\t\t\t.join(\" \"),\n\t\t\t\t\t\t\t\thydratingClassName \|\| \"\",\n\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} else if (!isSVG && !isMathML) {\n\t\t\t\t\t\tif (element.className !== value) {\n\t\t\t\t\t\t\tif (isHydrating) {\n\t\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\t\telement.className,\n\t\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\telement.className = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t} else if (element.getAttribute(\"class\") !== value) {\n\t\t\t\t\t\tif (isHydrating) {\n\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\telement.getAttribute(\"class\"),\n\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t\telement.setAttribute(\"class\", value as string);\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"innerHTML\":\n\t\t\t\t\tif (value !== oldValue) {\n\t\t\t\t\t\tif (isHydrating) {\n\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\telement.innerHTML,\n\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t\telement.innerHTML = value as any;\n\t\t\t\t\t}\n\n\t\t\t\t\tbreak;\n\t\t\t\tdefault: {\n\t\t\t\t\tif (\n\t\t\t\t\t\tname[0] === \"o\" &&\n\t\t\t\t\t\tname[1] === \"n\" &&\n\t\t\t\t\t\tname[2] === name[2].toUpperCase() &&\n\t\t\t\t\t\ttypeof value === \"function\"\n\t\t\t\t\t) {\n\t\t\t\t\t\t// Support React-style event names (onClick, onChange, etc.)\n\t\t\t\t\t\tname = name.toLowerCase();\n\t\t\t\t\t}\n\n\t\t\t\t\t// try to set the property directly\n\t\t\t\t\tif (\n\t\t\t\t\t\tname in element &&\n\t\t\t\t\t\t// boolean properties will coerce strings, but sometimes they map to\n\t\t\t\t\t\t// enumerated attributes, where truthy strings (\"false\", \"no\") map to\n\t\t\t\t\t\t// falsy properties, so we force using setAttribute.\n\t\t\t\t\t\t!(\n\t\t\t\t\t\t\ttypeof value === \"string\" &&\n\t\t\t\t\t\t\ttypeof (element as any)[name] === \"boolean\"\n\t\t\t\t\t\t) &&\n\t\t\t\t\t\tisWritableProperty(element, name)\n\t\t\t\t\t) {\n\t\t\t\t\t\tif ((element as any)[name] !== value \|\| oldValue === undefined) {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tisHydrating &&\n\t\t\t\t\t\t\t\ttypeof (element as any)[name] === \"string\" &&\n\t\t\t\t\t\t\t\t(element as any)[name] !== value\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\t\t(element as any)[name],\n\t\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// if the property is writable, assign it directly\n\t\t\t\t\t\t\t(element as any)[name] = value;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (value === true) {\n\t\t\t\t\t\tvalue = \"\";\n\t\t\t\t\t} else if (value == null \|\| value === false) {\n\t\t\t\t\t\tif (isHydrating && element.hasAttribute(name)) {\n\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\telement.getAttribute(name),\n\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\telement.removeAttribute(name);\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t} else if (typeof value !== \"string\") {\n\t\t\t\t\t\tvalue = String(value);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (element.getAttribute(name) !== value) {\n\t\t\t\t\t\tif (isHydrating) {\n\t\t\t\t\t\t\temitHydrationWarning(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tquietProps,\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\telement.getAttribute(name),\n\t\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\telement.setAttribute(name, value as any);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t},\n\n\tarrange({\n\t\ttag,\n\t\tnode,\n\t\tprops,\n\t\tchildren,\n\t}: {\n\t\ttag: string \| symbol;\n\t\tnode: Node;\n\t\tprops: Record<string, any>;\n\t\tchildren: Array<Node>;\n\t}): void {\n\t\tif (tag === Portal && (node == null \|\| typeof node.nodeType !== \"number\")) {\n\t\t\tthrow new TypeError(\n\t\t\t\t`<Portal> root is not a node. nodes: Array<Node>;\n\t\tif (typeof value === \"string\") {\n\t\t\tconst el =\n\t\t\t\txmlns == null\n\t\t\t\t\t? document.createElement(\"div\")\n\t\t\t\t\t: xmlns === SVG_NAMESPACE\n\t\t\t\t\t\t? document.createElementNS(xmlns, \"svg\")\n\t\t\t\t\t\t: document.createElementNS(xmlns, \"math\");\n\t\t\tel.innerHTML = value;\n\t\t\tnodes = Array.from(el.childNodes);\n\t\t} else {\n\t\t\tnodes = value == null ? [] : Array.isArray(value) ? [...value] : [value];\n\t\t}\n\n\t\tif (hydrationNodes != null) {\n\t\t\tfor (let i = 0; i < nodes.length; i++) {\n\t\t\t\tconst node = nodes[i];\n\t\t\t\t// check if node is equal to the next node in the hydration array\n\t\t\t\tconst hydrationNode = hydrationNodes.shift();\n\t\t\t\tif (\n\t\t\t\t\thydrationNode &&\n\t\t\t\t\ttypeof hydrationNode === \"object\" &&\n\t\t\t\t\ttypeof hydrationNode.nodeType === \"number\" &&\n\t\t\t\t\tnode.isEqualNode(hydrationNode as Node)\n\t\t\t\t) {\n\t\t\t\t\tnodes[i] = hydrationNode as Node;\n\t\t\t\t} else {\n\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t`Expected <Raw value=\"${String(value)}\"> while hydrating but found:`,\n\t\t\t\t\t\thydrationNode,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn nodes.length === 0\n\t\t\t? undefined\n\t\t\t: nodes.length === 1\n\t\t\t\t? nodes[0]\n\t\t\t\t: nodes;\n\t},\n};\n\nexport class DOMRenderer extends Renderer<Node, string, Element> {\n\tconstructor() {\n\t\tsuper(adapter);\n\t}\n\n\trender(\n\t\tchildren: Children,\n\t\troot: Element,\n\t\tctx?: Context,\n\t): Promise<ElementValue<Node>> \| ElementValue<Node> {\n\t\tvalidateRoot(root);\n\t\treturn super.render(children, root, ctx);\n\t}\n\n\thydrate(\n\t\tchildren: Children,\n\t\troot: Element,\n\t\tctx?: Context,\n\t): Promise<ElementValue<Node>> \| ElementValue<Node> {\n\t\tvalidateRoot(root);\n\t\treturn super.hydrate(children, root, ctx);\n\t}\n}\n\nfunction validateRoot(root: unknown): asserts root is Element {\n\tif (\n\t\troot == null \|\|\n\t\t(typeof root === \"object\" && typeof (root as any).nodeType !== \"number\")\n\t) {\n\t\tthrow new TypeError(`Render root is not a node.

package/html.cjs CHANGED Viewed

@@ -1,7 +1,7 @@
 'use strict';
 var crank = require('./crank.cjs');
-require('./event-target.cjs');
+var _css = require('./_css.cjs');
 const voidTags = new Set([
     "area",
@@ -43,7 +43,9 @@ function printStyleObject(style) {
     const cssStrings = [];
     for (const [name, value] of Object.entries(style)) {
         if (value != null) {
-            cssStrings.push(`${name}:${value};`);
+            const cssName = _css.camelToKebabCase(name);
+            const cssValue = _css.formatStyleValue(cssName, value);
+            cssStrings.push(`${cssName}:${cssValue};`);
         }
     }
     return cssStrings.join("");
@@ -58,7 +60,7 @@ function printAttrs(props) {
             if (typeof value === "string") {
                 attrs.push(`style="${escape(value)}"`);
             }
-            else if (typeof value === "object") {
+            else if (typeof value === "object" && value !== null) {
                 attrs.push(`style="${escape(printStyleObject(value))}"`);
             }
         }

package/html.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"html.cjs","sources":["../src/html.ts"],"sourcesContent":["import {Portal, Renderer} from \"./crank.js\";\nimport type {ElementValue, RenderAdapter} from \"./crank.js\";\n\nconst voidTags = new Set([\n\t\"area\",\n\t\"base\",\n\t\"br\",\n\t\"col\",\n\t\"command\",\n\t\"embed\",\n\t\"hr\",\n\t\"img\",\n\t\"input\",\n\t\"keygen\",\n\t\"link\",\n\t\"meta\",\n\t\"param\",\n\t\"source\",\n\t\"track\",\n\t\"wbr\",\n]);\n\nfunction escape(text: string): string {\n\treturn text.replace(/[&<>\"']/g, (match) => {\n\t\tswitch (match) {\n\t\t\tcase \"&\":\n\t\t\t\treturn \"&\";\n\t\t\tcase \"<\":\n\t\t\t\treturn \"<\";\n\t\t\tcase \">\":\n\t\t\t\treturn \">\";\n\t\t\tcase '\"':\n\t\t\t\treturn \""\";\n\t\t\tcase \"'\":\n\t\t\t\treturn \"'\";\n\t\t\tdefault:\n\t\t\t\treturn \"\";\n\t\t}\n\t});\n}\n\nfunction printStyleObject(style: Record<string, any>): string {\n\tconst cssStrings = [];\n\tfor (const [name, value] of Object.entries(style)) {\n\t\tif (value != null) {\n\t\t\tcssStrings.push(`${~~name~~}:${~~value~~};`);\n\t\t}\n\t}\n\n\treturn cssStrings.join(\"\");\n}\n\nfunction printAttrs(props: Record<string, any>): string {\n\tconst attrs: string[] = [];\n\tfor (let [name, value] of Object.entries(props)) {\n\t\tif (name === \"innerHTML\" \|\| name.startsWith(\"prop:\")) {\n\t\t\tcontinue;\n\t\t} else if (name === \"style\") {\n\t\t\tif (typeof value === \"string\") {\n\t\t\t\tattrs.push(`style=\"${escape(value)}\"`);\n\t\t\t} else if (typeof value === \"object\") {\n\t\t\t\tattrs.push(`style=\"${escape(printStyleObject(value))}\"`);\n\t\t\t}\n\t\t} else if (name === \"className\") {\n\t\t\tif (\"class\" in props \|\| typeof value !== \"string\") {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tattrs.push(`class=\"${escape(value)}\"`);\n\t\t} else {\n\t\t\tif (name.startsWith(\"attr:\")) {\n\t\t\t\tname = name.slice(\"attr:\".length);\n\t\t\t}\n\t\t\tif (typeof value === \"string\") {\n\t\t\t\tattrs.push(`${escape(name)}=\"${escape(value)}\"`);\n\t\t\t} else if (typeof value === \"number\") {\n\t\t\t\tattrs.push(`${escape(name)}=\"${value}\"`);\n\t\t\t} else if (value === true) {\n\t\t\t\tattrs.push(`${escape(name)}`);\n\t\t\t}\n\t\t}\n\t}\n\n\treturn attrs.join(\" \");\n}\n\ninterface Node {\n\tvalue?: string;\n}\n\nfunction join(children: Array<Node \| string>): string {\n\tlet result = \"\";\n\tfor (let i = 0; i < children.length; i++) {\n\t\tconst child = children[i];\n\t\tresult += typeof child === \"string\" ? child : child.value;\n\t}\n\n\treturn result;\n}\n\nexport const impl: Partial<RenderAdapter<Node, undefined, Node, string>> = {\n\tcreate(): Node {\n\t\treturn {value: \"\"};\n\t},\n\n\ttext({value}: {value: string}): Node {\n\t\treturn {value: escape(value)};\n\t},\n\n\tread(value: ElementValue<Node>): string {\n\t\tif (Array.isArray(value)) {\n\t\t\treturn join(value);\n\t\t} else if (typeof value === \"undefined\") {\n\t\t\treturn \"\";\n\t\t} else if (typeof value === \"string\") {\n\t\t\treturn value;\n\t\t} else {\n\t\t\treturn value.value \|\| \"\";\n\t\t}\n\t},\n\n\tarrange({\n\t\ttag,\n\t\ttagName,\n\t\tnode,\n\t\tprops,\n\t\tchildren,\n\t}: {\n\t\ttag: string \| symbol;\n\t\ttagName: string;\n\t\tnode: Node;\n\t\tprops: Record<string, any>;\n\t\tchildren: Array<Node \| string>;\n\t}): void {\n\t\tif (tag === Portal) {\n\t\t\treturn;\n\t\t} else if (typeof tag !== \"string\") {\n\t\t\tthrow new Error(`Unknown tag: ${tagName}`);\n\t\t}\n\n\t\tconst attrs = printAttrs(props);\n\t\tconst open = `<${tag}${attrs.length ? \" \" : \"\"}${attrs}>`;\n\t\tlet result: string;\n\t\tif (voidTags.has(tag)) {\n\t\t\tresult = open;\n\t\t} else {\n\t\t\tconst close = `</${tag}>`;\n\t\t\tconst contents =\n\t\t\t\t\"innerHTML\" in props ? props[\"innerHTML\"] : join(children);\n\t\t\tresult = `${open}${contents}${close}`;\n\t\t}\n\n\t\tnode.value = result;\n\t},\n};\n\nexport class HTMLRenderer extends Renderer<Node, undefined, any, string> {\n\tconstructor() {\n\t\tsuper(impl);\n\t}\n}\n\nexport const renderer = new HTMLRenderer();\n\ndeclare global {\n\tmodule Crank {\n\t\tinterface EventMap extends GlobalEventHandlersEventMap {}\n\t}\n}\n"],"names":["Portal","Renderer"],"mappings":";;;;;~~AAGA~~,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC;IACxB,MAAM;IACN,MAAM;IACN,IAAI;IACJ,KAAK;IACL,SAAS;IACT,OAAO;IACP,IAAI;IACJ,KAAK;IACL,OAAO;IACP,QAAQ;IACR,MAAM;IACN,MAAM;IACN,OAAO;IACP,QAAQ;IACR,OAAO;IACP,KAAK;AACL,CAAA,CAAC;AAEF,SAAS,MAAM,CAAC,IAAY,EAAA;IAC3B,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,KAAK,KAAI;QACzC,QAAQ,KAAK;AACZ,YAAA,KAAK,GAAG;AACP,gBAAA,OAAO,OAAO;AACf,YAAA,KAAK,GAAG;AACP,gBAAA,OAAO,MAAM;AACd,YAAA,KAAK,GAAG;AACP,gBAAA,OAAO,MAAM;AACd,YAAA,KAAK,GAAG;AACP,gBAAA,OAAO,QAAQ;AAChB,YAAA,KAAK,GAAG;AACP,gBAAA,OAAO,QAAQ;AAChB,YAAA;AACC,gBAAA,OAAO,EAAE;;AAEZ,KAAC,CAAC;AACH;AAEA,SAAS,gBAAgB,CAAC,KAA0B,EAAA;IACnD,MAAM,UAAU,GAAG,EAAE;AACrB,IAAA,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AAClD,QAAA,IAAI,KAAK,IAAI,IAAI,EAAE;~~YAClB~~,UAAU,CAAC,IAAI,CAAC,CAAA,EAAG,~~IAAI~~,CAAI,CAAA,EAAA,~~KAAK~~,CAAG,CAAA,CAAA,CAAC;;;~~AAItC~~,IAAA,OAAO,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;AAC3B;AAEA,SAAS,UAAU,CAAC,KAA0B,EAAA;IAC7C,MAAM,KAAK,GAAa,EAAE;AAC1B,IAAA,KAAK,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QAChD,IAAI,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;YACrD;;AACM,aAAA,IAAI,IAAI,KAAK,OAAO,EAAE;AAC5B,YAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBAC9B,KAAK,CAAC,IAAI,CAAC,CAAU,OAAA,EAAA,MAAM,CAAC,KAAK,CAAC,CAAG,CAAA,CAAA,CAAC;;~~AAChC~~,~~iBAAA,~~IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;~~AACrC~~,gBAAA,KAAK,CAAC,IAAI,CAAC,CAAA,OAAA,EAAU,MAAM,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAA,CAAA,CAAG,CAAC;;;AAEnD,aAAA,IAAI,IAAI,KAAK,WAAW,EAAE;YAChC,IAAI,OAAO,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBAClD;;YAGD,KAAK,CAAC,IAAI,CAAC,CAAU,OAAA,EAAA,MAAM,CAAC,KAAK,CAAC,CAAG,CAAA,CAAA,CAAC;;aAChC;AACN,YAAA,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;gBAC7B,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;;AAElC,YAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC9B,gBAAA,KAAK,CAAC,IAAI,CAAC,CAAA,EAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAA,EAAK,MAAM,CAAC,KAAK,CAAC,CAAA,CAAA,CAAG,CAAC;;AAC1C,iBAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AACrC,gBAAA,KAAK,CAAC,IAAI,CAAC,CAAA,EAAG,MAAM,CAAC,IAAI,CAAC,CAAK,EAAA,EAAA,KAAK,CAAG,CAAA,CAAA,CAAC;;AAClC,iBAAA,IAAI,KAAK,KAAK,IAAI,EAAE;gBAC1B,KAAK,CAAC,IAAI,CAAC,CAAG,EAAA,MAAM,CAAC,IAAI,CAAC,CAAE,CAAA,CAAC;;;;AAKhC,IAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;AACvB;AAMA,SAAS,IAAI,CAAC,QAA8B,EAAA;IAC3C,IAAI,MAAM,GAAG,EAAE;AACf,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACzC,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC;AACzB,QAAA,MAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC,KAAK;;AAG1D,IAAA,OAAO,MAAM;AACd;AAEa,MAAA,IAAI,GAA0D;IAC1E,MAAM,GAAA;AACL,QAAA,OAAO,EAAC,KAAK,EAAE,EAAE,EAAC;KAClB;IAED,IAAI,CAAC,EAAC,KAAK,EAAkB,EAAA;QAC5B,OAAO,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EAAC;KAC7B;AAED,IAAA,IAAI,CAAC,KAAyB,EAAA;AAC7B,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AACzB,YAAA,OAAO,IAAI,CAAC,KAAK,CAAC;;AACZ,aAAA,IAAI,OAAO,KAAK,KAAK,WAAW,EAAE;AACxC,YAAA,OAAO,EAAE;;AACH,aAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AACrC,YAAA,OAAO,KAAK;;aACN;AACN,YAAA,OAAO,KAAK,CAAC,KAAK,IAAI,EAAE;;KAEzB;IAED,OAAO,CAAC,EACP,GAAG,EACH,OAAO,EACP,IAAI,EACJ,KAAK,EACL,QAAQ,GAOR,EAAA;AACA,QAAA,IAAI,GAAG,~~KAAKA~~,YAAM,EAAE;YACnB;;AACM,aAAA,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AACnC,YAAA,MAAM,IAAI,KAAK,CAAC,gBAAgB,OAAO,CAAA,CAAE,CAAC;;AAG3C,QAAA,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC;AAC/B,QAAA,MAAM,IAAI,GAAG,CAAA,CAAA,EAAI,GAAG,CAAG,EAAA,KAAK,CAAC,MAAM,GAAG,GAAG,GAAG,EAAE,CAAG,EAAA,KAAK,GAAG;AACzD,QAAA,IAAI,MAAc;AAClB,QAAA,IAAI,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;YACtB,MAAM,GAAG,IAAI;;aACP;AACN,YAAA,MAAM,KAAK,GAAG,CAAK,EAAA,EAAA,GAAG,GAAG;AACzB,YAAA,MAAM,QAAQ,GACb,WAAW,IAAI,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC3D,MAAM,GAAG,GAAG,IAAI,CAAA,EAAG,QAAQ,CAAG,EAAA,KAAK,EAAE;;AAGtC,QAAA,IAAI,CAAC,KAAK,GAAG,MAAM;KACnB;;AAGI,MAAO,YAAa,SAAQC,cAAsC,CAAA;AACvE,IAAA,WAAA,GAAA;QACC,KAAK,CAAC,IAAI,CAAC;;AAEZ;AAEY,MAAA,QAAQ,GAAG,IAAI,YAAY;;;;;;"}
1	+ {"version":3,"file":"html.cjs","sources":["../src/html.ts"],"sourcesContent":["import {Portal, Renderer} from \"./crank.js\";\nimport type {ElementValue, RenderAdapter} from \"./crank.js\";\nimport {camelToKebabCase, formatStyleValue} from \"./_css.js\";\n\nconst voidTags = new Set([\n\t\"area\",\n\t\"base\",\n\t\"br\",\n\t\"col\",\n\t\"command\",\n\t\"embed\",\n\t\"hr\",\n\t\"img\",\n\t\"input\",\n\t\"keygen\",\n\t\"link\",\n\t\"meta\",\n\t\"param\",\n\t\"source\",\n\t\"track\",\n\t\"wbr\",\n]);\n\nfunction escape(text: string): string {\n\treturn text.replace(/[&<>\"']/g, (match) => {\n\t\tswitch (match) {\n\t\t\tcase \"&\":\n\t\t\t\treturn \"&\";\n\t\t\tcase \"<\":\n\t\t\t\treturn \"<\";\n\t\t\tcase \">\":\n\t\t\t\treturn \">\";\n\t\t\tcase '\"':\n\t\t\t\treturn \""\";\n\t\t\tcase \"'\":\n\t\t\t\treturn \"'\";\n\t\t\tdefault:\n\t\t\t\treturn \"\";\n\t\t}\n\t});\n}\n\nfunction printStyleObject(style: Record<string, any>): string {\n\tconst cssStrings = [];\n\tfor (const [name, value] of Object.entries(style)) {\n\t\tif (value != null) {\n\t\t\tconst cssName = camelToKebabCase(name);\n\t\t\tconst cssValue = formatStyleValue(cssName, value);\n\t\t\tcssStrings.push(`${cssName}:${cssValue};`);\n\t\t}\n\t}\n\n\treturn cssStrings.join(\"\");\n}\n\nfunction printAttrs(props: Record<string, any>): string {\n\tconst attrs: string[] = [];\n\tfor (let [name, value] of Object.entries(props)) {\n\t\tif (name === \"innerHTML\" \|\| name.startsWith(\"prop:\")) {\n\t\t\tcontinue;\n\t\t} else if (name === \"style\") {\n\t\t\tif (typeof value === \"string\") {\n\t\t\t\tattrs.push(`style=\"${escape(value)}\"`);\n\t\t\t} else if (typeof value === \"object\" && value !== null) {\n\t\t\t\tattrs.push(`style=\"${escape(printStyleObject(value))}\"`);\n\t\t\t}\n\t\t} else if (name === \"className\") {\n\t\t\tif (\"class\" in props \|\| typeof value !== \"string\") {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tattrs.push(`class=\"${escape(value)}\"`);\n\t\t} else {\n\t\t\tif (name.startsWith(\"attr:\")) {\n\t\t\t\tname = name.slice(\"attr:\".length);\n\t\t\t}\n\t\t\tif (typeof value === \"string\") {\n\t\t\t\tattrs.push(`${escape(name)}=\"${escape(value)}\"`);\n\t\t\t} else if (typeof value === \"number\") {\n\t\t\t\tattrs.push(`${escape(name)}=\"${value}\"`);\n\t\t\t} else if (value === true) {\n\t\t\t\tattrs.push(`${escape(name)}`);\n\t\t\t}\n\t\t}\n\t}\n\n\treturn attrs.join(\" \");\n}\n\ninterface Node {\n\tvalue?: string;\n}\n\nfunction join(children: Array<Node \| string>): string {\n\tlet result = \"\";\n\tfor (let i = 0; i < children.length; i++) {\n\t\tconst child = children[i];\n\t\tresult += typeof child === \"string\" ? child : child.value;\n\t}\n\n\treturn result;\n}\n\nexport const impl: Partial<RenderAdapter<Node, undefined, Node, string>> = {\n\tcreate(): Node {\n\t\treturn {value: \"\"};\n\t},\n\n\ttext({value}: {value: string}): Node {\n\t\treturn {value: escape(value)};\n\t},\n\n\tread(value: ElementValue<Node>): string {\n\t\tif (Array.isArray(value)) {\n\t\t\treturn join(value);\n\t\t} else if (typeof value === \"undefined\") {\n\t\t\treturn \"\";\n\t\t} else if (typeof value === \"string\") {\n\t\t\treturn value;\n\t\t} else {\n\t\t\treturn value.value \|\| \"\";\n\t\t}\n\t},\n\n\tarrange({\n\t\ttag,\n\t\ttagName,\n\t\tnode,\n\t\tprops,\n\t\tchildren,\n\t}: {\n\t\ttag: string \| symbol;\n\t\ttagName: string;\n\t\tnode: Node;\n\t\tprops: Record<string, any>;\n\t\tchildren: Array<Node \| string>;\n\t}): void {\n\t\tif (tag === Portal) {\n\t\t\treturn;\n\t\t} else if (typeof tag !== \"string\") {\n\t\t\tthrow new Error(`Unknown tag: ${tagName}`);\n\t\t}\n\n\t\tconst attrs = printAttrs(props);\n\t\tconst open = `<${tag}${attrs.length ? \" \" : \"\"}${attrs}>`;\n\t\tlet result: string;\n\t\tif (voidTags.has(tag)) {\n\t\t\tresult = open;\n\t\t} else {\n\t\t\tconst close = `</${tag}>`;\n\t\t\tconst contents =\n\t\t\t\t\"innerHTML\" in props ? props[\"innerHTML\"] : join(children);\n\t\t\tresult = `${open}${contents}${close}`;\n\t\t}\n\n\t\tnode.value = result;\n\t},\n};\n\nexport class HTMLRenderer extends Renderer<Node, undefined, any, string> {\n\tconstructor() {\n\t\tsuper(impl);\n\t}\n}\n\nexport const renderer = new HTMLRenderer();\n\ndeclare global {\n\tmodule Crank {\n\t\tinterface EventMap extends GlobalEventHandlersEventMap {}\n\t}\n}\n"],"names":["camelToKebabCase","formatStyleValue","Portal","Renderer"],"mappings":"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"}

package/html.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /// <reference types="html.d.ts" />
 import { Renderer, Portal } from './crank.js';
-import './event-target.js';
+import { camelToKebabCase, formatStyleValue } from './_css.js';
 const voidTags = new Set([
     "area",
@@ -42,7 +42,9 @@ function printStyleObject(style) {
     const cssStrings = [];
     for (const [name, value] of Object.entries(style)) {
         if (value != null) {
-            cssStrings.push(`${name}:${value};`);
+            const cssName = camelToKebabCase(name);
+            const cssValue = formatStyleValue(cssName, value);
+            cssStrings.push(`${cssName}:${cssValue};`);
         }
     }
     return cssStrings.join("");
@@ -57,7 +59,7 @@ function printAttrs(props) {
             if (typeof value === "string") {
                 attrs.push(`style="${escape(value)}"`);
             }
-            else if (typeof value === "object") {
+            else if (typeof value === "object" && value !== null) {
                 attrs.push(`style="${escape(printStyleObject(value))}"`);
             }
         }