solarite 0.7.0 → 0.8.0

package/src/Solarite.d.ts

@@ -10,14 +10,17 @@ export interface RenderOptions {
     ids?: boolean;
     render?: boolean;
 
-    /** Defaults to true: bubbling events (click, input, etc.) dispatch from one document-level
-     * listener instead of addEventListener per element - much faster creation and teardown
-     * of large lists.  Pass false to bind every event directly, or an array to delegate only
-     * the listed event names.  Non-bubbling events always bind directly.  Note: delegated
-     * handlers run when the event reaches the document, so manual stopPropagation() on an
-     * ancestor suppresses them, and manually added ancestor listeners fire first.  A
-     * programmatically dispatched non-bubbling event won't reach delegated handlers. */
-    eventDelegation?: boolean | string[];
+    /** Defaults to true: bubbling events (click, input, etc.) dispatch from one listener on
+     * the component's root element instead of addEventListener per element - much faster
+     * creation and teardown of large lists.  Pass false to bind every event directly, or an
+     * array to delegate only the listed event names.  Pass 'document' to also register the
+     * dispatcher on the document, so handlers keep firing on nodes that get re-parented
+     * outside the component (e.g. a toolbar a dock parks in its own chrome).  Non-bubbling
+     * events always bind directly.  Note: delegated handlers run when the event bubbles to
+     * the root (or document), so stopPropagation() in a manually added listener on an element
+     * in between suppresses them, and such manual listeners fire first.  A programmatically
+     * dispatched non-bubbling event won't reach delegated handlers. */
+    eventDelegation?: boolean | string[] | 'document';
 }
 
 /**
@@ -37,11 +40,17 @@ declare function h(): (htmlStrings: TemplateStringsArray, ...exprs: any[]) => No
 
 declare namespace h {
 	/** Render a list, reusing each item's DOM while the item is the SAME object; replace an item
-	 *  (don't mutate it) to re-render it.  fn runs only for new items.  No deps: identity is the dep. */
-	function map<T>(items:T[], fn:(item:T) => Template): Template[];
+	 *  (don't mutate it) to re-render it.  fn runs only for rows the reconciler can't match.
+	 *  No deps: identity is the dep.  Returns a MappedList, not an array — put it straight into
+	 *  a template expression; it's iterable if you really need the templates. */
+	function map<T>(items:T[], fn:(item:T) => Template): MappedList<T>;
 
 	/** Alias of h.map with a name that flags the immutability contract at the call site. */
-	function immutableMap<T>(items:T[], fn:(item:T) => Template): Template[];
+	function immutableMap<T>(items:T[], fn:(item:T) => Template): MappedList<T>;
+
+	/** A selection that writes only the two rows it affects, with no render() call.  Bind with
+	 *  when() as a whole attribute value; move it with set(). */
+	function selector<K = any>(key?: K | null): Selector<K>;
 }
 
 /** Tagged template literal for SVG markup and SVG child fragments. */
@@ -54,7 +63,26 @@ export {h, svg};
 /**
  * Solarite provides more features if your web component extends Solarite instead of HTMLElement. */
 export class Solarite extends HTMLElement {
-    constructor(attribs?: Record<string, any> | null);
+	/**
+	 * Fill in and fix up the attribs object a component's constructor receives, so the component
+	 * can then copy those values onto its own fields, e.g. with ObjectUtil.assign(this, attribs).
+	 *
+	 * 1.  If attribs is an empty object, fill it with the attributes on the DOM element.
+	 *     This happens when the browser creates the element from plain html, because then nothing
+	 *     calls the constructor with arguments.  Attribute names convert from dash-case to
+	 *     camelCase, and `${...}` values are parsed from JSON.
+	 * 2.  If types is given, convert attribs values from strings to those types.  Attribute values
+	 *     written as literal text always arrive as strings, whether from plain html or from an h()
+	 *     template.  types maps a field name to Number, Boolean, String, Date, or any function
+	 *     taking the string and returning a value.  Boolean is true for every string except
+	 *     'false' and '0', so a bare attribute like `<select-box-3 editable>` becomes true.
+	 *     Values that are already not strings, like a `${true}` template expression, are left alone.
+	 *
+	 * This runs before the subclass initializes its fields and renders, so converted values are
+	 * right the first time, even for fields that change what render() builds.  This constructor
+	 * can't copy attribs onto fields itself, because subclass field initializers run after it
+	 * finishes and would overwrite them; that's why the subclass does the final assign. */
+    constructor(attribs?: Record<string, any> | null, types?: Record<string, Function> | null);
     render(attribs?: Record<string, any>, changed?:boolean): void;
     renderFirstTime(): void;
     connectedCallback(): void;
@@ -88,6 +116,54 @@ export function getEventBinding(node: Node, key: string): EventBinding | undefin
  * and '0', so a bare attribute reads as true.  Field names in `ignore` are skipped. */
 export function assignAttributes(dest: HTMLElement, types?: Record<string, Function>, ignore?: string[]): void;
 
+/**
+ * Convert an attribute string with the given converter: Number, Boolean, String, Date,
+ * or any function taking the string and returning a value.  Boolean is true for any string
+ * except 'false' and '0', so a bare attribute reads as true.  No converter returns the
+ * string unchanged. */
+export function convertType(value: string, type?: Function): any;
+
+/** What h.map() returns: the source items plus the callback that builds one item's Template,
+ * so the reconciler can recognize an unchanged row by the item it was built from.  Iterating it
+ * yields the Templates, building each one, for code that needs an array. */
+export class MappedList<T = any> {
+	items: T[];
+	fn: (item: T) => Template;
+	constructor(items: T[], fn: (item: T) => Template);
+	[Symbol.iterator](): IterableIterator<Template>;
+}
+
+/** What h.selector() returns.  Holds one selected key; when() binds an attribute to whether a
+ * row's key is that one, and set() moves the selection by writing only the rows that change. */
+export class Selector<K = any> {
+	constructor(key?: K | null);
+
+	/** The selected key, or null. */
+	readonly key: K | null;
+
+	/** Bind an attribute to whether key is the selected one.  Must supply the WHOLE attribute
+	 *  value, on the row's own root element, and the rows must be keyed — each of those throws
+	 *  otherwise.  An off value of '' (the default) leaves no attribute rather than an empty one. */
+	when(key: K, on: any, off?: any): SelectorRef<K>;
+
+	/** Move the selection, writing at most two attributes and calling no render().
+	 *  Pass null to deselect. */
+	set(key: K | null): void;
+}
+
+/** What when() returns.  A Selector owns exactly TWO of these — one meaning "this row is the
+ * selected one" and one meaning "it isn't" — rather than one per key, so drawing a row costs no
+ * allocation.  The stable identity is also what lets an unchanged row skip its write on a
+ * re-render: a row's expression changes identity exactly when its selectedness does. */
+export class SelectorRef<K = any> {
+	readonly selector: Selector<K>;
+
+	/** True for the selector's "selected" singleton, false for its "unselected" one. */
+	readonly selected: boolean;
+
+	value(): any;
+}
+
 export class Template {
     exprs: any[];
     html: string[];
@@ -126,7 +202,7 @@ export const SolariteUtil: {
     bindStyles(style: HTMLStyleElement, root: HTMLElement): void;
     camelToDashes(str: string): string;
     dashesToCamel(str: string): string;
-    defineClass(Class: typeof HTMLElement, tagName?: string | null): void;
+    defineClass(Class: typeof HTMLElement, tagName?: string | null): string;
     isIterable(obj: any): boolean;
     trimEmptyNodes(nodes: NodeList | Node[]): Node[];
     [key: string]: any;

package/src/Solarite.js

@@ -7,15 +7,24 @@ JavasCript UI library
 @copyright Vorticode LLC
 https://vorticode.github.io/solarite/ */
 import h from './h.js';
+import {convertType} from './assignAttributes.js';
 export default h;
 export {default as delve} from './delve.js';
 export {default as Template} from './Template.js';
+export {default as MappedList} from './MappedList.js';
+export {default as Selector, SelectorRef} from './Selector.js';
 export {default as toEl} from './toEl.js';
-export {assignAttributes} from './assignAttributes.js';
+export {assignAttributes, convertType} from './assignAttributes.js';
 export {svg} from './h.js';
 export {getEventBinding} from './PathToAttribValue.js';
 export {Fragment} from './jsx.js';
 
+// Internals the JSX runtime needs, exported so dist/jsx-runtime.js can be built as a SEPARATE
+// module that shares this bundle rather than bundling its own copy.  They must be shared, not
+// duplicated: PathToAttribs tests `instanceof JsxAttr`, which fails across two copies of the
+// class.  Not part of the documented API — jsx-runtime is the supported entry point.
+export {jsxToTemplate as internalJsxToTemplate, JsxAttr as InternalJsxAttr} from './jsx.js';
+
 // Experimental:
 //--------------
 export {default as Globals} from './Globals.js';
@@ -25,7 +34,7 @@ export {default as SolariteUtil} from './Util.js';
 //--------------
 export {default as h} from './h.js'; // Named exports for h() are deprecated.
 
-// HtmlParser, NodeGroup, and Shell are internal; tests import them directly from their modules.
+// NodeGroup and Shell are internal; tests import them directly from their modules.
 
 
 
@@ -65,42 +74,46 @@ let HTMLElementAutoDefine = new Proxy(HTMLElement, {
 export class Solarite extends HTMLElementAutoDefine {
 
 	/**
-	 * @param attribs {?Record<string, any>} */
-	constructor(attribs=null) {
+	 * Fill in and fix up the attribs object a component's constructor receives, so the component
+	 * can then copy those values onto its own fields, e.g. with ObjectUtil.assign(this, attribs).
+	 *
+	 * 1.  If attribs is an empty object, fill it with the attributes on the DOM element.
+	 *     This happens when the browser creates the element from plain html, because then nothing
+	 *     calls the constructor with arguments.  Attribute names convert from dash-case to
+	 *     camelCase, and `${...}` values are parsed from JSON.
+	 * 2.  If types is given, convert attribs values from strings to those types.  Attribute values
+	 *     written as literal text always arrive as strings, whether from plain html or from an h()
+	 *     template.  types maps a field name to Number, Boolean, String, Date, or any function
+	 *     taking the string and returning a value.  Boolean is true for every string except
+	 *     'false' and '0', so a bare attribute like `<select-box-3 editable>` becomes true.
+	 *     Values that are already not strings, like a `${true}` template expression, are left alone.
+	 *
+	 * This runs before the subclass initializes its fields and renders, so converted values are
+	 * right the first time, even for fields that change what render() builds.  This constructor
+	 * can't copy attribs onto fields itself, because subclass field initializers run after it
+	 * finishes and would overwrite them; that's why the subclass does the final assign.
+	 * @param attribs {?Record<string, any>}
+	 * @param types {?Record<string, Function>} */
+	constructor(attribs=null, types=null) {
 		super();
 
 		if (attribs) {
 			if (typeof attribs !== 'object')
-				throw new Error('First argument to custom element constructor must be an object.');
+				throw new Error('First argument must be an object.');
 
 			// 1. Populate attribs if it's an empty object.
-			if (attribs && !Object.keys(attribs).length) {
+			if (!Object.keys(attribs).length) {
 				let attribs2 =  Solarite.getAttribs(this);
 				for (let name in attribs2) {
 					attribs[name] = attribs2[name];
 				}
 			}
 
-			// 2. Populate fields from attribs.
-			// This does nothing because the fields are overwritten by the child class after this super() constructor executes.
-			//for (let name in attribs || {}) {
-			//	if (name in this) {
-			//		const descriptor = Object.getOwnPropertyDescriptor(this, name);
-			//		if (!descriptor || descriptor.writable || descriptor.set)
-			//			this[name] = attribs[name];
-			//	}
-			//}
+			// 2. Convert string values to the types the component declares.
+			for (let name in types || {})
+				if (typeof attribs[name] === 'string')
+					attribs[name] = convertType(attribs[name], types[name]);
 		}
-
-		// 3. Wrap render function so it always provides the attribs argument.
-		// Disabled because this gives us strings for attribute values when we call render manually.
-		// Instead of values given from ${...} expressions.
-		// let originalRender = this.render;
-		// this.render = (attribs, changed=true) => {
-		// 	if (!attribs) // If we have to look up the attribs, we don't know if they changed or not.
-		// 		attribs = Solarite.getAttribs(this);
-		// 	originalRender.call(this, attribs, changed);
-		// }
 	}
 
 	'render'() {

package/src/Template.js

@@ -53,7 +53,7 @@ export default class Template {
 
 		//this.trace = new Error().stack.split(/\n/g)
 
-		//#IFDEV
+		//#IFDEBUG
 		assert(Array.isArray(htmlStrings))
 		assert(Array.isArray(exprs))
 
@@ -78,8 +78,12 @@ export default class Template {
 		if (!ng) {
 			ng = new RootNodeGroup(this, null, el, options);
 			if (!el) // null if it's a standalone elment.
-				el = ng.getRootNode();
-			Globals.rootNodeGroups.set(el, ng); // All tests still pass if this is commented out!
+				el = ng.getRootEl();
+
+			// RootNodeGroup.instantiate() ends by registering itself under its own rootEl, which
+			// is the element we were given, or -- when we were given none -- the very element
+			// getRootEl() just handed back.  Registering it a second time here stored the same
+			// group under the same key.
 		}
 
 		// Make sure the expresion count matches match the Path "hole" count.
@@ -94,8 +98,13 @@ export default class Template {
 		// If we didn't just create it, we need to render it.
 		if (this.html?.length === 1 && !this.html[0]) // An empty string.
 			el.innerHTML = ''; // Fast path for empty component.
-		else
-			ng.applyExprs(this.exprs);
+		else {
+			// A component renders the same template every time, so hand over the expressions it
+			// applied last time; paths that can prove an unchanged expression is a no-op skip.
+			let last = ng.template;
+			ng.applyExprs(this.exprs, true, last !== this && last.html === this.html ? last.exprs : null);
+			ng.template = this;
+		}
 
 		return el;
 	}
@@ -125,9 +134,13 @@ export default class Template {
 export function templatesSame(a, b) {
 	if (a.html === b.html && a.svgMode === b.svgMode) {
 		let ae = a.exprs, be = b.exprs;
-		for (let i=0; i<ae.length; i++)
-			if (!exprSame(ae[i], be[i]))
+		// Most expressions are identical between renders, so test that here rather than paying
+		// a call into exprSame() to learn it.
+		for (let i=0; i<ae.length; i++) {
+			let x = ae[i], y = be[i];
+			if (x !== y && !exprSame(x, y))
 				return false;
+		}
 		return true;
 	}
 

package/src/Util.js

@@ -40,13 +40,15 @@ let Util = {
 			// Don't clobber a non-element value.  For a simple (non-nested) id this covers two cases:
 			// an inherited/built-in property like `title` or `style`, or an own property that already
 			// holds a non-Node value.  A previously-bound element (a Node) is fine to re-assign.
+			// This can only fail on a mistake in the component's own template, so a developer meets it
+			// the first time the component renders and never again at runtime.  It nonetheless SHIPS,
+			// and deliberately: debug-strip blocks are removed from dist/Solarite.js, which is what
+			// npm serves, so hiding it there would delete it for everyone, not only for production.
 			if (!id.includes('.')) {
 				let existing = root[id];
 				let isInherited = (id in root) && !Object.hasOwn(root, id);
 				if (!existing?.nodeType && (existing != null || isInherited))
-					throw new Error(`${root.constructor.name}.${id} can't be a reference to ` +
-						`<${el.tagName.toLowerCase()} id="${id}"> because it would clobber an existing ` +
-						`${isInherited ? 'built-in ' : ''}property.  Rename the id or the property.`);
+					throw new Error(`Solarite: id="${id}" would overwrite an existing ${root.constructor.name} property.`);
 			}
 
 			delve(root, id.split(/\./g), el);
@@ -65,29 +67,29 @@ let Util = {
 	bindStyles(style, root) {
 
 		let tagName = root.tagName.toLowerCase();
-		let styleId, attribSelector;
+
+		// A global style is scoped by tag name alone, so it needs no attribute in the selector.
+		let attribSelector = '';
 
 		if (style.hasAttribute('global') || style.hasAttribute('data-global')) {
-			styleId = tagName;
-			attribSelector = '';
-			let doc = Globals.doc || root.ownerDocument || document;
-			if (!doc.head.querySelector(`style[data-style="${styleId}"]`)) {
-				doc.head.append(style)
-				style.setAttribute('data-style', styleId);
-			}
-			else // TODO: Make sure the style has no expressions.
+			let head = Globals.doc.head;
+			if (head.querySelector(`style[data-style="${tagName}"]`))
+				// TODO: Make sure the style has no expressions.
 				style.remove(); // already in the head.
+			else {
+				head.append(style)
+				style.setAttribute('data-style', tagName);
+			}
 		}
 		else {
 			let styleId = root.getAttribute('data-style');
 			if (!styleId) {
-				// Keep track of one style id for each class.
+				// Keep track of one style id for each class.  Reading the static walks up to a parent
+				// class's counter if this class has never been styled, but the assignment always lands
+				// on this class, so each class then counts on from where its parent left off.
 				// TODO: Put this outside the class in a map, so it doesn't conflict with static properties.
-				if (!root.constructor.styleId)
-					root.constructor.styleId = 1;
-				styleId = root.constructor.styleId++;
-
-				root.setAttribute('data-style', styleId);
+				let Class = root.constructor;
+				root.setAttribute('data-style', styleId = Class.styleId = (Class.styleId || 0) + 1);
 			}
 
 			attribSelector = `[data-style="${styleId}"]`;
@@ -97,7 +99,19 @@ let Util = {
 		for (let child of style.childNodes) {
 			if (child.nodeType === 3) {
 				let oldText = child.textContent;
-				let newText = oldText.replace(/:host(?=[^a-z0-9_])/gi, `${tagName}${attribSelector}`)
+
+				// One pass rewrites both forms of the selector:
+				// 1.  The functional form ':host(X)' — the host element when it also matches X — unwraps
+				//     so X sits right after the scoped name:  tag[data-style="1"]X.  X may hold one
+				//     nested group like ':not(.open)'; deeper parentheses can't be paired by a regex,
+				//     so such an X is left as written rather than half-rewritten into a selector the
+				//     browser would discard silently.
+				// 2.  Plain ':host'.  The lookahead turns down longer names (':host-context') and '(',
+				//     which only follows ':host' when alternative 1 already gave up on it, and accepts
+				//     the end of the text node, where an expression may have split a dynamic style.
+				let newText = oldText.replace(
+					/:host(?:\(((?:[^()]|\([^()]*\))*)\)|(?![-a-z0-9_(]))/gi,
+					`${tagName}${attribSelector}$1`);
 				if (oldText !== newText)
 					child.textContent = newText;
 			}
@@ -118,17 +132,15 @@ let Util = {
 	 * 'UIForm' => 'ui-form'
 	 * 'A100' => 'a-100' */
 	camelToDashes(str) {
-		// Convert any capital letter that is preceded by a lowercase letter or number to lowercase and precede with a dash.
-		str = str.replace(/([a-z0-9])([A-Z])/g, '$1-$2');
-
-		// Convert any capital letter that is followed by a lowercase letter or number to lowercase and precede with a dash.
-		str = str.replace(/([A-Z])([A-Z][a-z])/g, '$1-$2');
-
-		// Convert any number that is preceded by a lowercase or uppercase letter to be preceded by a dash.
-		str = str.replace(/([a-zA-Z])([0-9])/g, '$1-$2');
-
-		// Convert all the remaining capital letters to lowercase.
-		return str.toLowerCase();
+		// One pass finds all three dash positions.  Each alternative matches only the character
+		// *before* the boundary and uses a lookahead for what follows, so the following character
+		// is never consumed and can still start the next boundary.  That's what lets the three
+		// rules interleave in a single scan the way three sequential replaces used to:
+		// 1.  a lowercase letter or digit before a capital ('ProperName').
+		// 2.  a capital before a capital+lowercase pair, i.e. the last capital of a run ('HTMLElement').
+		// 3.  a letter before a digit ('A100').
+		// '$&-' appends the dash after the matched character, then everything folds to lowercase.
+		return str.replace(/[a-z0-9](?=[A-Z])|[A-Z](?=[A-Z][a-z])|[a-zA-Z](?=\d)/g, '$&-').toLowerCase();
 	},
 
 	/**
@@ -144,13 +156,24 @@ let Util = {
 		return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
 	},
 
+	/**
+	 * Register Class as a custom element, unless it's registered already.
+	 * @param Class {typeof HTMLElement}
+	 * @param tagName {?string} Name to register under.  Defaults to the dashed form of the class name.
+	 * @return {string} The tag name Class is registered under, whether we just registered it or it
+	 *     was already in the registry under some other name.  Callers that emit markup for the class
+	 *     use this instead of re-deriving the name, which guesses wrong for any class registered
+	 *     under a name that isn't camelToDashes(Class.name). */
 	defineClass(Class, tagName) {
-		if (!customElements[getName](Class)) { // If not previously defined.
-			tagName = tagName || Util.camelToDashes(Class.name)
-			if (!tagName.includes('-')) // Browsers require that web components always have a dash in the name.
-				tagName += '-element';
-			customElements[define](tagName, Class)
-		}
+		let defined = customElements[getName](Class);
+		if (defined) // Previously defined.
+			return defined;
+
+		tagName = tagName || Util.camelToDashes(Class.name)
+		if (!tagName.includes('-')) // Browsers require that web components always have a dash in the name.
+			tagName += '-element';
+		customElements[define](tagName, Class)
+		return tagName;
 	},
 
 	/**
@@ -177,8 +200,8 @@ let Util = {
 		return node.value; // String
 	},
 
-	isEvent(attrName) {
-		return attrName.startsWith('on') && attrName in Globals.div;
+	isEvent(attribName) {
+		return attribName.startsWith('on') && attribName in Globals.div;
 	},
 
 	/**
@@ -215,16 +238,13 @@ let Util = {
 	 * @returns {Object} */
 	splitAttribs(str) {
 		let result = {};
-		let attrs = (str + '') // Split string into multiple attributes.
-			.split(/([\w-]+\s*=\s*(?:"[^"]*"|'[^']*'|\S+))/g)
-			.map(text => text.trim())
-			.filter(text => text.length);
-
-		for (let attr of attrs) {
-			let [name, value] = attr.split(/\s*=\s*/); // split on first equals.
-			value = (value || '').replace(/^(['"])(.*)\1$/, '$2'); // trim value quotes if they match.
-			result[name] = value;
-		}
+
+		// One scan collects every name and its value.  The value is optional so a boolean attribute
+		// written on its own ('disabled') still lands in the result with an empty value, and the three
+		// value alternatives capture *inside* the quotes so no separate quote-trimming pass is needed.
+		// Whatever doesn't look like an attribute name is skipped rather than becoming a bogus key.
+		(str + '').replace(/([\w-]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|(\S+)))?/g,
+			(_, name, dq, sq, bare) => result[name] = dq ?? sq ?? bare ?? '');
 
 		return result;
 	},
@@ -262,19 +282,14 @@ let Util = {
 	 * @param nodes {Node[]|NodeList}
 	 * @returns {Node[]} */
 	trimEmptyNodes(nodes) {
-		const shouldTrimNode = node =>
-			node.nodeType !== Node.ELEMENT_NODE &&
-			(node.nodeType !== Node.TEXT_NODE || node.textContent.trim() === '');
-
-		// Convert nodeList to an array for easier manipulation
-		const result = [...nodes]
+		// nodeType 1 is an element and 3 is a text node; the literals are what Node.ELEMENT_NODE
+		// and Node.TEXT_NODE are defined as, and they cost a fraction of the bytes.
+		let isEmpty = node => node.nodeType !== 1 && (node.nodeType !== 3 || !node.textContent.trim());
 
-		// Trim from the start
-		while (result.length > 0 && shouldTrimNode(result[0]))
+		let result = [...nodes]; // A NodeList can't shift() or pop().
+		while (result.length && isEmpty(result[0]))
 			result.shift();
-
-		// Trim from the end
-		while (result.length > 0 && shouldTrimNode(result[result.length - 1]))
+		while (result.length && isEmpty(result[result.length - 1]))
 			result.pop();
 
 		return result;
@@ -292,7 +307,7 @@ export default Util;
 
 
 // For debugging only
-//#IFDEV
+//#IFDEBUG
 export function setIndent(items, level=1) {
 	if (typeof items === 'string')
 		items = items.split(/\r?\n/g)

package/src/assert.js

@@ -1,7 +1,7 @@
 
 /*@__NO_SIDE_EFFECTS__*/
 export default function assert(val) {
-	//#IFDEV
+	//#IFDEBUG
 	if (!val) {
 		//debugger;
 		throw new Error('Assertion failed: ' + val);

package/src/assignAttributes.js

@@ -1,14 +1,23 @@
-/*
-┏┓  ┓    •
-┗┓┏┓┃┏┓┏┓┓╋▗▖
-┗┛┗┛┗┗┻╹ ╹╹┗
-JavaScript UI library
-@license MIT
-@copyright Vorticode LLC
-https://vorticode.github.io/solarite/ */
-
 import Util from "./Util.js";
 
+/**
+ * Convert an attribute string with the given converter: Number, Boolean, String, Date,
+ * or any function taking the string and returning a value.  Boolean is true for any string
+ * except 'false' and '0', so a bare attribute like `<my-timer auto-start>` reads as true.
+ * Date uses new Date(value).  No converter returns the string unchanged. */
+export function convertType(value, type) {
+	if (type === Date)
+		return new Date(value);
+	if (type === Boolean)
+		return !['false', '0'].includes(value);
+	// Number and String need no cases of their own: they're plain functions, so the custom
+	// branch below calls them correctly.  Date and Boolean are the ones that can't fall through
+	// (Date without `new` returns a string; Boolean('false') is true).
+	if (type) // Number, String, or a custom string=>value function
+		return type(value);
+	return value;
+}
+
 /**
  * Read an element's html attributes onto fields that already exist on the element.
  * Typically called from a web component constructor to support plain-html instantiation
@@ -43,16 +52,8 @@ export function assignAttributes(dest, types={}, ignore=[]) {
 			dest[name] = JSON.parse(value.slice(2, -1));
 
 		// 2. Cast the string with the converter named in `types`, if any.
-		else if (type === Date)
-			dest[name] = new Date(value);
-		else if (type === Boolean)
-			dest[name] = !['false', '0'].includes(value);
-		else if (type === Number)
-			dest[name] = Number(value);
-		else if (type === String)
-			dest[name] = String(value);
-		else if (type) // custom string=>value function
-			dest[name] = type(value);
+		else if (type)
+			dest[name] = convertType(value, type);
 
 		// 3. No converter named: assign the raw string.  But an empty value over a function/object
 		// field is just the serialization residue of a template expression (functions render as