solarite 0.3.0 → 0.3.2

package/src/Solarite.d.ts

@@ -0,0 +1,62 @@
+/**
+ * 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;
+    ids?: boolean;
+    render?: boolean;
+}
+
+export class Template {
+    exprs: (Template|string|Function)[];
+    html: string[];
+    constructor(htmlStrings: string[], exprs: any[]);
+    render(el?: HTMLElement, options?: RenderOptions): DocumentFragment | HTMLElement | null;
+    getExactKey(): string;
+    getCloseKey(): string;
+}
+
+export function delve(obj: object, path: string[], createVal?: any): any;
+
+
+
+// Experimental:
+//--------------
+
+// Globals object
+export const Globals: {
+    componentArgsHash: WeakMap<any, any>;
+    connected: WeakSet<HTMLElement>;
+    currentExprPath: any;
+    div: HTMLDivElement;
+    elementClasses: {[key: string]: typeof Node};
+    htmlProps: {[key: string]: boolean};
+    nodeEvents: WeakMap<Node, {[eventName: string]: [Function, Function, any[]]}>;
+    nodeGroups: WeakMap<HTMLElement, any>;
+    objToEl: WeakMap<any, any>;
+    rendered: WeakSet<HTMLElement>;
+    rendering: WeakSet<HTMLElement>;
+    shells: WeakMap<string[], any>;
+    reset: Function;
+    count: number;
+};
+

package/src/{solarite/Solarite.js → Solarite.js}

@@ -3,36 +3,34 @@
  * MIT License
  * https://vorticode.github.io/solarite/
  */
-/** @jsx r */
-/** @jsxFrag null */
 
+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';
+
+
+
+// Experimental:
+//--------------
+export {setArgs} from './getArg.js';
 
 import createSolarite from "./createSolarite.js";
 
 /**
  * TODO: The Proxy and the multiple base classes mess up 'instanceof Solarite'
  * @type {Node|Class<HTMLElement>|function(tagName:string):Node|Class<HTMLElement>} */
-let Solarite = new Proxy(createSolarite(), {
+const Solarite = new Proxy(createSolarite(), {
 	apply(self, _, args) {
 		return createSolarite(...args)
 	}
 });
 
-import h from './h.js';
-export default h;
-
 /** @type {HTMLElement|Class} */
 export {Solarite}
-export {default as h, default as r} from './h.js';
-export {getArg, ArgType} from './getArg.js';
-export {default as Template} from './Template.js';
 export {default as Globals} from './Globals.js';
-
-import Util from './Util.js';
-let getInputValue = Util.getInputValue;
-export {getInputValue};
-export {default as delve} from '../util/delve.js';
 export {default as SolariteUtil} from './Util.js';
 
-//Experimental:
 //export {default as watch, renderWatched} from './watch.js'; // unfinished

package/src/{solarite/Template.js → Template.js}

@@ -1,4 +1,4 @@
-import {assert} from "../util/Errors.js";
+import {assert} from "./assert.js";
 import {getObjectHash, getObjectId} from "./hash.js";
 import Globals from "./Globals.js";
 import {RootNodeGroup} from "./NodeGroup.js";

package/src/{solarite/Util.js → Util.js}

@@ -1,8 +1,23 @@
 import Globals from "./Globals.js";
-import delve from "../util/delve.js";
+import delve from "./delve.js";
 
 let Util = {
 
+	/**
+	 * Returns true if they're the same.
+	 * @param a
+	 * @param b
+	 * @returns {boolean} */
+	arraySame(a, b) {
+		let aLength = a.length;
+		if (aLength !== b.length)
+			return false;
+		for (let i=0; i<aLength; i++)
+			if (a[i] !== b[i])
+				return false;
+		return true; // the same.
+	},
+
 	bindId(root, el) {
 		let id = el.getAttribute('data-id') || el.getAttribute('id');
 		if (id) { // If something hasn't removed the id.
@@ -43,7 +58,6 @@ let Util = {
 		}
 	},
 
-
 	/**
 	 * Convert a Proper Case name to a name with dashes.
 	 * Dashes will be placed between letters and numbers.
@@ -111,17 +125,17 @@ let Util = {
 	 * for (const item of flatten(complexArray))
 	 *     console.log(item);  // Outputs: 1, 2, 3, 4, 5, 6, { a: 'object' }, 7, 8, 9
 	 */
-	*flatten(value) {
-		if (Array.isArray(value)) {
-			for (const item of value) {
-				yield* Util.flatten(item);  // Recursively flatten arrays
-			}
-		} else if (typeof value === 'function') {
-			const result = value();
-			yield* Util.flatten(result);  // Recursively flatten the result of a function
-		} else
-			yield value;  // Yield primitive values as is
-	},
+	// *flatten(value) {
+	// 	if (Array.isArray(value)) {
+	// 		for (const item of value) {
+	// 			yield* Util.flatten(item);  // Recursively flatten arrays
+	// 		}
+	// 	} else if (typeof value === 'function') {
+	// 		const result = value();
+	// 		yield* Util.flatten(result);  // Recursively flatten the result of a function
+	// 	} else
+	// 		yield value;  // Yield primitive values as is
+	// },
 
 	/**
 	 * Get the value of an input as the most appropriate JavaScript type.
@@ -143,6 +157,10 @@ let Util = {
 		return node.value; // String
 	},
 
+	isEvent(attrName) {
+		return attrName.startsWith('on') && attrName in Globals.div;
+	},
+
 	/**
 	 * @param el {HTMLElement}
 	 * @param prop {string}
@@ -182,9 +200,10 @@ let Util = {
 		return val === undefined || val === false || val === null;
 	},
 
+	/*
 	isPrimitive(val) {
 		return typeof val === 'string' || typeof val === 'number'
-	},
+	},*/
 
 	/**
 	 * If val is a function, evaluate it recursively until the result is not a function.
@@ -202,6 +221,22 @@ let Util = {
 		return val;
 	},
 
+	/**
+	 * Use an array as the value of a map, appending to it when we add.
+	 * Used by watch.js.
+	 * @param map {Map|WeakMap|Object}
+	 * @param key
+	 * @param value */
+	mapArrayAdd(map, key, value) {
+		let result = map.get(key);
+		if (!result) {
+			result = [value];
+			map.set(key, result);
+		}
+		else
+			result.push(value);
+	},
+
 	/**
 	 * Remove nodes from the beginning and end that are not:
 	 * 1.  Elements.
@@ -232,37 +267,6 @@ export default Util;
 
 
 
-let isEvent = attrName => attrName.startsWith('on') && attrName in Globals.div;
-export {isEvent};
-
-
-export function dashesToCamel(str) {
-	return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
-}
-
-
-
-
-
-/**
- * Returns true if they're the same.
- * @param a
- * @param b
- * @returns {boolean} */
-export function arraySame(a, b) {
-	let aLength = a.length;
-	if (aLength !== b.length)
-		return false;
-	for (let i=0; i<aLength; i++)
-		if (a[i] !== b[i])
-			return false;
-	return true; // the same.
-}
-
-
-
-
-
 // For debugging only
 //#IFDEV
 export function setIndent(items, level=1) {

package/src/{solarite/createSolarite.js → createSolarite.js}

@@ -1,10 +1,9 @@
-import Util from "../util/Util.js";
-import SolariteUtil from './Util.js';
+import Util from './Util.js';
 import Globals from "./Globals.js";
 
 function defineClass(Class, tagName, extendsTag) {
 	if (!customElements[getName](Class)) { // If not previously defined.
-		tagName = tagName || SolariteUtil.camelToDashes(Class.name)
+		tagName = tagName || Util.camelToDashes(Class.name)
 		if (!tagName.includes('-'))
 			tagName += '-element';
 
@@ -70,10 +69,10 @@ export default function createSolarite(extendsTag=null) {
 		 * TODO: Make these standalone functions.
 		 * Callbacks.
 		 * Use onConnect.push(() => ...); to add new callbacks. */
-		onConnect = Util.callback();
+		onConnect;
 		
-		onFirstConnect = Util.callback();
-		onDisconnect = Util.callback();
+		onFirstConnect;
+		onDisconnect;
 
 		/**
 		 * @param options {RenderOptions} */
@@ -89,7 +88,7 @@ export default function createSolarite(extendsTag=null) {
 
 			// Add slot children before constructor code executes.
 			// This breaks the styleStaticNested test.
-			// PendingChildren is setup in NodeGroup.createNewComponent()
+			// PendingChildren is setup in NodeGroup.instantiateComponent()
 			// TODO: Match named slots.
 			//let ch = Globals.pendingChildren.pop();
 			//if (ch) // TODO: how could there be a slot before render is called?
@@ -131,13 +130,16 @@ export default function createSolarite(extendsTag=null) {
 			this.renderFirstTime();
 			if (!Globals.connected.has(this)) {
 				Globals.connected.add(this);
-				this.onFirstConnect();
+				if (this.onFirstConnect)
+					this.onFirstConnect();
 			}
-			this.onConnect();
+			if (this.onConnect)
+				this.onConnect();
 		}
 		
 		disconnectedCallback() {
-			this.onDisconnect();
+			if (this.onDisconnect)
+				this.onDisconnect();
 		}
 
 

package/src/{solarite/getArg.js → getArg.js}

@@ -26,7 +26,7 @@ import Util from "./Util.js";
  * @param el {HTMLElement}
  * @param attributeName {string} Attribute name.  Not case-sensitive.
  * @param defaultValue {*} Default value to use if attribute doesn't exist.
- * @param type {ArgType|function|*[]}
+ * @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.
  * @param fallback {*} If the defaultValue is undefiend and type can't be parsed as the given type, use this value.
@@ -41,8 +41,11 @@ export function getArg(el, attributeName, defaultValue=undefined, type=ArgType.S
 	if (Array.isArray(type))
 		return type.includes(val) ? val : fallback;
 	
-	if (typeof type === 'function')
-		return type(val);
+	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) {
@@ -84,6 +87,24 @@ export function getArg(el, attributeName, defaultValue=undefined, type=ArgType.S
 	}
 }
 
+
+/**
+ * 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});
+ * }
+ */
+export function setArgs(el, args, types) {
+	for (let name in args)
+		this[name] = getArg(el, name, args[name], types[name] || ArgType.String);
+}
+
+
 /**
  * @enum */
 var ArgType = {

package/src/{solarite/h.js → h.js}

@@ -1,7 +1,7 @@
 import Template from "./Template.js";
 import Util from "./Util.js";
 import Globals from "./Globals.js";
-import {assert} from "../util/Errors.js";
+import {assert} from "./assert.js";
 
 /**
  * Convert strings to HTMLNodes.
@@ -35,6 +35,8 @@ import {assert} from "../util/Errors.js";
  * @return {Node|HTMLElement|Template} */
 export default function h(htmlStrings=undefined, ...exprs) {
 
+	if (htmlStrings === undefined && !exprs.length && arguments.length)
+		throw new Error('h() cannot be called with undefined.');
 
 	// TODO: Make this a more flat if/else and call other functions for the logic.
 	if (htmlStrings instanceof Node) {
@@ -57,7 +59,7 @@ export default function h(htmlStrings=undefined, ...exprs) {
 		}
 
 		// 2. Render template created by #4 to element.
-		else if (exprs[0] instanceof Template) {
+		else { // instanceof Template
 			let options = exprs[1];
 			template.render(parent, options);
 
@@ -68,16 +70,6 @@ export default function h(htmlStrings=undefined, ...exprs) {
 				parent.append(this.rootNg.getParentNode());
 			}
 		}
-
-
-
-		// null for expr[0], remove whole element.
-		   // This path never happens?
-		else {
-			throw new Error('unsupported');
-			//let ngm = NodeGroupManager.get(parent);
-			//ngm.render(null, exprs[1])
-		}
 	}
 
 	// 3. Path if used as a template tag.

package/src/unused/FastLookupArray.js

@@ -0,0 +1,54 @@
+/**
+ * partialUpdate test is 20% slower when using this, even before I override any methods!*/
+export default class FastLookupArray extends Array {
+	constructor() {
+		super(...arguments)
+		this.indexMap = new Map(); // You can replace with WeakMap() but ensure only objects are added.
+
+	}
+
+	push(item) { // doesn't support pushing multiple
+		if (!this.indexMap.has(item)) {
+			this[this.length] = item;
+			this.indexMap.set(item, this.length - 1);
+		}
+	}
+
+	indexOf(item) {
+		return this.indexMap.get(item) || -1;
+	}
+
+	remove(item) {
+		const index = this.indexOf(item);
+		if (index !== -1) {
+			this.splice(index, 1);
+			this.indexMap.delete(item);
+
+			// Adjust the map indices for the items after the removed one
+			for (let i = index; i < this.length; i++)
+				this.indexMap.set(this[i], i);
+		}
+	}
+
+	insertBefore(referenceItem, newItem) {
+		const refIndex = this.indexOf(referenceItem);
+		if (refIndex !== -1) {
+			this.splice(refIndex, 0, newItem);
+			this.indexMap.set(newItem, refIndex);
+
+			// Adjust the map indices for the items after the inserted one
+			for (let i = refIndex + 1; i < this.length; i++)
+				this.indexMap.set(this[i], i);
+		}
+	}
+
+	set(index, item) {
+		const currentItem = this[index];
+		if (currentItem !== undefined)
+			this.indexMap.delete(currentItem);
+		this[index] = item;
+		this.indexMap.set(item, index);
+	}
+
+	// TODO: Override splice?
+}