veles 1.0.0 → 1.1.1

package/dist/{_utils-Cf3Xvo3q.cjs → _utils-DnT1tr2L.cjs}

@@ -169,6 +169,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",
@@ -187,9 +192,30 @@ const ENUMERATED_BOOLEAN_ATTRIBUTES = {
 		falseValue: "no"
 	}
 };
-function assignDomAttribute({ htmlElement, attributeName, value }) {
+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,
+			previousValue,
+			htmlElement
+		});
+		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;
@@ -198,8 +224,55 @@ function assignDomAttribute({ htmlElement, attributeName, value }) {
 		else htmlElement.removeAttribute(attributeName);
 		return;
 	}
+	if (value == null) {
+		htmlElement.removeAttribute(attributeName);
+		return;
+	}
 	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 = "";
+		htmlElement.removeAttribute("style");
+		return;
+	}
+	if (typeof value !== "object") {
+		htmlElement.style.cssText = String(value);
+		return;
+	}
+	const hasPreviousStyleObject = previousValue != null && typeof previousValue === "object";
+	if (!hasPreviousStyleObject) htmlElement.style.cssText = "";
+	else Object.keys(previousValue).forEach((property) => {
+		if (!(property in value) || value[property] == null) htmlElement.style.removeProperty(property);
+	});
+	Object.entries(value).forEach(([property, propertyValue]) => {
+		if (propertyValue == null) {
+			htmlElement.style.removeProperty(property);
+			return;
+		}
+		if (hasPreviousStyleObject && previousValue[property] === propertyValue) return;
+		htmlElement.style.setProperty(property, String(propertyValue));
+	});
+}
 //#endregion
 //#region src/create-element/assign-attributes.ts
 function assignAttributes({ props, htmlElement, velesNode }) {
@@ -302,17 +375,15 @@ function appendComponentToPortal(componentNode, portal) {
 			if ("executedVelesComponent" in fragmentChildComponent) appendComponentToPortal(getExecutedComponentVelesNode(fragmentChildComponent), portal);
 			else portal.append(fragmentChildComponent.html);
 		});
-		componentNode.phantom;
+		componentNode.portal = portal;
 	} else portal.append(componentNode.html);
 }
 function cleanupComponentFromPortal(componentNode) {
-	if ("executedVelesNode" in componentNode && componentNode.phantom) {
-		componentNode.childComponents.forEach((fragmentChildComponent) => {
-			if ("executedVelesComponent" in fragmentChildComponent) cleanupComponentFromPortal(getExecutedComponentVelesNode(fragmentChildComponent));
-			else fragmentChildComponent.html.remove();
-		});
-		componentNode.phantom;
-	} else componentNode.html.remove();
+	if ("executedVelesNode" in componentNode && componentNode.phantom) componentNode.childComponents.forEach((fragmentChildComponent) => {
+		if ("executedVelesComponent" in fragmentChildComponent) cleanupComponentFromPortal(getExecutedComponentVelesNode(fragmentChildComponent));
+		else fragmentChildComponent.html.remove();
+	});
+	else componentNode.html.remove();
 }
 //#endregion
 //#region src/fragment.ts

package/dist/{_utils-CCdioDsh.js → _utils-DxfFNKLL.js}

@@ -169,6 +169,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",
@@ -187,9 +192,30 @@ const ENUMERATED_BOOLEAN_ATTRIBUTES = {
 		falseValue: "no"
 	}
 };
-function assignDomAttribute({ htmlElement, attributeName, value }) {
+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,
+			previousValue,
+			htmlElement
+		});
+		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;
@@ -198,8 +224,55 @@ function assignDomAttribute({ htmlElement, attributeName, value }) {
 		else htmlElement.removeAttribute(attributeName);
 		return;
 	}
+	if (value == null) {
+		htmlElement.removeAttribute(attributeName);
+		return;
+	}
 	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 = "";
+		htmlElement.removeAttribute("style");
+		return;
+	}
+	if (typeof value !== "object") {
+		htmlElement.style.cssText = String(value);
+		return;
+	}
+	const hasPreviousStyleObject = previousValue != null && typeof previousValue === "object";
+	if (!hasPreviousStyleObject) htmlElement.style.cssText = "";
+	else Object.keys(previousValue).forEach((property) => {
+		if (!(property in value) || value[property] == null) htmlElement.style.removeProperty(property);
+	});
+	Object.entries(value).forEach(([property, propertyValue]) => {
+		if (propertyValue == null) {
+			htmlElement.style.removeProperty(property);
+			return;
+		}
+		if (hasPreviousStyleObject && previousValue[property] === propertyValue) return;
+		htmlElement.style.setProperty(property, String(propertyValue));
+	});
+}
 //#endregion
 //#region src/create-element/assign-attributes.ts
 function assignAttributes({ props, htmlElement, velesNode }) {
@@ -302,17 +375,15 @@ function appendComponentToPortal(componentNode, portal) {
 			if ("executedVelesComponent" in fragmentChildComponent) appendComponentToPortal(getExecutedComponentVelesNode(fragmentChildComponent), portal);
 			else portal.append(fragmentChildComponent.html);
 		});
-		componentNode.phantom;
+		componentNode.portal = portal;
 	} else portal.append(componentNode.html);
 }
 function cleanupComponentFromPortal(componentNode) {
-	if ("executedVelesNode" in componentNode && componentNode.phantom) {
-		componentNode.childComponents.forEach((fragmentChildComponent) => {
-			if ("executedVelesComponent" in fragmentChildComponent) cleanupComponentFromPortal(getExecutedComponentVelesNode(fragmentChildComponent));
-			else fragmentChildComponent.html.remove();
-		});
-		componentNode.phantom;
-	} else componentNode.html.remove();
+	if ("executedVelesNode" in componentNode && componentNode.phantom) componentNode.childComponents.forEach((fragmentChildComponent) => {
+		if ("executedVelesComponent" in fragmentChildComponent) cleanupComponentFromPortal(getExecutedComponentVelesNode(fragmentChildComponent));
+		else fragmentChildComponent.html.remove();
+	});
+	else componentNode.html.remove();
 }
 //#endregion
 //#region src/fragment.ts

package/dist/index.cjs

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require__utils = require("./_utils-Cf3Xvo3q.cjs");
+const require__utils = require("./_utils-DnT1tr2L.cjs");
 //#region src/attach-component.ts
 /**
 * Attach Veles component tree to a regular HTML node.
 * Right now it will wrap the app into an additional `<div>` tag.
-* 
+*
 * It returns a function which when executed, will remove the Veles
 * tree from DOM and remove all subscriptions.
 */
@@ -192,11 +192,15 @@ function updateUseAttributeValue({ element, value }) {
 		if (attributeValue) htmlElement.removeEventListener(eventName, attributeValue);
 		if (newAttributeValue && typeof newAttributeValue === "function") htmlElement.addEventListener(eventName, newAttributeValue);
 		element.attributeValue = newAttributeValue;
-	} else require__utils.assignDomAttribute({
-		htmlElement,
-		attributeName,
-		value: newAttributeValue
-	});
+	} else {
+		require__utils.assignDomAttribute({
+			htmlElement,
+			attributeName,
+			value: newAttributeValue,
+			previousValue: attributeValue
+		});
+		element.attributeValue = newAttributeValue;
+	}
 }
 //#endregion
 //#region src/create-state/update-render-each-value.ts
@@ -274,7 +278,7 @@ function updateUseValueIteratorValue({ value, trackingIterator, createState }) {
 			newChildRenderedComponents.push(require__utils.getMountedNodeExecutedVersion(newRenderedElement[0], "Iterator child is expected to be mounted"));
 			newChildComponents.push(newRenderedElement[0]);
 			if (positioningOffset[index]) offset = offset + positioningOffset[index];
-			const [newNode, calculatedKey, newState] = newRenderedElement;
+			const [newNode, calculatedKey, _newState] = newRenderedElement;
 			const existingElement = elementsByKey[calculatedKey];
 			if (existingElement) {
 				const existingElementNode = require__utils.getExecutedComponentVelesNode(require__utils.getMountedNodeExecutedVersion(existingElement.node, "Existing iterator node is expected to be mounted"));

package/dist/index.js

@@ -1,9 +1,9 @@
-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-CCdioDsh.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-DxfFNKLL.js";
 //#region src/attach-component.ts
 /**
 * Attach Veles component tree to a regular HTML node.
 * Right now it will wrap the app into an additional `<div>` tag.
-* 
+*
 * It returns a function which when executed, will remove the Veles
 * tree from DOM and remove all subscriptions.
 */
@@ -191,11 +191,15 @@ function updateUseAttributeValue({ element, value }) {
 		if (attributeValue) htmlElement.removeEventListener(eventName, attributeValue);
 		if (newAttributeValue && typeof newAttributeValue === "function") htmlElement.addEventListener(eventName, newAttributeValue);
 		element.attributeValue = newAttributeValue;
-	} else assignDomAttribute({
-		htmlElement,
-		attributeName,
-		value: newAttributeValue
-	});
+	} else {
+		assignDomAttribute({
+			htmlElement,
+			attributeName,
+			value: newAttributeValue,
+			previousValue: attributeValue
+		});
+		element.attributeValue = newAttributeValue;
+	}
 }
 //#endregion
 //#region src/create-state/update-render-each-value.ts
@@ -273,7 +277,7 @@ function updateUseValueIteratorValue({ value, trackingIterator, createState }) {
 			newChildRenderedComponents.push(getMountedNodeExecutedVersion(newRenderedElement[0], "Iterator child is expected to be mounted"));
 			newChildComponents.push(newRenderedElement[0]);
 			if (positioningOffset[index]) offset = offset + positioningOffset[index];
-			const [newNode, calculatedKey, newState] = newRenderedElement;
+			const [newNode, calculatedKey, _newState] = newRenderedElement;
 			const existingElement = elementsByKey[calculatedKey];
 			if (existingElement) {
 				const existingElementNode = getExecutedComponentVelesNode(getMountedNodeExecutedVersion(existingElement.node, "Existing iterator node is expected to be mounted"));

package/dist/jsx-runtime.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require__utils = require("./_utils-Cf3Xvo3q.cjs");
+const require__utils = require("./_utils-DnT1tr2L.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-CCdioDsh.js";
+import { f as Fragment, p as createElement } from "./_utils-DxfFNKLL.js";
 export { Fragment, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/package.json

@@ -1,14 +1,29 @@
 {
   "name": "veles",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "UI library with main focus on performance",
+  "keywords": [
+    "JavaScript",
+    "UI",
+    "library"
+  ],
+  "homepage": "https://github.com/Bloomca/veles#readme",
+  "bugs": {
+    "url": "https://github.com/Bloomca/veles/issues"
+  },
+  "license": "MIT",
+  "author": "Seva Zaikov <mail@bloomca.me>",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/Bloomca/veles.git"
+  },
+  "files": [
+    "dist"
+  ],
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -24,30 +39,31 @@
   "scripts": {
     "test": "vitest run",
     "build": "tsdown",
-    "ts-compile-check": "tsc -p tsconfig.json"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@github.com/Bloomca/veles.git"
-  },
-  "keywords": [
-    "JavaScript",
-    "UI",
-    "library"
-  ],
-  "author": "Seva Zaikov <mail@bloomca.me>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/Bloomca/veles/issues"
+    "ts-compile-check": "tsc -p tsconfig.json",
+    "lint": "oxlint",
+    "fmt": "oxfmt",
+    "fmt:check": "oxfmt --check",
+    "prepare": "husky"
   },
-  "homepage": "https://github.com/Bloomca/veles#readme",
   "devDependencies": {
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/user-event": "^14.5.2",
+    "husky": "^9.1.7",
     "jsdom": "^24.0.0",
+    "lint-staged": "^17.0.7",
+    "oxfmt": "^0.53.0",
+    "oxlint": "^1.68.0",
     "tsdown": "^0.21.7",
     "typescript": "^6.0.2",
     "vitest": "^3.2.4"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "oxfmt",
+      "oxlint"
+    ],
+    "!(*-lock).json": "oxfmt",
+    "*.{md,yml,yaml,css,html}": "oxfmt"
   }
 }