solarite 0.5.2 → 0.7.0

package/src/jsx.js

@@ -0,0 +1,194 @@
+import Template from "./Template.js";
+import Util from "./Util.js";
+
+/**
+ * JSX support for Solarite.  Two tiers share this one module:
+ *
+ * Tier 1 (precompile): a build step (Deno's `jsx:"precompile"` or a Solarite build plugin) hoists
+ *   each element's static HTML into a module-level array and emits
+ *   `jsxTemplate(statics, jsxAttr(name, value), jsxEscape(child), ...)`.  Stable array identity maps
+ *   straight onto Template => Shell cache, closeKey, and NodeGroup reuse all work; perf equals tagged
+ *   templates.  jsxTemplate/jsxAttr/jsxEscape live in jsx-runtime.js; the JsxAttr class below is the
+ *   whole-attribute hole they produce.
+ *
+ * Tier 2 (classic/automatic factory): tsc/esbuild/Vite emit `h(tag, props, ...children)` or
+ *   `jsx(tag, props, key)` with no hoisting.  jsxToTemplate() interns the static HTML per
+ *   (tag, prop-names, child-count) shape so identity is stable per call site even though a new
+ *   Template is built each render.  Every prop value and child is an expression hole, never diffed
+ *   as static. */
+
+// Fragment for <>...</> in the classic/automatic factories.  Tier 1 fragments need no import.
+export const Fragment = Symbol('Fragment');
+
+/**
+ * A whole-attribute hole from Tier 1, e.g. `<a ` + jsxAttr("href", v) + `>`.  It lands at a
+ * PathToAttribs hole (a bare ${} between attributes); PathToAttribs detects this class and routes
+ * the value through the normal attribute/event/property application. */
+export class JsxAttr {
+	constructor(name, value) {
+		this.name = name;
+		this.value = value;
+	}
+}
+
+const selfClosingTags = new Set(['area','base','br','col','embed','hr','img','input','link','meta','param','source','track','wbr']);
+
+// Tier 2 shape cache: `tag\0name1\0name2\0#childCount` => htmlStrings array (stable identity).
+const shapeCache = new Map();
+
+/**
+ * Serialize a style object to css text.  {color:'red', fontSize:'1px'} => 'color:red;font-size:1px'.
+ * A string passes through unchanged.
+ * @param value {Object|string}
+ * @return {string} */
+export function styleToCss(value) {
+	if (value === null || typeof value !== 'object')
+		return value;
+	let css = '';
+	for (let k in value) {
+		let v = value[k];
+		if (v === null || v === undefined || v === false)
+			continue;
+		css += (css ? ';' : '') + Util.camelToDashes(k) + ':' + v;
+	}
+	return css;
+}
+
+/** Escape a static attribute value for inlining into the html string. */
+function escapeAttr(value) {
+	return ('' + value).replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+}
+
+/**
+ * Build the interned htmlStrings for a Tier 2 element shape, matching how a tagged template would
+ * split `<tag openStatic name1=${} name2=${}>${child0}${child1}</tag>`.
+ * @param tag {string}
+ * @param openStatic {string} Static attributes inlined into the opening tag (e.g. ` id="x"`).
+ * @param names {string[]} Dynamic attribute names in order.
+ * @param childCount {int}
+ * @param isVoid {boolean}
+ * @return {string[]} */
+function buildShapeHtml(tag, openStatic, names, childCount, isVoid) {
+	let strings = [];
+	let cur = '<' + tag + openStatic;
+	for (let name of names) {
+		strings.push(cur + ' ' + name + '=');
+		cur = '';
+	}
+	cur += '>';
+	if (isVoid) {
+		strings.push(cur);
+		return strings;
+	}
+	if (childCount === 0)
+		strings.push(cur + '</' + tag + '>');
+	else {
+		strings.push(cur);
+		for (let i = 1; i < childCount; i++)
+			strings.push('');
+		strings.push('</' + tag + '>');
+	}
+	return strings;
+}
+
+/**
+ * Build a Template for a Tier 2 (classic/automatic) JSX element.
+ * @param tag {string|Function|symbol} Intrinsic tag name, component class/function, or Fragment.
+ * @param props {?Object} Attributes/props (children and key are pulled out by the caller for the
+ *     automatic runtime; for the classic factory they may still be present and are stripped here).
+ * @param children {any[]} One hole per child.
+ * @param key {*} Optional list key (automatic runtime passes it separately).
+ * @return {Template} */
+export function jsxToTemplate(tag, props, children=[], key=undefined) {
+	props = props || {};
+
+	// 1. Fragment: only child holes, no element wrapper.
+	if (tag === Fragment) {
+		let html = [''];
+		for (let i = 0; i < children.length; i++)
+			html.push('');
+		return new Template(html, children);
+	}
+
+	// 2. Component (class or function).
+	if (typeof tag === 'function') {
+
+		// 2a. Custom element class => emit <tag-name ...props>children</tag-name>; PathToComponent
+		// instantiates it exactly like a tagged-template component.
+		if (tag.prototype instanceof HTMLElement) {
+			Util.defineClass(tag);
+			let tagName = customElements.getName ? customElements.getName(tag) : Util.camelToDashes(tag.name);
+			if (tagName && !tagName.includes('-'))
+				tagName += '-element';
+			return buildIntrinsic(tagName, props, children, key);
+		}
+
+		// 2b. Plain function component: call it with props (+ children) and expect a Template back.
+		let p = {};
+		for (let name in props)
+			if (name !== 'key')
+				p[name] = name === 'style' ? styleToCss(props[name]) : props[name];
+		if (!('children' in p) && children.length)
+			p.children = children.length === 1 ? children[0] : children;
+		let t = tag(p);
+		if (key === undefined)
+			key = props.key;
+		if (key !== undefined && t instanceof Template)
+			t.key = key;
+		return t;
+	}
+
+	// 3. Intrinsic element.
+	return buildIntrinsic(tag, props, children, key);
+}
+
+/**
+ * @param tag {string}
+ * @param props {Object}
+ * @param children {any[]}
+ * @param key {*}
+ * @return {Template} */
+function buildIntrinsic(tag, props, children, key) {
+	let isVoid = selfClosingTags.has(tag.toLowerCase());
+	let names = [];
+	let values = [];
+	let openStatic = ''; // Static id/data-id inlined so their embeds (this.x references) resolve.
+
+	for (let name in props) {
+		if (name === 'children') // The automatic runtime stashes children here; they're passed separately.
+			continue;
+		if (name === 'key') {
+			if (key === undefined)
+				key = props[name];
+			continue;
+		}
+		let value = props[name];
+
+		// id/data-id reference embeds only work when the attribute is static in the html, so inline
+		// string-valued ones (the usual case) instead of making them holes.  Tier 1 transforms
+		// already inline static attributes; this keeps the Tier 2 classic factory on par.
+		if ((name === 'id' || name === 'data-id') && typeof value === 'string') {
+			openStatic += ` ${name}="${escapeAttr(value)}"`;
+			continue;
+		}
+
+		if (name === 'style')
+			value = styleToCss(value);
+		names.push(name);
+		values.push(value);
+	}
+
+	let childCount = isVoid ? 0 : children.length;
+	let shapeKey = tag + openStatic + '\0' + names.join('\0') + '\0#' + childCount;
+	let html = shapeCache.get(shapeKey);
+	if (!html) {
+		html = buildShapeHtml(tag, openStatic, names, childCount, isVoid);
+		shapeCache.set(shapeKey, html);
+	}
+
+	let exprs = isVoid ? values : values.concat(children);
+	let t = new Template(html, exprs);
+	if (key !== undefined)
+		t.key = key;
+	return t;
+}

package/src/toEl.js

@@ -1,83 +1,78 @@
-import Globals from "./Globals.js";
-import Template from "./Template.js";
-import Util from "./Util.js";
-
-/**
- * Convert a template, string, or object into a DOM Node or Element
- *
- * 1. toEl('Hello');                      // Create single text node.
- * 2. toEl('<b>Hello</b>');               // Create single HTMLElement
- * 3. toEl('<b>Hello</b><u>Goodbye</u>'); // Create document fragment because there's more than one node.
- * 4. toEl(template)                      // Render Template created by h`<html>` or h();
- * 5. toEl({render(){...}})               // Pass an object with a render method, and optionally other props/methods.
- * @param arg {string|Template|{render:()=>void}}
- * @returns {Node|DocumentFragment|HTMLElement} */
-export default function toEl(arg) {
-
-	if (typeof arg === 'string') {
-		let html = arg;
-
-		// If it's an element with whitespace before or after it, trim both ends.
-		if (html.match(/^\s^<\S+/) || html.match(/\S+>\s+$/))
-			html = html.trim();
-
-		// We create a new one each time because otherwise
-		// the returned fragment will have its content replaced by a subsequent call.
-		let templateEl = Globals.doc.createElement('template');
-		templateEl.innerHTML = html;
-
-		// 1+2. Return Node if there's one child.
-		let relevantNodes = Util.trimEmptyNodes(templateEl.content.childNodes);
-		if (relevantNodes.length === 1)
-			return relevantNodes[0];
-
-		// 3. Otherwise return DocumentFragment.
-		return templateEl.content;
-	}
-
-	// 4.
-	if (arg instanceof Template) {
-		return arg.render();
-	}
-
-	// 5. Create dynamic element from an object with a render() function.
-	// TODO: This path doesn't handle embeds like data-id="..."
-	else if (arg && typeof arg === 'object') {
-		let obj = arg;
-
-		if (obj.constructor.name !== 'Object')
-			throw new Error(`Solarate Web Component class ${obj.constructor?.name} must extend HTMLElement.`);
-
-		// Normal path
-		if (!Globals.objToEl.has(obj)) {
-			Globals.objToEl.set(obj, null);
-			obj[renderF](); // Calls the Special rebound render path above, when the render function calls h(this)
-			let el = Globals.objToEl.get(obj);
-			Globals.objToEl.delete(obj);
-
-			for (let name in obj)
-				if (typeof obj[name] === 'function')
-					el[name] = obj[name].bind(el);  // Make the "this" of functions be el.
-					// TODO: But this doesn't work for passing an object with functions as a constructor arg via an attribute:
-				// <my-element arg=${{myFunc() { return this }}}
-				else
-					el[name] = obj[name];
-
-			// Bind id's
-			// This doesn't work for id's referenced by attributes.
-			// for (let idEl of el.querySelectorAll('[id],[data-id]')) {
-			// 	Util.bindId(el, idEl);
-			// 	Util.bindId(obj, idEl);
-			// }
-			// TODO: Bind styles
-
-			return el;
-		}
-	}
-
-	throw new Error('toEl() does not support argument of type: ' + (arg ? typeof arg : arg));
-}
-
-
-// Trick to prevent minifier from renaming this function.
+import Globals from "./Globals.js";
+import Template from "./Template.js";
+import Util from "./Util.js";
+
+/**
+ * Convert a template, string, or object into a DOM Node or Element
+ *
+ * 1. toEl('Hello');                      // Create single text node.
+ * 2. toEl('<b>Hello</b>');               // Create single HTMLElement
+ * 3. toEl('<b>Hello</b><u>Goodbye</u>'); // Create document fragment because there's more than one node.
+ * 4. toEl(template)                      // Render Template created by h`<html>` or h();
+ * 5. toEl({render(){...}})               // Pass an object with a render method, and optionally other props/methods.
+ * @param arg {string|Template|{render:()=>void}}
+ * @returns {Node|DocumentFragment|HTMLElement} */
+export default function toEl(arg) {
+
+	if (typeof arg === 'string') {
+
+		// We create a new one each time because otherwise
+		// the returned fragment will have its content replaced by a subsequent call.
+		let templateEl = Globals.doc.createElement('template');
+		templateEl.innerHTML = arg;
+
+		// 1+2. Return Node if there's one child.
+		let relevantNodes = Util.trimEmptyNodes(templateEl.content.childNodes);
+		if (relevantNodes.length === 1)
+			return relevantNodes[0];
+
+		// 3. Otherwise return DocumentFragment.
+		return templateEl.content;
+	}
+
+	// 4.
+	if (arg instanceof Template) {
+		return arg.render();
+	}
+
+	// 5. Create dynamic element from an object with a render() function.
+	// TODO: This path doesn't handle embeds like data-id="..."
+	else if (arg && typeof arg === 'object') {
+		let obj = arg;
+
+		if (obj.constructor.name !== 'Object')
+			throw new Error(`Solarate Web Component class ${obj.constructor?.name} must extend HTMLElement.`);
+
+		// Normal path
+		if (!Globals.objToEl.has(obj)) {
+			Globals.objToEl.set(obj, null);
+			obj[renderF](); // Calls the Special rebound render path above, when the render function calls h(this)
+			let el = Globals.objToEl.get(obj);
+			Globals.objToEl.delete(obj);
+
+			for (let name in obj)
+				if (typeof obj[name] === 'function')
+					el[name] = obj[name].bind(el);  // Make the "this" of functions be el.
+					// TODO: But this doesn't work for passing an object with functions as a constructor arg via an attribute:
+				// <my-element arg=${{myFunc() { return this }}}
+				else
+					el[name] = obj[name];
+
+			// Bind id's
+			// This doesn't work for id's referenced by attributes.
+			// for (let idEl of el.querySelectorAll('[id],[data-id]')) {
+			// 	Util.bindId(el, idEl);
+			// 	Util.bindId(obj, idEl);
+			// }
+			// TODO: Bind styles
+
+			return el;
+		}
+	}
+
+	throw new Error('toEl() does not support argument of type: ' + (arg ? typeof arg : arg));
+}
+
+
+// Trick to prevent minifier from renaming this function.
 let renderF = 'render';

package/dist/udomdiff-license.txt

@@ -1,18 +0,0 @@
-The below license is for the udomdiff library, used by Solarite.js.
-https://github.com/WebReflection/udomdiff/tree/main
--------------
-ISC License
-
-Copyright (c) 2020, Andrea Giammarchi, @WebReflection
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted, provided that the above
-copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
-OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.

package/src/getArg.js

@@ -1,137 +0,0 @@
-import Util from "./Util.js";
-
-
-/**
- * @deprecated Inherit from Solarite and pass arribs to super() instead.
- * There are three ways to create an instance of a Solarite Component:
- * 1.  new ComponentName(3);                                               // direct class instantiation
- * 2.  h(this)`<div><component-name user-id=${3}></component-name></div>;  // as a child of another Component.
- * 3.  <body><component-name user-id="3"></component-name></body>          // in the Document html.
- *
- * When created via #3, Solarite has no way to pass attributes as arguments to the constructor.  So to make
- * sure we get the correct value via all three paths, we write our constructors according to the following
- * example.  Note that constructor args are embedded in an object, and must be all lower-case because
- * Browsers make all html attribute names lowercase.
- *
- * @example
- * constructor({name, userId=1}={}) {
- *     super();
- *
- *     // Get value from "name" attriute if persent, otherwise from name constructor arg.
- *     this.name = getArg(this, 'name', name);
- *
- *     // Optionally convert the value to an integer.
- *     this.userId = getArg(this, 'user-id', userId, ArgType.Int);
- * }
- *
- * @param el {HTMLElement}
- * @param attributeName {string} Attribute name.  Not case-sensitive.
- * @param defaultValue {*} Default value to use if attribute doesn't exist.  Typically the argument from the constructor.
- * @param type {ArgType|function|Class|*[]}
- *     If an array, use the value if it's in the array, otherwise return undefined.
- *     If it's a function, pass the value to the function and return the result.
- * @return {*} Undefined if attribute isn't set and there's no defaultValue, or if the value couldn't be parsed as the type.  */
-export function getArg(el, attributeName, defaultValue=undefined, type=ArgType.String) {
-	let val = defaultValue;
-	let attrVal = el.getAttribute(attributeName) || el.getAttribute(Util.camelToDashes(attributeName));
-	if (attrVal !== null) // If attribute doesn't exist.
-		val = attrVal;
-
-	if (Array.isArray(type))
-		return type.includes(val) ? val : undefined;
-
-	if (typeof type === 'function') {
-		return type.constructor
-			? new type(val) // arg type is custom Class
-			: type(val); // arg type is custom function
-	}
-
-	// If bool, it's true as long as it exists and its value isn't falsey.
-	if (type===ArgType.Bool) {
-		let lAttrVal = typeof val === 'string' ? val.toLowerCase() : val;
-		if (['false', '0', false, 0, null, undefined, NaN].includes(lAttrVal))
-			return false;
-		if (['true', true].includes(lAttrVal) || parseFloat(lAttrVal) !== 0)
-			return true;
-		return undefined;
-	}
-
-	// Attribute doesn't exist
-	switch (type) {
-		case ArgType.Int:
-			return parseInt(val);
-		case ArgType.Float:
-			return parseFloat(val);
-		case ArgType.String:
-			return [undefined, null, false].includes(val) ? '' : (val+'');
-		case ArgType.Json:
-		case ArgType.Eval:
-			if (typeof val === 'string' && val.length)
-				try {
-					if (type === ArgType.Json)
-						return JSON.parse(val);
-					else
-						return eval(`(${val})`);
-				} catch (e) {
-					return val;
-				}
-			else return val;
-
-		// type not provided
-		default:
-			return val;
-	}
-}
-
-
-/**
- * @deprecated for Solarite.getAttribs()
- * Experimental.  Set multiple arguments/attributes all at once.
- * @param el {HTMLElement}
- * @param args {Record<string, any>}
- * @param types {Record<string, ArgType|function|Class>}
- *
- * @example
- * constructor({user, path}={}) {
- *     setArgs(this, arguments[0], {user: User, path: ArgType.String});
- *
- *     // Equivalent to:
- *     this.user = getArg(this, user, 'user', User); // or new User(user);
- *     this.path = getArg(this, path, 'path', ArgType.String);
- * }
- */
-export function setArgs(el, args, types) {
-	for (let name in args)
-		this[name] = getArg(el, name, args[name], types[name] || ArgType.String);
-}
-
-
-/**
- * @deprecated
- * @enum */
-var ArgType = {
-
-	/**
-	 * false, 0, null, undefined, '0', and 'false' (case-insensitive) become false.
-	 * Anything else, including empty string becomes true.
-	 * Empty string is true because attributes with no value should be evaulated as true. */
-	Bool: 'Bool',
-
-	Int: 'Int',
-	Float: 'Float',
-	String: 'String',
-
-	/** @deprecated for Json */
-	JSON: 'Json',
-
-	/**
-	 * Parse the string value as JSON.
-	 * If it's not parsable, return the value as a string. */
-	Json: 'Json',
-
-	/**
-	 * Evaluate the string as JavaScript using the eval() function.
-	 * If it can't be evaluated, return the original string. */
-	Eval: 'Eval'
-}
-export {ArgType};

package/src/hash.js

@@ -1,89 +0,0 @@
-let lastObjectId = 1>>>0; // Is a 32-bit int faster to increment than JavaScript's Number, which is a 64-bit float?
-let objectIds = new WeakMap();
-
-/**
- * @param obj {Object|string|Node}
- * @returns {string} */
-export function getObjectId(obj) {
-	// if (typeof obj === 'function')
-	// 	return obj.toString(); // This fails to detect when a function's bound variables changes.
-	
-	let result = objectIds.get(obj);
-	if (result===undefined) { // convert to string, store in result, then add 1 to lastObjectId.
-		result = '~@' + (lastObjectId++); // We use a unique, 2-byte prefix to ensure it doesn't collide w/ strings not from getObjectId()
-		objectIds.set(obj, result)
-	}
-	return result;
-}
-
-/**
- * Control how JSON.stringify() handles Nodes and Functions.
- * Normally, we'd pass a replacer() function argument to JSON.stringify() to handle Nodes and Functions.
- * But that makes JSON.stringify() take twice as long to run.
- * Adding a toJSON method globally on these object prototypes doesn't incur that performance penalty.
- * TODO: This needs to be benchmarked again after the json rewrite in Chrome 138. */
-let isHashing = true;
-function toJSON() {
-	return isHashing ? getObjectId(this) : this
-}
-
-
-// Node.prototype.toJSON = toJSON;
-// Function.prototype.toJSON = toJSON;
-
-
-/**
- * Get a string that uniquely maps to the values of the given object.
- * If a value in obj changes, calling getObjectHash(obj) will then return a different hash.
- * This is used by NodeGroupManager to create a hash that represents the current values of a NodeGroup.
- *
- * Relies on the Node and Function prototypes being overridden above.
- *
- * Note that passing an integer may collide with the number we get from hashing an object.
- * But we don't handle that case because we need max performance and Solarite never passes integers to this function.
- *
- * @param obj {*}
- * @returns {string} */
-export function getObjectHash(obj) {
-
-	// Sometimes these get unassigned by Chrome and Brave 119, as well as Firefox, seemingly randomly!
-	// The same tests sometimes pass, sometimes fail, even after browser and OS restarts.
-	// So we check the assignments on every run of getObjectHash()
-	// TODO: Cache references to Node.prototype and Function.prototype:
-	if (Node.prototype.toJSON !== toJSON) {
-		Node.prototype.toJSON = toJSON;
-		if (Function.prototype.toJSON !== toJSON) // Will it only unmap one but not the other?
-			Function.prototype.toJSON = toJSON;
-	}
-
-	isHashing = true;
-	try {
-		return JSON.stringify(obj);
-	}
-	catch(e) {
-		return getObjectHashCircular(obj);
-	}
-	finally {
-		isHashing = false;
-	}
-}
-
-/**
- * Slower hashing method that supports circular references.
- * @param obj
- * @returns {string} */
-function getObjectHashCircular(obj) {
-
-	//console.log('circular')
-	// Slower version that handles circular references.
-	// Just adding any callback at all, even one that just returns the value, makes JSON.stringify() twice as slow.
-	const seen = new Set();
-	return JSON.stringify(obj, (key, value) => {
-		if (typeof value === 'object' && value !== null) {
-			if (seen.has(value))
-				return getObjectId(value);
-			seen.add(value);
-		}
-		return value;
-	});
-}