@oscarpalmer/toretto 0.40.0 → 0.42.0

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';
 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,13 +1,16 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import {kebabCase} from '@oscarpalmer/atoms/string/case';
 import {isHTMLOrSVGElement} from '../is';
 import {isAttribute} from './attribute';
 
+// #region Functions
+
 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,
 ): void {
 	if (!isHTMLOrSVGElement(element)) {
 		return;
@@ -25,14 +28,16 @@ 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,
 ): void {
 	if (!isHTMLOrSVGElement(element)) {
 		return;
 	}
 
+	const dispatch = third !== false;
+
 	if (typeof first === 'string') {
-		callback(element, first, second, third);
+		callback(element, kebabCase(first), second, dispatch);
 
 		return;
 	}
@@ -50,7 +55,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, kebabCase(entry.name), entry.value, dispatch);
 		}
 	}
 }
@@ -70,3 +75,5 @@ export function updateElementValue(
 		set.call(element, key, json ? JSON.stringify(value) : String(value));
 	}
 }
+
+// #endregion Functions

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);
 }
@@ -27,4 +29,10 @@ export function getStyleValue(
 		: (element as HTMLElement).style[name as never];
 }
 
+// #endregion
+
+// #region Variables
+
 export const EXPRESSION_DATA_PREFIX = /^data-/i;
+
+// #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}));
+	}
+}
+
+// #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,102 @@
+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) {
+		const key = keys[index];
+
+		if (booleanAttributesSet.has(key.toLowerCase()) || dispatchedAttributes.has(key)) {
+			setAttribute(target, key as never, (properties as PlainObject)[key], shouldDispatch);
+		} else {
+			updateProperty(target, key, (properties as PlainObject)[key], 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') {
+		return;
+	}
+
+	if (booleanAttributesSet.has(property.toLowerCase()) || dispatchedAttributes.has(property)) {
+		setAttribute(target, property as never, value, dispatch !== false);
+	} else {
+		updateProperty(target, property, value, dispatch !== false);
+	}
+}
+
+// #endregion

package/src/style.ts

@@ -3,6 +3,8 @@ import {getStyleValue} from './internal/get-value';
 import {isHTMLOrSVGElement} from './internal/is';
 import type {TextDirection} from './models';
 
+// #region Types
+
 export type StyleToggler = {
 	/**
 	 * Set the provided styles on the element
@@ -14,6 +16,12 @@ export type StyleToggler = {
 	remove(): void;
 };
 
+type Styles = Partial<Record<keyof CSSStyleDeclaration, unknown>>;
+
+// #endregion
+
+// #region Functions
+
 /**
  * Get a style from an element
  * @param element Element to get the style from
@@ -26,11 +34,9 @@ export function getStyle(
 	property: keyof CSSStyleDeclaration,
 	computed?: boolean,
 ): string | undefined {
-	if (!isHTMLOrSVGElement(element) || typeof property !== 'string') {
-		return undefined;
+	if (isHTMLOrSVGElement(element) && typeof property === 'string') {
+		return getStyleValue(element, property, computed === true);
 	}
-
-	return getStyleValue(element, property, computed === true);
 }
 
 /**
@@ -65,25 +71,37 @@ export function getStyles<Property extends keyof CSSStyleDeclaration>(
 }
 
 /**
- * Get the text direction of an element
- * @param element Element to get the text direction from
- * @param computed Get the computed text direction? _(defaults to `false`)_
+ * Get the text direction of a node or element _(or document, if element is invalid)_
+ * @param node Node or element to get the text direction from
  * @returns Text direction
  */
-export function getTextDirection(element: Element, computed?: boolean): TextDirection {
-	if (!(element instanceof Element)) {
-		return undefined as never;
+export function getTextDirection(node: Element | Node): TextDirection;
+
+/**
+ * Get the text direction of the document
+ * @returns Text direction
+ */
+export function getTextDirection(): TextDirection;
+
+export function getTextDirection(node?: Element | Node): TextDirection {
+	let target: HTMLElement | SVGElement;
+
+	if (isHTMLOrSVGElement(node)) {
+		target = node;
+	} else {
+		target =
+			node instanceof Node
+				? (node.ownerDocument?.documentElement ?? document.documentElement)
+				: document.documentElement;
 	}
 
-	const direction = element.getAttribute(ATTRIBUTE_DIRECTION);
+	let {direction} = target.style;
 
-	if (direction != null && EXPRESSION_DIRECTION.test(direction)) {
-		return direction.toLowerCase() as TextDirection;
+	if (direction === '') {
+		direction = getStyleValue(target, PROPETY_DIRECTION, true)!;
 	}
 
-	const value = getStyleValue(element, 'direction', computed === true);
-
-	return value === 'rtl' ? value : 'ltr';
+	return direction === DIRECTION_RTL ? DIRECTION_RTL : DIRECTION_LTR;
 }
 
 /**
@@ -95,7 +113,7 @@ export function getTextDirection(element: Element, computed?: boolean): TextDire
 export function setStyle(
 	element: Element,
 	property: keyof CSSStyleDeclaration,
-	value?: string,
+	value?: unknown,
 ): void {
 	setElementValues(element, property as string, value, null, updateStyleProperty);
 }
@@ -105,7 +123,7 @@ export function setStyle(
  * @param element Element to set the styles on
  * @param styles Styles to set
  */
-export function setStyles(element: Element, styles: Partial<CSSStyleDeclaration>): void {
+export function setStyles(element: Element, styles: Styles): void {
 	setElementValues(element, styles as never, null, null, updateStyleProperty);
 }
 
@@ -115,11 +133,11 @@ export function setStyles(element: Element, styles: Partial<CSSStyleDeclaration>
  * @param styles Styles to be set or removed
  * @returns Style toggler
  */
-export function toggleStyles(element: Element, styles: Partial<CSSStyleDeclaration>): StyleToggler {
+export function toggleStyles(element: Element, styles: Styles): StyleToggler {
 	function toggle(set: boolean): void {
 		hasSet = set;
 
-		let next: Partial<CSSStyleDeclaration>;
+		let next: Styles;
 
 		if (set) {
 			values = getStyles(element, keys);
@@ -130,8 +148,8 @@ export function toggleStyles(element: Element, styles: Partial<CSSStyleDeclarati
 
 			values = {};
 
-			for (const key of keys) {
-				values[key as never] = undefined;
+			for (let index = 0; index < length; index += 1) {
+				values[keys[index] as never] = undefined;
 			}
 		}
 
@@ -139,6 +157,7 @@ export function toggleStyles(element: Element, styles: Partial<CSSStyleDeclarati
 	}
 
 	const keys = Object.keys(styles) as (keyof CSSStyleDeclaration)[];
+	const {length} = keys;
 
 	let hasSet = false;
 	let values: Record<string, string | undefined> = {};
@@ -162,8 +181,8 @@ function updateStyleProperty(element: Element, key: string, value: unknown): voi
 		element,
 		key,
 		value,
-		function (this: Element, property: string, style: string) {
-			(this as HTMLElement).style[property as never] = style;
+		function (this: Element, property: string, style: unknown) {
+			(this as HTMLElement).style[property as never] = String(style);
 		},
 		function (this: Element, property: string) {
 			(this as HTMLElement).style[property as never] = '';
@@ -173,8 +192,14 @@ function updateStyleProperty(element: Element, key: string, value: unknown): voi
 	);
 }
 
-//
+// #endregion
+
+// #region Variables
+
+const DIRECTION_LTR = 'ltr';
+
+const DIRECTION_RTL = 'rtl';
 
-const ATTRIBUTE_DIRECTION = 'dir';
+const PROPETY_DIRECTION = 'direction';
 
-const EXPRESSION_DIRECTION = /^(ltr|rtl)$/i;
+// #endregion

package/src/touch.ts

@@ -1,3 +1,5 @@
+// #region Types
+
 type NavigatorWithMsMaxTouchPoints = Navigator & {
 	msMaxTouchPoints: number;
 };
@@ -17,7 +19,9 @@ type SupporsTouch = {
 	update(): boolean;
 };
 
-//
+// #endregion
+
+// #region Functions
 
 function getSupport(): boolean {
 	if (window == null || navigator == null) {
@@ -50,7 +54,9 @@ function getSupport(): boolean {
 	return false;
 }
 
-//
+// #endregion
+
+// #region Variables
 
 /**
  * Does the device support touch events?
@@ -78,4 +84,10 @@ const supportsTouch: SupporsTouch = (() => {
 	return instance;
 })();
 
+// #endregion
+
+// #region Exports
+
 export default supportsTouch;
+
+// #endregion