veles 1.1.0 → 1.1.2

package/dist/{_utils-klvxkUOR.js → _utils-BnAXelPu.js}

@@ -108,11 +108,20 @@ function executeComponent({ element, props }) {
 }
 //#endregion
 //#region src/create-element/parse-children.ts
+function flattenChildren(children) {
+	const flattenedChildren = [];
+	function append(child) {
+		if (Array.isArray(child)) child.forEach(append);
+		else flattenedChildren.push(child);
+	}
+	append(children);
+	return flattenedChildren;
+}
 function parseChildren({ children, htmlElement, velesNode, portal }) {
 	const childComponents = [];
 	if (children === void 0 || children === null) return childComponents;
 	let lastInsertedNode = null;
-	(Array.isArray(children) ? children : [children]).forEach((childComponent) => {
+	flattenChildren(children).forEach((childComponent) => {
 		if (typeof childComponent === "string") {
 			const textNode = createTextElement(childComponent);
 			htmlElement.append(textNode.html);
@@ -169,6 +178,11 @@ function parseChildren({ children, htmlElement, velesNode, portal }) {
 }
 //#endregion
 //#region src/attribute-utils.ts
+const FORM_VALUE_TAGS = new Set([
+	"INPUT",
+	"TEXTAREA",
+	"SELECT"
+]);
 const ENUMERATED_BOOLEAN_ATTRIBUTES = {
 	draggable: {
 		trueValue: "true",
@@ -188,6 +202,19 @@ const ENUMERATED_BOOLEAN_ATTRIBUTES = {
 	}
 };
 function assignDomAttribute({ htmlElement, attributeName, value, previousValue }) {
+	const normalizedAttributeName = attributeName.toLowerCase();
+	if (normalizedAttributeName === "value" && isFormValueElement(htmlElement)) {
+		assignFormValueProperty(htmlElement, value);
+		return;
+	}
+	if (normalizedAttributeName === "checked" && htmlElement.tagName === "INPUT") {
+		assignBooleanProperty(htmlElement, "checked", value);
+		return;
+	}
+	if (normalizedAttributeName === "selected" && htmlElement.tagName === "OPTION") {
+		assignBooleanProperty(htmlElement, "selected", value);
+		return;
+	}
 	if (attributeName === "style") {
 		assignStyle({
 			value,
@@ -197,7 +224,7 @@ function assignDomAttribute({ htmlElement, attributeName, value, previousValue }
 		return;
 	}
 	if (typeof value === "boolean") {
-		const enumeratedConfig = ENUMERATED_BOOLEAN_ATTRIBUTES[attributeName.toLowerCase()];
+		const enumeratedConfig = ENUMERATED_BOOLEAN_ATTRIBUTES[normalizedAttributeName];
 		if (enumeratedConfig) {
 			htmlElement.setAttribute(attributeName, value ? enumeratedConfig.trueValue : enumeratedConfig.falseValue);
 			return;
@@ -212,6 +239,25 @@ function assignDomAttribute({ htmlElement, attributeName, value, previousValue }
 	}
 	htmlElement.setAttribute(attributeName, value);
 }
+function isFormValueElement(htmlElement) {
+	return FORM_VALUE_TAGS.has(htmlElement.tagName);
+}
+function assignFormValueProperty(htmlElement, value) {
+	if (htmlElement.tagName === "SELECT" && Array.isArray(value)) {
+		const selectedValues = new Set(value.map(String));
+		Array.from(htmlElement.options).forEach((option) => {
+			const shouldSelect = selectedValues.has(option.value);
+			if (option.selected !== shouldSelect) option.selected = shouldSelect;
+		});
+		return;
+	}
+	const normalizedValue = value == null ? "" : String(value);
+	if (htmlElement.value !== normalizedValue) htmlElement.value = normalizedValue;
+}
+function assignBooleanProperty(htmlElement, propertyName, value) {
+	const normalizedValue = Boolean(value);
+	if (htmlElement[propertyName] !== normalizedValue) htmlElement[propertyName] = normalizedValue;
+}
 function assignStyle({ value, previousValue, htmlElement }) {
 	if (value == null) {
 		htmlElement.style.cssText = "";

package/dist/{_utils-DMl2JD2g.cjs → _utils-DbrPydEE.cjs}

@@ -108,11 +108,20 @@ function executeComponent({ element, props }) {
 }
 //#endregion
 //#region src/create-element/parse-children.ts
+function flattenChildren(children) {
+	const flattenedChildren = [];
+	function append(child) {
+		if (Array.isArray(child)) child.forEach(append);
+		else flattenedChildren.push(child);
+	}
+	append(children);
+	return flattenedChildren;
+}
 function parseChildren({ children, htmlElement, velesNode, portal }) {
 	const childComponents = [];
 	if (children === void 0 || children === null) return childComponents;
 	let lastInsertedNode = null;
-	(Array.isArray(children) ? children : [children]).forEach((childComponent) => {
+	flattenChildren(children).forEach((childComponent) => {
 		if (typeof childComponent === "string") {
 			const textNode = createTextElement(childComponent);
 			htmlElement.append(textNode.html);
@@ -169,6 +178,11 @@ function parseChildren({ children, htmlElement, velesNode, portal }) {
 }
 //#endregion
 //#region src/attribute-utils.ts
+const FORM_VALUE_TAGS = new Set([
+	"INPUT",
+	"TEXTAREA",
+	"SELECT"
+]);
 const ENUMERATED_BOOLEAN_ATTRIBUTES = {
 	draggable: {
 		trueValue: "true",
@@ -188,6 +202,19 @@ const ENUMERATED_BOOLEAN_ATTRIBUTES = {
 	}
 };
 function assignDomAttribute({ htmlElement, attributeName, value, previousValue }) {
+	const normalizedAttributeName = attributeName.toLowerCase();
+	if (normalizedAttributeName === "value" && isFormValueElement(htmlElement)) {
+		assignFormValueProperty(htmlElement, value);
+		return;
+	}
+	if (normalizedAttributeName === "checked" && htmlElement.tagName === "INPUT") {
+		assignBooleanProperty(htmlElement, "checked", value);
+		return;
+	}
+	if (normalizedAttributeName === "selected" && htmlElement.tagName === "OPTION") {
+		assignBooleanProperty(htmlElement, "selected", value);
+		return;
+	}
 	if (attributeName === "style") {
 		assignStyle({
 			value,
@@ -197,7 +224,7 @@ function assignDomAttribute({ htmlElement, attributeName, value, previousValue }
 		return;
 	}
 	if (typeof value === "boolean") {
-		const enumeratedConfig = ENUMERATED_BOOLEAN_ATTRIBUTES[attributeName.toLowerCase()];
+		const enumeratedConfig = ENUMERATED_BOOLEAN_ATTRIBUTES[normalizedAttributeName];
 		if (enumeratedConfig) {
 			htmlElement.setAttribute(attributeName, value ? enumeratedConfig.trueValue : enumeratedConfig.falseValue);
 			return;
@@ -212,6 +239,25 @@ function assignDomAttribute({ htmlElement, attributeName, value, previousValue }
 	}
 	htmlElement.setAttribute(attributeName, value);
 }
+function isFormValueElement(htmlElement) {
+	return FORM_VALUE_TAGS.has(htmlElement.tagName);
+}
+function assignFormValueProperty(htmlElement, value) {
+	if (htmlElement.tagName === "SELECT" && Array.isArray(value)) {
+		const selectedValues = new Set(value.map(String));
+		Array.from(htmlElement.options).forEach((option) => {
+			const shouldSelect = selectedValues.has(option.value);
+			if (option.selected !== shouldSelect) option.selected = shouldSelect;
+		});
+		return;
+	}
+	const normalizedValue = value == null ? "" : String(value);
+	if (htmlElement.value !== normalizedValue) htmlElement.value = normalizedValue;
+}
+function assignBooleanProperty(htmlElement, propertyName, value) {
+	const normalizedValue = Boolean(value);
+	if (htmlElement[propertyName] !== normalizedValue) htmlElement[propertyName] = normalizedValue;
+}
 function assignStyle({ value, previousValue, htmlElement }) {
 	if (value == null) {
 		htmlElement.style.cssText = "";

package/dist/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require__utils = require("./_utils-DMl2JD2g.cjs");
+const require__utils = require("./_utils-DbrPydEE.cjs");
 //#region src/attach-component.ts
 /**
 * Attach Veles component tree to a regular HTML node.

package/dist/index.js

@@ -1,4 +1,4 @@
-import { _ as onMount, a as identity, c as addPublicContext, d as popPublicContext, f as Fragment, g as hasCurrentLifecycleContext, h as createTextElement, i as getMountedNodeExecutedVersion, l as createContext, m as assignDomAttribute, n as callUnmountHandlers, o as renderTree, p as createElement, r as getExecutedComponentVelesNode, s as unique, t as callMountHandlers, u as getCurrentContext, v as onUnmount } from "./_utils-klvxkUOR.js";
+import { _ as onMount, a as identity, c as addPublicContext, d as popPublicContext, f as Fragment, g as hasCurrentLifecycleContext, h as createTextElement, i as getMountedNodeExecutedVersion, l as createContext, m as assignDomAttribute, n as callUnmountHandlers, o as renderTree, p as createElement, r as getExecutedComponentVelesNode, s as unique, t as callMountHandlers, u as getCurrentContext, v as onUnmount } from "./_utils-BnAXelPu.js";
 //#region src/attach-component.ts
 /**
 * Attach Veles component tree to a regular HTML node.

package/dist/jsx-runtime.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require__utils = require("./_utils-DMl2JD2g.cjs");
+const require__utils = require("./_utils-DbrPydEE.cjs");
 exports.Fragment = require__utils.Fragment;
 exports.jsx = require__utils.createElement;
 exports.jsxDEV = require__utils.createElement;

package/dist/jsx-runtime.js

@@ -1,2 +1,2 @@
-import { f as Fragment, p as createElement } from "./_utils-klvxkUOR.js";
+import { f as Fragment, p as createElement } from "./_utils-BnAXelPu.js";
 export { Fragment, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veles",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "UI library with main focus on performance",
   "keywords": [
     "JavaScript",