@webtides/element-js 1.0.0-alpha.9 → 1.1.0

package/src/util/DOMHelper.js

@@ -15,14 +15,14 @@ export const DOCUMENT_FRAGMENT_NODE = 11;
  * @return {number[]}
  */
 export const getNodePath = (node) => {
-	const path = [];
-	let parentNode = node.parentNode;
-	while (parentNode) {
-		path.push([...parentNode.childNodes].indexOf(node));
-		node = parentNode;
-		parentNode = node.parentNode;
-	}
-	return path;
+    const path = [];
+    let parentNode = node.parentNode;
+    while (parentNode) {
+        path.push([...parentNode.childNodes].indexOf(node));
+        node = parentNode;
+        parentNode = node.parentNode;
+    }
+    return path;
 };
 
 /**
@@ -31,14 +31,14 @@ export const getNodePath = (node) => {
  * @returns {Node[]}
  */
 export function getAllParentNodes(domNode) {
-	let node = domNode.parentElement;
-	let parents = [];
-	while (node) {
-		parents.unshift(node); // adds node to the beginning of parents
-		node = node.parentElement;
-	}
-
-	return parents;
+    let node = domNode.parentElement;
+    let parents = [];
+    while (node) {
+        parents.unshift(node); // adds node to the beginning of parents
+        node = node.parentElement;
+    }
+
+    return parents;
 }
 
 /**
@@ -48,16 +48,16 @@ export function getAllParentNodes(domNode) {
  * @returns {ShadowRoot | HTMLElement}
  */
 export function getShadowParentOrBody(element) {
-	if (element instanceof ShadowRoot) {
-		return element;
-	}
-
-	while (element.parentNode && (element = element.parentNode)) {
-		if (element instanceof ShadowRoot) {
-			return element;
-		}
-	}
-	return document.body;
+    if (element instanceof ShadowRoot) {
+        return element;
+    }
+
+    while (element.parentNode && (element = element.parentNode)) {
+        if (element instanceof ShadowRoot) {
+            return element;
+        }
+    }
+    return document.body;
 }
 
 // TODO: add function for getClosestParentOfNodeType('custom-element')
@@ -68,11 +68,11 @@ export function getShadowParentOrBody(element) {
  * @returns {Node}
  */
 export function getClosestParentCustomElementNode(domNode) {
-	const customElementParents = getAllParentNodes(domNode).filter((node) => {
-		return node.localName && node.localName.indexOf('-') !== -1;
-	});
+    const customElementParents = getAllParentNodes(domNode).filter((node) => {
+        return node.localName && node.localName.indexOf('-') !== -1;
+    });
 
-	return customElementParents.pop();
+    return customElementParents.pop();
 }
 
 /**
@@ -82,17 +82,17 @@ export function getClosestParentCustomElementNode(domNode) {
  * @return {Node[]}
  */
 export function getAllElementChildren(domNode, instanceOfFilter = HTMLElement) {
-	const nodeIterator = document.createNodeIterator(domNode, NodeFilter.SHOW_ELEMENT, (node) =>
-		node.nodeName.includes('-') && node instanceof instanceOfFilter
-			? NodeFilter.FILTER_ACCEPT
-			: NodeFilter.FILTER_REJECT,
-	);
-	const customElements = [];
-	let currentNode;
-	while ((currentNode = nodeIterator.nextNode())) {
-		customElements.push(currentNode);
-	}
-	return customElements;
+    const nodeIterator = document.createNodeIterator(domNode, NodeFilter.SHOW_ELEMENT, (node) =>
+        node.nodeName.includes('-') && node instanceof instanceOfFilter
+            ? NodeFilter.FILTER_ACCEPT
+            : NodeFilter.FILTER_REJECT,
+    );
+    const customElements = [];
+    let currentNode;
+    while ((currentNode = nodeIterator.nextNode())) {
+        customElements.push(currentNode);
+    }
+    return customElements;
 }
 
 /**
@@ -102,9 +102,9 @@ export function getAllElementChildren(domNode, instanceOfFilter = HTMLElement) {
  * @returns {boolean}
  */
 export function isOfSameNodeType(nodeA, nodeB) {
-	if (!nodeA && !nodeA.localName) return false;
-	if (!nodeB && !nodeB.localName) return false;
-	return nodeA.localName === nodeB.localName;
+    if (!nodeA && !nodeA.localName) return false;
+    if (!nodeB && !nodeB.localName) return false;
+    return nodeA.localName === nodeB.localName;
 }
 
 /**
@@ -112,7 +112,7 @@ export function isOfSameNodeType(nodeA, nodeB) {
  * @returns {boolean}
  */
 export const supportsAdoptingStyleSheets = () => {
-	return 'adoptedStyleSheets' in Document.prototype && 'replace' in CSSStyleSheet.prototype;
+    return 'adoptedStyleSheets' in Document.prototype && 'replace' in CSSStyleSheet.prototype;
 };
 
 /**
@@ -121,17 +121,17 @@ export const supportsAdoptingStyleSheets = () => {
  * @returns {boolean}
  */
 export const hasChildNodes = (node) => {
-	const childNodesLength = node.childNodes.length;
+    const childNodesLength = node.childNodes.length;
 
-	if (childNodesLength === 0) return false;
+    if (childNodesLength === 0) return false;
 
-	if (childNodesLength === 1 && node.firstChild.nodeType === 3 && node.firstChild.textContent.trim() === '')
-		return false;
+    if (childNodesLength === 1 && node.firstChild.nodeType === 3 && node.firstChild.textContent.trim() === '')
+        return false;
 
-	// children will not contain text nodes...
-	if (childNodesLength > 0) return true;
+    // children will not contain text nodes...
+    if (childNodesLength > 0) return true;
 
-	// TODO: check if more than 1 child nodes, but all childnodes are whitespace text ndoes?!
+    // TODO: check if more than 1 child nodes, but all childnodes are whitespace text ndoes?!
 };
 
 /**
@@ -140,9 +140,9 @@ export const hasChildNodes = (node) => {
  * @returns {HTMLElement}
  */
 export const convertStringToHTML = (template) => {
-	const parser = new DOMParser();
-	const document = parser.parseFromString(template.toString(), 'text/html');
-	return document.body;
+    const parser = new DOMParser();
+    const document = parser.parseFromString(template.toString(), 'text/html');
+    return document.body;
 };
 
 /**
@@ -152,10 +152,9 @@ export const convertStringToHTML = (template) => {
  * @return {DocumentFragment}
  */
 export const convertStringToTemplate = (string) => {
-	const template = globalThis.document?.createElement('template');
-	// TODO: ensure that SSRed and CSRed templates have the same amount of whitespace text nodes
-	template.innerHTML = string.trimStart().trimEnd();
-	return template.content;
+    const template = globalThis.document?.createElement('template');
+    template.innerHTML = string;
+    return template.content;
 };
 
 /**
@@ -164,25 +163,25 @@ export const convertStringToTemplate = (string) => {
  * @param {Element} domElement - The existing DOM node
  */
 export const diffAttributes = function (templateElement, domElement) {
-	// remove or update previous attributes
-	for (/** @type {Attr} */ const attribute of Array.from(domElement.attributes)) {
-		if (templateElement.hasAttribute(attribute.name)) {
-			const oldValue = attribute.value;
-			const newValue = templateElement.getAttribute(attribute.name) || '';
-			if (oldValue !== newValue) {
-				domElement.setAttribute(attribute.name, newValue);
-			}
-		} else {
-			domElement.removeAttribute(attribute.name);
-		}
-	}
-
-	// set newly added attributes
-	for (/** @type {Attr} */ const attribute of Array.from(templateElement.attributes)) {
-		if (!domElement.hasAttribute(attribute.name)) {
-			domElement.setAttribute(attribute.name, attribute.value);
-		}
-	}
+    // remove or update previous attributes
+    for (/** @type {Attr} */ const attribute of Array.from(domElement.attributes)) {
+        if (templateElement.hasAttribute(attribute.name)) {
+            const oldValue = attribute.value;
+            const newValue = templateElement.getAttribute(attribute.name) || '';
+            if (oldValue !== newValue) {
+                domElement.setAttribute(attribute.name, newValue);
+            }
+        } else {
+            domElement.removeAttribute(attribute.name);
+        }
+    }
+
+    // set newly added attributes
+    for (/** @type {Attr} */ const attribute of Array.from(templateElement.attributes)) {
+        if (!domElement.hasAttribute(attribute.name)) {
+            domElement.setAttribute(attribute.name, attribute.value);
+        }
+    }
 };
 
 /**
@@ -192,117 +191,117 @@ export const diffAttributes = function (templateElement, domElement) {
  * @param {(Node) => Boolean} shouldDiffChildNodes
  */
 export const diffNodes = function (templateNode, domNode, shouldDiffChildNodes = (templateChildNode) => true) {
-	// If the DOM node should be empty, remove all child nodes
-	if (hasChildNodes(domNode) && !hasChildNodes(templateNode)) {
-		domNode.replaceChildren();
-		return;
-	}
-
-	// If the DOM node is empty, but should have children, add child nodes from the template node
-	if (!hasChildNodes(domNode) && hasChildNodes(templateNode)) {
-		domNode.replaceChildren(...templateNode.childNodes);
-		return;
-	}
-
-	const templateChildNodes = [...templateNode.childNodes];
-	const domChildNodes = [...domNode.childNodes];
-
-	// Diff each node in the child node lists
-	let length = Math.max(templateChildNodes.length, domChildNodes.length);
-	for (let index = 0; index < length; index++) {
-		const templateChildNode = templateChildNodes[index];
-		const domChildNode = domChildNodes[index];
-
-		// If the DOM node doesn't exist, append/copy the template node
-		if (!domChildNode) {
-			domNode.appendChild(templateChildNode);
-			continue;
-		}
-
-		// If the template node doesn't exist, remove the node in the DOM
-		if (!templateChildNode) {
-			domNode.removeChild(domChildNode);
-			continue;
-		}
-
-		// If DOM node is equal to the template node, don't do anything
-		if (domChildNode.isEqualNode(templateChildNode)) {
-			continue;
-		}
-
-		// the following two checks don't have to be correct, but it could bring as back to the fast path
-		// in the worst case we still have to compare and swap all the elements
-		// but in the best case we find the one element that should actually be inserted or removed
-		// and from there on, every node that comes after should be equal again
-
-		// fast path for removing DOM nodes - we delete the node now instead of at the end
-		if (domNode.childNodes.length > templateNode.childNodes.length) {
-			domChildNodes.splice(index, 1);
-			domNode.removeChild(domChildNode);
-			// because domChildNodes will get shorter by splicing it, everything moves up by one
-			// so the (actual) next element will have the same index now as we currently have
-			// therefore we have to adjust our counters
-			length--;
-			index--;
-
-			// we might have corrected everything and the parent nodes could be equal again
-			// if so, we can skip the rest of the child node checks
-			if (domNode.childNodes.length === templateNode.childNodes.length && domNode.isEqualNode(templateNode)) {
-				return;
-			}
-
-			continue;
-		}
-
-		// fast path for adding DOM nodes - we insert the node now instead of at the end
-		// but NOT if we already are at the end of the list of child nodes
-		if (index !== domNode.childNodes.length - 1 && domNode.childNodes.length < templateNode.childNodes.length) {
-			domChildNodes.splice(index, 0, templateChildNode);
-			domNode.insertBefore(templateChildNode, domChildNode);
-
-			// we might have corrected everything and the parent nodes could be equal again
-			// if so, we can skip the rest of the child node checks
-			if (domNode.childNodes.length === templateNode.childNodes.length && domNode.isEqualNode(templateNode)) {
-				return;
-			}
-
-			continue;
-		}
-
-		// If node types are not the same, replace the DOM node with the template node
-		if (templateChildNode.nodeType !== domChildNode.nodeType) {
-			domNode.replaceChild(templateChildNode, domChildNode);
-			continue;
-		}
-
-		// If the node is a Text node or a Comment node, update it
-		if (domChildNode.nodeType === TEXT_NODE || domChildNode.nodeType === COMMENT_NODE) {
-			domChildNode.textContent = templateChildNode.textContent;
-			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) {
-			domNode.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') {
-			domNode.replaceChild(templateChildNode, domChildNode);
-			continue;
-		}
-
-		// If the node is an Element node, diff the attributes
-		if (templateChildNode.nodeType === ELEMENT_NODE) {
-			diffAttributes(templateChildNode, domChildNode);
-		}
-
-		// If there are child nodes, diff them recursively
-		if (templateChildNode.hasChildNodes()) {
-			if (shouldDiffChildNodes(templateChildNode)) {
-				diffNodes(templateChildNode, domChildNode);
-			}
-		}
-	}
+    // If the DOM node should be empty, remove all child nodes
+    if (hasChildNodes(domNode) && !hasChildNodes(templateNode)) {
+        domNode.replaceChildren();
+        return;
+    }
+
+    // If the DOM node is empty, but should have children, add child nodes from the template node
+    if (!hasChildNodes(domNode) && hasChildNodes(templateNode)) {
+        domNode.replaceChildren(...templateNode.childNodes);
+        return;
+    }
+
+    const templateChildNodes = [...templateNode.childNodes];
+    const domChildNodes = [...domNode.childNodes];
+
+    // Diff each node in the child node lists
+    let length = Math.max(templateChildNodes.length, domChildNodes.length);
+    for (let index = 0; index < length; index++) {
+        const templateChildNode = templateChildNodes[index];
+        const domChildNode = domChildNodes[index];
+
+        // If the DOM node doesn't exist, append/copy the template node
+        if (!domChildNode) {
+            domNode.appendChild(templateChildNode);
+            continue;
+        }
+
+        // If the template node doesn't exist, remove the node in the DOM
+        if (!templateChildNode) {
+            domNode.removeChild(domChildNode);
+            continue;
+        }
+
+        // If DOM node is equal to the template node, don't do anything
+        if (domChildNode.isEqualNode(templateChildNode)) {
+            continue;
+        }
+
+        // the following two checks don't have to be correct, but it could bring as back to the fast path
+        // in the worst case we still have to compare and swap all the elements
+        // but in the best case we find the one element that should actually be inserted or removed
+        // and from there on, every node that comes after should be equal again
+
+        // fast path for removing DOM nodes - we delete the node now instead of at the end
+        if (domNode.childNodes.length > templateNode.childNodes.length) {
+            domChildNodes.splice(index, 1);
+            domNode.removeChild(domChildNode);
+            // because domChildNodes will get shorter by splicing it, everything moves up by one
+            // so the (actual) next element will have the same index now as we currently have
+            // therefore we have to adjust our counters
+            length--;
+            index--;
+
+            // we might have corrected everything and the parent nodes could be equal again
+            // if so, we can skip the rest of the child node checks
+            if (domNode.childNodes.length === templateNode.childNodes.length && domNode.isEqualNode(templateNode)) {
+                return;
+            }
+
+            continue;
+        }
+
+        // fast path for adding DOM nodes - we insert the node now instead of at the end
+        // but NOT if we already are at the end of the list of child nodes
+        if (index !== domNode.childNodes.length - 1 && domNode.childNodes.length < templateNode.childNodes.length) {
+            domChildNodes.splice(index, 0, templateChildNode);
+            domNode.insertBefore(templateChildNode, domChildNode);
+
+            // we might have corrected everything and the parent nodes could be equal again
+            // if so, we can skip the rest of the child node checks
+            if (domNode.childNodes.length === templateNode.childNodes.length && domNode.isEqualNode(templateNode)) {
+                return;
+            }
+
+            continue;
+        }
+
+        // If node types are not the same, replace the DOM node with the template node
+        if (templateChildNode.nodeType !== domChildNode.nodeType) {
+            domNode.replaceChild(templateChildNode, domChildNode);
+            continue;
+        }
+
+        // If the node is a Text node or a Comment node, update it
+        if (domChildNode.nodeType === TEXT_NODE || domChildNode.nodeType === COMMENT_NODE) {
+            domChildNode.textContent = templateChildNode.textContent;
+            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) {
+            domNode.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') {
+            domNode.replaceChild(templateChildNode, domChildNode);
+            continue;
+        }
+
+        // If the node is an Element node, diff the attributes
+        if (templateChildNode.nodeType === ELEMENT_NODE) {
+            diffAttributes(templateChildNode, domChildNode);
+        }
+
+        // If there are child nodes, diff them recursively
+        if (templateChildNode.hasChildNodes()) {
+            if (shouldDiffChildNodes(templateChildNode)) {
+                diffNodes(templateChildNode, domChildNode);
+            }
+        }
+    }
 };

package/src/util/Directive.js

@@ -1,35 +1,42 @@
 export class Directive {
-	/** @type {Element} */
-	node = undefined;
+    /** @type {Element} */
+    node = undefined;
 
-	/**
-	 * @param {Node} node
-	 */
-	constructor(node) {
-		this.node = node;
-	}
+    /**
+     * @param {Node} node
+     */
+    constructor(node) {
+        this.node = node;
+    }
 
-	/**
-	 * @abstract
-	 */
-	update() {}
+    /**
+     * @abstract
+     */
+    update() {}
 
-	// TODO: this is somewhat custom... maybe we could set the initial values in the constructor and then simply override the default toString() method?!
-	/**
-	 * Implement the stringify method and return a string for rendering the directive in SSR mode
-	 * @param {...any} values
-	 * @returns {string}
-	 */
-	stringify(...values) {
-		return '';
-	}
+    // TODO: this is somewhat custom... maybe we could set the initial values in the constructor and then simply override the default toString() method?!
+    /**
+     * Implement the stringify method and return a string for rendering the directive in SSR mode
+     * @param {...any} values
+     * @returns {string}
+     */
+    stringify(...values) {
+        return '';
+    }
 }
 
 /**
  * @param {Class<Directive>} directiveClass
  */
 export const defineDirective = (directiveClass) => {
-	return (...values) => {
-		return { directiveClass, values };
-	};
+    return (...values) => {
+        return {
+            directiveClass,
+            values,
+            toString: () => {
+                const directive = new directiveClass();
+                return directive.stringify(...values);
+            },
+        };
+    };
 };

package/src/util/GlobalStylesStore.js

@@ -4,63 +4,70 @@ import { Store } from './Store.js';
  * @property {CSSStyleSheet[]} cssStyleSheets
  */
 class GlobalStylesStore extends Store {
-	/** @type {Map<Node, CSSStyleSheet>} */
-	globalStyleSheetsCache = new WeakMap();
+    /** @type {Map<Node, CSSStyleSheet>} */
+    globalStyleSheetsCache = new WeakMap();
 
-	constructor() {
-		super();
-		if (globalThis.elementJsConfig?.observeGlobalStyles) {
-			const mutationObserver = new MutationObserver((mutationRecord) => {
-				if (!mutationRecord[0]) return;
-				const filteredNodes = Array.from(mutationRecord[0].addedNodes).filter(
-					(node) => node.tagName === 'STYLE' || node.tagName === 'LINK',
-				);
-				if (filteredNodes && filteredNodes[0] && filteredNodes[0].tagName === 'LINK') {
-					filteredNodes[0].onload = () => {
-						this.requestUpdate();
-					};
-				} else if (filteredNodes && filteredNodes[0] && filteredNodes[0].tagName === 'STYLE') {
-					this.requestUpdate();
-				}
-			});
-			mutationObserver.observe(globalThis.document, { subtree: true, childList: true });
-		}
-	}
+    constructor() {
+        super();
+        if (globalThis.elementJsConfig?.observeGlobalStyles) {
+            const mutationObserver = new MutationObserver((mutationRecord) => {
+                if (!mutationRecord[0]) return;
+                const filteredNodes = Array.from(mutationRecord[0].addedNodes).filter(
+                    (node) => node.tagName === 'STYLE' || node.tagName === 'LINK',
+                );
+                if (filteredNodes && filteredNodes[0] && filteredNodes[0].tagName === 'LINK') {
+                    filteredNodes[0].onload = () => {
+                        this.requestUpdate();
+                    };
+                } else if (filteredNodes && filteredNodes[0] && filteredNodes[0].tagName === 'STYLE') {
+                    this.requestUpdate();
+                }
+            });
+            mutationObserver.observe(globalThis.document, { subtree: true, childList: true });
+        }
+    }
 
-	getGlobalStyleSheets(selector) {
-		/** @type {CSSStyleSheet[]}*/
-		const cssStyleSheets = [];
+    getGlobalStyleSheets(selector) {
+        /** @type {CSSStyleSheet[]}*/
+        const cssStyleSheets = [];
 
-		if (selector === false) return cssStyleSheets;
+        if (selector === false) return cssStyleSheets;
 
-		if (typeof selector === 'string') {
-			selector = [selector];
-		}
+        if (typeof selector === 'string') {
+            selector = [selector];
+        }
 
-		if (selector === true || selector.includes('document')) {
-			cssStyleSheets.push(...globalThis.document?.adoptedStyleSheets);
-		}
+        if (selector === true || selector.includes('document')) {
+            cssStyleSheets.push(...globalThis.document?.adoptedStyleSheets);
+        }
 
-		Array.from(globalThis.document?.styleSheets).map((styleSheet) => {
-			if (Array.isArray(selector) && !selector.some((cssSelector) => styleSheet.ownerNode.matches(cssSelector))) {
-				return;
-			}
+        Array.from(globalThis.document?.styleSheets).map((styleSheet) => {
+            if (Array.isArray(selector) && !selector.some((cssSelector) => styleSheet.ownerNode.matches(cssSelector))) {
+                return;
+            }
 
-			// TODO: this will always be null as we never set anything to the cache...
-			let cssStyleSheet = this.globalStyleSheetsCache.get(styleSheet.ownerNode);
-			if (!cssStyleSheet) {
-				cssStyleSheet = new CSSStyleSheet();
-				if (styleSheet.ownerNode.tagName === 'STYLE') {
-					cssStyleSheet.replaceSync(styleSheet.ownerNode.textContent);
-				} else if (styleSheet.ownerNode.tagName === 'LINK') {
-					Array.from(styleSheet.cssRules).map((rule) => cssStyleSheet.insertRule(rule.cssText));
-				}
-			}
-			cssStyleSheets.push(cssStyleSheet);
-		});
+            // TODO: this will always be null as we never set anything to the cache...
+            let cssStyleSheet = this.globalStyleSheetsCache.get(styleSheet.ownerNode);
+            if (!cssStyleSheet) {
+                cssStyleSheet = new CSSStyleSheet();
+                if (styleSheet.ownerNode.tagName === 'STYLE') {
+                    cssStyleSheet.replaceSync(styleSheet.ownerNode.textContent);
+                } else if (styleSheet.ownerNode.tagName === 'LINK') {
+                    try {
+                        Array.from(styleSheet?.cssRules ?? []).map((rule) => cssStyleSheet.insertRule(rule.cssText));
+                    } catch (e) {
+                        console.error(
+                            'GlobalStylesStore: cannot read cssRules. Maybe add crossorigin="anonymous" to your style link?',
+                            e,
+                        );
+                    }
+                }
+            }
+            cssStyleSheets.push(cssStyleSheet);
+        });
 
-		return cssStyleSheets;
-	}
+        return cssStyleSheets;
+    }
 }
 
 export const globalStylesStore = new GlobalStylesStore();