@webtides/element-js 1.0.0 → 1.1.1

package/src/StyledElement.js

@@ -12,110 +12,110 @@ import { globalStylesStore } from './util/GlobalStylesStore.js';
  */
 
 class StyledElement extends BaseElement {
-	/**
-	 * @param {StyledElementOptions} options
-	 */
-	constructor(options) {
-		super({
-			deferUpdate: false,
-			shadowRender: false,
-			styles: [],
-			adoptGlobalStyles: true,
-			...options,
-		});
-		this._styles = [...this._options.styles, ...this.styles()];
-	}
-
-	/**
-	 * Overrides the `connectedCallback` to adopt optional styles when the element is connected
-	 */
-	connectedCallback() {
-		super.connectedCallback();
-
-		if (!this.constructor['elementStyleSheets']) {
-			this.constructor['elementStyleSheets'] = this._styles.map((style) => {
-				const cssStyleSheet = new CSSStyleSheet();
-				cssStyleSheet.replaceSync(style);
-				return cssStyleSheet;
-			});
-		}
-
-		if (supportsAdoptingStyleSheets() && this._options.shadowRender) {
-			// adopting does only make sense in shadow dom. Fall back to append for light elements
-			this.adoptStyleSheets();
-
-			if (this._options.adoptGlobalStyles !== false) {
-				globalStylesStore.subscribe(() => {
-					this.adoptStyleSheets();
-				});
-			}
-		}
-	}
-
-	/**
-	 * The styles method is another way to return a list of styles to be adopted when the element is connected.
-	 * You can either provide a list in the constructor options or return it here.
-	 * @returns {string[]}
-	 */
-	styles() {
-		return [];
-	}
-
-	/**
-	 * Overrides the `update` method to adopt optional styles
-	 * @param {PropertyUpdateOptions} options
-	 */
-	update(options) {
-		// We cannot do this in connectedCallback() since the whole template will be overridden in update/render afterward
-		if (!supportsAdoptingStyleSheets() || this._options.shadowRender === false) {
-			this.appendStyleSheets();
-		}
-		super.update(options);
-	}
-
-	/**
-	 * Adopt stylesheets
-	 */
-	adoptStyleSheets() {
-		const adoptGlobalStyleSheets = this._options.shadowRender && this._options.adoptGlobalStyles !== false;
-
-		this.getRoot().adoptedStyleSheets = [
-			...(adoptGlobalStyleSheets ? globalStylesStore.getGlobalStyleSheets(this._options.adoptGlobalStyles) : []),
-			...this.constructor['elementStyleSheets'],
-		];
-	}
-
-	/**
-	 * Custom polyfill for constructable stylesheets by appending styles to the end of an element
-	 */
-	appendStyleSheets() {
-		const parentDocument = getShadowParentOrBody(this.getRoot());
-
-		const adoptGlobalStyleSheets =
-			this._options.shadowRender &&
-			this._options.adoptGlobalStyles !== false &&
-			parentDocument !== globalThis.document.body;
-
-		const appendableStyles = [
-			...(adoptGlobalStyleSheets ? globalStylesStore.getGlobalStyleSheets(this._options.adoptGlobalStyles) : []),
-			...this.constructor['elementStyleSheets'],
-		];
-
-		appendableStyles.forEach((styleSheet, index) => {
-			const identifier = this.tagName + index;
-
-			// only append stylesheet if not already appended to shadowRoot or document
-			if (!parentDocument.querySelector(`#${identifier}`)) {
-				const styleElement = globalThis.document?.createElement('style');
-				styleElement.id = identifier;
-				styleElement.style.display = 'none';
-				styleElement.textContent = Array.from(styleSheet.cssRules)
-					.map((rule) => rule.cssText)
-					.join('');
-				parentDocument.appendChild(styleElement);
-			}
-		});
-	}
+    /**
+     * @param {StyledElementOptions} options
+     */
+    constructor(options) {
+        super({
+            deferUpdate: false,
+            shadowRender: false,
+            styles: [],
+            adoptGlobalStyles: true,
+            ...options,
+        });
+        this._styles = [...this._options.styles, ...this.styles()];
+    }
+
+    /**
+     * Overrides the `connectedCallback` to adopt optional styles when the element is connected
+     */
+    connectedCallback() {
+        super.connectedCallback();
+
+        if (!this.constructor['elementStyleSheets']) {
+            this.constructor['elementStyleSheets'] = this._styles.map((style) => {
+                const cssStyleSheet = new CSSStyleSheet();
+                cssStyleSheet.replaceSync(style);
+                return cssStyleSheet;
+            });
+        }
+
+        if (supportsAdoptingStyleSheets() && this._options.shadowRender) {
+            // adopting does only make sense in shadow dom. Fall back to append for light elements
+            this.adoptStyleSheets();
+
+            if (this._options.adoptGlobalStyles !== false) {
+                globalStylesStore.subscribe(() => {
+                    this.adoptStyleSheets();
+                });
+            }
+        }
+    }
+
+    /**
+     * The styles method is another way to return a list of styles to be adopted when the element is connected.
+     * You can either provide a list in the constructor options or return it here.
+     * @returns {string[]}
+     */
+    styles() {
+        return [];
+    }
+
+    /**
+     * Overrides the `update` method to adopt optional styles
+     * @param {PropertyUpdateOptions} options
+     */
+    update(options) {
+        // We cannot do this in connectedCallback() since the whole template will be overridden in update/render afterward
+        if (!supportsAdoptingStyleSheets() || this._options.shadowRender === false) {
+            this.appendStyleSheets();
+        }
+        super.update(options);
+    }
+
+    /**
+     * Adopt stylesheets
+     */
+    adoptStyleSheets() {
+        const adoptGlobalStyleSheets = this._options.shadowRender && this._options.adoptGlobalStyles !== false;
+
+        this.getRoot().adoptedStyleSheets = [
+            ...(adoptGlobalStyleSheets ? globalStylesStore.getGlobalStyleSheets(this._options.adoptGlobalStyles) : []),
+            ...this.constructor['elementStyleSheets'],
+        ];
+    }
+
+    /**
+     * Custom polyfill for constructable stylesheets by appending styles to the end of an element
+     */
+    appendStyleSheets() {
+        const parentDocument = getShadowParentOrBody(this.getRoot());
+
+        const adoptGlobalStyleSheets =
+            this._options.shadowRender &&
+            this._options.adoptGlobalStyles !== false &&
+            parentDocument !== globalThis.document.body;
+
+        const appendableStyles = [
+            ...(adoptGlobalStyleSheets ? globalStylesStore.getGlobalStyleSheets(this._options.adoptGlobalStyles) : []),
+            ...this.constructor['elementStyleSheets'],
+        ];
+
+        appendableStyles.forEach((styleSheet, index) => {
+            const identifier = this.tagName + index;
+
+            // only append stylesheet if not already appended to shadowRoot or document
+            if (!parentDocument.querySelector(`#${identifier}`)) {
+                const styleElement = globalThis.document?.createElement('style');
+                styleElement.id = identifier;
+                styleElement.style.display = 'none';
+                styleElement.textContent = Array.from(styleSheet.cssRules)
+                    .map((rule) => rule.cssText)
+                    .join('');
+                parentDocument.appendChild(styleElement);
+            }
+        });
+    }
 }
 
 export { StyledElement };

package/src/TemplateElement.js

@@ -9,64 +9,64 @@ import { render } from './dom-parts/render.js';
  */
 
 class TemplateElement extends StyledElement {
-	/**
-	 * @param {TemplateElementOptions} options
-	 */
-	constructor(options) {
-		super({
-			deferUpdate: false,
-			shadowRender: false,
-			styles: [],
-			adoptGlobalStyles: true,
-			mutationObserverOptions: {
-				childList: false,
-			},
-			...options,
-		});
-		this._template = this._options.template;
-	}
+    /**
+     * @param {TemplateElementOptions} options
+     */
+    constructor(options) {
+        super({
+            deferUpdate: false,
+            shadowRender: false,
+            styles: [],
+            adoptGlobalStyles: true,
+            mutationObserverOptions: {
+                childList: false,
+            },
+            ...options,
+        });
+        this._template = this._options.template;
+    }
 
-	/**
-	 * Overrides the native `connectedCallback` of the HTMLElement to set up and initialize our element.
-	 * This will attach a shadow DOM if the element is supposed to render in shadow DOM.
-	 */
-	connectedCallback() {
-		if (this._options.shadowRender && !this.shadowRoot) this.attachShadow({ mode: 'open' });
-		super.connectedCallback();
-	}
+    /**
+     * Overrides the native `connectedCallback` of the HTMLElement to set up and initialize our element.
+     * This will attach a shadow DOM if the element is supposed to render in shadow DOM.
+     */
+    connectedCallback() {
+        if (this._options.shadowRender && !this.shadowRoot) this.attachShadow({ mode: 'open' });
+        super.connectedCallback();
+    }
 
-	/**
-	 * The template method should be overridden in extending elements and return the template to be rendered to the root
-	 * @returns {TemplateResult | string}
-	 */
-	template() {
-		return html``;
-	}
+    /**
+     * The template method should be overridden in extending elements and return the template to be rendered to the root
+     * @returns {TemplateResult | string}
+     */
+    template() {
+        return html``;
+    }
 
-	/**
-	 * Override update method to render the template to the root
-	 * @param {PropertyUpdateOptions} options
-	 */
-	update(options) {
-		this.renderTemplate();
-		super.update(options);
-	}
+    /**
+     * Override update method to render the template to the root
+     * @param {PropertyUpdateOptions} options
+     */
+    update(options) {
+        this.renderTemplate();
+        super.update(options);
+    }
 
-	/**
-	 * Render the template to the root
-	 */
-	renderTemplate() {
-		const template = this._template || this.template();
-		render(template, this.getRoot());
-	}
+    /**
+     * Render the template to the root
+     */
+    renderTemplate() {
+        const template = this._template || this.template();
+        render(template, this.getRoot());
+    }
 
-	/**
-	 * Get the root element - either the element or the shadow root
-	 * @returns {ShadowRoot | HTMLElement}
-	 */
-	getRoot() {
-		return this.shadowRoot !== null ? this.shadowRoot : this;
-	}
+    /**
+     * Get the root element - either the element or the shadow root
+     * @returns {ShadowRoot | HTMLElement}
+     */
+    getRoot() {
+        return this.shadowRoot !== null ? this.shadowRoot : this;
+    }
 }
 
 export { TemplateElement, html, render };

package/src/dom-parts/AttributePart.js

@@ -7,14 +7,14 @@ import { Part } from './Part.js';
  * @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));
-		}
-	};
+    // 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));
+        }
+    };
 };
 
 /**
@@ -23,11 +23,11 @@ const processBooleanAttribute = (node, name, oldValue) => {
  * @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;
-	};
+    // 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;
+    };
 };
 
 /**
@@ -36,18 +36,18 @@ const processPropertyAttribute = (node, 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);
-		}
-	};
+    // 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);
+        }
+    };
 };
 
 /**
@@ -56,26 +56,26 @@ const processEventAttribute = (node, 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;
-				}
-			}
-		}
-	};
+    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;
+                }
+            }
+        }
+    };
 };
 
 /** @type {Map<Element, AttributePart>} */
@@ -87,81 +87,81 @@ const attributePartsCache = new WeakMap();
  * @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);
+    // 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 {Comment} node
-	 * @param {String} name
-	 * @param {String} initialValue
-	 */
-	constructor(node, name, initialValue) {
-		// 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
-		const attributePart = attributePartsCache.get(node.nextElementSibling);
-		if (attributePart && attributePart.name === name) {
-			attributePart.interpolations++;
-			node.__part = attributePart; // add Part to comment node for debugging in the browser
-			return attributePart;
-		}
-
-		super();
-		this.name = name;
-		this.initialValue = initialValue;
-		this.processor = processAttributePart(node.nextElementSibling, this.name);
-		node.__part = this; // add Part to comment node for debugging in the browser
-		attributePartsCache.set(node.nextElementSibling, this);
-	}
-
-	/**
-	 * @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);
-		}
-	}
+    name = undefined;
+    interpolations = 1;
+    values = [];
+    currentValueIndex = 0;
+    initialValue = undefined;
+
+    /**
+     * @param {Comment} node
+     * @param {String} name
+     * @param {String} initialValue
+     */
+    constructor(node, name, initialValue) {
+        // 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
+        const attributePart = attributePartsCache.get(node.nextElementSibling);
+        if (attributePart && attributePart.name === name) {
+            attributePart.interpolations++;
+            node.__part = attributePart; // add Part to comment node for debugging in the browser
+            return attributePart;
+        }
+
+        super();
+        this.name = name;
+        this.initialValue = initialValue;
+        this.processor = processAttributePart(node.nextElementSibling, this.name);
+        node.__part = this; // add Part to comment node for debugging in the browser
+        attributePartsCache.set(node.nextElementSibling, this);
+    }
+
+    /**
+     * @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);
+        }
+    }
 }