@oscarpalmer/toretto 0.41.0 → 0.42.0

package/dist/attribute/{get.d.mts → get.attribute.d.mts}

@@ -1,4 +1,5 @@
-//#region src/attribute/get.d.ts
+//#region src/attribute/get.attribute.d.ts
+type DataPrefixedName = `data-${string}`;
 /**
  * Get the value of a specific attribute from an element
  * @param element Element to get attribute from
@@ -6,7 +7,7 @@
  * @param parse Parse value? _(defaults to `true`)_
  * @returns Attribute value _(or `undefined`)_
  */
-declare function getAttribute(element: Element, name: `data-${string}`, parse?: boolean): unknown;
+declare function getAttribute(element: Element, name: DataPrefixedName, parse?: boolean): unknown;
 /**
  * Get the value of a specific attribute from an element
  * @param element Element to get attribute from

package/dist/attribute/{get.mjs → get.attribute.mjs}

@@ -1,8 +1,9 @@
 import { isHTMLOrSVGElement } from "../internal/is.mjs";
 import { getAttributeValue } from "../internal/get-value.mjs";
-//#region src/attribute/get.ts
+import { kebabCase } from "@oscarpalmer/atoms/string/case";
+//#region src/attribute/get.attribute.ts
 function getAttribute(element, name, parseValues) {
-	if (isHTMLOrSVGElement(element) && typeof name === "string") return getAttributeValue(element, name, parseValues !== false);
+	if (isHTMLOrSVGElement(element) && typeof name === "string") return getAttributeValue(element, kebabCase(name), parseValues !== false);
 }
 /**
 * Get specific attributes from an element
@@ -18,7 +19,7 @@ function getAttributes(element, names, parseData) {
 	const { length } = names;
 	for (let index = 0; index < length; index += 1) {
 		const name = names[index];
-		if (typeof name === "string") attributes[name] = getAttributeValue(element, name, shouldParse);
+		if (typeof name === "string") attributes[name] = getAttributeValue(element, kebabCase(name), shouldParse);
 	}
 	return attributes;
 }

package/dist/attribute/index.d.mts

@@ -1,7 +1,7 @@
-import { getAttribute, getAttributes } from "./get.mjs";
+import { getAttribute, getAttributes } from "./get.attribute.mjs";
 import { Attribute } from "../models.mjs";
 import { booleanAttributes } from "../internal/attribute.mjs";
-import { setAttribute, setAttributes } from "./set.mjs";
+import { setAttribute, setAttributes } from "./set.attribute.mjs";
 
 //#region src/attribute/index.d.ts
 /**
@@ -29,19 +29,6 @@ declare function isBooleanAttribute(attribute: Attr | Attribute): boolean;
  * @returns `true` if attribute is a boolean attribute
  */
 declare function isBooleanAttribute(name: string): boolean;
-/**
- * Is the attribute empty and not a boolean attribute?
- * @param attribute Attribute to check
- * @returns `true` if attribute is empty and not a boolean attribute
- */
-declare function isEmptyNonBooleanAttribute(attribute: Attr | Attribute): boolean;
-/**
- * Is the attribute empty and not a boolean attribute?
- * @param name Attribute name
- * @param value Attribute value
- * @returns `true` if attribute is empty and not a boolean attribute
- */
-declare function isEmptyNonBooleanAttribute(name: string, value: string): boolean;
 /**
  * Is the attribute an invalid boolean attribute?
  *
@@ -60,4 +47,4 @@ declare function isInvalidBooleanAttribute(attribute: Attr | Attribute): boolean
  */
 declare function isInvalidBooleanAttribute(name: string, value: string): boolean;
 //#endregion
-export { booleanAttributes, getAttribute, getAttributes, isBadAttribute, isBooleanAttribute, isEmptyNonBooleanAttribute, isInvalidBooleanAttribute, setAttribute, setAttributes };
+export { booleanAttributes, getAttribute, getAttributes, isBadAttribute, isBooleanAttribute, isInvalidBooleanAttribute, setAttribute, setAttributes };

package/dist/attribute/index.mjs

@@ -1,6 +1,6 @@
-import { _isBadAttribute, _isBooleanAttribute, _isEmptyNonBooleanAttribute, _isInvalidBooleanAttribute, booleanAttributes } from "../internal/attribute.mjs";
-import { getAttribute, getAttributes } from "./get.mjs";
-import { setAttribute, setAttributes } from "./set.mjs";
+import { _isBadAttribute, _isBooleanAttribute, _isInvalidBooleanAttribute, booleanAttributes } from "../internal/attribute.mjs";
+import { getAttribute, getAttributes } from "./get.attribute.mjs";
+import { setAttribute, setAttributes } from "./set.attribute.mjs";
 //#region src/attribute/index.ts
 function isBadAttribute(first, second) {
 	return _isBadAttribute(first, second, true);
@@ -8,11 +8,8 @@ function isBadAttribute(first, second) {
 function isBooleanAttribute(first) {
 	return _isBooleanAttribute(first, true);
 }
-function isEmptyNonBooleanAttribute(first, second) {
-	return _isEmptyNonBooleanAttribute(first, second, true);
-}
 function isInvalidBooleanAttribute(first, second) {
 	return _isInvalidBooleanAttribute(first, second, true);
 }
 //#endregion
-export { booleanAttributes, getAttribute, getAttributes, isBadAttribute, isBooleanAttribute, isEmptyNonBooleanAttribute, isInvalidBooleanAttribute, setAttribute, setAttributes };
+export { booleanAttributes, getAttribute, getAttributes, isBadAttribute, isBooleanAttribute, isInvalidBooleanAttribute, setAttribute, setAttributes };

package/dist/attribute/{set.d.mts → set.attribute.d.mts}

@@ -1,7 +1,7 @@
 import { Attribute } from "../models.mjs";
 
-//#region src/attribute/set.d.ts
-type DispatchedAttribute = 'checked' | 'open' | 'value';
+//#region src/attribute/set.attribute.d.ts
+type DispatchedAttributeName = 'checked' | 'open' | 'value';
 /**
  * Set an attribute on an element
  *
@@ -11,7 +11,7 @@ type DispatchedAttribute = 'checked' | 'open' | 'value';
  * @param value Attribute value
  * @param dispatch Dispatch event for attribute? _(defaults to `true`)_
  */
-declare function setAttribute<Name extends DispatchedAttribute>(element: Element, name: Name, value?: unknown, dispatch?: boolean): void;
+declare function setAttribute(element: Element, name: DispatchedAttributeName, value?: unknown, dispatch?: boolean): void;
 /**
  * Set an attribute on an element
  *
@@ -49,4 +49,4 @@ declare function setAttributes(element: Element, attributes: Array<Attr | Attrib
  */
 declare function setAttributes(element: Element, attributes: Record<string, unknown>, dispatch?: boolean): void;
 //#endregion
-export { setAttribute, setAttributes };
+export { DispatchedAttributeName, setAttribute, setAttributes };

package/dist/attribute/{set.mjs → set.attribute.mjs}

@@ -1,6 +1,6 @@
-import { updateAttribute } from "../internal/attribute.mjs";
 import { setElementValue, setElementValues } from "../internal/element-value.mjs";
-//#region src/attribute/set.ts
+import { updateAttribute } from "../internal/attribute.mjs";
+//#region src/attribute/set.attribute.ts
 function setAttribute(element, first, second, third) {
 	setElementValue(element, first, second, third, updateAttribute);
 }

package/dist/create.d.mts

@@ -0,0 +1,25 @@
+import { Primitive } from "@oscarpalmer/atoms/models";
+
+//#region src/create.d.ts
+type Properties<Target extends Element> = { [Property in keyof Target]?: Target[Property] extends Primitive ? Target[Property] : never };
+type Styles = Partial<Record<keyof CSSStyleDeclaration, unknown>>;
+/**
+ * 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
+ */
+declare 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
+ */
+declare function createElement(tag: string, properties?: Properties<HTMLElement>, attributes?: Record<string, unknown>, styles?: Styles): HTMLUnknownElement;
+//#endregion
+export { createElement };

package/dist/create.mjs

@@ -0,0 +1,17 @@
+import { setAttributes } from "./attribute/set.attribute.mjs";
+import "./attribute/index.mjs";
+import { setStyles } from "./style.mjs";
+import { setProperties } from "./property/set.property.mjs";
+import "./property/index.mjs";
+//#region src/create.ts
+function createElement(tag, properties, attributes, styles) {
+	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;
+}
+const MESSAGE = "Tag name must be a string";
+//#endregion
+export { createElement };

package/dist/data.mjs

@@ -1,29 +1,29 @@
 import { isHTMLOrSVGElement } from "./internal/is.mjs";
 import { setElementValues, updateElementValue } from "./internal/element-value.mjs";
 import { EXPRESSION_DATA_PREFIX } from "./internal/get-value.mjs";
+import { camelCase, kebabCase } from "@oscarpalmer/atoms/string/case";
 import { parse } from "@oscarpalmer/atoms/string";
-import { kebabCase } from "@oscarpalmer/atoms/string/case";
 //#region src/data.ts
 function getData(element, keys, parseValues) {
 	if (!isHTMLOrSVGElement(element)) 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 === void 0) return;
-		return shouldParse ? parse(value) : value;
+		return noParse ? value : parse(value);
 	}
 	const { length } = keys;
 	const data = {};
 	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] = void 0;
-		else data[key] = shouldParse ? parse(value) : value;
+		else data[key] = noParse ? value : parse(value);
 	}
 	return data;
 }
 function getName(original) {
-	return `${ATTRIBUTE_DATA_PREFIX}${kebabCase(original).replace(EXPRESSION_DATA_PREFIX, "")}`;
+	return `${ATTRIBUTE_DATA_PREFIX}${kebabCase(original.replace(EXPRESSION_DATA_PREFIX, ""))}`;
 }
 function setData(element, first, second) {
 	setElementValues(element, first, second, null, updateDataAttribute);

package/dist/event/delegation.mjs

@@ -17,7 +17,14 @@ function delegatedEventHandler(event) {
 	const key = `${EVENT_PREFIX}${event.type}${this ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
 	const items = event.composedPath();
 	const { length } = items;
+	let cancelled = false;
 	let target = items[0];
+	const originalStopPropagation = event.stopPropagation;
+	event.stopPropagation = function() {
+		cancelled = true;
+		originalStopPropagation.call(event);
+	};
+	event.stopImmediatePropagation = event.stopPropagation.bind(event);
 	Object.defineProperties(event, {
 		currentTarget: {
 			configurable: true,
@@ -37,7 +44,7 @@ function delegatedEventHandler(event) {
 		target = item;
 		for (const listener of listeners) {
 			listener.call(item, event);
-			if (event.cancelBubble) return;
+			if (cancelled) return;
 		}
 	}
 }

package/dist/html/index.d.mts

@@ -1,36 +1,33 @@
 //#region src/html/index.d.ts
-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;
-};
 type HtmlOptions = {
   /**
    * Cache template element for the HTML string? _(defaults to `true`)_
    */
   cache?: boolean;
 };
-declare const html: Html;
+/**
+ * Create nodes from a template string
+ * @returns Created nodes
+ */
+declare 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
+ */
+declare 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
+ */
+declare function html(template: HTMLTemplateElement, options?: HtmlOptions): Node[];
+declare namespace html {
+  var clear: () => void;
+  var remove: (template: string) => void;
+}
 /**
  * Sanitize one or more nodes, recursively
  * @param value Node or nodes to sanitize

package/dist/html/index.mjs

@@ -1,5 +1,7 @@
 import { sanitizeNodes } from "./sanitize.mjs";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { getString } from "@oscarpalmer/atoms/string";
+import { SizedMap } from "@oscarpalmer/atoms/sized/map";
 //#region src/html/index.ts
 function createHtml(value) {
 	const parsed = getParser().parseFromString(getHtml(value), PARSE_TYPE_HTML);
@@ -10,16 +12,22 @@ function createHtml(value) {
 function createTemplate(value, options) {
 	const template = document.createElement(TEMPLATE_TAG);
 	template.innerHTML = createHtml(value);
-	if (typeof value === "string" && options.cache) templates[value] = template;
+	if (typeof value === "string" && options.cache) templates.set(value, template);
 	return template;
 }
+function getComment(index) {
+	return COMMENT_TEMPLATE.replace(COMMENT_INDEX, String(index));
+}
 function getHtml(value) {
 	return `${TEMPORARY_ELEMENT}${typeof value === "string" ? value : value.innerHTML}${TEMPORARY_ELEMENT}`;
 }
-function getNodes(value, options) {
+function getNodes(value, options, nodes) {
 	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) {
 	const options = isPlainObject(input) ? input : {};
@@ -30,31 +38,86 @@ function getParser() {
 	parser ??= new DOMParser();
 	return parser;
 }
+function getTagged(strings, values) {
+	const 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, options) {
 	if (value instanceof HTMLTemplateElement) return createTemplate(value, options);
 	if (value.trim().length === 0) return;
-	let template = templates[value];
+	let template = templates.get(value);
 	if (template != null) return template;
 	const element = EXPRESSION_ID.test(value) ? document.querySelector(`#${value}`) : null;
 	return createTemplate(element instanceof HTMLTemplateElement ? element : value, options);
 }
-const html = ((value, options) => {
-	return getNodes(value, getOptions(options));
-});
+function hasNodes(value) {
+	if (value instanceof HTMLCollection || value instanceof NodeList) return true;
+	return Array.isArray(value) && value.some((item) => item instanceof Node);
+}
+function html(first, ...second) {
+	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 = () => {
-	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) => {
-	if (typeof template !== "string" || templates[template] == null) return;
-	const keys = Object.keys(templates);
-	const { length } = keys;
-	const updated = {};
-	for (let index = 0; index < length; index += 1) {
-		const key = keys[index];
-		if (key !== template) updated[key] = templates[key];
-	}
-	templates = updated;
+	templates.delete(template);
 };
+function isTagged(value) {
+	return Array.isArray(value) && Array.isArray(value.raw);
+}
+function replaceComments(origin, replacements) {
+	const nodes = [...origin];
+	const { length } = nodes;
+	for (let nodeIndex = 0; nodeIndex < length; nodeIndex += 1) {
+		const node = nodes[nodeIndex];
+		if (node instanceof Comment) {
+			const [, index] = EXPRESSION_COMMENT.exec(node.textContent) ?? [];
+			if (index != null) node.replaceWith(replacements[Number(index)]);
+			continue;
+		}
+		if (node.hasChildNodes()) replaceComments(node.childNodes, replacements);
+	}
+}
 /**
 * Sanitize one or more nodes, recursively
 * @param value Node or nodes to sanitize
@@ -64,11 +127,15 @@ html.remove = (template) => {
 function sanitize(value) {
 	return sanitizeNodes(Array.isArray(value) ? value : [value], 0);
 }
+const COMMENT_INDEX = "<index>";
+const COMMENT_TEMPLATE = `<!--toretto.node:${COMMENT_INDEX}-->`;
+const EXPRESSION_COMMENT = /^toretto\.node:(\d+)$/;
 const EXPRESSION_ID = /^[a-z][\w-]*$/i;
 const PARSE_TYPE_HTML = "text/html";
 const TEMPLATE_TAG = "template";
 const TEMPORARY_ELEMENT = "<toretto-temporary></toretto-temporary>";
+const templates = new SizedMap(128);
 let parser;
-let templates = {};
+window.templates = templates;
 //#endregion
 export { html, sanitize };

package/dist/html/sanitize.mjs

@@ -1,10 +1,11 @@
-import { _isBadAttribute, _isEmptyNonBooleanAttribute, _isInvalidBooleanAttribute } from "../internal/attribute.mjs";
-import { setAttribute } from "../attribute/set.mjs";
+import { _isBadAttribute, _isInvalidBooleanAttribute } from "../internal/attribute.mjs";
+import { setAttribute } from "../attribute/set.attribute.mjs";
 //#region src/html/sanitize.ts
 function handleElement(element, depth) {
 	if (depth === 0) {
-		const removable = element.querySelectorAll(REMOVE_SELECTOR);
-		for (const item of removable) item.remove();
+		const removable = [...element.querySelectorAll(REMOVE_SELECTOR)];
+		const { length } = removable;
+		for (let index = 0; index < length; index += 1) removable[index].remove();
 	}
 	sanitizeAttributes(element, [...element.attributes]);
 }
@@ -23,7 +24,7 @@ function sanitizeAttributes(element, attributes) {
 	const { length } = attributes;
 	for (let index = 0; index < length; index += 1) {
 		const { name, value } = attributes[index];
-		if (_isBadAttribute(name, value, false) || _isEmptyNonBooleanAttribute(name, value, false)) element.removeAttribute(name);
+		if (_isBadAttribute(name, value, false)) element.removeAttribute(name);
 		else if (_isInvalidBooleanAttribute(name, value, false)) setAttribute(element, name, true);
 	}
 }