@webtides/element-js 0.7.3 → 1.0.0-alpha.2

package/src/dom-parts/AttributePart.js

@@ -0,0 +1,160 @@
+import { Part } from './Part.js';
+
+/**
+ * @param {Element} node
+ * @param {String} name
+ * @param {Boolean} oldValue
+ * @return {(function(*): void)|*}
+ */
+const processBooleanAttribute = (node, name, oldValue) => {
+	// TODO: It would be better if the ?boolean= attribute would not be there in the first place...
+	node.removeAttribute(`?${name}`);
+	return (newValue) => {
+		const value = !!newValue?.valueOf() && newValue !== 'false';
+		if (oldValue !== value) {
+			node.toggleAttribute(name, (oldValue = !!value));
+		}
+	};
+};
+
+/**
+ * @param {Element} node
+ * @param {String} name
+ * @return {(function(*): void)|*}
+ */
+const processPropertyAttribute = (node, name) => {
+	// TODO: It would be better if the .property= attribute would not be there in the first place...
+	node.removeAttribute(`.${name}`);
+	return (value) => {
+		node[name] = value;
+	};
+};
+
+/**
+ * @param {Element} node
+ * @param {String} name
+ * @return {(function(*): void)|*}
+ */
+const processEventAttribute = (node, name) => {
+	// TODO: It would be better if the event attribute would not be there in the first place...
+	node.removeAttribute(name);
+
+	let oldValue = undefined;
+	let type = name.startsWith('@') ? name.slice(1) : name.toLowerCase().slice(2);
+
+	return (newValue) => {
+		if (oldValue !== newValue) {
+			if (oldValue) node.removeEventListener(type, oldValue);
+			if ((oldValue = newValue)) node.addEventListener(type, oldValue);
+		}
+	};
+};
+
+/**
+ * @param {Element} node
+ * @param {String} name
+ * @return {(function(*): void)|*}
+ */
+const processAttribute = (node, name) => {
+	let oldValue,
+		orphan = true;
+	const attributeNode = globalThis.document?.createAttributeNS(null, name);
+	return (newValue) => {
+		const value = newValue?.valueOf();
+		if (oldValue !== value) {
+			if ((oldValue = value) == null) {
+				if (!orphan) {
+					node.removeAttributeNode(attributeNode);
+					orphan = true;
+				}
+			} else {
+				attributeNode.value = value;
+				if (orphan) {
+					node.setAttributeNodeNS(attributeNode);
+					orphan = false;
+				}
+			}
+		}
+	};
+};
+
+/**
+ * @param {Element} node
+ * @param {String} name
+ * @return {(function(*): void)|*}
+ */
+export const processAttributePart = (node, name) => {
+	// boolean attribute: ?boolean=${...}
+	if (name.startsWith('?')) {
+		return processBooleanAttribute(node, name.slice(1), false);
+	}
+
+	// property attribute: .property=${...}
+	if (name.startsWith('.')) {
+		return processPropertyAttribute(node, name.slice(1));
+	}
+
+	// event attribute: @event=${...} || "old school" event attribute: onevent=${...}
+	if (name.startsWith('@') || name.startsWith('on')) {
+		return processEventAttribute(node, name);
+	}
+
+	// normal "string" attribute: attribute=${...}
+	return processAttribute(node, name);
+};
+
+/**
+ * For updating a single attribute
+ */
+export class AttributePart extends Part {
+	name = undefined;
+	interpolations = 1;
+	values = [];
+	currentValueIndex = 0;
+	initialValue = undefined;
+
+	/**
+	 * @param {Node} node
+	 * @param {String} name
+	 * @param {String} initialValue
+	 */
+	constructor(node, name, initialValue) {
+		super();
+		this.name = name;
+		this.initialValue = initialValue;
+		this.processor = processAttributePart(node.nextElementSibling, this.name);
+	}
+
+	/**
+	 * @param {Node} node
+	 */
+	addNode(node) {
+		this.interpolations++;
+		// TODO: what about the comment node? It will always be the first for now...
+	}
+
+	/**
+	 * @param {string | number | bigint | boolean | undefined | symbol | null} value
+	 */
+	update(value) {
+		// If we only have one sole interpolation, we can just apply the update
+		if (this.initialValue === '\x03') {
+			this.processor(value);
+			return;
+		}
+
+		// Instead of applying the update immediately, we check if the part has multiple interpolations
+		// and store the values for each interpolation in a list
+		this.values[this.currentValueIndex++] = value;
+
+		// Only the last call to update (for the last interpolation) will actually trigger the update
+		// on the DOM processor. Here we can reset everything before the next round of updates
+		if (this.interpolations === this.currentValueIndex) {
+			this.currentValueIndex = 0;
+			let replaceIndex = 0;
+			// Note: this will coarse the values into strings, but it's probably ok since there can only be multiple values in string attributes?!
+			const parsedValue = this.initialValue.replace(/\x03/g, () => this.values[replaceIndex++]);
+			this.processor(parsedValue);
+		}
+	}
+}

package/src/dom-parts/ChildNodePart.js

@@ -0,0 +1,343 @@
+import { COMMENT_NODE, ELEMENT_NODE } from '../util/DOMHelper.js';
+import { Part } from './Part.js';
+import { TemplateResult } from './TemplateResult.js';
+import { TemplatePart } from './TemplatePart.js';
+
+/**
+ * @param {Node | TemplatePart | any[]} node
+ * @return {ChildNode}
+ */
+const removeChildNodes = (node) => {
+	const range = globalThis.document?.createRange();
+	const firstChild = Array.isArray(node)
+		? node[0]
+		: node instanceof TemplatePart
+		? node.childNodes[0]
+		: node.firstChild;
+	const lastChild = Array.isArray(node)
+		? node[node.length - 1]
+		: node instanceof TemplatePart
+		? node.childNodes[node.childNodes.length - 1]
+		: node.lastChild;
+	range.setStartAfter(firstChild);
+	range.setEndAfter(lastChild);
+	range.deleteContents();
+	return firstChild;
+};
+
+/**
+ * @param {Element} commentNode
+ */
+const removeNodesBetweenComments = (commentNode) => {
+	while (commentNode.previousSibling) {
+		if (
+			commentNode.previousSibling.nodeType === COMMENT_NODE &&
+			commentNode.previousSibling.data === commentNode.data.replace('/', '')
+		) {
+			break;
+		}
+		commentNode.parentNode.removeChild(commentNode.previousSibling);
+	}
+};
+
+/**
+ * @param {Node} parentNode
+ * @param {Node[]} domChildNodes
+ * @param {Node[]} templateChildNodes
+ * @param {Node} anchorNode
+ * @return {Node[]}
+ */
+const diffChildNodes = function (parentNode, domChildNodes, templateChildNodes, anchorNode) {
+	// Diff each node in the child node lists
+	let length = Math.max(templateChildNodes.length, domChildNodes.length);
+	for (let index = 0; index < length; index++) {
+		let domChildNode = domChildNodes[index];
+		let templateChildNode = templateChildNodes[index];
+
+		// If the DOM node doesn't exist, append/copy the template node
+		if (!domChildNode) {
+			if (templateChildNode instanceof TemplatePart) {
+				anchorNode.before(...templateChildNode.childNodes);
+			} else if (typeof templateChildNode === 'object' && 'ELEMENT_NODE' in templateChildNode) {
+				parentNode.insertBefore(templateChildNode, anchorNode);
+			} else {
+				// TODO: this might not be performant?! Can we maybe handle this in processDomNode?!
+				// TODO: I think that we need to make ChildNodeParts from all primitive values as well
+				parentNode.insertBefore(document.createTextNode(templateChildNode), anchorNode);
+			}
+			continue;
+		}
+
+		// If the template node doesn't exist, remove the node in the DOM
+		if (!templateChildNode) {
+			parentNode.removeChild(removeChildNodes(domChildNode));
+			continue;
+		}
+
+		// If DOM node is equal to the template node, don't do anything
+		// if (domChildNode.isEqualNode(templateChildNode)) {
+		if (domChildNode === templateChildNode) {
+			continue;
+		}
+
+		// If node types are not the same, replace the DOM node with the template node
+		if (templateChildNode.nodeType !== domChildNode.nodeType) {
+			parentNode.replaceChild(templateChildNode, domChildNode);
+			continue;
+		}
+
+		// If the element tag names are not the same, replace the DOM node with the template node
+		if (templateChildNode.nodeType === ELEMENT_NODE && templateChildNode.tagName !== domChildNode.tagName) {
+			parentNode.replaceChild(templateChildNode, domChildNode);
+			continue;
+		}
+
+		// If the node is an SVG element, don't even think about diffing it, just replace it
+		if (templateChildNode.nodeType === ELEMENT_NODE && templateChildNode.tagName === 'SVG') {
+			parentNode.replaceChild(templateChildNode, domChildNode);
+			continue;
+		}
+	}
+	return templateChildNodes;
+};
+
+/**
+ * @param {Node} comment
+ * @param {TemplatePart | any[] | any} initialValue
+ * @return {(function(*): void)|*}
+ */
+export const processNodePart = (comment, initialValue) => {
+	let nodes = [];
+	let oldValue = initialValue instanceof TemplatePart ? [...initialValue.childNodes] : initialValue;
+	// this is for string values to be inserted into the DOM. A cached TextNode will be used so that we don't have to constantly create new DOM nodes.
+	let cachedTextNode = undefined;
+
+	const processNodeValue = (newValue) => {
+		switch (typeof newValue) {
+			// primitives are handled as text content
+			case 'string':
+			case 'number':
+			case 'boolean':
+				if (oldValue !== newValue) {
+					oldValue = newValue;
+					if (!cachedTextNode) cachedTextNode = globalThis.document?.createTextNode('');
+					cachedTextNode.data = newValue;
+
+					if (comment.previousSibling?.data === comment.data.replace('/', '')) {
+						// the part is empty - we haven't rendered it yet
+						comment.parentNode.insertBefore(cachedTextNode, comment);
+					} else {
+						// the part was already rendered (either server side or on the client)
+						comment.previousSibling.data = newValue;
+					}
+
+					nodes = [cachedTextNode];
+				}
+				break;
+			// null (= typeof "object") and undefined are used to clean up previous content
+			case 'object':
+			case 'undefined':
+				if (newValue === null || newValue === undefined) {
+					if (oldValue !== newValue) {
+						oldValue = newValue;
+						removeNodesBetweenComments(comment);
+						nodes = [];
+					}
+					break;
+				}
+				if (Array.isArray(newValue)) {
+					if (newValue.length === 0) {
+						removeNodesBetweenComments(comment);
+						nodes = [];
+					} else {
+						nodes = diffChildNodes(comment.parentNode, oldValue || [], newValue, comment);
+					}
+					oldValue = newValue;
+					break;
+				}
+				// if the new value is a node or a fragment, and it's different from the live node, then it's diffed.
+				if (oldValue !== newValue) {
+					if ('ELEMENT_NODE' in newValue) {
+						oldValue = newValue;
+						nodes = diffChildNodes(comment.parentNode, nodes, [newValue], comment);
+					} else if (newValue instanceof TemplatePart) {
+						oldValue = newValue;
+						nodes = diffChildNodes(comment.parentNode, nodes, [...newValue.childNodes], comment);
+					} else {
+						console.warn('Could not process value', newValue);
+					}
+				}
+				break;
+			case 'function':
+				processNodeValue(newValue(comment));
+				break;
+		}
+	};
+
+	return processNodeValue;
+};
+
+/**
+ * For updating a text node, a sequence of child nodes or an array of `any` values
+ */
+export class ChildNodePart extends Part {
+	/** @type {Node | undefined} */
+	startNode = undefined;
+
+	/** @type {Node | undefined} */
+	endNode = undefined;
+
+	// TODO: this is only for array values
+	/** @type {Part[]} */
+	parts = [];
+
+	// TODO: this is only for TemplatePart values
+	templatePart = undefined;
+
+	// TODO: maybe we can store a generic vale|parsedValue that can be either parts[] | templatePart | any
+
+	/** @type {Node[]} */
+	childNodes = [];
+
+	/**
+	 * @param {Node} startNode - the start comment marker node
+	 * @param {any | any[]} value
+	 */
+	constructor(startNode, value) {
+		if (startNode && startNode?.nodeType !== COMMENT_NODE) {
+			throw new Error('ChildNodePart: startNode is not a comment node');
+		}
+
+		super();
+
+		let serverSideRendered = false;
+		if (startNode) {
+			const placeholder = startNode.data;
+			const childNodes = [startNode];
+			let childNode = startNode.nextSibling;
+			while (childNode && childNode.data !== `/${placeholder}`) {
+				childNodes.push(childNode);
+				childNode = childNode.nextSibling;
+			}
+
+			const endNode = childNode;
+			childNodes.push(endNode);
+
+			// if not SSRed, childNodes will only ever have two comment nodes, the start and the end marker
+			if (childNodes.length > 2) {
+				serverSideRendered = true;
+			}
+
+			this.childNodes = childNodes;
+			this.startNode = startNode;
+			this.endNode = endNode;
+		}
+
+		// value can become array | TemplatePart | any
+		const initialValue = this.parseValue(value);
+
+		if (this.endNode) {
+			this.processor = processNodePart(this.endNode, serverSideRendered ? initialValue : undefined);
+		}
+
+		if (!serverSideRendered) {
+			if (value instanceof TemplateResult || Array.isArray(value)) {
+				this.updateParts(value);
+			}
+
+			// We need a childNodes list that is NOT live so that we don't lose elements when they get removed from the dom and we can (re)add them back in later.
+			this.childNodes = [...this.childNodes];
+			this.processor?.(initialValue);
+		}
+	}
+
+	/**
+	 * @param {any} value
+	 * @return {*}
+	 */
+	update(value) {
+		const parsedValue = this.parseValue(value);
+
+		if (value instanceof TemplateResult || Array.isArray(value)) {
+			this.updateParts(value);
+		}
+
+		this.processor?.(parsedValue);
+	}
+
+	/**
+	 * @param {TemplateResult | any[]} value
+	 */
+	updateParts(value) {
+		if (value instanceof TemplateResult) {
+			this.templatePart.update(value);
+		}
+		if (Array.isArray(value)) {
+			for (let index = 0; index < value.length; index++) {
+				this.parts[index]?.update(value[index]);
+			}
+		}
+	}
+
+	/**
+	 * @param {TemplateResult | any[] | any} value
+	 * @return {TemplatePart | any[] | any}
+	 */
+	parseValue(value) {
+		if (value instanceof TemplateResult) {
+			if (!this.templatePart) {
+				const templatePartCommentNodes = this.childNodes?.filter(
+					(node) => node && node.nodeType === COMMENT_NODE && node.data === 'template-part',
+				);
+				const startNode = templatePartCommentNodes[0];
+				this.templatePart = new TemplatePart(startNode, value);
+			}
+			return this.templatePart;
+		}
+		if (Array.isArray(value)) {
+			return this.parseArray(value);
+		}
+		return value;
+	}
+
+	/**
+	 * Nested TemplateResults values need to be unrolled in order for update functions to be able to process them
+	 * @param {any[]} values
+	 * @return {any[]}
+	 */
+	parseArray(values) {
+		const parsedValues = [];
+		for (let index = 0; index < values.length; index++) {
+			let value = values[index];
+
+			if (value instanceof TemplateResult) {
+				let templatePart = this.parts[index];
+				if (!templatePart) {
+					const templatePartCommentNodes = this.childNodes?.filter(
+						(node) => node && node.nodeType === COMMENT_NODE && node.data === 'template-part',
+					);
+					const startNode = templatePartCommentNodes[index];
+					templatePart = new TemplatePart(startNode, value);
+					this.parts[index] = templatePart;
+				}
+				parsedValues[index] = templatePart;
+			} else if (Array.isArray(value)) {
+				let childNodePart = this.parts[index];
+				if (!childNodePart) {
+					// TODO: this seems not correct :(
+					const templatePartCommentNodes = this.childNodes?.filter(
+						(node) => node && node.nodeType === COMMENT_NODE && node.data === 'template-part',
+					);
+					const startNode = templatePartCommentNodes[index];
+					childNodePart = new ChildNodePart(startNode, value);
+					this.parts[index] = childNodePart;
+				}
+				parsedValues[index] = childNodePart;
+			} else {
+				parsedValues[index] = typeof value === 'function' ? value() : value;
+			}
+		}
+
+		return parsedValues;
+	}
+}

package/src/dom-parts/NodePart.js

@@ -0,0 +1,37 @@
+import { Part } from './Part.js';
+import { isObjectLike } from '../util/AttributeParser.js';
+
+/**
+ * For updating a directive on a node
+ */
+export class NodePart extends Part {
+	/** @type {Node} */
+	node = undefined;
+
+	/** @type {Directive} */
+	directive = undefined;
+
+	/**
+	 * @param {Node} node
+	 * @param {() => {}} initialValue
+	 */
+	constructor(node, initialValue) {
+		if (!isObjectLike(initialValue) && !initialValue.directiveClass) {
+			throw new Error(
+				'NodePart: value is not a wrapped directive function. You must wrap you custom directive class with the defineDirective function.',
+			);
+		}
+		super();
+		this.node = node.nextElementSibling;
+		const { directiveClass, values } = initialValue;
+		this.directive = new directiveClass(node.nextElementSibling);
+	}
+
+	/**
+	 * @param {() => {}} value
+	 */
+	update(value) {
+		const { directiveClass, values } = value;
+		this.directive.update(...values);
+	}
+}

package/src/dom-parts/Part.js

@@ -0,0 +1,12 @@
+/**
+ * @abstract
+ */
+export class Part {
+	processor = undefined;
+
+	/**
+	 * @abstract
+	 * @param {TemplateResult | any[] | any} value
+	 */
+	update(value) {}
+}

package/src/dom-parts/TemplatePart.js

@@ -0,0 +1,140 @@
+import { COMMENT_NODE, convertStringToTemplate } from '../util/DOMHelper.js';
+import { Part } from './Part.js';
+import { TemplateResult } from './TemplateResult.js';
+import { AttributePart } from './AttributePart.js';
+import { ChildNodePart } from './ChildNodePart.js';
+import { NodePart } from './NodePart.js';
+
+/** @type {Map<TemplateStringsArray, Part[]>} */
+const partsCache = new WeakMap();
+
+/** @type {Map<TemplateStringsArray, DocumentFragment>} */
+const fragmentsCache = new WeakMap();
+
+export class TemplatePart extends Part {
+	/** @type {Part[]} */
+	parts = [];
+
+	/** @type {TemplateStringsArray} */
+	strings = undefined;
+
+	/** @type {Node[]} */
+	childNodes = [];
+
+	/**
+	 * @param {Node} startNode - the start comment marker node
+	 * @param {TemplateResult} value
+	 */
+	constructor(startNode, value) {
+		if (startNode && startNode?.nodeType !== COMMENT_NODE) {
+			throw new Error('TemplatePart: startNode is not a comment node');
+		}
+
+		super();
+
+		let serverSideRendered = false;
+		if (startNode) {
+			const placeholder = startNode.data;
+			const childNodes = [startNode];
+			let childNode = startNode.nextSibling;
+			while (childNode && childNode.data !== `/${placeholder}`) {
+				childNodes.push(childNode);
+				childNode = childNode.nextSibling;
+			}
+
+			const endNode = childNode;
+			childNodes.push(endNode);
+
+			// if not SSRed, childNodes will only ever have two comment nodes, the start and the end marker
+			if (childNodes.length > 2) {
+				serverSideRendered = true;
+				this.childNodes = childNodes;
+			}
+		}
+
+		this.parseValue(value);
+
+		if (!serverSideRendered) {
+			this.updateParts(value.values);
+			// We need a childNodes list that is NOT live so that we don't loose elements when they get removed from the dom and we can (re)add them back in later.
+			this.childNodes = [...this.childNodes];
+		}
+	}
+
+	/**
+	 * @param {TemplateResult} value
+	 */
+	update(value) {
+		this.parseValue(value);
+		this.updateParts(value.values);
+	}
+
+	/**
+	 * @param {any[]} values
+	 */
+	updateParts(values) {
+		for (let index = 0; index < values.length; index++) {
+			this.parts[index]?.update(values[index]);
+		}
+	}
+
+	/**
+	 * @param {TemplateResult} templateResult
+	 */
+	parseValue(templateResult) {
+		if (this.strings !== templateResult.strings) {
+			if (this.childNodes.length === 0) {
+				let fragment = fragmentsCache.get(templateResult.strings);
+				if (!fragment) {
+					fragment = this.parseFragment(templateResult);
+					fragmentsCache.set(templateResult.strings, fragment);
+				}
+				const importedFragment = globalThis.document?.importNode(fragment, true);
+				this.childNodes = importedFragment.childNodes;
+			}
+
+			let parts = partsCache.get(templateResult.strings);
+			if (!parts) {
+				parts = templateResult.parseParts(this.childNodes);
+				partsCache.set(templateResult.strings, parts);
+			}
+
+			/** @type AttributePart */
+			let previousAttributePart = undefined;
+			this.parts = parts.map((part, index) => {
+				// We currently need the path because the fragment will be cloned via importNode and therefore the node will be a different one
+				const node = part.path.reduceRight(({ childNodes }, i) => childNodes[i], this);
+
+				if (part.type === 'node') {
+					return new ChildNodePart(node, templateResult.values[index]);
+					// TODO: the nodes in the parts array also have nested parts information... could we start creating the nested parts here as well?
+				}
+				if (part.type === 'attribute') {
+					// If we have multiple attribute parts with the same name, it means we have multiple
+					// interpolations inside that attribute. Instead of creating a new part, we will return the same
+					// as before and let it defer the update until the last interpolation gets updated
+					if (previousAttributePart && previousAttributePart.name === part.name) {
+						previousAttributePart.addNode(node);
+						return previousAttributePart;
+					}
+					return (previousAttributePart = new AttributePart(node, part.name, part.initialValue));
+				}
+				if (part.type === 'directive') {
+					return new NodePart(node, templateResult.values[index]);
+				}
+
+				throw `cannot map part: ${part}`;
+			});
+			this.strings = templateResult.strings;
+		}
+	}
+
+	/**
+	 * @param {TemplateResult} templateResult
+	 * @return {DocumentFragment}
+	 */
+	parseFragment(templateResult) {
+		const templateString = templateResult.templateString;
+		return convertStringToTemplate(templateString);
+	}
+}