@oscarpalmer/toretto 0.41.0 → 0.42.0

package/src/create.ts

@@ -0,0 +1,81 @@
+import type {Primitive} from '@oscarpalmer/atoms/models';
+import {setAttributes} from './attribute';
+import {setStyles} from './style';
+import {setProperties} from './property';
+
+// #region Types
+
+type Properties<Target extends Element> = {
+	[Property in keyof Target]?: Target[Property] extends Primitive ? Target[Property] : never;
+};
+
+type Styles = Partial<Record<keyof CSSStyleDeclaration, unknown>>;
+
+// #endregion
+
+// #region Functions
+
+/**
+ * Creates an HTML element with the specified tag name together with optional properties, attributes, and styles
+ * @param tag Tag name
+ * @param properties Element properties
+ * @param attributes Element attributes
+ * @param styles Element styles
+ * @returns Created element
+ */
+export function createElement<TagName extends keyof HTMLElementTagNameMap>(
+	tag: TagName,
+	properties?: Properties<HTMLElementTagNameMap[TagName]>,
+	attributes?: Record<string, unknown>,
+	styles?: Styles,
+): HTMLElementTagNameMap[TagName];
+
+/**
+ * Creates an HTML element with the specified tag name together with optional properties, attributes, and styles
+ * @param tag Tag name
+ * @param properties Element properties
+ * @param attributes Element attributes
+ * @param styles Element styles
+ * @returns Created element
+ */
+export function createElement(
+	tag: string,
+	properties?: Properties<HTMLElement>,
+	attributes?: Record<string, unknown>,
+	styles?: Styles,
+): HTMLUnknownElement;
+
+export function createElement(
+	tag: string,
+	properties?: Properties<HTMLElement>,
+	attributes?: Record<string, unknown>,
+	styles?: Styles,
+): HTMLElement {
+	if (typeof tag !== 'string') {
+		throw new TypeError(MESSAGE);
+	}
+
+	const element = document.createElement(tag);
+
+	if (properties != null) {
+		setProperties(element, properties);
+	}
+
+	if (attributes != null) {
+		setAttributes(element, attributes);
+	}
+
+	if (styles != null) {
+		setStyles(element, styles);
+	}
+
+	return element;
+}
+
+// #endregion
+
+// #region Variables
+
+const MESSAGE = 'Tag name must be a string';
+
+// #endregion

package/src/data.ts

@@ -1,10 +1,12 @@
 import type {PlainObject} from '@oscarpalmer/atoms/models';
 import {parse} from '@oscarpalmer/atoms/string';
-import {kebabCase} from '@oscarpalmer/atoms/string/case';
+import {camelCase, kebabCase} from '@oscarpalmer/atoms/string/case';
 import {setElementValues, updateElementValue} from './internal/element-value';
 import {EXPRESSION_DATA_PREFIX} from './internal/get-value';
 import {isHTMLOrSVGElement} from './internal/is';
 
+// #region Functions
+
 /**
  * Get a keyed data value from an element
  * @param element Element to get data from
@@ -32,16 +34,16 @@ export function getData(element: Element, keys: string | string[], parseValues?:
 		return;
 	}
 
-	const shouldParse = parseValues !== false;
+	const noParse = parseValues === false;
 
 	if (typeof keys === 'string') {
-		const value = element.dataset[keys];
+		const value = element.dataset[camelCase(keys)];
 
 		if (value === undefined) {
 			return;
 		}
 
-		return shouldParse ? parse(value) : value;
+		return noParse ? value : parse(value);
 	}
 
 	const {length} = keys;
@@ -50,12 +52,12 @@ export function getData(element: Element, keys: string | string[], parseValues?:
 
 	for (let index = 0; index < length; index += 1) {
 		const key = keys[index];
-		const value = element.dataset[key];
+		const value = element.dataset[camelCase(key)];
 
 		if (value == null) {
 			data[key] = undefined;
 		} else {
-			data[key] = shouldParse ? parse(value) : value;
+			data[key] = noParse ? value : parse(value);
 		}
 	}
 
@@ -63,7 +65,7 @@ export function getData(element: Element, keys: string | string[], parseValues?:
 }
 
 function getName(original: string): string {
-	return `${ATTRIBUTE_DATA_PREFIX}${kebabCase(original).replace(EXPRESSION_DATA_PREFIX, '')}`;
+	return `${ATTRIBUTE_DATA_PREFIX}${kebabCase(original.replace(EXPRESSION_DATA_PREFIX, ''))}`;
 }
 
 /**
@@ -90,13 +92,19 @@ function updateDataAttribute(element: Element, key: string, value: unknown): voi
 		element,
 		getName(key),
 		value,
+		// oxlint-disable-next-line typescript/unbound-method: using .call in `updateElementValue`
 		element.setAttribute,
+		// oxlint-disable-next-line typescript/unbound-method: using .call in `updateElementValue`
 		element.removeAttribute,
 		false,
 		true,
 	);
 }
 
-//
+// #endregion
+
+// #region Variables
 
 const ATTRIBUTE_DATA_PREFIX = 'data-';
+
+// #endregion

package/src/event/delegation.ts

@@ -1,13 +1,17 @@
 import {isEventTarget} from '../internal/is';
 import type {CustomEventListener, RemovableEventListener} from '../models';
 
-//
+// #region Types
 
 export type EventTargetWithListeners = EventTarget &
 	Partial<{
 		[key: string]: Set<EventListener | CustomEventListener>;
 	}>;
 
+// #endregion
+
+// #region Functions
+
 function addDelegatedHandler(doc: Document, type: string, name: string, passive: boolean): void {
 	if (DELEGATED.has(name)) {
 		return;
@@ -44,8 +48,21 @@ function delegatedEventHandler(this: boolean, event: Event): void {
 	const items = event.composedPath();
 	const {length} = items;
 
+	let cancelled = false;
 	let target = items[0];
 
+	// oxlint-disable-next-line typescript/unbound-method: using `.call` to ensure correct `this` context
+	const originalStopPropagation = event.stopPropagation;
+
+	event.stopPropagation = function () {
+		cancelled = true;
+
+		originalStopPropagation.call(event);
+	};
+
+	// Event is one and the same for all listeners, so stopping propagation should work the same, regardless of stop type
+	event.stopImmediatePropagation = event.stopPropagation.bind(event);
+
 	Object.defineProperties(event, {
 		currentTarget: {
 			configurable: true,
@@ -72,7 +89,7 @@ function delegatedEventHandler(this: boolean, event: Event): void {
 		for (const listener of listeners) {
 			(listener as EventListener).call(item, event);
 
-			if (event.cancelBubble) {
+			if (cancelled) {
 				return;
 			}
 		}
@@ -115,7 +132,9 @@ export function removeDelegatedListener(
 	return true;
 }
 
-//
+// #endregion
+
+// #region Variables
 
 const DELEGATED = new Set<string>();
 
@@ -153,3 +172,5 @@ const EVENT_TYPES: Set<string> = new Set([
 const HANDLER_ACTIVE = delegatedEventHandler.bind(false);
 
 const HANDLER_PASSIVE = delegatedEventHandler.bind(true);
+
+// #endregion

package/src/event/index.ts

@@ -10,7 +10,7 @@ import {
 	removeDelegatedListener,
 } from './delegation';
 
-//
+// #region Types
 
 type EventOptions = {
 	capture: boolean;
@@ -19,7 +19,9 @@ type EventOptions = {
 	signal?: AbortSignal;
 };
 
-//
+// #endregion
+
+// #region Functions
 
 function createDispatchOptions(options: EventInit): EventInit {
 	return {
@@ -219,6 +221,10 @@ export function on(
 	};
 }
 
-//
+// #endregion
+
+// #region Variables
 
 const PROPERTY_DETAIL = 'detail';
+
+// #endregion

package/src/find/index.ts

@@ -1,6 +1,8 @@
 import type {PlainObject} from '@oscarpalmer/atoms/models';
 import type {Selector} from '../models';
 
+// #region Functions
+
 /**
  * Find the first element that matches the tag name
  * @param tagName Tag name of element to find
@@ -180,7 +182,9 @@ function isContext(value: unknown): boolean {
 	);
 }
 
-//
+// #endregion
+
+// #region Variables
 
 const QUERY_SELECTOR_ALL = 'querySelectorAll';
 
@@ -194,7 +198,11 @@ const SUFFIX_HOVER = ':hover';
 
 const TAG_HEAD = 'HEAD';
 
-//
+// #endregion
+
+// #region Exports
 
-export {findElement as $, findElements as $$};
 export {findAncestor, findRelatives, getDistance} from './relative';
+export {findElement as $, findElements as $$};
+
+// #endregion

package/src/find/relative.ts

@@ -1,3 +1,5 @@
+// #region Functions
+
 /**
  * Find the closest ancestor element that matches the tag name
  *
@@ -211,3 +213,5 @@ function traverse(from: Element, to: Element): number | undefined {
 		parent = parent.parentElement;
 	}
 }
+
+// #endregion

package/src/focusable.ts

@@ -1,5 +1,7 @@
 // Based on https://github.com/focus-trap/tabbable :-)
 
+// #region Types
+
 type ElementWithTabIndex = {
 	element: Element;
 	tabIndex: number;
@@ -9,7 +11,9 @@ type Filter = (item: ElementWithTabIndex) => boolean;
 
 type InertElement = Element & {inert: boolean};
 
-//
+// #endregion
+
+// #region Functions
 
 /**
  * Get a list of focusable elements within a parent element
@@ -230,7 +234,9 @@ function isValidElement(element: Element, filters: Filter[], tabbable: boolean):
 	return !filters.some(filter => filter(item));
 }
 
-//
+// #endregion
+
+// #region Variables
 
 const ATTRIBUTE_CONTENTEDITABLE = 'contenteditable';
 
@@ -294,3 +300,5 @@ const TABINDEX_BASE = 0;
 const TABINDEX_DEFAULT = -1;
 
 const TYPE_RADIO = 'radio';
+
+// #endregion

package/src/html/index.ts

@@ -1,36 +1,9 @@
 import {isPlainObject} from '@oscarpalmer/atoms/is';
+import {SizedMap} from '@oscarpalmer/atoms/sized/map';
+import {getString} from '@oscarpalmer/atoms/string';
 import {sanitizeNodes} from './sanitize';
 
-//
-
-type Html = {
-	/**
-	 * Create nodes from an HTML string or a template element
-	 * @param value HTML string or id for a template element
-	 * @param options Options for creating nodes
-	 * @returns Created nodes
-	 */
-	(value: string, options?: HtmlOptions): Node[];
-
-	/**
-	 * Create nodes from a template element
-	 * @param template Template element
-	 * @param options Options for creating nodes
-	 * @returns Created nodes
-	 */
-	(template: HTMLTemplateElement, options?: HtmlOptions): Node[];
-
-	/**
-	 * Clear cache of template elements
-	 */
-	clear(): void;
-
-	/**
-	 * Remove cached template element for an HTML string or id
-	 * @param template HTML string or id for a template element
-	 */
-	remove(template: string): void;
-};
+// #region Types
 
 type HtmlOptions = {
 	/**
@@ -41,7 +14,14 @@ type HtmlOptions = {
 
 type Options = Required<HtmlOptions>;
 
-//
+type Tagged = {
+	nodes: Node[];
+	template: string;
+};
+
+// #endregion
+
+// #region Functions
 
 function createHtml(value: string | HTMLTemplateElement): string {
 	const parsed = getParser().parseFromString(getHtml(value), PARSE_TYPE_HTML);
@@ -62,27 +42,41 @@ function createTemplate(
 	template.innerHTML = createHtml(value);
 
 	if (typeof value === 'string' && options.cache) {
-		templates[value] = template;
+		templates.set(value, template);
 	}
 
 	return template;
 }
 
+function getComment(index: number): string {
+	return COMMENT_TEMPLATE.replace(COMMENT_INDEX, String(index));
+}
+
 function getHtml(value: string | HTMLTemplateElement): string {
 	return `${TEMPORARY_ELEMENT}${typeof value === 'string' ? value : value.innerHTML}${TEMPORARY_ELEMENT}`;
 }
 
-function getNodes(value: string | HTMLTemplateElement, options: Options): Node[] {
+function getNodes(value: unknown, options: Options, nodes?: Node[]): Node[] {
 	if (typeof value !== 'string' && !(value instanceof HTMLTemplateElement)) {
 		return [];
 	}
 
 	const template = getTemplate(value, options);
 
-	return template == null ? [] : [...template.content.cloneNode(true).childNodes];
+	if (template == null) {
+		return [];
+	}
+
+	const cloned = [...template.content.cloneNode(true).childNodes];
+
+	if (nodes != null) {
+		replaceComments(cloned, nodes);
+	}
+
+	return cloned;
 }
 
-function getOptions(input?: HtmlOptions): Options {
+function getOptions(input?: unknown): Options {
 	const options = isPlainObject(input) ? input : {};
 
 	options.cache = typeof options.cache === 'boolean' ? options.cache : true;
@@ -96,6 +90,58 @@ function getParser(): DOMParser {
 	return parser;
 }
 
+function getTagged(strings: TemplateStringsArray, values: unknown[]): Tagged {
+	const tagged: Tagged = {
+		nodes: [],
+		template: '',
+	};
+
+	const stringsLength = strings.length;
+
+	let nodeIndex = 0;
+
+	for (let stringIndex = 0; stringIndex < stringsLength; stringIndex += 1) {
+		const value = values[stringIndex];
+
+		tagged.template += strings[stringIndex];
+
+		if (value instanceof Node) {
+			tagged.nodes.push(value);
+
+			tagged.template += getComment(nodeIndex);
+
+			nodeIndex += 1;
+		} else if (hasNodes(value)) {
+			const items = [...value];
+			const itemsLength = items.length;
+
+			for (let itemIndex = 0; itemIndex < itemsLength; itemIndex += 1) {
+				const item = items[itemIndex];
+
+				if (item instanceof Node) {
+					tagged.nodes.push(item);
+
+					tagged.template += getComment(nodeIndex);
+
+					nodeIndex += 1;
+				} else {
+					tagged.template += getString(item);
+				}
+			}
+		} else if (Array.isArray(value)) {
+			const valueLength = value.length;
+
+			for (let valueIndex = 0; valueIndex < valueLength; valueIndex += 1) {
+				tagged.template += getString(value[valueIndex]);
+			}
+		} else {
+			tagged.template += getString(value);
+		}
+	}
+
+	return tagged;
+}
+
 function getTemplate(
 	value: string | HTMLTemplateElement,
 	options: Options,
@@ -108,7 +154,7 @@ function getTemplate(
 		return;
 	}
 
-	let template = templates[value];
+	let template = templates.get(value);
 
 	if (template != null) {
 		return template;
@@ -119,34 +165,87 @@ function getTemplate(
 	return createTemplate(element instanceof HTMLTemplateElement ? element : value, options);
 }
 
-const html = ((value: string | HTMLTemplateElement, options?: Options): Node[] => {
-	return getNodes(value, getOptions(options));
-}) as Html;
+function hasNodes(value: unknown): value is HTMLCollection | NodeList | Node[] {
+	if (value instanceof HTMLCollection || value instanceof NodeList) {
+		return true;
+	}
+
+	return Array.isArray(value) && value.some(item => item instanceof Node);
+}
+
+/**
+ * Create nodes from a template string
+ * @returns Created nodes
+ */
+export function html(strings: TemplateStringsArray, ...values: unknown[]): Node[];
+
+/**
+ * Create nodes from an HTML string or a template element
+ * @param value HTML string or id for a template element
+ * @param options Options for creating nodes
+ * @returns Created nodes
+ */
+export function html(value: string, options?: HtmlOptions): Node[];
+
+/**
+ * Create nodes from a template element
+ * @param template Template element
+ * @param options Options for creating nodes
+ * @returns Created nodes
+ */
+export function html(template: HTMLTemplateElement, options?: HtmlOptions): Node[];
+
+export function html(first: unknown, ...second: unknown[]): Node[] {
+	if (isTagged(first)) {
+		const tagged = getTagged(first, second);
+
+		return getNodes(tagged.template, getOptions(), tagged.nodes);
+	}
+
+	return getNodes(first, getOptions(second[0]));
+}
 
+/**
+ * Clear cache of template elements
+ */
 html.clear = (): void => {
-	templates = {};
+	templates.clear();
 };
 
+/**
+ * Remove cached template element for an HTML string or id
+ * @param template HTML string or id for a template element
+ */
 html.remove = (template: string): void => {
-	if (typeof template !== 'string' || templates[template] == null) {
-		return;
-	}
+	templates.delete(template);
+};
 
-	const keys = Object.keys(templates);
-	const {length} = keys;
+function isTagged(value: unknown): value is TemplateStringsArray {
+	return Array.isArray(value) && Array.isArray((value as unknown as TemplateStringsArray).raw);
+}
+
+function replaceComments(origin: NodeList | Node[], replacements: Node[]): void {
+	const nodes = [...origin];
+	const {length} = nodes;
+
+	for (let nodeIndex = 0; nodeIndex < length; nodeIndex += 1) {
+		const node = nodes[nodeIndex];
 
-	const updated: Record<string, HTMLTemplateElement> = {};
+		if (node instanceof Comment) {
+			const [, index] = EXPRESSION_COMMENT.exec(node.textContent) ?? [];
 
-	for (let index = 0; index < length; index += 1) {
-		const key = keys[index];
+			if (index != null) {
+				node.replaceWith(replacements[Number(index)]);
+			}
 
-		if (key !== template) {
-			updated[key] = templates[key];
+			continue;
 		}
-	}
 
-	templates = updated;
-};
+		if (node.hasChildNodes()) {
+			replaceComments(node.childNodes, replacements);
+		}
+	}
+}
 
 /**
  * Sanitize one or more nodes, recursively
@@ -158,7 +257,15 @@ export function sanitize(value: Node | Node[]): Node[] {
 	return sanitizeNodes(Array.isArray(value) ? value : [value], 0);
 }
 
-//
+// #endregion
+
+// #region Variables
+
+const COMMENT_INDEX = '<index>';
+
+const COMMENT_TEMPLATE = `<!--toretto.node:${COMMENT_INDEX}-->`;
+
+const EXPRESSION_COMMENT = /^toretto\.node:(\d+)$/;
 
 const EXPRESSION_ID = /^[a-z][\w-]*$/i;
 
@@ -168,10 +275,11 @@ const TEMPLATE_TAG = 'template';
 
 const TEMPORARY_ELEMENT = '<toretto-temporary></toretto-temporary>';
 
-let parser: DOMParser;
+const templates = new SizedMap<string, HTMLTemplateElement>(128);
 
-let templates: Record<string, HTMLTemplateElement> = {};
+let parser: DOMParser;
 
-//
+// @ts-expect-error debug
+window.templates = templates;
 
-export {html};
+// #endregion

package/src/html/sanitize.ts

@@ -1,16 +1,15 @@
-import {setAttribute} from '../attribute/set';
-import {
-	_isBadAttribute,
-	_isEmptyNonBooleanAttribute,
-	_isInvalidBooleanAttribute,
-} from '../internal/attribute';
+import {setAttribute} from '../attribute/set.attribute';
+import {_isBadAttribute, _isInvalidBooleanAttribute} from '../internal/attribute';
+
+// #region Functions
 
 function handleElement(element: Element, depth: number): void {
 	if (depth === 0) {
-		const removable = element.querySelectorAll(REMOVE_SELECTOR);
+		const removable = [...element.querySelectorAll(REMOVE_SELECTOR)];
+		const {length} = removable;
 
-		for (const item of removable) {
-			item.remove();
+		for (let index = 0; index < length; index += 1) {
+			removable[index].remove();
 		}
 	}
 
@@ -49,7 +48,7 @@ export function sanitizeAttributes(element: Element, attributes: Attr[]): void {
 	for (let index = 0; index < length; index += 1) {
 		const {name, value} = attributes[index];
 
-		if (_isBadAttribute(name, value, false) || _isEmptyNonBooleanAttribute(name, value, false)) {
+		if (_isBadAttribute(name, value, false)) {
 			element.removeAttribute(name);
 		} else if (_isInvalidBooleanAttribute(name, value, false)) {
 			setAttribute(element, name, true);
@@ -103,8 +102,12 @@ export function sanitizeNodes(nodes: Node[], depth: number): Node[] {
 	return nodes;
 }
 
-//
+// #endregion
+
+// #region Variables
 
 const COMMENT_HARMFUL = /<[/\w]/g;
 
 const REMOVE_SELECTOR = 'script, toretto-temporary';
+
+// #endregion