solarite 0.3.2 → 0.4.0

package/src/Shell.js

@@ -53,7 +53,7 @@ export default class Shell {
 		//#ENDIF
 
 		if (html.length === 1 && !html[0].match(/[<&]/)) {
-			this.fragment = document.createTextNode(html[0]);
+			this.fragment = Globals.doc.createTextNode(html[0]);
 			return;
 		}
 
@@ -61,18 +61,18 @@ export default class Shell {
 		// 1.  Add placeholders
 		let joinedHtml = Shell.addPlaceholders(html);
 
-		let template = document.createElement('template'); // Using a single global template won't keep the nodes as children of the DocumentFragment.
+		let template = Globals.doc.createElement('template'); // Using a single global template won't keep the nodes as children of the DocumentFragment.
 		if (joinedHtml)
 			template.innerHTML = joinedHtml;
 		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.
@@ -108,10 +108,13 @@ export default class Shell {
 			// 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('ExprPath:'+this.paths.length);
 					node.parentNode.insertBefore(nodeBefore, node)
 				}
 				/*#IFDEV*/assert(nodeBefore);/*#ENDIF*/
@@ -136,9 +139,9 @@ export default class Shell {
 				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.
@@ -162,7 +165,7 @@ export default class Shell {
 
 					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)
@@ -201,9 +204,9 @@ export default class Shell {
 			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 &&
+			if ((path.type === ExprPathType.AttribValue || path.type === ExprPathType.Event) && path.nodeMarker.nodeType === 1 &&
 				(path.nodeMarker.tagName.includes('-') || path.nodeMarker.hasAttribute('is'))) {
-				path.type = ExprPathType.ComponentAttribValue;
+				path.isComponent = true;
 			}
 		}
 

package/src/Solarite.d.ts

@@ -1,11 +1,15 @@
 /**
- * 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 default function h(htmlStrings?: HTMLElement | string | string[] | TemplateStringsArray | Function | {render: Function}, ...exprs: any[]): Node | HTMLElement | Template | Function;
+export function toEl(htmlOrTemplate: string|Template|{render:()=>void}) : Node|HTMLElement|DocumentFragment;
+
+// Deprecated:
+export function t(html: string): Template;
+
 
 export const ArgType: {
 	Bool: string;
@@ -44,7 +48,7 @@ export function delve(obj: object, path: string[], createVal?: any): any;
 
 // Globals object
 export const Globals: {
-    componentArgsHash: WeakMap<any, any>;
+    //componentArgsHash: WeakMap<any, any>;
     connected: WeakSet<HTMLElement>;
     currentExprPath: any;
     div: HTMLDivElement;

package/src/Solarite.js

@@ -1,16 +1,17 @@
-/**
- * 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';
 
 
 // Experimental:
@@ -28,6 +29,7 @@ const Solarite = new Proxy(createSolarite(), {
 	}
 });
 
+
 /** @type {HTMLElement|Class} */
 export {Solarite}
 export {default as Globals} from './Globals.js';

package/src/Template.js

@@ -1,7 +1,8 @@
 import {assert} from "./assert.js";
 import {getObjectHash, getObjectId} from "./hash.js";
 import Globals from "./Globals.js";
-import {RootNodeGroup} from "./NodeGroup.js";
+import RootNodeGroup from "./RootNodeGroup.js";
+import Util from "./Util.js";
 
 /**
  * The html strings and evaluated expressions from an html tagged template.
@@ -18,8 +19,7 @@ export default class Template {
 	/** @type {Array} Used for toJSON() and getObjectHash().  Stores values used to quickly create a string hash of this template. */
 	hashedFields;
 
-	/** @type {NodeGroup} */
-	nodeGroup;
+	isText;
 
 	/**
 	 *
@@ -124,6 +124,138 @@ export default class Template {
 
 		return this.closeKey;
 	}
+
+	/**
+	 * @param tag {string}
+	 * @param props {?Record<string, any>}
+	 * @param children
+	 * @returns {Template} */
+	static fromJsx(tag, props, children) {
+
+		// HTML void elements that must not have closing tags
+		const isVoid = selfClosingTags.has(tag.toLowerCase());
+
+		// Build htmlStrings/exprs so Shell can place placeholders in attribute values and child content.
+		let htmlStrings = [];
+		let templateExprs = [];
+
+		// Opening tag
+		let open = `<${tag}`;
+
+		// Attributes
+		if (props && typeof props === 'object') {
+			for (let name in props) {
+				let value = props[name];
+
+				// id and data-id are static in templates — never expressions
+				if (name === 'id' || name === 'data-id') {
+					// Write directly into the opening string with quotes
+					open += ` ${name}="${value}"`;
+					continue;
+				}
+
+				// Dynamic attribute value: functions are unquoted (e.g., onclick=${fn}), others quoted
+				if (typeof value === 'function') {
+					open += ` ${name}=`;
+					htmlStrings.push(open);
+					templateExprs.push(value);
+					// reset so subsequent attributes start fresh (e.g., ' title=')
+					open = ``;
+				}
+				else {
+					open += ` ${name}=`;
+					htmlStrings.push(open);
+					templateExprs.push(value);
+					// reset so subsequent attributes start fresh (e.g., ' title=')
+					open = ``;
+				}
+			}
+		}
+
+		// Finalize opening tag precisely to match tagged template splitting
+		if (!isVoid) {
+			const pushedAny = htmlStrings.length > 0;
+			// If nothing pushed yet (no dynamic attrs), push the entire open + '>'
+			if (!pushedAny)
+				htmlStrings.push(open + '>');
+			else {
+				// If we were in a quoted attr (open === '"'), then the string after expr is '">' ;
+				// Otherwise (function-valued attr), the string after expr is just '>'
+				htmlStrings.push(open === '"' ? '">' : '>');
+			}
+
+			for (let child of children)
+				addChild(child, htmlStrings, templateExprs);
+		}
+
+		// Closing tag (not for void tags)
+		if (!isVoid) {
+			// If we never emitted the '>' for the open tag (no children were added),
+			// then it was appended above before children. Now just add the closing tag to the last html segment.
+			let lastIdx = htmlStrings.length - 1;
+			htmlStrings[lastIdx] += `</${tag}>`;
+		}
+		else {
+			// Void element: ensure we emitted a trailing '>' segment
+			const pushedAny = htmlStrings.length > 0;
+			if (!pushedAny)
+				htmlStrings.push(open + '>');
+			else
+				htmlStrings.push('>');
+		}
+
+		// Ensure invariant
+		//assert(htmlStrings.length === templateExprs.length + 1);
+		//console.log([htmlStrings, templateExprs])
+		return new Template(htmlStrings, templateExprs);
+	}
+}
+
+
+const selfClosingTags = new Set(['area','base','br','col','embed','hr','img','input','link','meta','param','source','track','wbr']);
+
+
+/**
+ * Add child Templates that were already created via h() and Template.fromJsx()
+ * @param template {Template}
+ * @param html {string[]}
+ * @param exprs {any[]} */
+const addChild = (template, html, exprs) => {
+
+	if (Array.isArray(template)) {
+		for (let c of template)
+			addChild(c, html, exprs);
+	}
+	else {
+		let flatten = false;
+		if (template instanceof Template) {
+			// Heuristic to match tagged-template splitting:
+			// - Flatten if the child has expressions (so JSX can inline attribute/value placeholders like tagged literals would).
+			// - Also flatten void elements (e.g., <img>) so they inline like literals.
+			// - Otherwise, keep as a dynamic child placeholder to match cases where the tagged template used an expression child.
+			const childHasExprs = template.exprs.length > 0;
+			if (childHasExprs)
+				flatten = true;
+			else {
+				const m = (template.html[0] || '').match(/^<([a-zA-Z][\w:-]*)/);
+				const childTag = m ? m[1].toLowerCase() : '';
+				flatten = selfClosingTags.has(childTag);
+			}
+		}
+
+		if (flatten) {
+			// Flatten/interleave into current segment to match tagged template splitting
+			html[html.length - 1] += template.html[0];
+			for (let i = 0; i < template.exprs.length; i++) {
+				exprs.push(template.exprs[i]);
+				html.push(template.html[i + 1] ?? '');
+			}
+		} else {
+			// Keep as dynamic child
+			exprs.push(template);
+			html.push('');
+		}
+	}
 }
 
 

package/src/Util.js

@@ -18,12 +18,25 @@ let Util = {
 		return true; // the same.
 	},
 
+	/**
+	 * Convert HTMLElement attributes to an object.
+	 * @param el {HTMLElement}
+	 * @param ignore {?string} Optionally ignore this attribute.
+	 * @return {Object} */
+	attribsToObject(el, ignore=null) {
+		let result = {};
+		for (let attrib of el.attributes)
+			if (attrib.name !== ignore)
+				result[Util.dashesToCamel(attrib.name)] = attrib.value;
+		return result;
+	},
+
 	bindId(root, el) {
 		let id = el.getAttribute('data-id') || el.getAttribute('id');
 		if (id) { // If something hasn't removed the id.
 
 			// Don't allow overwriting existing class properties if they already have a non-Node value.
-			if (root[id] && !(root[id] instanceof Node))
+			if (root[id] && !(root[id]?.nodeType))
 				throw new Error(`${root.constructor.name}.${id} already has a value.  ` +
 					`Can't set it as a reference to <${el.tagName.toLowerCase()} id="${id}">`);
 
@@ -32,26 +45,50 @@ let Util = {
 	},
 
 	/**
+	 * If the style tab has a global attribute:
+	 * 1.  Put it in the document head as <style data-style="tag-name">...</style>
+	 * 2.  Replace the :host {...} CSS selector as tag-name {...}.
+	 * Otherwise keep it where it is and:
+	 * 1.  Add data-style="1" attribute to the root element.
+	 * 2.  Replace the :host {...} selector in the style as tag-name[data-style='1'] {...}
 	 * @param style {HTMLStyleElement}
 	 * @param root {HTMLElement} */
 	bindStyles(style, root) {
-		let styleId = root.getAttribute('data-style');
-		if (!styleId) {
-			// Keep track of one style id for each class.
-			// 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 tagName = root.tagName.toLowerCase();
+		let styleId, 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.
+				style.remove(); // already in the head.
+		}
+		else {
+			let styleId = root.getAttribute('data-style');
+			if (!styleId) {
+				// Keep track of one style id for each class.
+				// 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);
+			}
+
+			attribSelector = `[data-style="${styleId}"]`;
 		}
 
 		// Replace ":host" with "tagName[data-style=...]" in the css.
-		let tagName = root.tagName.toLowerCase();
 		for (let child of style.childNodes) {
 			if (child.nodeType === 3) {
 				let oldText = child.textContent;
-				let newText = oldText.replace(/:host(?=[^a-z0-9_])/gi, `${tagName}[data-style="${styleId}"]`)
+				let newText = oldText.replace(/:host(?=[^a-z0-9_])/gi, `${tagName}${attribSelector}`)
 				if (oldText !== newText)
 					child.textContent = newText;
 			}
@@ -98,7 +135,6 @@ let Util = {
 		return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
 	},
 
-
 	/**
 	 * A generator function that recursively traverses and flattens a value.
 	 *
@@ -139,7 +175,7 @@ let Util = {
 
 	/**
 	 * Get the value of an input as the most appropriate JavaScript type.
-	 * @param node {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement|HTMLDivElement}
+	 * @param node {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement|HTMLElement}
 	 * @return {string|string[]|number|[]|File[]|Date|boolean} */
 	getInputValue(node) {
 		// .type is a built-in DOM property
@@ -153,6 +189,8 @@ let Util = {
 			return node.valueAsDate; // Date Object
 		if (node.type === 'select-multiple') // <select multiple>
 			return [...node.selectedOptions].map(option => option.value); // Array of Strings
+		if (node.hasAttribute('contenteditable'))
+			return node.innerHTML;
 
 		return node.value; // String
 	},

package/src/createSolarite.js

@@ -42,7 +42,7 @@ export default function createSolarite(extendsTag=null) {
 
 		BaseClass = Globals.elementClasses[extendsTag];
 		if (!BaseClass) { // TODO: Use Cache
-			BaseClass = document.createElement(extendsTag).constructor;
+			BaseClass = Globals.doc.createElement(extendsTag).constructor;
 			Globals.elementClasses[extendsTag] = BaseClass
 		}
 	}
@@ -103,7 +103,7 @@ export default function createSolarite(extendsTag=null) {
 						this.innerHTML = html;
 					}
 					else
-						this.modifications = r(this, html, options);
+						this.modifications = h(this, html, options);
 				}
 			})*/