@webtides/element-js 0.4.3 → 0.6.0

package/index.js

@@ -4,5 +4,6 @@ import { TemplateElement, html } from './src/TemplateElement';
 import { toString } from './src/util/toString';
 import { defineElement } from './src/util/defineElement';
 import { i18n } from './src/util/i18n';
+import { Store } from './src/util/Store';
 
-export { BaseElement, StyledElement, TemplateElement, html, toString, defineElement, i18n };
+export { BaseElement, StyledElement, TemplateElement, Store, html, toString, defineElement, i18n };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webtides/element-js",
-	"version": "0.4.3",
+	"version": "0.6.0",
 	"module": "index.js",
 	"main": "dist/index.js",
 	"files": [
@@ -18,7 +18,10 @@
 		"./src/util/*": "./src/util/*.js",
 		"./src/renderer/vanilla": "./src/renderer/vanilla/index.js",
 		"./src/renderer/vanilla/TemplateElement": "./src/renderer/vanilla/TemplateElement.js",
-		"./src/renderer/vanilla/util/*": "./src/renderer/vanilla/util/*.js"
+		"./src/renderer/vanilla/util/*": "./src/renderer/vanilla/util/*.js",
+		"./src/renderer/vanilla/util/directives.js": "./src/renderer/vanilla/util/directives.js",
+		"./src/renderer/vanilla/util/html.js": "./src/renderer/vanilla/util/html.js",
+		"./src/renderer/vanilla/util/render.js": "./src/renderer/vanilla/util/render.js"
 	},
 	"repository": "https://github.com/webtides/element-js.git",
 	"author": "@webtides",
@@ -39,6 +42,7 @@
 	},
 	"devDependencies": {
 		"@open-wc/testing": "^3.0.3",
+		"@web/dev-server": "^0.1.30",
 		"@web/test-runner": "^0.13.26",
 		"babel-eslint": "^10.1.0",
 		"babel-plugin-module-resolver": "^4.0.0",
@@ -62,6 +66,7 @@
 		"prepare": "esbuild index.js --outfile=dist/index.js --bundle --format=esm --sourcemap --target=chrome79,firefox68,safari12,edge79",
 		"test": "web-test-runner test/**/*.test.{html,js} --node-resolve",
 		"test:coverage": "web-test-runner test/**/*.test.{html,js} --node-resolve --coverage",
-		"test:watch": "web-test-runner test/**/*.test.{html,js} --node-resolve --watch"
+		"test:watch": "web-test-runner test/**/*.test.{html,js} --node-resolve --watch",
+		"start": "web-dev-server --config web-dev-server.config.mjs"
 	}
 }

package/src/BaseElement.js

@@ -1,5 +1,6 @@
 import { parseAttribute, isNaN, dashToCamel, camelToDash, isObjectLike } from './util/AttributeParser.js';
 import { getClosestParentCustomElementNode, isOfSameNodeType } from './util/DOMHelper.js';
+import { Store } from './util/Store.js';
 
 export { defineElement } from './util/defineElement';
 export { toString } from './util/toString';
@@ -98,6 +99,13 @@ class BaseElement extends HTMLElement {
 		// remove observers
 		if (this._mutationObserver) this._mutationObserver.disconnect();
 
+		// unsubscribe from stores
+		Object.values(this.properties()).forEach((property) => {
+			if (property instanceof Store) {
+				property.unsubscribe(this);
+			}
+		});
+
 		this.triggerHook('disconnected');
 	}
 
@@ -198,6 +206,10 @@ class BaseElement extends HTMLElement {
 	 * Will trigger update() when a property was changed
 	 */
 	defineProperty(property, value, reflectAttribute = false) {
+		if (value instanceof Store) {
+			value.subscribe(this);
+		}
+
 		if (this._state.hasOwnProperty(property)) {
 			// property has already been defined as an attribute nothing to do here
 			return;

package/src/renderer/vanilla/util/directives.js

@@ -0,0 +1,78 @@
+import { camelToDash, decodeAttribute } from '../../../util/AttributeParser.js';
+import { Part } from './html.js';
+
+/**
+ * Maps a list of classes to an element from an object.
+ * The keys will become the classes when the value is truthy.
+ * @param {Object.<string, string | boolean | number>} map
+ * @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(' ');
+};
+
+/**
+ * Maps a list of styles to an element from an object.
+ * The keys will become the properties and the values will become the values.
+ * @param {Object.<string, string | undefined | null>} 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(' ');
+};
+
+/**
+ * Renders one of two template parts based on a condition.
+ * @param {boolean} condition
+ * @param {TemplateLiteral | string} trueCase
+ * @param {TemplateLiteral | string} [falseCase]
+ * @returns {TemplateLiteral | string}
+ */
+const when = (condition, trueCase, falseCase) => {
+	return condition ? trueCase : falseCase;
+};
+
+/**
+ * Chooses and evaluates a template part from a map of cases based on matching the given value to a case.
+ * @param {string} value
+ * @param {Object.<string, TemplateLiteral | string>} cases
+ * @param {TemplateLiteral | string} [defaultCase]
+ * @returns {TemplateLiteral | string}
+ */
+const choose = (value, cases, defaultCase) => {
+	return cases[value] || defaultCase;
+};
+
+/**
+ * Renders a given string as HTML instead of text
+ * @param {string} string
+ * @returns {function(): string}
+ */
+const unsafeHTML = (string) => {
+	return () => `${decodeAttribute(string)}`;
+};
+
+/**
+ * Renders multiple attributes as key="value" pairs from a map of attributes
+ * @param {Object.<string, any>} attributes
+ * @returns {function(): string}
+ */
+const spreadAttributes = (attributes) => {
+	return () => {
+		return Object.keys(attributes)
+			.map((key) => {
+				return `${camelToDash(key)}='${new Part(attributes[key])}'`;
+			})
+			.join(' ');
+	};
+};
+
+export { classMap, styleMap, when, choose, unsafeHTML, spreadAttributes };

package/src/renderer/vanilla/util/html.js

@@ -1,4 +1,5 @@
-import { camelToDash, decodeAttribute, encodeAttribute } from '../../../util/AttributeParser';
+import { encodeAttribute } from '../../../util/AttributeParser';
+import { unsafeHTML, spreadAttributes } from './directives.js';
 
 class Part {
 	constructor(value) {
@@ -61,18 +62,4 @@ const html = function (strings, ...values) {
 	return new TemplateLiteral(strings, ...values);
 };
 
-const unsafeHTML = (string) => {
-	return () => `<!--$$plainly-set-inner-html-->${decodeAttribute(string)}`;
-};
-
-const spreadAttributes = (attributes) => {
-	return () => {
-		return Object.keys(attributes)
-			.map((key) => {
-				return `${camelToDash(key)}='${new Part(attributes[key])}'`;
-			})
-			.join(' ');
-	};
-};
-
-export { html, unsafeHTML, spreadAttributes };
+export { Part, TemplatePart, TemplateLiteral, html, unsafeHTML, spreadAttributes };

package/src/renderer/vanilla/util/render.js

@@ -1,166 +1,50 @@
-const NODE_TYPE_COMMENT = 8;
-const NODE_TYPE_TEXT = 3;
-
 const _cachedTemplateElements = {};
 
-const convertStringToHTML = (templateString) => {
-	const parser = new DOMParser();
-	const document = parser.parseFromString(`<main>${templateString}</main>`, 'text/html');
-
-	return document.querySelector('main');
-};
-
 /**
- * Create an array of the attributes on an element
- * @param  {NamedNodeMap} attributes The attributes on an element
- * @return {Array}                   The attributes on an element as an array of key/value pairs
+ * Parses the given template string and returns a real DOM element.
+ * @param {string} template
+ * @returns {HTMLElement}
  */
-const getAttributes = function (attributes) {
-	return Array.prototype.map.call(attributes, function (attribute) {
-		return {
-			attributeName: attribute.name,
-			value: attribute.value,
-		};
-	});
+const convertStringToHTML = (template) => {
+	const parser = new DOMParser();
+	const document = parser.parseFromString(template.toString(), 'text/html');
+	return document.body;
 };
 
 /**
- * Create a DOM Tree Map for an element
- *
- * @param  {HTMLElement}    element The element to map
- * @param  {Boolean} isSVG   If true, node is within an SVG
- * @return {{ domMap: Array, plainlySetInnerHTML?: boolean, innerHTML?: string }} A DOM tree map
+ * Diff the attributes for a live DOM element against a template DOM element
+ * @param  {Element} templateElement The new template
+ * @param  {Element} domElement The existing DOM node
  */
-const createDOMMap = function (element, isChild = false, isSVG = false, type = 'template') {
-	const children = [...element.childNodes];
-
-	// If the list contains a comment which says "$$plainly-set-inner-html" it means
-	// that the all children of the element will be set as unsafe `innerHTML´
-	// which means that there won't be any diffing or fancy things
-	// but we will just mark it as a pure component and leave it be.
-	for (const child of children) {
-		if (child?.nodeType === NODE_TYPE_COMMENT && child.textContent === '$$plainly-set-inner-html') {
-			return {
-				domMap: [],
-				plainlySetInnerHTML: true,
-				innerHTML: element.innerHTML,
-			};
+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);
 		}
 	}
 
-	const domMap = children.map((node, index) => {
-		const details = {
-			content: node.childNodes && node.childNodes.length > 0 ? null : node.textContent,
-			attributes: node.nodeType !== 1 ? [] : getAttributes(node.attributes),
-			type:
-				node.nodeType === NODE_TYPE_TEXT
-					? 'text'
-					: node.nodeType === NODE_TYPE_COMMENT
-					? 'comment'
-					: node.tagName.toLowerCase(),
-			node: node,
-		};
-
-		details.isSVG = isSVG || details.type === 'svg';
-		details.children =
-			isChild && isTemplateElement({ node }) ? { domMap: [] } : createDOMMap(node, true, details.isSVG);
-		return details;
-	});
-
-	return {
-		domMap,
-	};
-};
-
-const removeAttributes = function (element, attributes) {
-	attributes.forEach(function (attribute) {
-		element.removeAttribute(attribute.attributeName);
-	});
-};
-
-/**
- * Add attributes to an element
- * @param {HTMLElement}  element The element
- * @param {[{ attributeName: string, value: string}]} attributes The attributes to add
- */
-const addAttributes = function (element, attributes) {
-	attributes.forEach(function (attribute) {
-		if (attribute.attributeName.startsWith('.')) {
-			// Directly set the attribute on the element instance as property
-			// instead of setting the attribute.
-			element[attribute.attributeName.substring(1)] = attribute.value || '';
-			return;
+	// 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);
 		}
-
-		element.setAttribute(attribute.attributeName, attribute.value || '');
-	});
-};
-
-/**
- * Diff the attributes on an existing element versus the template
- * @param  {Object} template The new template
- * @param  {Object} existing The existing DOM node
- */
-const diffAttributes = function (template, existing) {
-	// Get attributes to remove
-	const remove = existing.attributes.filter(function (attribute) {
-		const getAtt = template.attributes.find(function (newAtt) {
-			return attribute.attributeName === newAtt.attributeName;
-		});
-		return getAtt === undefined;
-	});
-
-	// Get attributes to change
-	const change = template.attributes.filter(function (attribute) {
-		const getAtt = existing.attributes.find((existingAtt) => {
-			return attribute.attributeName === existingAtt.attributeName;
-		});
-		return getAtt === undefined || getAtt.value !== attribute.value;
-	});
-
-	// Add/remove any required attributes
-	addAttributes(existing.node, change);
-	removeAttributes(existing.node, remove);
+	}
 };
 
 /**
- * Make an HTML element
- * @param  {Object} element The element details
- * @param  {Object} templateResult
- * @return {HTMLElement|false}        The HTML element
+ * Checks whether the given element or node is a TemplateElement or not
+ * @param {Element|Node} element
+ * @returns {boolean}
  */
-const makeElement = function (element, templateResult) {
-	// Create the element
-	let node;
-	if (element.type === 'text') {
-		node = document.createTextNode(element.content);
-	} else if (element.type === 'comment') {
-		node = document.createComment(element.content);
-	} else if (element.isSVG) {
-		node = document.createElementNS('http://www.w3.org/2000/svg', element.type);
-	} else {
-		node = document.createElement(element.type);
-	}
-
-	// Add attributes
-	addAttributes(node, element.attributes);
-
-	// If the element has child nodes, create them
-	// Otherwise, add textContent
-
-	if (element.children.domMap.length > 0) {
-		diff(element.children, { domMap: [] }, node);
-	} else if (templateResult.plainlySetInnerHTML) {
-		node.innerHTML = templateResult.innerHTML;
-	} else if (element.type !== 'text') {
-		node.textContent = element.content;
-	}
-
-	return node;
-};
-
 const isTemplateElement = (element) => {
-	const tagName = element.node?.tagName?.toLowerCase() ?? false;
+	const tagName = element.tagName?.toLowerCase() ?? false;
 	if (!tagName || !tagName.includes('-')) {
 		return false;
 	}
@@ -180,99 +64,95 @@ const isTemplateElement = (element) => {
 };
 
 /**
- * Diff the existing DOM node versus the template
- * @param  {{ domMap: Array, plainlySetInnerHTML?: boolean, innerHTML?: string }} templateResult A DOM tree map of the template content
- * @param  {{ domMap: array }} domResult      A DOM tree map of the existing DOM node
- * @param  {HTMLElement}  element        The element to render content into
+ * Diff a live DOM node against a template DOM node
+ * @param {Node} templateNode
+ * @param {Node} domNode
  */
-const diff = function (templateResult, domResult, element) {
-	const templateMap = templateResult.domMap;
-
-	if (templateResult.plainlySetInnerHTML) {
-		element.innerHTML = templateResult.innerHTML;
-		return;
-	}
-
-	const domMap = domResult.domMap;
+const diffNodes = function (templateNode, domNode) {
+	const templateChildNodes = [...templateNode.childNodes];
+	const domChildNodes = [...domNode.childNodes];
+
+	// Diff each node in the child node lists
+	const 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 extra elements in domMap, remove them
-	let count = domMap.length - templateMap.length;
-	if (count > 0) {
-		for (; count > 0; count--) {
-			domMap[domMap.length - count].node.parentNode.removeChild(domMap[domMap.length - count].node);
+		// If the template node doesn't exist, remove the node in the DOM
+		if (!templateChildNode) {
+			domChildNode.parentNode.removeChild(domChildNode);
+			continue;
 		}
-	}
 
-	// Diff each item in the templateMap
-	templateMap.forEach(function (node, index) {
-		// If element doesn't exist, create it
-		if (!domMap[index]) {
-			const newElement = makeElement(node, node.children);
-			element.appendChild(newElement);
-			return;
+		// If DOM node is equal to the template node, don't do anything
+		if (domChildNode.isEqualNode(templateChildNode)) {
+			continue;
 		}
 
-		// If element is not the same type, replace it with new element
-		if (templateMap[index].type !== domMap[index].type) {
-			domMap[index].node.parentNode.replaceChild(
-				makeElement(templateMap[index], node.children),
-				domMap[index].node,
-			);
-			return;
+		// If node types are not the same, replace the DOM node with the template node
+		if (templateChildNode.nodeType !== domChildNode.nodeType) {
+			domChildNode.parentNode.replaceChild(templateChildNode, domChildNode);
+			continue;
 		}
 
-		// If attributes are different, update them
-		diffAttributes(templateMap[index], domMap[index]);
+		// If the element tag names are not the same, replace the DOM node with the template node
+		if (templateChildNode.nodeType === 1 && templateChildNode.tagName !== domChildNode.tagName) {
+			domChildNode.parentNode.replaceChild(templateChildNode, domChildNode);
+			continue;
+		}
 
-		if (node.children.plainlySetInnerHTML && domMap[index]) {
-			domMap[index].innerHTML = node.children.innerHTML;
-			return;
+		// If the node is an SVG element, don't even think about diffing it, just replace it
+		if (templateChildNode.nodeType === 1 && templateChildNode.tagName === 'SVG') {
+			domChildNode.parentNode.replaceChild(templateChildNode, domChildNode);
+			continue;
 		}
 
-		// If content is different, update it
-		if (templateMap[index].content !== domMap[index].content) {
-			if (!isTemplateElement(domMap[index])) {
-				// ignore custom elements.
-				domMap[index].node.textContent = templateMap[index].content;
-			}
+		// If the node is an Element node, diff the attributes
+		if (templateChildNode.nodeType === 1) {
+			diffAttributes(templateChildNode, domChildNode);
 		}
 
-		// If target element should be empty, wipe it
-		if (domMap[index].children.domMap.length > 0 && node.children.domMap.length < 1) {
-			if (!isTemplateElement(domMap[index])) {
-				// ignore custom elements.
-				domMap[index].node.innerHTML = '';
-			}
-			return;
+		// If the node is a Text node or a Comment node, update it
+		if (domChildNode.nodeType === 3 || domChildNode.nodeType === 8) {
+			domChildNode.textContent = templateChildNode.textContent;
+			continue;
 		}
 
-		// If element is empty and shouldn't be, build it up
-		// This uses a document fragment to minimize reflows
-		if (domMap[index].children.domMap.length === 0 && node.children.domMap.length > 0) {
-			if (isTemplateElement(domMap[index])) {
-				return;
-			}
+		// If the DOM node should be empty, remove all child nodes
+		if (domChildNode.hasChildNodes() && !templateChildNode.hasChildNodes()) {
+			domChildNode.replaceChildren();
+			continue;
+		}
 
-			const fragment = document.createDocumentFragment();
-			diff(node.children, domMap[index].children, domMap[index].node);
-			element.appendChild(fragment);
-			return;
+		// If the DOM node is empty, but should have children, add child nodes from the template node
+		if (!domChildNode.hasChildNodes() && templateChildNode.hasChildNodes()) {
+			domChildNode.replaceChildren(...templateChildNode.childNodes);
+			continue;
 		}
 
-		// If there are existing child elements that need to be modified, diff them
-		if (node.children.domMap.length > 0) {
-			if (!isTemplateElement(node)) {
-				diff(node.children, domMap[index].children, domMap[index].node);
+		// If there are child nodes, diff them recursively
+		if (templateChildNode.hasChildNodes()) {
+			if (!isTemplateElement(templateChildNode)) {
+				diffNodes(templateChildNode, domChildNode);
 			}
 		}
-	});
+	}
 };
 
-const render = (template, target) => {
-	const templateDOMMap = createDOMMap(convertStringToHTML(template), false, false, 'template');
-	const domMap = createDOMMap(target, false, false, 'dom');
-
-	diff(templateDOMMap, domMap, target);
+/**
+ * Render a template string into the given DOM node
+ * @param {string} template
+ * @param {Node} domNode
+ */
+const render = (template, domNode) => {
+	const templateNode = convertStringToHTML(template);
+	diffNodes(templateNode, domNode);
 };
 
 export { render };

package/src/util/AttributeParser.js

@@ -71,20 +71,38 @@ export function camelToDash(string) {
 	return string.replace(/([A-Z])/g, '-$1').toLowerCase();
 }
 
+/**
+ * Decodes an attribute. Can only be encoded with the `encodeAttribute` method which
+ * is exported from this file.
+ *
+ * @param attribute
+ * @returns {string}
+ */
 export function decodeAttribute(attribute) {
 	return `${attribute}`
-		.replace(/&lt;/g, '<')
-		.replace(/&gt;/g, '>')
-		.replace(/&quot;/g, '"')
-		.replace(/&apos;/g, "'");
+		.replace(/\$lt;/g, '<')
+		.replace(/\$gt;/g, '>')
+		.replace(/\$quot;/g, '"')
+		.replace(/\$apos;/g, "'");
 }
 
+/**
+ * Encodes an attribute. Can only be decoded with the `decodeAttribute` method which
+ * is exported from this file.
+ *
+ * This does not use the standard way to encode an attribute, as the dom parser
+ * that renders the html would understand and automatically decode it. Which results
+ * in non sanitized html output.
+ *
+ * @param attribute
+ * @returns {string}
+ */
 export function encodeAttribute(attribute) {
 	return `${attribute}`
-		.replace(/'/g, '&apos;')
-		.replace(/"/g, '&quot;')
-		.replace(/</g, '&lt;')
-		.replace(/>/g, '&gt;')
+		.replace(/'/g, '$apos;')
+		.replace(/"/g, '$quot;')
+		.replace(/</g, '$lt;')
+		.replace(/>/g, '$gt;')
 		.replace(/\r\n/g, '\n')
 		.replace(/[\r\n]/g, '\n');
 }

package/src/util/Store.js

@@ -0,0 +1,57 @@
+import { isObjectLike } from './AttributeParser';
+
+export class Store {
+	_observer = new Set();
+	_singlePropertyMode = false;
+	_state = {};
+
+	constructor(value) {
+		// wrap primitives with a generic "value" field to generate getter and setter
+		this._singlePropertyMode = !isObjectLike(value);
+		const specificValues = this._singlePropertyMode ? { value } : value;
+		this._state = { ...(!this._singlePropertyMode && this.properties()), ...specificValues };
+
+		Object.entries(this._state).map(([key, value]) => {
+			Object.defineProperty(this, key, {
+				get: () => {
+					return this._state[key];
+				},
+				set: (newValue) => {
+					this._state[key] = newValue;
+					this.requestUpdate();
+				},
+			});
+		});
+	}
+
+	properties() {
+		return {};
+	}
+
+	valueOf() {
+		return this._singlePropertyMode ? this._state.value : this._state;
+	}
+
+	toString() {
+		return `${this._singlePropertyMode ? this._state.value : this._state}`;
+	}
+
+	/**
+	 * @param {BaseElement|Function} observer
+	 */
+	subscribe(observer) {
+		this._observer.add(observer);
+	}
+	/**
+	 * @param {BaseElement|Function} observer
+	 */
+	unsubscribe(observer) {
+		this._observer.delete(observer);
+	}
+
+	requestUpdate() {
+		this._observer.forEach((observer) =>
+			typeof observer.requestUpdate === 'function' ? observer.requestUpdate() : observer(),
+		);
+	}
+}