@webtides/element-js 0.3.2 → 0.4.2

package/package.json

@@ -1,18 +1,25 @@
 {
 	"name": "@webtides/element-js",
-	"version": "0.3.2",
+	"version": "0.4.2",
 	"module": "index.js",
 	"main": "dist/index.js",
-	"exports": {
-		"browser": "./dist/index.js",
-		"import": "./index.js",
-		"default": "./index.js"
-	},
 	"files": [
 		"/dist",
 		"/src",
 		"index.js"
 	],
+	"exports": {
+		".": {
+			"browser": "./dist/index.js",
+			"import": "./index.js",
+			"default": "./index.js"
+		},
+		"./src/*": "./src/*.js",
+		"./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"
+	},
 	"repository": "https://github.com/webtides/element-js.git",
 	"author": "@webtides",
 	"license": "MIT",
@@ -31,9 +38,8 @@
 		"lit-html": "^1.2.1"
 	},
 	"devDependencies": {
-		"@open-wc/semantic-dom-diff": "^0.17.9",
-		"@open-wc/testing": "^2.5.16",
-		"@open-wc/testing-karma": "^3.3.19",
+		"@open-wc/testing": "^3.0.3",
+		"@web/test-runner": "^0.13.26",
 		"babel-eslint": "^10.1.0",
 		"babel-plugin-module-resolver": "^4.0.0",
 		"deepmerge": "^4.2.2",
@@ -41,15 +47,9 @@
 		"eslint": "^7.0.0",
 		"eslint-config-prettier": "^6.11.0",
 		"eslint-plugin-prettier": "^3.1.3",
-		"husky": "^4.2.5",
-		"karma": "^5.0.5",
-		"lint-staged": "^10.2.2",
-		"prettier": "^2.0.5"
-	},
-	"husky": {
-		"hooks": {
-			"pre-commit": "lint-staged"
-		}
+		"husky": "^7.0.4",
+		"lint-staged": "^12.1.2",
+		"prettier": "^2.5.1"
 	},
 	"lint-staged": {
 		"*.{js,json}": [
@@ -60,8 +60,8 @@
 	"scripts": {
 		"lint": "eslint src/**/*.js",
 		"prepare": "esbuild index.js --outfile=dist/index.js --bundle --format=esm --sourcemap --target=chrome79,firefox68,safari12,edge79",
-		"test": "karma start",
-		"test:coverage": "karma start --coverage",
-		"test:watch": "karma start --auto-watch=true --single-run=false"
+		"test": "web-test-runner test/**/*.test.js --node-resolve",
+		"test:coverage": "web-test-runner test/**/*.test.js --node-resolve --coverage",
+		"test:watch": "web-test-runner test/**/*.test.js --node-resolve --watch"
 	}
 }

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';
+
 export { defineElement } from './util/defineElement';
 export { toString } from './util/toString';
 
@@ -369,9 +370,16 @@ class BaseElement extends HTMLElement {
 
 			eventTargets.forEach((eventTarget) => {
 				Object.keys(events).forEach((eventName) => {
-					const callback = events[eventName].bind(this);
-					eventTarget.addEventListener(eventName, callback);
-					this._registeredEvents.push({ eventTarget, eventName, callback });
+					const notation = events[eventName];
+					if (typeof notation === 'function') {
+						const callback = notation.bind(this);
+						eventTarget.addEventListener(eventName, callback);
+						this._registeredEvents.push({ eventTarget, eventName, callback });
+					} else if (typeof notation === 'object' && typeof notation.listener === 'function') {
+						const callback = notation.listener.bind(this);
+						eventTarget.addEventListener(eventName, callback, notation.options ?? {});
+						this._registeredEvents.push({ eventTarget, eventName, callback });
+					}
 				});
 			});
 		});
@@ -400,7 +408,23 @@ class BaseElement extends HTMLElement {
 
 		refsArray.forEach((refNode) => {
 			const refKey = refNode.getAttribute('ref');
-			refsMap[refKey] = refNode;
+			const isListKey = refKey.endsWith('[]');
+			const cleanKey = isListKey ? refKey.slice(0, -2) : refKey;
+			const hasListRef = Array.isArray(refsMap[cleanKey]);
+
+			if (isListKey) {
+				if (!refsMap[cleanKey] || !hasListRef) {
+					// create or overwrite previously registered single ref
+					refsMap[cleanKey] = [];
+				}
+				refsMap[cleanKey].push(refNode);
+			} else if (!hasListRef) {
+				refsMap[refKey] = refNode;
+			} else {
+				console.warn(
+					`Did not register singular ref ${refKey}, ${refNode} as a ref list is already registered under the same name.`,
+				);
+			}
 		});
 
 		this.$refs = refsMap;

package/src/renderer/vanilla/TemplateElement.js

@@ -0,0 +1,52 @@
+import { StyledElement } from '../../StyledElement';
+import { html, spreadAttributes, unsafeHTML } from './util/html';
+import { render } from './util/render';
+export { i18n } from '../../util/i18n';
+
+class TemplateElement extends StyledElement {
+	static _$templateElement$ = true;
+
+	constructor(options) {
+		super({
+			deferUpdate: false,
+			shadowRender: false,
+			styles: [],
+			adoptGlobalStyles: true,
+			mutationObserverOptions: {
+				childList: false,
+			},
+			...options,
+		});
+		this._template = this._options.template;
+
+		if (this._options.shadowRender && !this.shadowRoot) {
+			this.attachShadow({ mode: 'open' });
+		}
+	}
+
+	template() {
+		return html``;
+	}
+
+	update(options) {
+		this.renderTemplate();
+		super.update(options);
+	}
+
+	renderTemplate() {
+		const template = this._template || this.template();
+
+		if (typeof template === 'string') {
+			// just a plain string literal. no fancy rendering required
+			this.getRoot().innerHTML = `${template}`;
+		} else {
+			render(template, this.getRoot());
+		}
+	}
+
+	getRoot() {
+		return this.shadowRoot !== null ? this.shadowRoot : this;
+	}
+}
+
+export { TemplateElement, html, unsafeHTML, render, spreadAttributes };

package/src/renderer/vanilla/index.js

@@ -0,0 +1,18 @@
+import { BaseElement } from '../../BaseElement';
+import { StyledElement } from '../../StyledElement';
+import { TemplateElement, html, unsafeHTML, spreadAttributes } from './TemplateElement';
+import { toString } from '../../util/toString';
+import { defineElement } from '../../util/defineElement';
+import { i18n } from '../../util/i18n';
+
+export {
+	BaseElement,
+	StyledElement,
+	TemplateElement,
+	html,
+	unsafeHTML,
+	spreadAttributes,
+	toString,
+	defineElement,
+	i18n,
+};

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

@@ -0,0 +1,78 @@
+import { camelToDash, decodeAttribute, encodeAttribute } from '../../../util/AttributeParser';
+
+class Part {
+	constructor(value) {
+		this.value = value;
+	}
+
+	toString() {
+		if (typeof this.value !== 'string') {
+			return encodeAttribute(JSON.stringify(this.value));
+		}
+		return encodeAttribute(this.value);
+	}
+}
+
+class TemplatePart extends Part {
+	$$templatePart = true;
+
+	constructor(value) {
+		super(value?.$$templatePart ? value.value : value);
+	}
+
+	toString() {
+		if (this.value === null || this.value === undefined) {
+			return '';
+		} else if (this.value === '') {
+			return '';
+		} else if (Array.isArray(this.value)) {
+			return this.value.map((row) => new TemplatePart(row).toString()).join('');
+		} else if (this.value?.$$templateLiteral) {
+			return this.value.toString();
+		} else if (typeof this.value === 'function') {
+			// A directive
+			return this.value(this);
+		}
+		return super.toString();
+	}
+}
+
+class TemplateLiteral {
+	$$templateLiteral = true;
+
+	constructor(strings, ...values) {
+		let result = [];
+		for (let i = 0; i < strings.length; i++) {
+			result.push(strings[i]);
+
+			if (i < values.length) {
+				result.push(new TemplatePart(values[i]));
+			}
+		}
+		this.result = result;
+	}
+
+	toString() {
+		return `${this.result.join('')}`;
+	}
+}
+
+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 };

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

@@ -0,0 +1,278 @@
+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
+ */
+const getAttributes = function (attributes) {
+	return Array.prototype.map.call(attributes, function (attribute) {
+		return {
+			attributeName: attribute.name,
+			value: attribute.value,
+		};
+	});
+};
+
+/**
+ * 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
+ */
+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 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;
+		}
+
+		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
+ */
+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;
+	if (!tagName || !tagName.includes('-')) {
+		return false;
+	}
+
+	if (_cachedTemplateElements[tagName]) {
+		return true;
+	}
+
+	const elementClass = customElements.get(tagName);
+	const isTemplateElement = elementClass && elementClass._$templateElement$ === true;
+
+	if (isTemplateElement) {
+		_cachedTemplateElements[tagName] = elementClass;
+	}
+
+	return isTemplateElement;
+};
+
+/**
+ * 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
+ */
+const diff = function (templateResult, domResult, element) {
+	const templateMap = templateResult.domMap;
+
+	if (templateResult.plainlySetInnerHTML) {
+		element.innerHTML = templateResult.innerHTML;
+		return;
+	}
+
+	const domMap = domResult.domMap;
+
+	// 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);
+		}
+	}
+
+	// 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 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 attributes are different, update them
+		diffAttributes(templateMap[index], domMap[index]);
+
+		if (node.children.plainlySetInnerHTML && domMap[index]) {
+			domMap[index].innerHTML = node.children.innerHTML;
+			return;
+		}
+
+		// 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 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 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;
+			}
+
+			const fragment = document.createDocumentFragment();
+			diff(node.children, domMap[index].children, domMap[index].node);
+			element.appendChild(fragment);
+			return;
+		}
+
+		// 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);
+			}
+		}
+	});
+};
+
+const render = (template, target) => {
+	const templateDOMMap = createDOMMap(convertStringToHTML(template), false, false, 'template');
+	const domMap = createDOMMap(target, false, false, 'dom');
+
+	diff(templateDOMMap, domMap, target);
+};
+
+export { render };

package/src/util/AttributeParser.js

@@ -64,3 +64,21 @@ export function dashToCamel(string) {
 export function camelToDash(string) {
 	return string.replace(/([A-Z])/g, '-$1').toLowerCase();
 }
+
+export function decodeAttribute(attribute) {
+	return `${attribute}`
+		.replace(/&lt;/g, '<')
+		.replace(/&gt;/g, '>')
+		.replace(/&quot;/g, '"')
+		.replace(/&apos;/g, "'");
+}
+
+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');
+}