@webtides/element-js 0.7.3 → 1.0.0-alpha.2

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

@@ -1,78 +0,0 @@
-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,65 +0,0 @@
-import { encodeAttribute } from '../../../util/AttributeParser.js';
-import { unsafeHTML, spreadAttributes } from './directives.js';
-
-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);
-};
-
-export { Part, TemplatePart, TemplateLiteral, html, unsafeHTML, spreadAttributes };

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

@@ -1,149 +0,0 @@
-import { TemplateElement } from '../TemplateElement.js';
-
-/**
- * Parses the given template string and returns a real DOM element.
- * @param {string} template
- * @returns {HTMLElement}
- */
-const convertStringToHTML = (template) => {
-	const parser = new DOMParser();
-	const document = parser.parseFromString(template.toString(), 'text/html');
-	return document.body;
-};
-
-/**
- * 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 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);
-		}
-	}
-};
-
-/**
- * Checks whether the given element or node is a TemplateElement or not
- * @param {Element|Node} element
- * @returns {boolean}
- */
-const isTemplateElement = (element) => {
-	const tagName = element.tagName?.toLowerCase() ?? false;
-	if (!tagName || !tagName.includes('-') || element.shadowRoot) {
-		return false;
-	}
-	return element instanceof TemplateElement;
-};
-
-/**
- * Diff a live DOM node against a template DOM node
- * @param {Node} templateNode
- * @param {Node} domNode
- */
-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 the template node doesn't exist, remove the node in the DOM
-		if (!templateChildNode) {
-			domChildNode.parentNode.removeChild(domChildNode);
-			continue;
-		}
-
-		// If DOM node is equal to the template node, don't do anything
-		if (domChildNode.isEqualNode(templateChildNode)) {
-			continue;
-		}
-
-		// 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 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 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 the node is an Element node, diff the attributes
-		if (templateChildNode.nodeType === 1) {
-			diffAttributes(templateChildNode, domChildNode);
-		}
-
-		// 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 the DOM node should be empty, remove all child nodes
-		if (domChildNode.hasChildNodes() && !templateChildNode.hasChildNodes()) {
-			domChildNode.replaceChildren();
-			continue;
-		}
-
-		// 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 child nodes, diff them recursively
-		if (templateChildNode.hasChildNodes()) {
-			// https://stackoverflow.com/questions/46898739/why-domparser-doesnt-use-the-customelements-registered
-			// we have to use the domChildNode here because the templateChildNode is not upgraded because it was not
-			// imported into a document yet and therefore instanceOf will not work...
-			if (!isTemplateElement(domChildNode)) {
-				diffNodes(templateChildNode, domChildNode);
-			}
-		}
-	}
-};
-
-/**
- * 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 };