@webtides/element-js 1.0.0 → 1.1.1

package/src/dom-parts/directives.js

@@ -1,4 +1,4 @@
-import { camelToDash, decodeAttribute, encodeAttribute } from '../util/AttributeParser.js';
+import { camelToDash, decodeAttribute, encodeAttribute, isNaN } from '../util/AttributeParser.js';
 import { TemplateResult } from './TemplateResult.js';
 import { convertStringToHTML, convertStringToTemplate } from '../util/DOMHelper.js';
 import { defineDirective, Directive } from '../util/Directive.js';
@@ -10,11 +10,11 @@ import { defineDirective, Directive } from '../util/Directive.js';
  * @returns {string} string of classes joined together
  */
 const classMap = (map) => {
-	const classes = [];
-	for (const [key, value] of Object.entries(map)) {
-		if (value) classes.push(key);
-	}
-	return classes.join(' ');
+    const classes = [];
+    for (const [key, value] of Object.entries(map)) {
+        if (value) classes.push(key);
+    }
+    return classes.join(' ');
 };
 
 /**
@@ -24,11 +24,11 @@ const classMap = (map) => {
  * @returns {string} string of styles joined together
  */
 const styleMap = (map) => {
-	const styles = [];
-	for (const [key, value] of Object.entries(map)) {
-		if (value) styles.push(`${key}:${value};`);
-	}
-	return styles.join(' ');
+    const styles = [];
+    for (const [key, value] of Object.entries(map)) {
+        if (value) styles.push(`${key}:${value};`);
+    }
+    return styles.join(' ');
 };
 
 /**
@@ -39,7 +39,7 @@ const styleMap = (map) => {
  * @returns {TemplateResult | string}
  */
 const when = (condition, trueCase, falseCase) => {
-	return condition ? trueCase : falseCase;
+    return condition ? trueCase : falseCase;
 };
 
 /**
@@ -50,7 +50,7 @@ const when = (condition, trueCase, falseCase) => {
  * @returns {TemplateResult | string}
  */
 const choose = (value, cases, defaultCase) => {
-	return cases[value] || defaultCase;
+    return cases[value] || defaultCase;
 };
 
 /**
@@ -59,47 +59,88 @@ const choose = (value, cases, defaultCase) => {
  * @returns {(function(): Node) | { __unsafeHTML: true, string: string }}
  */
 const unsafeHTML = (string) => {
-	if (!globalThis.DOMParser) {
-		return { __unsafeHTML: true, string };
-	}
-	const node = convertStringToHTML(string).firstChild;
-	const importedNode = globalThis.document?.importNode(node, true);
-	return () => importedNode;
+    if (!globalThis.DOMParser) {
+        return { __unsafeHTML: true, string };
+    }
+    const node = convertStringToHTML(string).firstChild;
+    const importedNode = globalThis.document?.importNode(node, true);
+    return () => importedNode;
 };
 
 /**
  * Renders multiple attributes as key="value" pairs from a map of attributes
  */
 export class SpreadAttributesDirective extends Directive {
-	/**
-	 * @param {Object.<string, any>} attributes
-	 */
-	update(attributes) {
-		// TODO: what if the attribute was already there..?!
-		// TODO: what if the attribute was there from a previous render/update, but not anymore?!
-		for (const name of Object.keys(attributes)) {
-			const value = attributes[name];
-			this.node.setAttribute(
-				camelToDash(name),
-				encodeAttribute(typeof value !== 'string' ? JSON.stringify(value) : value),
-			);
-		}
-	}
+    /**
+     * @param {Object.<string, any>} attributes
+     */
+    update(attributes) {
+        for (const name of Object.keys(attributes)) {
+            const value = attributes[name];
+            if (value === undefined || value === null || isNaN(value)) {
+                this.node.removeAttribute(camelToDash(name));
+            } else {
+                this.node.setAttribute(
+                    camelToDash(name),
+                    encodeAttribute(typeof value !== 'string' ? JSON.stringify(value) : value),
+                );
+            }
+        }
+    }
 
-	/**
-	 * @param {Object.<string, any>} attributes
-	 * @returns {string}
-	 */
-	stringify(attributes) {
-		return Object.keys(attributes)
-			.map((name) => {
-				let value = attributes[name];
-				return `${camelToDash(name)}='${encodeAttribute(
-					typeof value !== 'string' ? JSON.stringify(value) : value,
-				)}'`;
-			})
-			.join(' ');
-	}
+    /**
+     * @param {Object.<string, any>} attributes
+     * @returns {string}
+     */
+    stringify(attributes) {
+        return Object.keys(attributes)
+            .map((name) => {
+                let value = attributes[name];
+                return `${camelToDash(name)}='${encodeAttribute(
+                    typeof value !== 'string' ? JSON.stringify(value) : value,
+                )}'`;
+            })
+            .join(' ');
+    }
+}
+
+/**
+ * Renders an attribute as key="value" if a condition is truthy
+ */
+export class OptionalAttributeDirective extends Directive {
+    /**
+     * @param {boolean} condition
+     * @param {string} attributeName
+     * @param {string|any} attributeValue
+     */
+    update(condition, attributeName, attributeValue = '') {
+        if (condition) {
+            this.node.setAttribute(
+                camelToDash(attributeName),
+                encodeAttribute(typeof attributeValue !== 'string' ? JSON.stringify(attributeValue) : attributeValue),
+            );
+        } else {
+            this.node.removeAttribute(camelToDash(attributeName));
+        }
+    }
+    /**
+     * @param {boolean} condition
+     * @param {string} attributeName
+     * @param {string|any} attributeValue
+     */
+    stringify(condition, attributeName, attributeValue = '') {
+        if (condition) {
+            if (attributeValue === '') {
+                // empty string toggles boolean attributes
+                return `${camelToDash(attributeName)}`;
+            }
+            return `${camelToDash(attributeName)}='${encodeAttribute(
+                typeof attributeValue !== 'string' ? JSON.stringify(attributeValue) : attributeValue,
+            )}'`;
+        } else {
+            return '';
+        }
+    }
 }
 
 /**
@@ -108,4 +149,20 @@ export class SpreadAttributesDirective extends Directive {
  */
 const spreadAttributes = defineDirective(SpreadAttributesDirective);
 
-export { classMap, styleMap, when, choose, unsafeHTML, spreadAttributes };
+/**
+ * Renders an optional attribute based on a condition
+ * @param {Object.<string, any>} attributes
+ */
+const optionalAttribute = defineDirective(OptionalAttributeDirective);
+
+export {
+    defineDirective,
+    Directive,
+    classMap,
+    styleMap,
+    when,
+    choose,
+    unsafeHTML,
+    spreadAttributes,
+    optionalAttribute,
+};

package/src/dom-parts/html.js

@@ -6,7 +6,7 @@ import { TemplateResult } from './TemplateResult.js';
  * @return {TemplateResult}
  */
 const html = function (strings, ...values) {
-	return new TemplateResult(strings, ...values);
+    return new TemplateResult(strings, ...values);
 };
 
 export { html };

package/src/dom-parts/render.js

@@ -4,12 +4,12 @@
  * @param {Element} domNode
  */
 const render = (template, domNode) => {
-	if (typeof template === 'string') {
-		// just a plain string (or literal)
-		domNode.innerHTML = template;
-	} else {
-		template.renderInto(domNode);
-	}
+    if (typeof template === 'string') {
+        // just a plain string (or literal)
+        domNode.innerHTML = template;
+    } else {
+        template.renderInto(domNode);
+    }
 };
 
 export { render };

package/src/util/AttributeParser.js

@@ -4,7 +4,7 @@
  * @returns {boolean}
  */
 export function isObjectLike(value) {
-	return typeof value == 'object' && value !== null;
+    return typeof value == 'object' && value !== null;
 }
 
 /**
@@ -13,11 +13,11 @@ export function isObjectLike(value) {
  * @returns {boolean}
  */
 export function isJSON(value) {
-	try {
-		return JSON.parse(value) && !!value;
-	} catch (e) {
-		return false;
-	}
+    try {
+        return JSON.parse(value) && !!value;
+    } catch (e) {
+        return false;
+    }
 }
 
 /**
@@ -26,7 +26,7 @@ export function isJSON(value) {
  * @returns {boolean}
  */
 export function isBoolean(value) {
-	return value === 'true' || value === 'false';
+    return value === 'true' || value === 'false';
 }
 
 /**
@@ -35,7 +35,7 @@ export function isBoolean(value) {
  * @returns {boolean}
  */
 export function parseBoolean(value) {
-	return value === 'true';
+    return value === 'true';
 }
 
 /**
@@ -44,10 +44,10 @@ export function parseBoolean(value) {
  * @returns {boolean}
  */
 export function isString(value) {
-	return (
-		typeof value === 'string' ||
-		(!!value && typeof value === 'object' && Object.prototype.toString.call(value) === '[object String]')
-	);
+    return (
+        typeof value === 'string' ||
+        (!!value && typeof value === 'object' && Object.prototype.toString.call(value) === '[object String]')
+    );
 }
 
 /**
@@ -56,7 +56,7 @@ export function isString(value) {
  * @returns {boolean}
  */
 export function isNumber(value) {
-	return new RegExp('^-?(0|0\\.\\d+|[1-9]\\d*(\\.\\d+)?)$').test(value);
+    return new RegExp('^-?(0|0\\.\\d+|[1-9]\\d*(\\.\\d+)?)$').test(value);
 }
 
 /**
@@ -65,7 +65,7 @@ export function isNumber(value) {
  * @returns {boolean}
  */
 export function isNaN(value) {
-	return Number.isNaN(value);
+    return Number.isNaN(value);
 }
 
 /**
@@ -75,7 +75,7 @@ export function isNaN(value) {
  * @returns {boolean}
  */
 export function deepEquals(valueA, valueB) {
-	return JSON.stringify(valueA) === JSON.stringify(valueB);
+    return JSON.stringify(valueA) === JSON.stringify(valueB);
 }
 
 /**
@@ -85,23 +85,23 @@ export function deepEquals(valueA, valueB) {
  * @returns {string | number | boolean | object | array}
  */
 export function parseAttribute(value, options = {}) {
-	if (options.parse === false || !isString(value)) {
-		// no-op
-		return value;
-	}
-	if (typeof options.parse === 'function') {
-		// custom parse fn
-		return options.parse(value);
-	}
-
-	// default parse
-	let parsedValue = value;
-
-	if (isJSON(value)) parsedValue = JSON.parse(value);
-	else if (isBoolean(value)) parsedValue = parseBoolean(value);
-	else if (isNumber(value)) parsedValue = parseFloat(value);
-
-	return parsedValue;
+    if (options.parse === false || !isString(value)) {
+        // no-op
+        return value;
+    }
+    if (typeof options.parse === 'function') {
+        // custom parse fn
+        return options.parse(value);
+    }
+
+    // default parse
+    let parsedValue = value;
+
+    if (isJSON(value)) parsedValue = JSON.parse(value);
+    else if (isBoolean(value)) parsedValue = parseBoolean(value);
+    else if (isNumber(value)) parsedValue = parseFloat(value);
+
+    return parsedValue;
 }
 
 /**
@@ -110,9 +110,9 @@ export function parseAttribute(value, options = {}) {
  * @returns {string}
  */
 export function dashToCamel(string) {
-	if (string.indexOf('-') === -1) return string;
+    if (string.indexOf('-') === -1) return string;
 
-	return string.replace(/-[a-z]/g, (matches) => matches[1].toUpperCase());
+    return string.replace(/-[a-z]/g, (matches) => matches[1].toUpperCase());
 }
 
 /**
@@ -121,7 +121,7 @@ export function dashToCamel(string) {
  * @returns {string}
  */
 export function camelToDash(string) {
-	return string.replace(/([A-Z])/g, '-$1').toLowerCase();
+    return string.replace(/([A-Z])/g, '-$1').toLowerCase();
 }
 
 /**
@@ -130,11 +130,11 @@ export function camelToDash(string) {
  * @returns {string}
  */
 export function decodeAttribute(attribute) {
-	return `${attribute}`
-		.replace(/&lt;/g, '<')
-		.replace(/&gt;/g, '>')
-		.replace(/&quot;/g, '"')
-		.replace(/&apos;/g, "'");
+    return `${attribute}`
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&apos;/g, "'");
 }
 
 /**
@@ -143,11 +143,11 @@ export function decodeAttribute(attribute) {
  * @returns {string}
  */
 export function encodeAttribute(attribute) {
-	return `${attribute}`
-		.replace(/'/g, '&apos;')
-		.replace(/"/g, '&quot;')
-		.replace(/</g, '&lt;')
-		.replace(/>/g, '&gt;')
-		.replace(/\r\n/g, '\n')
-		.replace(/[\r\n]/g, '\n');
+    return `${attribute}`
+        .replace(/'/g, '&apos;')
+        .replace(/"/g, '&quot;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/\r\n/g, '\n')
+        .replace(/[\r\n]/g, '\n');
 }