@oscarpalmer/toretto 0.32.0 → 0.34.0

package/src/index.ts

@@ -5,7 +5,7 @@ export {
 	isBooleanAttribute,
 	isEmptyNonBooleanAttribute,
 	isInvalidBooleanAttribute,
-} from './attribute';
+} from './attribute/index';
 export * from './data';
 export * from './event/index';
 export * from './find/index';

package/src/internal/attribute.ts

@@ -1,11 +1,10 @@
 import type {PlainObject} from '@oscarpalmer/atoms';
 import {isPlainObject} from '@oscarpalmer/atoms/is';
-import {getString} from '@oscarpalmer/atoms/string';
-import type {Attribute, Property} from '../models';
-import {isHTMLOrSVGElement} from './is';
+import type {Attribute} from '../models';
+import {updateElementValue} from './element-value';
 
 function badAttributeHandler(name?: string, value?: string): boolean {
-	if (name == null || value == null) {
+	if (typeof name !== 'string' || name.trim().length === 0 || typeof value !== 'string') {
 		return true;
 	}
 
@@ -28,17 +27,19 @@ function badAttributeHandler(name?: string, value?: string): boolean {
 }
 
 function booleanAttributeHandler(name?: string, value?: string): boolean {
-	if (name == null || value == null) {
+	if (typeof name !== 'string' || name.trim().length === 0 || typeof value !== 'string') {
 		return true;
 	}
 
-	if (!booleanAttributesSet.has(name)) {
+	const normalizedName = name.toLowerCase();
+
+	if (!booleanAttributesSet.has(normalizedName)) {
 		return false;
 	}
 
-	const normalized = value.toLowerCase().trim();
+	const normalized = value.toLowerCase();
 
-	return !(normalized.length === 0 || normalized === name);
+	return !(normalized.length === 0 || normalized === normalizedName);
 }
 
 function decodeAttribute(value: string): string {
@@ -73,12 +74,12 @@ function handleAttribute(
 	return callback(name, value?.replace(EXPRESSION_WHITESPACE, ''));
 }
 
-function isAttribute(value: unknown): value is Attr | Attribute {
+export function isAttribute(value: unknown): value is Attr | Attribute {
 	return (
 		value instanceof Attr ||
 		(isPlainObject(value) &&
 			typeof (value as PlainObject).name === 'string' &&
-			typeof (value as PlainObject).value === 'string')
+			'value' in (value as PlainObject))
 	);
 }
 
@@ -117,67 +118,53 @@ export function _isInvalidBooleanAttribute(
 	return handleAttribute(booleanAttributeHandler, decode, first, second);
 }
 
-export function isProperty(value: unknown): value is Property {
-	return isPlainObject(value) && typeof (value as PlainObject).name === 'string';
-}
-
 function isValidSourceAttribute(name: string, value: string): boolean {
 	return EXPRESSION_SOURCE_NAME.test(name) && EXPRESSION_SOURCE_VALUE.test(value);
 }
 
-function updateAttribute(element: Element, name: string, value: unknown): void {
-	const isBoolean = booleanAttributesSet.has(name.toLowerCase());
-
-	if (isBoolean) {
-		updateProperty(element, name, value);
-	}
+export function updateAttribute(
+	element: Element,
+	name: string,
+	value: unknown,
+	dispatch?: unknown,
+): void {
+	const normalizedName = name.toLowerCase();
 
-	if (isBoolean ? value !== true : value == null) {
-		element.removeAttribute(name);
-	} else {
-		element.setAttribute(name, isBoolean ? '' : getString(value));
-	}
-}
+	const isBoolean = booleanAttributesSet.has(normalizedName);
 
-function updateProperty(element: Element, name: string, value: unknown): void {
-	const actual = name.toLowerCase();
+	const next = isBoolean
+		? value === true ||
+			(typeof value === 'string' && (value === '' || value.toLowerCase() === normalizedName))
+		: value == null
+			? ''
+			: value;
 
-	(element as unknown as PlainObject)[actual] =
-		value === '' || (typeof value === 'string' && value.toLowerCase() === actual) || value === true;
-}
-
-export function updateValue(element: Element, first: unknown, second: unknown): void {
-	if (!isHTMLOrSVGElement(element)) {
-		return;
+	if (name in element) {
+		updateProperty(element, normalizedName, next, dispatch);
 	}
 
-	if (isProperty(first)) {
-		updateAttribute(element, (first as Attribute).name, (first as Attribute).value);
-	} else if (typeof first === 'string') {
-		updateAttribute(element, first as string, second);
-	}
+	updateElementValue(
+		element,
+		name,
+		isBoolean ? (next ? '' : null) : value,
+		element.setAttribute,
+		element.removeAttribute,
+		isBoolean,
+		false,
+	);
 }
 
-export function updateValues(
-	element: Element,
-	values: Attribute<unknown>[] | Record<string, unknown>,
-): void {
-	if (!isHTMLOrSVGElement(element)) {
+function updateProperty(element: Element, name: string, value: unknown, dispatch?: unknown): void {
+	if (Object.is((element as unknown as PlainObject)[name], value)) {
 		return;
 	}
 
-	const isArray = Array.isArray(values);
-	const entries = Object.entries(values);
-	const {length} = entries;
+	(element as unknown as PlainObject)[name] = value;
 
-	for (let index = 0; index < length; index += 1) {
-		const entry = entries[index];
+	const event = dispatch !== false && elementEvents[element.tagName]?.[name];
 
-		if (isArray) {
-			updateAttribute(element, (entry[1] as Attribute).name, (entry[1] as Attribute).value);
-		} else {
-			updateAttribute(element, entry[0], entry[1]);
-		}
+	if (typeof event === 'string') {
+		element.dispatchEvent(new Event(event, {bubbles: true}));
 	}
 }
 
@@ -201,6 +188,8 @@ const EXPRESSION_URI_VALUE =
 // oxlint-disable-next-line no-control-regex
 const EXPRESSION_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
 
+//
+
 /**
  * List of boolean attributes
  */
@@ -233,6 +222,13 @@ export const booleanAttributes: readonly string[] = Object.freeze([
 
 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'},
+};
+
 const formElement = document.createElement('form');
 
 let textArea: HTMLTextAreaElement;

package/src/internal/element-value.ts

@@ -1,28 +1,57 @@
-import type {PlainObject} from '@oscarpalmer/atoms';
-import {isNullableOrWhitespace, isPlainObject} from '@oscarpalmer/atoms/is';
+import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
 import {isHTMLOrSVGElement} from '../is';
+import {isAttribute} from './attribute';
 
-export function setElementValues(
+export function setElementValue(
 	element: Element,
-	first: PlainObject | string,
+	first: unknown,
 	second: unknown,
+	third: unknown,
 	callback: (element: Element, key: string, value: unknown) => void,
 ): void {
 	if (!isHTMLOrSVGElement(element)) {
 		return;
 	}
 
-	if (isPlainObject(first)) {
-		const entries = Object.entries(first);
-		const {length} = entries;
+	if (typeof first === 'string') {
+		setElementValues(element, first, second, third, callback);
+	} else if (isAttribute(first)) {
+		setElementValues(element, first.name, first.value, third, callback);
+	}
+}
+
+export function setElementValues(
+	element: Element,
+	first: unknown,
+	second: unknown,
+	third: unknown,
+	callback: (element: Element, key: string, value: unknown, dispatch?: unknown) => void,
+): void {
+	if (!isHTMLOrSVGElement(element)) {
+		return;
+	}
+
+	if (typeof first === 'string') {
+		callback(element, first, second, third);
+
+		return;
+	}
+
+	const isArray = Array.isArray(first);
+
+	if (!isArray && !(typeof first === 'object' && first !== null)) {
+		return;
+	}
+
+	const entries = isArray ? first : Object.entries(first).map(([name, value]) => ({name, value}));
+	const {length} = entries;
 
-		for (let index = 0; index < length; index += 1) {
-			const [key, value] = entries[index];
+	for (let index = 0; index < length; index += 1) {
+		const entry = entries[index];
 
-			callback(element, key, value);
+		if (typeof entry === 'object' && typeof entry?.name === 'string') {
+			callback(element, entry.name, entry.value, third);
 		}
-	} else if (typeof first === 'string') {
-		callback(element, first, second);
 	}
 }
 
@@ -32,9 +61,10 @@ export function updateElementValue(
 	value: unknown,
 	set: (key: string, value: string) => void,
 	remove: (key: string) => void,
+	isBoolean: boolean,
 	json: boolean,
 ): void {
-	if (isNullableOrWhitespace(value)) {
+	if (isBoolean ? value == null : isNullableOrWhitespace(value)) {
 		remove.call(element, key);
 	} else {
 		set.call(element, key, json ? JSON.stringify(value) : String(value));

package/src/models.ts

@@ -1,9 +1,9 @@
 /**
  * Attribute for an element
  */
-export type Attribute<Value = unknown> = {
+export type Attribute = {
 	name: string;
-	value: Value;
+	value: unknown;
 };
 
 /**
@@ -19,11 +19,6 @@ export type EventPosition = {
 	y: number;
 };
 
-/**
- * Property for an element
- */
-export type Property = Attribute<unknown>;
-
 /**
  * Event listener that can be removed
  */

package/src/style.ts

@@ -97,7 +97,7 @@ export function setStyle(
 	property: keyof CSSStyleDeclaration,
 	value?: string,
 ): void {
-	setElementValues(element, property as string, value, updateStyleProperty);
+	setElementValues(element, property as string, value, null, updateStyleProperty);
 }
 
 /**
@@ -106,7 +106,7 @@ export function setStyle(
  * @param styles Styles to set
  */
 export function setStyles(element: Element, styles: Partial<CSSStyleDeclaration>): void {
-	setElementValues(element, styles as never, null, updateStyleProperty);
+	setElementValues(element, styles as never, null, null, updateStyleProperty);
 }
 
 /**
@@ -169,6 +169,7 @@ function updateStyleProperty(element: Element, key: string, value: unknown): voi
 			(this as HTMLElement).style[property as never] = '';
 		},
 		false,
+		false,
 	);
 }
 

package/types/attribute/set.d.ts

@@ -1,4 +1,15 @@
-import type { Attribute, Property } from '../models';
+import type { Attribute } from '../models';
+type DispatchedAttribute = 'checked' | 'open' | 'value';
+/**
+ * Set an attribute on an element
+ *
+ * _(Or remove it, if value is `null` or `undefined`)_
+ * @param element Element for attribute
+ * @param name Attribute name
+ * @param value Attribute value
+ * @param dispatch Dispatch event for attribute? _(defaults to `true`)_
+ */
+export declare function setAttribute<Name extends DispatchedAttribute>(element: Element, name: Name, value?: unknown, dispatch?: boolean): void;
 /**
  * Set an attribute on an element
  *
@@ -14,54 +25,25 @@ export declare function setAttribute(element: Element, name: string, value?: unk
  * _(Or remove it, if value is `null` or `undefined`)_
  * @param element Element for attribute
  * @param attribute Attribute to set
+ * @param dispatch Dispatch event for attribute? _(defaults to `true`)_
  */
-export declare function setAttribute(element: Element, attribute: Attr | Attribute): void;
+export declare function setAttribute(element: Element, attribute: Attr | Attribute, dispatch?: boolean): void;
 /**
  * Set one or more attributes on an element
  *
  * _(Or remove them, if their value is `null` or `undefined`)_
  * @param element Element for attributes
  * @param attributes Attributes to set
+ * @param dispatch Dispatch events for relevant attributes? _(defaults to `true`)_
  */
-export declare function setAttributes(element: Element, attributes: Array<Attr | Attribute>): void;
+export declare function setAttributes(element: Element, attributes: Array<Attr | Attribute>, dispatch?: boolean): void;
 /**
  * Set one or more attributes on an element
  *
  * _(Or remove them, if their value is `null` or `undefined`)_
  * @param element Element for attributes
  * @param attributes Attributes to set
+ * @param dispatch Dispatch events for relevant attributes? _(defaults to `true`)_
  */
-export declare function setAttributes(element: Element, attributes: Record<string, unknown>): void;
-/**
- * Set a property on an element
- *
- * _(Or remove it, if value is not an empty string or does not match the name)_
- * @param element Element for property
- * @param name Property name
- * @param value Property value
- */
-export declare function setProperty(element: Element, name: string, value: boolean | string): void;
-/**
- * Set a property on an element
- *
- * _(Or remove it, if value is not an empty string or does not match the name)_
- * @param element Element for property
- * @param property Property to set
- */
-export declare function setProperty(element: Element, property: Property): void;
-/**
- * Set one or more properties on an element
- *
- * _(Or remove them, if their value is not an empty string or does not match the name)_
- * @param element Element for properties
- * @param properties Properties to set
- */
-export declare function setProperties(element: Element, properties: Property[]): void;
-/**
- * Set one or more properties on an element
- *
- * _(Or remove them, if their value is not an empty string or does not match the name)_
- * @param element Element for properties
- * @param properties Properties to set
- */
-export declare function setProperties(element: Element, properties: Record<string, unknown>): void;
+export declare function setAttributes(element: Element, attributes: Record<string, unknown>, dispatch?: boolean): void;
+export {};

package/types/index.d.ts

@@ -1,5 +1,5 @@
 import supportsTouch from './touch';
-export { isBadAttribute, isBooleanAttribute, isEmptyNonBooleanAttribute, isInvalidBooleanAttribute, } from './attribute';
+export { isBadAttribute, isBooleanAttribute, isEmptyNonBooleanAttribute, isInvalidBooleanAttribute, } from './attribute/index';
 export * from './data';
 export * from './event/index';
 export * from './find/index';

package/types/internal/attribute.d.ts

@@ -1,11 +1,10 @@
-import type { Attribute, Property } from '../models';
+import type { Attribute } from '../models';
+export declare function isAttribute(value: unknown): value is Attr | Attribute;
 export declare function _isBadAttribute(first: unknown, second: unknown, decode: boolean): boolean;
 export declare function _isBooleanAttribute(first: unknown, decode: boolean): boolean;
 export declare function _isEmptyNonBooleanAttribute(first: unknown, second: unknown, decode: boolean): boolean;
 export declare function _isInvalidBooleanAttribute(first: unknown, second: unknown, decode: boolean): boolean;
-export declare function isProperty(value: unknown): value is Property;
-export declare function updateValue(element: Element, first: unknown, second: unknown): void;
-export declare function updateValues(element: Element, values: Attribute<unknown>[] | Record<string, unknown>): void;
+export declare function updateAttribute(element: Element, name: string, value: unknown, dispatch?: unknown): void;
 /**
  * List of boolean attributes
  */

package/types/internal/element-value.d.ts

@@ -1,3 +1,3 @@
-import type { PlainObject } from '@oscarpalmer/atoms';
-export declare function setElementValues(element: Element, first: PlainObject | string, second: unknown, callback: (element: Element, key: string, value: unknown) => void): void;
-export declare function updateElementValue(element: Element, key: string, value: unknown, set: (key: string, value: string) => void, remove: (key: string) => void, json: boolean): void;
+export declare function setElementValue(element: Element, first: unknown, second: unknown, third: unknown, callback: (element: Element, key: string, value: unknown) => void): void;
+export declare function setElementValues(element: Element, first: unknown, second: unknown, third: unknown, callback: (element: Element, key: string, value: unknown, dispatch?: unknown) => void): void;
+export declare function updateElementValue(element: Element, key: string, value: unknown, set: (key: string, value: string) => void, remove: (key: string) => void, isBoolean: boolean, json: boolean): void;

package/types/models.d.ts

@@ -1,9 +1,9 @@
 /**
  * Attribute for an element
  */
-export type Attribute<Value = unknown> = {
+export type Attribute = {
     name: string;
-    value: Value;
+    value: unknown;
 };
 /**
  * Event listener for custom events
@@ -16,10 +16,6 @@ export type EventPosition = {
     x: number;
     y: number;
 };
-/**
- * Property for an element
- */
-export type Property = Attribute<unknown>;
 /**
  * Event listener that can be removed
  */