solarite 0.3.2 → 0.5.0

package/src/Shell.js

@@ -1,8 +1,13 @@
-import {assert} from "./assert.js";
-import ExprPath, {ExprPathType, getNodePath} from "./ExprPath.js";
+import assert from "./assert.js";
+import Path from "./Path.js";
 import Util from "./Util.js";
 import Globals from "./Globals.js";
 import HtmlParser from "./HtmlParser.js";
+import PathToEvent from "./PathToEvent.js";
+import PathToAttribValue from "./PathToAttribValue.js";
+import PathToAttribs from "./PathToAttribs.js";
+import PathToNodes from "./PathToNodes.js";
+import PathToComponent from "./PathToComponent.js";
 
 /**
  * A Shell is created from a tagged template expression instantiated as Nodes,
@@ -17,10 +22,10 @@ export default class Shell {
 	 * @type {DocumentFragment|Text} DOM parent of the shell's nodes. */
 	fragment;
 
-	/** @type {ExprPath[]} Paths to where expressions should go. */
+	/** @type {Path[]} Paths to where expressions should go. */
 	paths = [];
 
-	// Elements with events.  Not yet used.
+	// Elements with events.  Is there a reason to use this?  We already mark event Exprs in Shell.js.
 	// events = [];
 
 	/** @type {int[][]} Array of paths */
@@ -32,14 +37,6 @@ export default class Shell {
 	/** @type {int[][]} Array of paths */
 	styles = [];
 
-	/** @type {int[][]} Array of paths.  Used by activateEmbeds() to quickly find components. */
-	staticComponents = [];
-
-	/** @type {{path:int[], attribs:Record<string, string>}[]} */
-	//componentAttribs = [];
-
-
-
 	/**
 	 * Create the nodes but without filling in the expressions.
 	 * This is useful because the expression-less nodes created by a template can be cached.
@@ -52,43 +49,52 @@ export default class Shell {
 		this._html = html.join('');
 		//#ENDIF
 
+		// If no html tags or entities, just create a text node.
 		if (html.length === 1 && !html[0].match(/[<&]/)) {
-			this.fragment = document.createTextNode(html[0]);
+			this.fragment = Globals.doc.createTextNode(html[0]);
 			return;
 		}
 
 
 		// 1.  Add placeholders
-		let joinedHtml = Shell.addPlaceholders(html);
+		let htmlWithPlaceholders = Shell.addPlaceholders(html);
 
-		let template = document.createElement('template'); // Using a single global template won't keep the nodes as children of the DocumentFragment.
-		if (joinedHtml)
-			template.innerHTML = joinedHtml;
+		let template = Globals.doc.createElement('template'); // Using a single global template won't keep the nodes as children of the DocumentFragment.
+		if (htmlWithPlaceholders)
+			template.innerHTML = htmlWithPlaceholders;
 		else // Create one text node, so shell isn't empty and NodeGroups created from it have something to point the startNode and endNode at.
-			template.content.append(document.createTextNode(''))
+			template.content.append(Globals.doc.createTextNode(''))
 		this.fragment = template.content;
 
 		// 2. Find placeholders
 		let node;
 		let toRemove = [];
 		let placeholdersUsed = 0;
-		const walker = document.createTreeWalker(this.fragment, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT);
+		const walker = Globals.doc.createTreeWalker(this.fragment, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT);
 		while (node = walker.nextNode()) {
 
-			// Remove previous after each iteration, so paths will still be calculated correctly.
+			// Remove previous elements after each iteration, so paths will still be calculated correctly.
 			toRemove.map(el => el.remove());
 			toRemove = [];
 			
 			// Replace attributes
 			if (node.nodeType === 1) {
-				for (let attr of [...node.attributes]) { // Copy the attributes array b/c we remove attributes as we go.
+				const hasIs = node.hasAttribute('is');
+				const isComponent = (hasIs || node.tagName.includes('-'));
+				const componentAttribPaths = [];
+
+				for (let attr of [...node.attributes]) { // Copy the attributes array b/c we remove attributes with placeholders as we go.
 
 					// Whole attribute
 					let matches = attr.name.match(/^[\ue000-\uf8ff]$/)
 					if (matches) {
-						this.paths.push(new ExprPath(null, node, ExprPathType.AttribMultiple));
+						let path = new PathToAttribs(null, node);
+						this.paths.push(path);
+						if (isComponent)
+							componentAttribPaths.push(path);
+
 						placeholdersUsed ++;
-						node.removeAttribute(matches[0]);
+						node.removeAttribute(matches[0]); // TODO: Is this necessary?
 					}
 
 					// Just the attribute value.
@@ -96,22 +102,46 @@ export default class Shell {
 						let parts = attr.value.split(/[\ue000-\uf8ff]/g);
 						if (parts.length > 1) {
 							let nonEmptyParts = (parts.length === 2 && !parts[0].length && !parts[1].length) ? null : parts;
-							let type = Util.isEvent(attr.name) ? ExprPathType.Event : ExprPathType.AttribValue;
 
-							this.paths.push(new ExprPath(null, node, type, attr.name, nonEmptyParts));
+							let path = Util.isEvent(attr.name)
+								? new PathToEvent(null, node, attr.name, nonEmptyParts)
+								: new PathToAttribValue(null, node, attr.name, nonEmptyParts);
+							path.isHtmlProperty = Util.isHtmlProp(node, attr.name);
+							this.paths.push(path);
+							if (isComponent) {
+								path.isComponentAttrib = true;
+								componentAttribPaths.push(path);
+							}
+
 							placeholdersUsed += parts.length - 1;
 							node.setAttribute(attr.name, parts.join(''));
 						}
 					}
 				}
+
+				// Web components
+				if (isComponent) {
+					let path = new PathToComponent(null, node);
+					path.attribPaths = componentAttribPaths;
+					this.paths.splice(this.paths.length - componentAttribPaths.length, 0, path); // Insert before its componentAttribPaths
+
+					if (hasIs) {
+						node.setAttribute('_is', node.getAttribute('is'));
+						node.removeAttribute('is');
+					}
+				}
 			}
+
 			// Replace comment placeholders
 			else if (node.nodeType === 8 && node.nodeValue === '!✨!') {
 
+				if (node?.parentNode?.closest && node?.parentNode?.closest('[contenteditable]'))
+					throw new Error(`Contenteditable can't have expressions inside them. Use <div contenteditable value="\${...}"> instead.`);
+
 				// Get or create nodeBefore.
 				let nodeBefore = node.previousSibling; // Can be the same as another Path's nodeMarker.
 				if (!nodeBefore) {
-					nodeBefore = document.createComment('ExprPath:'+this.paths.length);
+					nodeBefore = Globals.doc.createComment('Path:'+this.paths.length);
 					node.parentNode.insertBefore(nodeBefore, node)
 				}
 				/*#IFDEV*/assert(nodeBefore);/*#ENDIF*/
@@ -127,49 +157,48 @@ export default class Shell {
 				// Re-use existing comment placeholder.
 				else {
 					nodeMarker = node;
-					nodeMarker.textContent = 'ExprPathEnd:'+ this.paths.length;
+					nodeMarker.textContent = 'PathEnd:'+ this.paths.length;
 				}
 				/*#IFDEV*/assert(nodeMarker);/*#ENDIF*/
 
-				let path = new ExprPath(nodeBefore, nodeMarker, ExprPathType.Content);
+				let path = new PathToNodes(nodeBefore, nodeMarker);
 				this.paths.push(path);
 				placeholdersUsed ++;
 			}
 
+			// Comments become text nodes when inside textareas.
 			else if (node.nodeType === 3 && node.parentNode?.tagName === 'TEXTAREA' && node.textContent.includes('<!--!✨!-->'))
 				throw new Error(`Textarea can't have expressions inside them. Use <textarea value="\${...}"> instead.`);
-
 			
 			
 			// Sometimes users will comment out a block of html code that has expressions.
 			// Here we look for expressions in comments.
 			// We don't actually update them dynamically, but we still add paths for them.
 			// That way the expression count still matches.
-			else if (node.nodeType === Node.COMMENT_NODE) {
+			else if (node.nodeType === 8) { // Node.COMMENT_NODE
 				let parts = node.textContent.split(/[\ue000-\uf8ff]/g);
 				for (let i=0; i<parts.length-1; i++) {
-					let path = new ExprPath(node.previousSibling, node)
-					path.type = ExprPathType.Comment;
+					let path = new Path(node.previousSibling, node)
 					this.paths.push(path);
 					placeholdersUsed ++;
 				}
 			}
 
 			// Replace comment placeholders inside script and style tags, which have become text nodes.
-			else if (node.nodeType === Node.TEXT_NODE && ['SCRIPT', 'STYLE'].includes(node.parentNode?.nodeName)) {
+			else if (node.nodeType === 3 && ['SCRIPT', 'STYLE'].includes(node.parentNode?.nodeName)) { // Node.TEXT_NODE
 				let parts = node.textContent.split(commentPlaceholder);
 				if (parts.length > 1) {
 
 					let placeholders = [];
 					for (let i = 0; i<parts.length; i++) {
-						let current = document.createTextNode(parts[i]);
+						let current = Globals.doc.createTextNode(parts[i]);
 						node.parentNode.insertBefore(current, node);
 						if (i > 0)
 							placeholders.push(current)
 					}
 
 					for (let i=0, node; node=placeholders[i]; i++) {
-						let path = new ExprPath(node.previousSibling, node, ExprPathType.Content);
+						let path = new PathToNodes(node.previousSibling, node);
 						this.paths.push(path);
 						placeholdersUsed ++;
 
@@ -188,51 +217,31 @@ export default class Shell {
 		if (placeholdersUsed !== html.length-1)
 			throw new Error(`Could not parse expressions in template.  Check for duplicate attributes or malformed html: ${html.join('${...}')}`);
 
-		// Handle solarite-placeholder's.
-
-		// 3. Rename "is" attributes so the Web Components don't instantiate until we have the values of their PathExpr arguments.
-		// that happens in NodeGroup.applyComponentExprs()
-		for (let el of this.fragment.querySelectorAll('[is]'))
-			el.setAttribute('_is', el.getAttribute('is'));
-
 		for (let path of this.paths) {
 			if (path.nodeBefore)
 				path.nodeBeforeIndex = Array.prototype.indexOf.call(path.nodeBefore.parentNode.childNodes, path.nodeBefore)
-			path.nodeMarkerPath = getNodePath(path.nodeMarker)
 
-			// Cache so we don't have to calculate this later inside NodeGroup.applyExprs()
-			if (path.type === ExprPathType.AttribValue && path.nodeMarker.nodeType === 1 &&
-				(path.nodeMarker.tagName.includes('-') || path.nodeMarker.hasAttribute('is'))) {
-				path.type = ExprPathType.ComponentAttribValue;
-			}
+			// Must be calculated after we remove the toRemove nodes:
+			path.nodeMarkerPath = Path.get(path.nodeMarker)
+
+
 		}
 
 		this.findEmbeds();
 
+
 		/*#IFDEV*/this.verify();/*#ENDIF*/
 	}
 
 	/**
 	 * 1. Add a Unicode placeholder char for where expressions go within attributes.
 	 * 2. Add a comment placeholder for where expressions are children of other nodes.
-	 * 3. Append -solarite-placeholder to the tag names of custom components so that we can wait to instantiate them later.
+	 * 3. Append -solarite-placeholder to the tag names of custom components so that we can instantiate them later
+	 *    when we can manually call their constructors with the proper attribute and children arguments from evaluated expressions.
 	 * @param htmlChunks {string[]}
-	 * @returns {string} */
+	 * @returns {string} Html with the placeholders in place. */
 	static addPlaceholders(htmlChunks) {
-		let tokens = [];
-
-		function addToken(token, context) {
-
-			if (context === HtmlParser.Tag) {
-				// Find Solarite Components tags and append -solarite-placeholder to their tag names
-				// and give them a solarite-placeholder attribute so we can easily find them later.
-				// This way we can gather their constructor arguments and their children before we call their constructor.
-				// Later, NodeGroup.instantiateComponent() will replace them with the real components.
-				// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
-				token = token.replace(/^<\/?[a-z][a-z0-9]*-[a-z0-9-]+/i, match => match + '-solarite-placeholder solarite-placeholder');
-			}
-			tokens.push(token)
-		}
+		let result = [];
 
 		let htmlParser = new HtmlParser(); // Reset the context.
 		for (let i = 0; i < htmlChunks.length; i++) {
@@ -240,10 +249,20 @@ export default class Shell {
 
 			// Append -solarite-placholder to web component tags, so we can pass args to them when they're instantiated.
 			let lastIndex = 0;
-			let context = htmlParser.parse(lastHtml, (html, index, oldContext, newContext) => {
+			let context = htmlParser.parse(lastHtml, (html, index, prevContext/*, nextContext*/) => { // This function is called every time the html context changes.
 				if (lastIndex !== index) {
 					let token = html.slice(lastIndex, index);
-					addToken(token, oldContext);
+
+					if (prevContext === HtmlParser.Tag) {
+						// Find Web Component tags and append -solarite-placeholder to their tag names
+						// This way we can gather their constructor arguments and their children before we call their constructor.
+						// Later, PathToComponent.apply() will replace them with the real components.
+						// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
+						const isWebComponentTagName = /^<\/?[a-z][a-z0-9]*-[a-z0-9-]+/i; // a dash in the middle
+						token = token.replace(isWebComponentTagName, match => match + '-SOLARITE-PLACEHOLDER'); // caps to match other instances of this string, for better compression.
+					}
+
+					result.push(token);
 				}
 				lastIndex = index;
 			});
@@ -251,13 +270,13 @@ export default class Shell {
 			// Insert placeholders
 			if (i < htmlChunks.length - 1) {
 				if (context === HtmlParser.Text)
-					tokens.push(commentPlaceholder) // Comment Placeholder. because we can't put text in between <tr> tags for example.
+					result.push(commentPlaceholder) // Comment Placeholder. because we can't put text in between <tr> tags for example.
 				else
-					tokens.push(String.fromCharCode(attribPlaceholder + i));
+					result.push(String.fromCharCode(attribPlaceholder + i));
 			}
 		}
 
-		return tokens.join('');
+		return result.join('');
 	}
 
 	/**
@@ -269,10 +288,10 @@ export default class Shell {
 	 * this.ids
 	 * this.staticComponents */
 	findEmbeds() {
-		this.scripts = Array.prototype.map.call(this.fragment.querySelectorAll('scripts'), el => getNodePath(el))
+		this.scripts = Array.prototype.map.call(this.fragment.querySelectorAll('scripts'), el => Path.get(el))
 
-		// TODO: only find styles that have ExprPaths in them?
-		this.styles = Array.prototype.map.call(this.fragment.querySelectorAll('style'), el => getNodePath(el))
+		// TODO: only find styles that have Paths in them?
+		this.styles = Array.prototype.map.call(this.fragment.querySelectorAll('style'), el => Path.get(el))
 
 		let idEls = this.fragment.querySelectorAll('[id],[data-id]');
 
@@ -283,17 +302,7 @@ export default class Shell {
 				throw new Error(`<${el.tagName.toLowerCase()} id="${id}"> can't override existing HTMLElement id property.`)
 		}
 
-		this.ids = Array.prototype.map.call(idEls, el => getNodePath(el))
-
-		for (let el of this.fragment.querySelectorAll('*')) {
-			if (el.tagName.includes('-') || el.hasAttribute('_is'))
-
-				// Dynamic components are components that have attributes with expression values.
-				// They are created from applyExprs()
-				// But static components are created in a separate path inside the NodeGroup constructor.
-				if (!this.paths.find(path => path.nodeMarker === el))
-					this.staticComponents.push(getNodePath(el));
-		}
+		this.ids = Array.prototype.map.call(idEls, el => Path.get(el))
 	}
 
 	/**

package/src/Solarite.d.ts

@@ -1,24 +1,9 @@
 /**
- * Solarite JavasCript UI library.
+ * Solarite JavaScript UI library.
  * MIT License
  * https://vorticode.github.io/solarite/
  */
 
-export default function h(htmlStrings?: HTMLElement | string | string[] | Function | {render: Function}, ...exprs: any[]): Node | HTMLElement | Template | Function;
-export { default as h, default as r } from './h.js';
-
-export const ArgType: {
-	Bool: string;
-	Int: string;
-	Float: string;
-	String: string;
-	Json: string;
-	Eval: string;
-}
-
-export function getArg(el:HTMLElement, attributeName:string, defaultValue?:any,
-	type?:typeof ArgType[keyof typeof ArgType] | Function | any[], fallback?:any): any;
-
 export interface RenderOptions {
     styles?: boolean;
     scripts?: boolean;
@@ -26,37 +11,96 @@ export interface RenderOptions {
     render?: boolean;
 }
 
+/**
+ * Tagged template literal or function for creating Templates and rendering to the DOM. */
+declare function h(htmlStrings: TemplateStringsArray, ...exprs: any[]): Template;
+declare function h(htmlStrings: string | string[], ...exprs: any[]): Template;
+declare function h(el: HTMLElement | DocumentFragment, options?: RenderOptions): (htmlStrings: TemplateStringsArray, ...exprs: any[]) => HTMLElement | DocumentFragment;
+declare function h(el: HTMLElement | DocumentFragment, template: Template, options?: RenderOptions): void;
+declare function h(tag: string, props: object, ...children: any[]): Template; // JSX
+declare function h(obj: {render: Function}): (htmlStrings: TemplateStringsArray, ...exprs: any[]) => void; // Rebound render
+
+export default h;
+export {h};
+export {h as r};
+
+/**
+ * Solarite provides more features if your web component extends Solarite instead of HTMLElement. */
+export class Solarite extends HTMLElement {
+    constructor(attribs?: Record<string, any> | null);
+    render(attribs?: Record<string, any>, changed?:boolean): void;
+    renderFirstTime(): void;
+    connectedCallback(): void;
+    static define(tagName?: string | null): void;
+    static getAttribs(el: HTMLElement): Record<string, any>;
+}
+
+
+/**
+ * Convert a template, string, or object into a DOM Node or Element. */
+export function toEl(arg: string | Template | {render: () => void}): Node | HTMLElement | DocumentFragment;
+
+/**
+ * @deprecated
+ * Retrieve and cast an attribute value from an HTMLElement. */
+export function getArg(el: HTMLElement, attributeName: string, defaultValue?: any,
+    type?: typeof ArgType[keyof typeof ArgType] | Function | any[]): any;
+
+/**
+ * @deprecated
+ * Update attributes on an element from an object. */
+export function setArgs(el: HTMLElement, args: object): void;
+
+/** @deprecated */
+export const ArgType: {
+    Bool: string;
+    Int: string;
+    Float: string;
+    String: string;
+    Json: string;
+    Eval: string;
+}
+
 export class Template {
-    exprs: (Template|string|Function)[];
+    exprs: any[];
     html: string[];
     constructor(htmlStrings: string[], exprs: any[]);
-    render(el?: HTMLElement, options?: RenderOptions): DocumentFragment | HTMLElement | null;
+    render(el?: HTMLElement | null, options?: RenderOptions): HTMLElement | DocumentFragment;
     getExactKey(): string;
     getCloseKey(): string;
+    static fromJsx(tag: string, props: Record<string, any> | null, children: any[]): Template;
 }
 
 export function delve(obj: object, path: string[], createVal?: any): any;
 
-
-
-// Experimental:
-//--------------
-
-// Globals object
+/**
+ * Internal utilities and state. */
 export const Globals: {
-    componentArgsHash: WeakMap<any, any>;
     connected: WeakSet<HTMLElement>;
-    currentExprPath: any;
+    currentPath: any;
+    currentSlotChildren: any[] | null;
     div: HTMLDivElement;
+    doc: Document;
     elementClasses: {[key: string]: typeof Node};
     htmlProps: {[key: string]: boolean};
     nodeEvents: WeakMap<Node, {[eventName: string]: [Function, Function, any[]]}>;
-    nodeGroups: WeakMap<HTMLElement, any>;
+    rootNodeGroups: WeakMap<HTMLElement, any>;
     objToEl: WeakMap<any, any>;
     rendered: WeakSet<HTMLElement>;
-    rendering: WeakSet<HTMLElement>;
     shells: WeakMap<string[], any>;
     reset: Function;
-    count: number;
+};
+
+export const SolariteUtil: {
+    arraySame(a: any[], b: any[]): boolean;
+    attribsToObject(el: HTMLElement, ignore?: string | null): Record<string, any>;
+    bindId(root: any, el: HTMLElement): void;
+    bindStyles(style: HTMLStyleElement, root: HTMLElement): void;
+    camelToDashes(str: string): string;
+    dashesToCamel(str: string): string;
+    defineClass(Class: typeof HTMLElement, tagName?: string | null): void;
+    isIterable(obj: any): boolean;
+    trimEmptyNodes(nodes: NodeList | Node[]): Node[];
+    [key: string]: any;
 };
 

package/src/Solarite.js

@@ -1,36 +1,148 @@
-/**
- * Solarite JavasCript UI library.
- * MIT License
- * https://vorticode.github.io/solarite/
- */
-
+/*
+┏┓  ┓    •
+┗┓┏┓┃┏┓┏┓┓╋▗▖
+┗┛┗┛┗┗┻╹ ╹╹┗
+JavasCript UI library
+@license MIT
+@copyright Vorticode LLC
+https://vorticode.github.io/solarite/ */
 import h from './h.js';
 export default h;
-export {default as h, default as r} from './h.js'; //Named exports for h() are deprecated.
 export {default as delve} from './delve.js';
-export {getArg, ArgType} from './getArg.js';
 export {default as Template} from './Template.js';
-
-
+export {default as toEl} from './toEl.js';
+import Template from './Template.js';
 
 // Experimental:
 //--------------
+export {default as Globals} from './Globals.js';
+export {default as SolariteUtil} from './Util.js';
+
+// Deprecated:
+//--------------
+export {default as h} from './h.js'; // Named exports for h() are deprecated.
+export {getArg, ArgType} from './getArg.js';
 export {setArgs} from './getArg.js';
+export {default as r} from './h.js';
+export function t(html) {
+	return new Template([html], []);
+}
+//export {default as watch, renderWatched} from './watch.js'; // unfinished
+
+// Only used for tests:
+//--------------
+export {default as HtmlParser} from './HtmlParser.js';
+export {default as NodeGroup} from './NodeGroup.js';
+export {default as Shell} from './Shell.js';
+
+
+
 
-import createSolarite from "./createSolarite.js";
+
+// Solarite Class:
+//--------------
+import Util from "./Util.js";
+import Globals from "./Globals.js";
 
 /**
- * TODO: The Proxy and the multiple base classes mess up 'instanceof Solarite'
- * @type {Node|Class<HTMLElement>|function(tagName:string):Node|Class<HTMLElement>} */
-const Solarite = new Proxy(createSolarite(), {
-	apply(self, _, args) {
-		return createSolarite(...args)
+ * Intercept the construct call to auto-define the class before the constructor is called. */
+let HTMLElementAutoDefine = new Proxy(HTMLElement, {
+	construct(Parent, args, Class) {
+
+		// 1. Call customElements.define() automatically.
+		Util.defineClass(Class);
+
+		// 2. This line is equivalent the to super() call to HTMLElement:
+		return Reflect.construct(Parent, args, Class);
 	}
 });
 
-/** @type {HTMLElement|Class} */
-export {Solarite}
-export {default as Globals} from './Globals.js';
-export {default as SolariteUtil} from './Util.js';
+/**
+ * Solarite provides more features if your web component extends Solarite instead of HTMLElement.
+ *
+ * Reasons to inherit from Solarite instead of HTMLElement.
+ * 1.  customElements.define() is called automatically when you create the first instance.
+ * 2.  Calls render() when added to the DOM, if it hasn't been called already.
+ * 3.  Populates the attribs argument to the constructor when instantiated from regular html outside a template string.
+ *         It parses JSON from DOM attribute values surrouned with '${...}'
+ * 4.  Shows an error if render() isn't defined.
+ *
+ * Advantages to inheriting from HTMLElement
+ * 1.  We can inherit from things like HTMLTableRowElement directly.
+ * 2.  There's less magic, since everyone is familiar with defining custom elements.
+ * 3.  No confusion about how the class name becomes a tag name.
+ * @extends {HTMLElement} */
+export class Solarite extends HTMLElementAutoDefine {
+
+	/**
+	 * @param attribs {?Record<string, any>} */
+	constructor(attribs=null) {
+		super();
+
+		if (attribs) {
+			if (typeof attribs !== 'object')
+				throw new Error('First argument to custom element constructor must be an object.');
+
+			// 1. Populate attribs if it's an empty object.
+			if (attribs && !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];
+			//	}
+			//}
+		}
+
+		// 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);
+		// }
+	}
 
-//export {default as watch, renderWatched} from './watch.js'; // unfinished
+	'render'() {
+		throw new Error('render() is not defined for ' + this.constructor.name);
+	}
+
+	/**
+	 * Call render() only if it hasn't already been called.	 */
+	'renderFirstTime'() {
+		if (!Globals.rendered.has(this)) {
+			let attribs = Solarite.getAttribs(this);
+			this.render(attribs); // calls Globals.rendered.add(this); inside the call to h()'...'.
+		}
+	}
+
+	/**
+	 * Called automatically by the browser. */
+	'connectedCallback'() { // quoted so terser doesn't remove it.
+		this.renderFirstTime();
+	}
+
+	static 'define'(tagName=null) {
+		Util.defineClass(this, tagName);
+	}
+
+	static 'getAttribs'(el) {
+		let result = Util.attribsToObject(el);
+		for (let name in result) {
+			let val = result[name];
+			if (val.startsWith('${') && val.endsWith('}'))
+				result[name] = JSON.parse(val.slice(2, -1));
+		}
+		return result;
+	}
+}