@oscarpalmer/toretto 0.43.0 → 0.45.0

package/dist/data.mjs

@@ -1,8 +1,8 @@
 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 { camelCase, kebabCase } from "@oscarpalmer/atoms/string/case";
 //#region src/data.ts
 function getData(element, keys, parseValues) {
 	if (!isHTMLOrSVGElement(element)) return;

package/dist/index.d.mts

@@ -462,6 +462,12 @@ declare function isEventTarget(value: unknown): value is EventTarget;
  * @returns `true` if it's an HTML or SVG element, otherwise `false`
  */
 declare function isHTMLOrSVGElement(value: unknown): value is HTMLElement | SVGElement;
+/**
+ * Is the value an input element? _(`<input>`, `<select>`, or `<textarea>`)_
+ * @param value Value to check
+ * @returns `true` if it's an input element, otherwise `false`
+ */
+declare function isInputElement(value: unknown): value is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 //#endregion
 //#region src/is.d.ts
 /**
@@ -591,4 +597,4 @@ declare function setStyles(element: Element, styles: Styles): void;
  */
 declare function toggleStyles(element: Element, styles: Styles): StyleToggler;
 //#endregion
-export { findElement as $, findElement, findElements as $$, findElements, Attribute, CustomEventListener, EventPosition, RemovableEventListener, Selector, StyleToggler, TextDirection, booleanAttributes, createElement, dispatch, findAncestor, findRelatives, getAttribute, getAttributes, getData, getDistance, getElementUnderPointer, getFocusable, getPosition, getProperties, getProperty, getStyle, getStyles, getTabbable, getTextDirection, html, isBadAttribute, isBooleanAttribute, isChildNode, isEventTarget, isFocusable, isHTMLOrSVGElement, isInDocument, isInvalidBooleanAttribute, isTabbable, off, on, sanitize, setAttribute, setAttributes, setData, setProperties, setProperty, setStyle, setStyles, supportsTouch, toggleStyles };
+export { findElement as $, findElement, findElements as $$, findElements, Attribute, CustomEventListener, EventPosition, RemovableEventListener, Selector, StyleToggler, TextDirection, booleanAttributes, createElement, dispatch, findAncestor, findRelatives, getAttribute, getAttributes, getData, getDistance, getElementUnderPointer, getFocusable, getPosition, getProperties, getProperty, getStyle, getStyles, getTabbable, getTextDirection, html, isBadAttribute, isBooleanAttribute, isChildNode, isEventTarget, isFocusable, isHTMLOrSVGElement, isInDocument, isInputElement, isInvalidBooleanAttribute, isTabbable, off, on, sanitize, setAttribute, setAttributes, setData, setProperties, setProperty, setStyle, setStyles, supportsTouch, toggleStyles };

package/dist/index.mjs

@@ -105,6 +105,21 @@ function isNullableOrWhitespace(value) {
 }
 const EXPRESSION_WHITESPACE$1 = /^\s*$/;
 //#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/string/index.mjs
+/**
+* Parse a JSON string into its proper value _(or `undefined` if it fails)_
+* @param value JSON string to parse
+* @param reviver Reviver function to transform the parsed values
+* @returns Parsed value or `undefined` if parsing fails
+*/
+function parse(value, reviver) {
+	try {
+		return JSON.parse(value, reviver);
+	} catch {
+		return;
+	}
+}
+//#endregion
 //#region node_modules/@oscarpalmer/atoms/dist/internal/number.mjs
 /**
 * Clamp a number between a minimum and maximum value
@@ -382,6 +397,14 @@ function isEventTarget(value) {
 function isHTMLOrSVGElement(value) {
 	return value instanceof HTMLElement || value instanceof SVGElement;
 }
+/**
+* Is the value an input element? _(`<input>`, `<select>`, or `<textarea>`)_
+* @param value Value to check
+* @returns `true` if it's an input element, otherwise `false`
+*/
+function isInputElement(value) {
+	return value instanceof HTMLInputElement || value instanceof HTMLSelectElement || value instanceof HTMLTextAreaElement;
+}
 //#endregion
 //#region src/is.ts
 /**
@@ -406,6 +429,10 @@ const CHILD_NODE_TYPES = new Set([
 ]);
 //#endregion
 //#region src/internal/element-value.ts
+function ignoreSetAttribute(element, name) {
+	if (element instanceof HTMLTextAreaElement && name === "value") return true;
+	return false;
+}
 function normalizeKey(key, style) {
 	return style && key.startsWith(CSS_VARIABLE_PREFIX$1) ? key : kebabCase(key);
 }
@@ -435,16 +462,21 @@ function setElementValues(element, first, second, third, callback, style) {
 }
 function updateElementValue(element, key, value, set, remove, isBoolean, json) {
 	if (isBoolean ? value == null : isNullableOrWhitespace(value)) remove.call(element, key);
-	else set.call(element, key, json ? JSON.stringify(value) : String(value));
+	else if (!ignoreSetAttribute(element, key)) set.call(element, key, json ? JSON.stringify(value) : getString(value));
 }
 const CSS_VARIABLE_PREFIX$1 = "--";
 //#endregion
 //#region src/internal/property.ts
+function getPropertyValue$1(element, name, value) {
+	if (isInputElement(element) && name === "value") return getString(value);
+	return value;
+}
 function updateProperty(element, name, value, dispatch) {
 	let property = name;
 	if (!(property in element)) property = camelCase(name);
-	if (!(property in element) || Object.is(element[property], value)) return;
-	element[property] = value;
+	const next = getPropertyValue$1(element, name, value);
+	if (!(property in element) || Object.is(element[property], next)) return;
+	element[property] = next;
 	const event = dispatch && elementEvents[element.tagName]?.[property];
 	if (typeof event === "string") element.dispatchEvent(new Event(event, {
 		bubbles: true,
@@ -485,7 +517,7 @@ function handleAttribute(callback, decode, first, second) {
 	let value;
 	if (isAttribute(first)) {
 		name = first.name;
-		value = String(first.value);
+		value = getString(first.value);
 	} else if (typeof first === "string" && typeof second === "string") {
 		name = first;
 		value = second;
@@ -562,21 +594,6 @@ const dispatchedAttributes = new Set([
 const formElement = document.createElement("form");
 let textArea;
 //#endregion
-//#region node_modules/@oscarpalmer/atoms/dist/string/index.mjs
-/**
-* Parse a JSON string into its proper value _(or `undefined` if it fails)_
-* @param value JSON string to parse
-* @param reviver Reviver function to transform the parsed values
-* @returns Parsed value or `undefined` if parsing fails
-*/
-function parse(value, reviver) {
-	try {
-		return JSON.parse(value, reviver);
-	} catch {
-		return;
-	}
-}
-//#endregion
 //#region src/internal/get-value.ts
 function getBoolean(value, defaultValue) {
 	return typeof value === "boolean" ? value : defaultValue ?? false;
@@ -725,8 +742,8 @@ function toggleStyles(element, styles) {
 }
 function updateStyleProperty(element, key, value) {
 	updateElementValue(element, key, value, function(property, style) {
-		if (property.startsWith(VARIABLE_PREFIX)) this.style.setProperty(property, String(style));
-		else this.style[property] = String(style);
+		if (property.startsWith(VARIABLE_PREFIX)) this.style.setProperty(property, getString(style));
+		else this.style[property] = getString(style);
 	}, function(property) {
 		if (property.startsWith(VARIABLE_PREFIX)) this.style.removeProperty(property);
 		else this.style[property] = "";
@@ -1514,4 +1531,4 @@ const templates = new SizedMap(128);
 let parser;
 window.templates = templates;
 //#endregion
-export { findElement as $, findElement, findElements as $$, findElements, booleanAttributes, createElement, dispatch, findAncestor, findRelatives, getAttribute, getAttributes, getData, getDistance, getElementUnderPointer, getFocusable, getPosition, getProperties, getProperty, getStyle, getStyles, getTabbable, getTextDirection, html, isBadAttribute, isBooleanAttribute, isChildNode, isEventTarget, isFocusable, isHTMLOrSVGElement, isInDocument, isInvalidBooleanAttribute, isTabbable, off, on, sanitize, setAttribute, setAttributes, setData, setProperties, setProperty, setStyle, setStyles, supportsTouch, toggleStyles };
+export { findElement as $, findElement, findElements as $$, findElements, booleanAttributes, createElement, dispatch, findAncestor, findRelatives, getAttribute, getAttributes, getData, getDistance, getElementUnderPointer, getFocusable, getPosition, getProperties, getProperty, getStyle, getStyles, getTabbable, getTextDirection, html, isBadAttribute, isBooleanAttribute, isChildNode, isEventTarget, isFocusable, isHTMLOrSVGElement, isInDocument, isInputElement, isInvalidBooleanAttribute, isTabbable, off, on, sanitize, setAttribute, setAttributes, setData, setProperties, setProperty, setStyle, setStyles, supportsTouch, toggleStyles };

package/dist/internal/attribute.mjs

@@ -1,6 +1,7 @@
 import { updateElementValue } from "./element-value.mjs";
 import { updateProperty } from "./property.mjs";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { getString } from "@oscarpalmer/atoms/string";
 import { kebabCase } from "@oscarpalmer/atoms/string/case";
 //#region src/internal/attribute.ts
 function badAttributeHandler(name, value) {
@@ -26,7 +27,7 @@ function handleAttribute(callback, decode, first, second) {
 	let value;
 	if (isAttribute(first)) {
 		name = first.name;
-		value = String(first.value);
+		value = getString(first.value);
 	} else if (typeof first === "string" && typeof second === "string") {
 		name = first;
 		value = second;

package/dist/internal/element-value.mjs

@@ -2,8 +2,13 @@ import { isHTMLOrSVGElement } from "./is.mjs";
 import "../is.mjs";
 import { isAttribute } from "./attribute.mjs";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { getString } from "@oscarpalmer/atoms/string";
 import { kebabCase } from "@oscarpalmer/atoms/string/case";
 //#region src/internal/element-value.ts
+function ignoreSetAttribute(element, name) {
+	if (element instanceof HTMLTextAreaElement && name === "value") return true;
+	return false;
+}
 function normalizeKey(key, style) {
 	return style && key.startsWith(CSS_VARIABLE_PREFIX) ? key : kebabCase(key);
 }
@@ -33,7 +38,7 @@ function setElementValues(element, first, second, third, callback, style) {
 }
 function updateElementValue(element, key, value, set, remove, isBoolean, json) {
 	if (isBoolean ? value == null : isNullableOrWhitespace(value)) remove.call(element, key);
-	else set.call(element, key, json ? JSON.stringify(value) : String(value));
+	else if (!ignoreSetAttribute(element, key)) set.call(element, key, json ? JSON.stringify(value) : getString(value));
 }
 const CSS_VARIABLE_PREFIX = "--";
 //#endregion

package/dist/internal/get-value.mjs

@@ -1,5 +1,5 @@
-import { camelCase, kebabCase } from "@oscarpalmer/atoms/string/case";
 import { parse } from "@oscarpalmer/atoms/string";
+import { camelCase, kebabCase } from "@oscarpalmer/atoms/string/case";
 //#region src/internal/get-value.ts
 function getBoolean(value, defaultValue) {
 	return typeof value === "boolean" ? value : defaultValue ?? false;

package/dist/internal/is.d.mts

@@ -11,5 +11,11 @@ declare function isEventTarget(value: unknown): value is EventTarget;
  * @returns `true` if it's an HTML or SVG element, otherwise `false`
  */
 declare function isHTMLOrSVGElement(value: unknown): value is HTMLElement | SVGElement;
+/**
+ * Is the value an input element? _(`<input>`, `<select>`, or `<textarea>`)_
+ * @param value Value to check
+ * @returns `true` if it's an input element, otherwise `false`
+ */
+declare function isInputElement(value: unknown): value is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 //#endregion
-export { isEventTarget, isHTMLOrSVGElement };
+export { isEventTarget, isHTMLOrSVGElement, isInputElement };

package/dist/internal/is.mjs

@@ -15,5 +15,13 @@ function isEventTarget(value) {
 function isHTMLOrSVGElement(value) {
 	return value instanceof HTMLElement || value instanceof SVGElement;
 }
+/**
+* Is the value an input element? _(`<input>`, `<select>`, or `<textarea>`)_
+* @param value Value to check
+* @returns `true` if it's an input element, otherwise `false`
+*/
+function isInputElement(value) {
+	return value instanceof HTMLInputElement || value instanceof HTMLSelectElement || value instanceof HTMLTextAreaElement;
+}
 //#endregion
-export { isEventTarget, isHTMLOrSVGElement };
+export { isEventTarget, isHTMLOrSVGElement, isInputElement };

package/dist/internal/property.mjs

@@ -1,10 +1,17 @@
+import { isInputElement } from "./is.mjs";
+import { getString } from "@oscarpalmer/atoms/string";
 import { camelCase } from "@oscarpalmer/atoms/string/case";
 //#region src/internal/property.ts
+function getPropertyValue(element, name, value) {
+	if (isInputElement(element) && name === "value") return getString(value);
+	return value;
+}
 function updateProperty(element, name, value, dispatch) {
 	let property = name;
 	if (!(property in element)) property = camelCase(name);
-	if (!(property in element) || Object.is(element[property], value)) return;
-	element[property] = value;
+	const next = getPropertyValue(element, name, value);
+	if (!(property in element) || Object.is(element[property], next)) return;
+	element[property] = next;
 	const event = dispatch && elementEvents[element.tagName]?.[property];
 	if (typeof event === "string") element.dispatchEvent(new Event(event, {
 		bubbles: true,

package/dist/is.d.mts

@@ -1,4 +1,4 @@
-import { isEventTarget, isHTMLOrSVGElement } from "./internal/is.mjs";
+import { isEventTarget, isHTMLOrSVGElement, isInputElement } from "./internal/is.mjs";
 
 //#region src/is.d.ts
 /**
@@ -21,4 +21,4 @@ declare function isInDocument(node: Node): boolean;
  */
 declare function isInDocument(node: Node, document: Document): boolean;
 //#endregion
-export { isChildNode, isEventTarget, isHTMLOrSVGElement, isInDocument };
+export { isChildNode, isEventTarget, isHTMLOrSVGElement, isInDocument, isInputElement };

package/dist/is.mjs

@@ -1,4 +1,4 @@
-import { isEventTarget, isHTMLOrSVGElement } from "./internal/is.mjs";
+import { isEventTarget, isHTMLOrSVGElement, isInputElement } from "./internal/is.mjs";
 //#region src/is.ts
 /**
 * Is the value a child node?
@@ -21,4 +21,4 @@ const CHILD_NODE_TYPES = new Set([
 	Node.DOCUMENT_TYPE_NODE
 ]);
 //#endregion
-export { isChildNode, isEventTarget, isHTMLOrSVGElement, isInDocument };
+export { isChildNode, isEventTarget, isHTMLOrSVGElement, isInDocument, isInputElement };

package/dist/style.mjs

@@ -1,6 +1,7 @@
 import { isHTMLOrSVGElement } from "./internal/is.mjs";
 import { setElementValues, updateElementValue } from "./internal/element-value.mjs";
 import { getStyleValue } from "./internal/get-value.mjs";
+import { getString } from "@oscarpalmer/atoms/string";
 //#region src/style.ts
 /**
 * Get a style from an element
@@ -89,8 +90,8 @@ function toggleStyles(element, styles) {
 }
 function updateStyleProperty(element, key, value) {
 	updateElementValue(element, key, value, function(property, style) {
-		if (property.startsWith(VARIABLE_PREFIX)) this.style.setProperty(property, String(style));
-		else this.style[property] = String(style);
+		if (property.startsWith(VARIABLE_PREFIX)) this.style.setProperty(property, getString(style));
+		else this.style[property] = getString(style);
 	}, function(property) {
 		if (property.startsWith(VARIABLE_PREFIX)) this.style.removeProperty(property);
 		else this.style[property] = "";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/toretto",
-	"version": "0.43.0",
+	"version": "0.45.0",
 	"description": "A collection of badass DOM utilities.",
 	"keywords": [
 		"dom",

package/src/internal/attribute.ts

@@ -1,5 +1,6 @@
 import {isPlainObject} from '@oscarpalmer/atoms/is';
 import type {PlainObject} from '@oscarpalmer/atoms/models';
+import {getString} from '@oscarpalmer/atoms/string';
 import {kebabCase} from '@oscarpalmer/atoms/string/case';
 import type {Attribute} from '../models';
 import {updateElementValue} from './element-value';
@@ -65,7 +66,7 @@ function handleAttribute(
 
 	if (isAttribute(first)) {
 		name = first.name;
-		value = String(first.value);
+		value = getString(first.value);
 	} else if (typeof first === 'string' && typeof second === 'string') {
 		name = first;
 		value = second;

package/src/internal/element-value.ts

@@ -1,10 +1,19 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import {getString} from '@oscarpalmer/atoms/string';
 import {kebabCase} from '@oscarpalmer/atoms/string/case';
 import {isHTMLOrSVGElement} from '../is';
 import {isAttribute} from './attribute';
 
 // #region Functions
 
+function ignoreSetAttribute(element: Element, name: string): boolean {
+	if (element instanceof HTMLTextAreaElement && name === 'value') {
+		return true;
+	}
+
+	return false;
+}
+
 function normalizeKey(key: string, style?: boolean): string {
 	return style && key.startsWith(CSS_VARIABLE_PREFIX) ? key : kebabCase(key);
 }
@@ -77,8 +86,8 @@ export function updateElementValue(
 ): void {
 	if (isBoolean ? value == null : isNullableOrWhitespace(value)) {
 		remove.call(element, key);
-	} else {
-		set.call(element, key, json ? JSON.stringify(value) : String(value));
+	} else if (!ignoreSetAttribute(element, key)) {
+		set.call(element, key, json ? JSON.stringify(value) : getString(value));
 	}
 }
 

package/src/internal/is.ts

@@ -24,4 +24,19 @@ export function isHTMLOrSVGElement(value: unknown): value is HTMLElement | SVGEl
 	return value instanceof HTMLElement || value instanceof SVGElement;
 }
 
+/**
+ * Is the value an input element? _(`<input>`, `<select>`, or `<textarea>`)_
+ * @param value Value to check
+ * @returns `true` if it's an input element, otherwise `false`
+ */
+export function isInputElement(
+	value: unknown,
+): value is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement {
+	return (
+		value instanceof HTMLInputElement ||
+		value instanceof HTMLSelectElement ||
+		value instanceof HTMLTextAreaElement
+	);
+}
+
 // #endregion

package/src/internal/property.ts

@@ -1,8 +1,18 @@
 import type {PlainObject} from '@oscarpalmer/atoms/models';
+import {getString} from '@oscarpalmer/atoms/string';
 import {camelCase} from '@oscarpalmer/atoms/string/case';
+import {isInputElement} from './is';
 
 // #region Functions
 
+function getPropertyValue(element: Element, name: string, value: unknown): unknown {
+	if (isInputElement(element) && name === 'value') {
+		return getString(value);
+	}
+
+	return value;
+}
+
 export function updateProperty(
 	element: Element,
 	name: string,
@@ -15,11 +25,13 @@ export function updateProperty(
 		property = camelCase(name);
 	}
 
-	if (!(property in element) || Object.is((element as unknown as PlainObject)[property], value)) {
+	const next = getPropertyValue(element, name, value);
+
+	if (!(property in element) || Object.is((element as unknown as PlainObject)[property], next)) {
 		return;
 	}
 
-	(element as unknown as PlainObject)[property] = value;
+	(element as unknown as PlainObject)[property] = next;
 
 	const event = dispatch && elementEvents[element.tagName]?.[property];
 

package/src/is.ts

@@ -54,6 +54,6 @@ const CHILD_NODE_TYPES: Set<number> = new Set([
 
 // #region Exports
 
-export {isEventTarget, isHTMLOrSVGElement} from './internal/is';
+export {isEventTarget, isHTMLOrSVGElement, isInputElement} from './internal/is';
 
 // #endregion

package/src/style.ts

@@ -1,3 +1,4 @@
+import {getString} from '@oscarpalmer/atoms/string';
 import {setElementValues, updateElementValue} from './internal/element-value';
 import {getStyleValue} from './internal/get-value';
 import {isHTMLOrSVGElement} from './internal/is';
@@ -187,9 +188,9 @@ function updateStyleProperty(element: Element, key: string, value: unknown): voi
 		value,
 		function (this: Element, property: string, style: unknown) {
 			if (property.startsWith(VARIABLE_PREFIX)) {
-				(this as HTMLElement).style.setProperty(property, String(style));
+				(this as HTMLElement).style.setProperty(property, getString(style));
 			} else {
-				(this as HTMLElement).style[property as never] = String(style);
+				(this as HTMLElement).style[property as never] = getString(style);
 			}
 		},
 		function (this: Element, property: string) {