solarite 0.4.0 → 0.5.0

package/src/RootNodeGroup.js

@@ -1,153 +1,8 @@
-import Globals from './Globals.js';
 import NodeGroup from './NodeGroup.js';
 
-
 export default class RootNodeGroup extends NodeGroup {
 
-	/**
-	 * Root node at the top of the hierarchy.
-	 * @type {HTMLElement} */
-	root;
-
-	/**
-	 * When we call renerWatched() we re-render these expressions, then clear this to a new Map()
-	 * @type {Map<ExprPath, ValueOp|WholeArrayOp|ArraySpliceOp[]>} */
-	exprsToRender = new Map();
-
-	/**
-	 * @param template {Template}
-	 * @param el {?HTMLElement} Optional, pre-existing htmlElement tat will be the root.
-	 * @param options {?object} */
-	constructor(template, el, options) {
-		super(template);
-
-		this.options = options;
-
-		let [fragment, shell] = this.populateFromTemplate(template);
-
-		let startingPathDepth = 0;
-
-
-		if (fragment instanceof Text) {
-
-			if (el) {
-				this.startNode = el;
-				this.endNode = el;
-				if (fragment.nodeValue.length)
-					el.append(fragment);
-				this.root = el;
-			}
-			else
-				throw new Error('Cannot create a standalone text node');
-			Globals.nodeGroups.set(this.root, this);
-		}
-
-
-		else {
-
-			// If adding NodeGroup to an element.
-			if (el) {
-				this.root = el;
-
-				// Save slot children
-				let slotChildren;
-				if (el.childNodes.length) {
-					slotChildren = Globals.doc.createDocumentFragment();
-					slotChildren.append(...el.childNodes);
-				}
-
-				// If el should replace the root node of the fragment.
-				if (isReplaceEl(fragment, el)) {
-					el.append(...fragment.children[0].childNodes);
-
-					// Copy attributes
-					for (let attrib of fragment.children[0].attributes)
-						if (!el.hasAttribute(attrib.name) && attrib.name !== 'solarite-placeholder')
-							el.setAttribute(attrib.name, attrib.value);
-
-					// Go one level deeper into all of shell's paths.
-					startingPathDepth = 1;
-				}
-
-				else {
-					let isEmpty = fragment.childNodes.length === 1 && fragment.childNodes[0].nodeType === 3 && fragment.childNodes[0].textContent === '';
-					if (!isEmpty)
-						el.append(...fragment.childNodes);
-				}
-
-				// Setup children
-				if (slotChildren) {
-
-					// Named slots
-					for (let slot of el.querySelectorAll('slot[name]')) {
-						let name = slot.getAttribute('name')
-						if (name) {
-							let slotChildren2 = slotChildren.querySelectorAll(`[slot='${name}']`);
-							slot.append(...slotChildren2);
-						}
-					}
-
-					// Unnamed slots
-					let unamedSlot = el.querySelector('slot:not([name])')
-					if (unamedSlot)
-						unamedSlot.append(slotChildren);
-
-					// No slots
-					else
-						el.append(slotChildren);
-				}
-
-				this.startNode = el;
-				this.endNode = el;
-			}
-
-			// Instantiate as a standalone element.
-			else {
-				let singleEl = getSingleEl(fragment);
-				this.root = singleEl || fragment; // We return the whole fragment when calling h() with a collection of nodes.
-
-				if (singleEl)
-					startingPathDepth = 1;
-			}
-			Globals.nodeGroups.set(this.root, this);
-			this.updatePaths(this.root, shell.paths, startingPathDepth);
-
-			// Static web components can sometimes have children created via expressions.
-			// But calling applyExprs() will mess up the shell's path to them.
-			// So we find them first, then call activateStaticComponents() after their children have been created.
-			this.staticComponents = this.findStaticComponents(this.root, shell, startingPathDepth);
-
-			this.activateEmbeds(this.root, shell, startingPathDepth);
-
-			// Apply exprs
-			this.applyExprs(template.exprs);
-
-			this.instantiateStaticComponents(this.staticComponents);
-		}
-
-
-	}
-}
-
-function getSingleEl(fragment) {
-	let nonempty = [];
-	for (let n of fragment.childNodes) {
-		if (n.nodeType === 1 || n.nodeType === 3 && n.textContent.trim().length) {
-			if (nonempty.length)
-				return null;
-			nonempty.push(n);
-		}
-	}
-	return nonempty[0];
-}
+	// Used only by watch.js
+	exprsToRender;
 
-/**
- * Does the fragment have one child that's an element matching the tagname of el?
- * @param fragment {DocumentFragment}
- * @param el {HTMLElement}
- * @returns {boolean} */
-function isReplaceEl(fragment, el) {
-	return fragment.children.length===1
-		&& el.tagName.includes('-') // TODO: Check for solarite-placeholder attribute instead?
-		&& fragment.children[0].tagName.replace('-SOLARITE-PLACEHOLDER', '') === el.tagName;
 }

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,6 +49,7 @@ 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 = Globals.doc.createTextNode(html[0]);
 			return;
@@ -59,11 +57,11 @@ export default class Shell {
 
 
 		// 1.  Add placeholders
-		let joinedHtml = Shell.addPlaceholders(html);
+		let htmlWithPlaceholders = Shell.addPlaceholders(html);
 
 		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;
+		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(Globals.doc.createTextNode(''))
 		this.fragment = template.content;
@@ -75,20 +73,28 @@ export default class Shell {
 		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,15 +102,36 @@ 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 === '!✨!') {
 
@@ -114,7 +141,7 @@ export default class Shell {
 				// Get or create nodeBefore.
 				let nodeBefore = node.previousSibling; // Can be the same as another Path's nodeMarker.
 				if (!nodeBefore) {
-					nodeBefore = Globals.doc.createComment('ExprPath:'+this.paths.length);
+					nodeBefore = Globals.doc.createComment('Path:'+this.paths.length);
 					node.parentNode.insertBefore(nodeBefore, node)
 				}
 				/*#IFDEV*/assert(nodeBefore);/*#ENDIF*/
@@ -130,11 +157,11 @@ 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 ++;
 			}
@@ -148,18 +175,17 @@ export default class Shell {
 			// 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) {
 
@@ -172,7 +198,7 @@ export default class Shell {
 					}
 
 					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 ++;
 
@@ -191,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.type === ExprPathType.Event) && path.nodeMarker.nodeType === 1 &&
-				(path.nodeMarker.tagName.includes('-') || path.nodeMarker.hasAttribute('is'))) {
-				path.isComponent = true;
-			}
+			// 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++) {
@@ -243,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;
 			});
@@ -254,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('');
 	}
 
 	/**
@@ -272,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]');
 
@@ -286,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

@@ -4,63 +4,103 @@
  * https://vorticode.github.io/solarite/
  */
 
-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;
+export interface RenderOptions {
+    styles?: boolean;
+    scripts?: boolean;
+    ids?: boolean;
+    render?: boolean;
+}
 
-// Deprecated:
-export function t(html: string): Template;
+/**
+ * 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};
 
-export const ArgType: {
-	Bool: string;
-	Int: string;
-	Float: string;
-	String: string;
-	Json: string;
-	Eval: string;
+/**
+ * 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>;
 }
 
-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;
+/**
+ * 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;
 };