@oscarpalmer/toretto 0.41.0 → 0.43.0

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

package/src/index.ts

@@ -6,11 +6,11 @@ export {
 	getAttributes,
 	isBadAttribute,
 	isBooleanAttribute,
-	isEmptyNonBooleanAttribute,
 	isInvalidBooleanAttribute,
 	setAttribute,
 	setAttributes,
 } from './attribute/index';
+export * from './create';
 export * from './data';
 export * from './event/index';
 export * from './find/index';
@@ -18,6 +18,7 @@ export * from './focusable';
 export * from './html/index';
 export * from './is';
 export * from './models';
+export * from './property/index';
 export * from './style';
 
 export {supportsTouch};

package/src/internal/attribute.ts

@@ -1,7 +1,11 @@
-import type {PlainObject} from '@oscarpalmer/atoms/models';
 import {isPlainObject} from '@oscarpalmer/atoms/is';
+import type {PlainObject} from '@oscarpalmer/atoms/models';
+import {kebabCase} from '@oscarpalmer/atoms/string/case';
 import type {Attribute} from '../models';
 import {updateElementValue} from './element-value';
+import {updateProperty} from './property';
+
+// #region Functions
 
 function badAttributeHandler(name?: string, value?: string): boolean {
 	if (typeof name !== 'string' || name.trim().length === 0 || typeof value !== 'string') {
@@ -67,6 +71,10 @@ function handleAttribute(
 		value = second;
 	}
 
+	if (name != null) {
+		name = kebabCase(name);
+	}
+
 	if (decode && value != null) {
 		value = decodeAttribute(value);
 	}
@@ -96,20 +104,6 @@ export function _isBooleanAttribute(first: unknown, decode: boolean): boolean {
 	);
 }
 
-export function _isEmptyNonBooleanAttribute(
-	first: unknown,
-	second: unknown,
-	decode: boolean,
-): boolean {
-	return handleAttribute(
-		(name, value) =>
-			name != null && value != null && !booleanAttributesSet.has(name) && value.trim().length === 0,
-		decode,
-		first,
-		second,
-	);
-}
-
 export function _isInvalidBooleanAttribute(
 	first: unknown,
 	second: unknown,
@@ -126,49 +120,39 @@ export function updateAttribute(
 	element: Element,
 	name: string,
 	value: unknown,
-	dispatch?: unknown,
+	dispatch: boolean,
 ): void {
-	const normalizedName = name.toLowerCase();
+	const lowerCaseName = name.toLowerCase();
 
-	const isBoolean = booleanAttributesSet.has(normalizedName);
+	const isBoolean = booleanAttributesSet.has(lowerCaseName);
 
 	const next = isBoolean
 		? value === true ||
-			(typeof value === 'string' && (value === '' || value.toLowerCase() === normalizedName))
+			(typeof value === 'string' && (value === '' || value.toLowerCase() === lowerCaseName))
 		: value == null
 			? ''
 			: value;
 
-	if (name in element) {
-		updateProperty(element, normalizedName, next, dispatch);
+	if (isBoolean || dispatchedAttributes.has(name)) {
+		updateProperty(element, name, next, dispatch);
 	}
 
 	updateElementValue(
 		element,
 		name,
 		isBoolean ? (next ? '' : null) : 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,
 		isBoolean,
 		false,
 	);
 }
 
-function updateProperty(element: Element, name: string, value: unknown, dispatch?: unknown): void {
-	if (Object.is((element as unknown as PlainObject)[name], value)) {
-		return;
-	}
-
-	(element as unknown as PlainObject)[name] = value;
+// #endregion
 
-	const event = dispatch !== false && elementEvents[element.tagName]?.[name];
-
-	if (typeof event === 'string') {
-		element.dispatchEvent(new Event(event, {bubbles: true}));
-	}
-}
-
-//
+// #region Variables
 
 const EXPRESSION_CLOBBERED_NAME = /^(id|name)$/i;
 
@@ -220,15 +204,12 @@ export const booleanAttributes: readonly string[] = Object.freeze([
 	'selected',
 ]);
 
-const booleanAttributesSet = new Set(booleanAttributes);
+export const booleanAttributesSet = new Set(booleanAttributes);
 
-const elementEvents: Record<string, Record<string, string>> = {
-	DETAILS: {open: 'toggle'},
-	INPUT: {checked: 'change', value: 'input'},
-	SELECT: {value: 'change'},
-	TEXTAREA: {value: 'input'},
-};
+export const dispatchedAttributes = new Set(['checked', 'open', 'value']);
 
 const formElement = document.createElement('form');
 
 let textArea: HTMLTextAreaElement;
+
+// #endregion

package/src/internal/element-value.ts

@@ -1,22 +1,30 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import {kebabCase} from '@oscarpalmer/atoms/string/case';
 import {isHTMLOrSVGElement} from '../is';
 import {isAttribute} from './attribute';
 
+// #region Functions
+
+function normalizeKey(key: string, style?: boolean): string {
+	return style && key.startsWith(CSS_VARIABLE_PREFIX) ? key : kebabCase(key);
+}
+
 export function setElementValue(
 	element: Element,
 	first: unknown,
 	second: unknown,
 	third: unknown,
-	callback: (element: Element, key: string, value: unknown) => void,
+	callback: (element: Element, key: string, value: unknown, dispatch: boolean) => void,
+	style?: boolean,
 ): void {
 	if (!isHTMLOrSVGElement(element)) {
 		return;
 	}
 
 	if (typeof first === 'string') {
-		setElementValues(element, first, second, third, callback);
+		setElementValues(element, first, second, third, callback, style);
 	} else if (isAttribute(first)) {
-		setElementValues(element, first.name, first.value, third, callback);
+		setElementValues(element, first.name, first.value, third, callback, style);
 	}
 }
 
@@ -25,14 +33,17 @@ export function setElementValues(
 	first: unknown,
 	second: unknown,
 	third: unknown,
-	callback: (element: Element, key: string, value: unknown, dispatch?: unknown) => void,
+	callback: (element: Element, key: string, value: unknown, dispatch: boolean) => void,
+	style?: boolean,
 ): void {
 	if (!isHTMLOrSVGElement(element)) {
 		return;
 	}
 
+	const dispatch = third !== false;
+
 	if (typeof first === 'string') {
-		callback(element, first, second, third);
+		callback(element, normalizeKey(first, style), second, dispatch);
 
 		return;
 	}
@@ -50,7 +61,7 @@ export function setElementValues(
 		const entry = entries[index];
 
 		if (typeof entry === 'object' && typeof entry?.name === 'string') {
-			callback(element, entry.name, entry.value, third);
+			callback(element, normalizeKey(entry.name, style), entry.value, dispatch);
 		}
 	}
 }
@@ -70,3 +81,11 @@ export function updateElementValue(
 		set.call(element, key, json ? JSON.stringify(value) : String(value));
 	}
 }
+
+// #endregion Functions
+
+// #region Variables
+
+const CSS_VARIABLE_PREFIX = '--';
+
+// #endregion

package/src/internal/get-value.ts

@@ -1,6 +1,8 @@
 import {parse} from '@oscarpalmer/atoms/string';
 import {camelCase, kebabCase} from '@oscarpalmer/atoms/string/case';
 
+// #region Functions
+
 export function getBoolean(value: unknown, defaultValue?: boolean): boolean {
 	return typeof value === 'boolean' ? value : (defaultValue ?? false);
 }
@@ -20,6 +22,10 @@ export function getStyleValue(
 	property: string,
 	computed: boolean,
 ): string | undefined {
+	if (property.startsWith(CSS_VARIABLE_PREFIX)) {
+		return (element as HTMLElement).style.getPropertyValue(property);
+	}
+
 	const name = camelCase(property);
 
 	return computed
@@ -27,4 +33,12 @@ export function getStyleValue(
 		: (element as HTMLElement).style[name as never];
 }
 
+// #endregion
+
+// #region Variables
+
 export const EXPRESSION_DATA_PREFIX = /^data-/i;
+
+const CSS_VARIABLE_PREFIX = '--';
+
+// #endregion

package/src/internal/is.ts

@@ -1,3 +1,5 @@
+// #region Functions
+
 /**
  * Is the value an event target?
  * @param value Value to check
@@ -21,3 +23,5 @@ export function isEventTarget(value: unknown): value is EventTarget {
 export function isHTMLOrSVGElement(value: unknown): value is HTMLElement | SVGElement {
 	return value instanceof HTMLElement || value instanceof SVGElement;
 }
+
+// #endregion

package/src/internal/property.ts

@@ -0,0 +1,42 @@
+import type {PlainObject} from '@oscarpalmer/atoms/models';
+import {camelCase} from '@oscarpalmer/atoms/string/case';
+
+// #region Functions
+
+export function updateProperty(
+	element: Element,
+	name: string,
+	value: unknown,
+	dispatch: boolean,
+): void {
+	let property = name;
+
+	if (!(property in element)) {
+		property = camelCase(name);
+	}
+
+	if (!(property in element) || Object.is((element as unknown as PlainObject)[property], value)) {
+		return;
+	}
+
+	(element as unknown as PlainObject)[property] = value;
+
+	const event = dispatch && elementEvents[element.tagName]?.[property];
+
+	if (typeof event === 'string') {
+		element.dispatchEvent(new Event(event, {bubbles: true, cancelable: true}));
+	}
+}
+
+// #endregion
+
+// #region Variables
+
+const elementEvents: Record<string, Record<string, string>> = {
+	DETAILS: {open: 'toggle'},
+	INPUT: {checked: 'change', value: 'input'},
+	SELECT: {value: 'change'},
+	TEXTAREA: {value: 'input'},
+};
+
+// #endregion

package/src/is.ts

@@ -1,3 +1,5 @@
+// #region Functions
+
 /**
  * Is the value a child node?
  * @param value Value to check
@@ -36,7 +38,9 @@ export function isInDocument(node: Node, doc?: Document): boolean {
 		: node.ownerDocument === doc && doc.contains(node);
 }
 
-//
+// #endregion
+
+// #region Variables
 
 const CHILD_NODE_TYPES: Set<number> = new Set([
 	Node.ELEMENT_NODE,
@@ -46,6 +50,10 @@ const CHILD_NODE_TYPES: Set<number> = new Set([
 	Node.DOCUMENT_TYPE_NODE,
 ]);
 
-//
+// #endregion
+
+// #region Exports
 
 export {isEventTarget, isHTMLOrSVGElement} from './internal/is';
+
+// #endregion

package/src/property/get.property.ts

@@ -0,0 +1,73 @@
+import type {Primitive} from '@oscarpalmer/atoms/models';
+import {camelCase} from '@oscarpalmer/atoms/string/case';
+import {isHTMLOrSVGElement} from '../internal/is';
+
+// #region Types
+
+type GetProperties<Target extends Element> = {
+	[Property in keyof Target as Target[Property] extends Primitive
+		? Property
+		: never]?: Target[Property];
+};
+
+// #endregion
+
+// #region Functions
+
+/**
+ * Get the values of one or more properties on an element
+ * @param target Target element
+ * @param properties Properties to get
+ * @returns Property values
+ */
+export function getProperties<Target extends Element, Property extends keyof GetProperties<Target>>(
+	target: Target,
+	properties: Property[],
+): Pick<GetProperties<Target>, Property> {
+	const values: Partial<GetProperties<Target>> = {};
+
+	if (!isHTMLOrSVGElement(target) || !Array.isArray(properties)) {
+		return values as Pick<GetProperties<Target>, Property>;
+	}
+
+	const {length} = properties;
+
+	for (let index = 0; index < length; index += 1) {
+		const property = properties[index];
+
+		if (typeof property === 'string') {
+			values[property] = getPropertyValue(target, property) as GetProperties<Target>[Property];
+		}
+	}
+
+	return values as Pick<GetProperties<Target>, Property>;
+}
+
+/**
+ * Get the value of a property on an element
+ * @param target Target element
+ * @param property Property to get
+ * @returns Property value
+ */
+export function getProperty<Target extends Element, Property extends keyof GetProperties<Target>>(
+	target: Target,
+	property: Property,
+): GetProperties<Target>[Property] {
+	if (isHTMLOrSVGElement(target) && typeof property === 'string') {
+		return getPropertyValue(target, property) as GetProperties<Target>[Property];
+	}
+}
+
+function getPropertyValue(element: HTMLElement, property: string): unknown {
+	let actual = property;
+
+	if (!(actual in element)) {
+		actual = camelCase(actual);
+	}
+
+	if (actual in element) {
+		return element[actual as keyof HTMLElement];
+	}
+}
+
+// #endregion

package/src/property/index.ts

@@ -0,0 +1,2 @@
+export * from './get.property';
+export * from './set.property';

package/src/property/set.property.ts

@@ -0,0 +1,103 @@
+import {isPlainObject} from '@oscarpalmer/atoms/is';
+import type {PlainObject, Primitive} from '@oscarpalmer/atoms/models';
+import {setAttribute} from '../attribute';
+import type {DispatchedAttributeName} from '../attribute/set.attribute';
+import {booleanAttributesSet, dispatchedAttributes} from '../internal/attribute';
+import {updateProperty} from '../internal/property';
+import {isHTMLOrSVGElement} from '../is';
+
+// #region Types
+
+type DispatchedPropertyValue<
+	Target extends Element,
+	Property extends DispatchedAttributeName,
+> = Property extends keyof SetProperties<Target> ? SetProperties<Target>[Property] : never;
+
+type SetProperties<Target extends Element> = {
+	[Property in keyof Target as Target[Property] extends Primitive
+		? Property
+		: never]?: Target[Property];
+};
+
+// #endregion
+
+// #region Functions
+
+/**
+ * Set the values of one or more properties on an element
+ *
+ * Also updates attributes for boolean/dispatchable properties, and if `dispatch` is `true`, will dispatch events for dispatchable properties
+ * @param target Target element
+ * @param properties Properties to set
+ * @param dispatch Dispatch events for properties? _(defaults to `true`)_
+ */
+export function setProperties<Target extends Element>(
+	target: Target,
+	properties: SetProperties<Target>,
+	dispatch?: boolean,
+): void {
+	if (!isHTMLOrSVGElement(target) || !isPlainObject(properties)) {
+		return;
+	}
+
+	const shouldDispatch = dispatch !== false;
+
+	const keys = Object.keys(properties);
+	const {length} = keys;
+
+	for (let index = 0; index < length; index += 1) {
+		setPropertyValue(target, keys[index], (properties as PlainObject)[keys[index]], shouldDispatch);
+	}
+}
+
+/**
+ * Set the value for a dispatchable property on an element
+ * @param target Target element
+ * @param property Property to set
+ * @param value Value to set
+ * @param dispatch Dispatch event for property? _(defaults to `true`)_
+ */
+export function setProperty<Target extends Element, Property extends DispatchedAttributeName>(
+	target: Target,
+	property: Property,
+	value: DispatchedPropertyValue<Target, Property>,
+	dispatch?: boolean,
+): void;
+
+/**
+ * Set the value for a property on an element
+ * @param target Target element
+ * @param property Property to set
+ * @param value Value to set
+ */
+export function setProperty<Target extends Element, Property extends keyof SetProperties<Target>>(
+	target: Target,
+	property: Property,
+	value: SetProperties<Target>[Property],
+): void;
+
+export function setProperty<Target extends Element, Property extends keyof SetProperties<Target>>(
+	target: Target,
+	property: Property,
+	value: SetProperties<Target>[Property],
+	dispatch?: boolean,
+): void {
+	if (isHTMLOrSVGElement(target) && typeof property === 'string') {
+		setPropertyValue(target, property, value, dispatch !== false);
+	}
+}
+
+function setPropertyValue(
+	element: Element,
+	property: string,
+	value: unknown,
+	dispatch: boolean,
+): void {
+	if (booleanAttributesSet.has(property.toLowerCase()) || dispatchedAttributes.has(property)) {
+		setAttribute(element, property as never, value, dispatch);
+	} else {
+		updateProperty(element, property, value, dispatch);
+	}
+}
+
+// #endregion