veles 1.1.2 → 1.1.4

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

@@ -151,6 +151,9 @@ function parseChildren({ children, htmlElement, velesNode, portal }) {
 			childComponent.parentVelesElement = velesNode;
 			childComponents.push(childComponent);
 		} else if (childComponent.portal) {
+			if (!childComponent.portalAnchor) throw new Error("Portal node is missing its source anchor");
+			htmlElement.append(childComponent.portalAnchor);
+			lastInsertedNode = childComponent.portalAnchor;
 			childComponent.parentVelesElement = velesNode;
 			childComponents.push(childComponent);
 		} else {
@@ -183,6 +186,7 @@ const FORM_VALUE_TAGS = new Set([
 	"TEXTAREA",
 	"SELECT"
 ]);
+const ATTRIBUTE_ALIASES = { htmlfor: "for" };
 const ENUMERATED_BOOLEAN_ATTRIBUTES = {
 	draggable: {
 		trueValue: "true",
@@ -203,6 +207,11 @@ const ENUMERATED_BOOLEAN_ATTRIBUTES = {
 };
 function assignDomAttribute({ htmlElement, attributeName, value, previousValue }) {
 	const normalizedAttributeName = attributeName.toLowerCase();
+	const domAttributeName = ATTRIBUTE_ALIASES[normalizedAttributeName] ?? attributeName;
+	if (normalizedAttributeName === "dangerouslysetinnerhtml") {
+		assignInnerHTML(htmlElement, value);
+		return;
+	}
 	if (normalizedAttributeName === "value" && isFormValueElement(htmlElement)) {
 		assignFormValueProperty(htmlElement, value);
 		return;
@@ -215,7 +224,7 @@ function assignDomAttribute({ htmlElement, attributeName, value, previousValue }
 		assignBooleanProperty(htmlElement, "selected", value);
 		return;
 	}
-	if (attributeName === "style") {
+	if (normalizedAttributeName === "style") {
 		assignStyle({
 			value,
 			previousValue,
@@ -223,21 +232,32 @@ function assignDomAttribute({ htmlElement, attributeName, value, previousValue }
 		});
 		return;
 	}
+	if (typeof value === "boolean" && (normalizedAttributeName.startsWith("aria-") || normalizedAttributeName.startsWith("data-"))) {
+		htmlElement.setAttribute(domAttributeName, String(value));
+		return;
+	}
 	if (typeof value === "boolean") {
 		const enumeratedConfig = ENUMERATED_BOOLEAN_ATTRIBUTES[normalizedAttributeName];
 		if (enumeratedConfig) {
-			htmlElement.setAttribute(attributeName, value ? enumeratedConfig.trueValue : enumeratedConfig.falseValue);
+			htmlElement.setAttribute(domAttributeName, value ? enumeratedConfig.trueValue : enumeratedConfig.falseValue);
 			return;
 		}
-		if (value) htmlElement.setAttribute(attributeName, "");
-		else htmlElement.removeAttribute(attributeName);
+		if (value) htmlElement.setAttribute(domAttributeName, "");
+		else htmlElement.removeAttribute(domAttributeName);
 		return;
 	}
 	if (value == null) {
-		htmlElement.removeAttribute(attributeName);
+		htmlElement.removeAttribute(domAttributeName);
+		return;
+	}
+	htmlElement.setAttribute(domAttributeName, value);
+}
+function assignInnerHTML(htmlElement, value) {
+	if (value == null) {
+		htmlElement.innerHTML = "";
 		return;
 	}
-	htmlElement.setAttribute(attributeName, value);
+	if (typeof value === "object" && "__html" in value) htmlElement.innerHTML = value.__html == null ? "" : String(value.__html);
 }
 function isFormValueElement(htmlElement) {
 	return FORM_VALUE_TAGS.has(htmlElement.tagName);
@@ -326,6 +346,7 @@ function createElement(element, props = {}) {
 		velesNode.childComponents = childComponents;
 		velesNode.phantom = phantom;
 		velesNode.portal = portal;
+		if (portal) velesNode.portalAnchor = document.createTextNode("");
 		const mountHandlers = [];
 		velesNode._privateMethods = {
 			_addMountHandler(cb) {
@@ -397,10 +418,17 @@ function cleanupComponentFromPortal(componentNode) {
 //#endregion
 //#region src/fragment.ts
 function Fragment({ children }) {
-	return createElement("div", {
+	const fragment = createElement("div", {
 		phantom: true,
 		children
 	});
+	if (fragment.childComponents.length === 0) {
+		const anchor = createTextElement("");
+		anchor.parentVelesElement = fragment;
+		fragment.childComponents.push(anchor);
+		fragment.html.append(anchor.html);
+	}
+	return fragment;
 }
 //#endregion
 //#region src/context/index.ts
@@ -523,45 +551,43 @@ function renderTree(component, { parentVelesElement } = {}) {
 		executedNode.html = component.html;
 		if (parentVelesElement) executedNode.parentVelesElement = parentVelesElement;
 		if (component.phantom) executedNode.phantom = component.phantom;
-		if (component.portal) executedNode.portal = component.portal;
+		if (component.portal) {
+			if (!component.portalAnchor) throw new Error("Portal node is missing its source anchor");
+			executedNode.portal = component.portal;
+			executedNode.portalAnchor = component.portalAnchor;
+		}
 		executedNode.childComponents = component.childComponents.map((childComponent) => renderTree(childComponent, { parentVelesElement: executedNode }));
 		if (component.needExecutedVersion) component.executedVersion = executedNode;
 		return executedNode;
 	}
 	throw new Error("Unknown component type in renderTree");
 }
+function getExecutedVelesNodeSourceNode(node) {
+	if ("executedVelesNode" in node && node.portal) {
+		if (!node.portalAnchor) throw new Error("Portal node is missing its source anchor");
+		return node.portalAnchor;
+	}
+	return node.html;
+}
 function insertNode({ velesElement, adjacentNode, parentVelesElement }) {
 	if (velesElement.phantom) {
 		let lastInsertedNode = null;
 		velesElement.childComponents.forEach((childComponentofPhantom) => {
-			if ("executedVelesNode" in childComponentofPhantom) {
-				if (lastInsertedNode) lastInsertedNode.after(childComponentofPhantom.html);
-				else if (adjacentNode) adjacentNode.after(childComponentofPhantom.html);
-				else parentVelesElement.html.prepend(childComponentofPhantom.html);
-				childComponentofPhantom.parentVelesElement = parentVelesElement;
-				lastInsertedNode = childComponentofPhantom.html;
-			} else if ("executedVelesStringElement" in childComponentofPhantom) {
-				if (lastInsertedNode) lastInsertedNode.after(childComponentofPhantom.html);
-				else if (adjacentNode) adjacentNode.after(childComponentofPhantom.html);
-				else parentVelesElement.html.prepend(childComponentofPhantom.html);
-				childComponentofPhantom.parentVelesElement = parentVelesElement;
-				lastInsertedNode = childComponentofPhantom.html;
-			} else {
-				const executedNode = getExecutedComponentVelesNode(childComponentofPhantom);
-				if (lastInsertedNode) lastInsertedNode.after(executedNode.html);
-				else if (adjacentNode) adjacentNode.after(executedNode.html);
-				else parentVelesElement.html.prepend(executedNode.html);
-				executedNode.parentVelesElement = parentVelesElement;
-				lastInsertedNode = executedNode.html;
-			}
+			const lastInsertedChildNode = insertNode({
+				velesElement: "executedVelesComponent" in childComponentofPhantom ? getExecutedComponentVelesNode(childComponentofPhantom) : childComponentofPhantom,
+				adjacentNode: lastInsertedNode ?? adjacentNode,
+				parentVelesElement
+			});
+			if (lastInsertedChildNode) lastInsertedNode = lastInsertedChildNode;
 		});
 		velesElement.parentVelesElement = parentVelesElement;
 		return lastInsertedNode;
 	} else {
-		if (adjacentNode) adjacentNode.after(velesElement.html);
-		else parentVelesElement.html.prepend(velesElement.html);
+		const sourceNode = getExecutedVelesNodeSourceNode(velesElement);
+		if (adjacentNode) adjacentNode.after(sourceNode);
+		else parentVelesElement.html.prepend(sourceNode);
 		velesElement.parentVelesElement = parentVelesElement;
-		return velesElement.html;
+		return sourceNode;
 	}
 }
 function getMountedNodeExecutedVersion(node, errorMessage) {
@@ -593,4 +619,4 @@ function unique(arr) {
 	return resultArr;
 }
 //#endregion
-export { onMount as _, identity as a, addPublicContext as c, popPublicContext as d, Fragment as f, hasCurrentLifecycleContext as g, createTextElement as h, getMountedNodeExecutedVersion as i, createContext as l, assignDomAttribute as m, callUnmountHandlers as n, renderTree as o, createElement as p, getExecutedComponentVelesNode as r, unique as s, callMountHandlers as t, getCurrentContext as u, onUnmount as v };
+export { hasCurrentLifecycleContext as _, getMountedNodeExecutedVersion as a, unique as c, getCurrentContext as d, popPublicContext as f, createTextElement as g, assignDomAttribute as h, getExecutedVelesNodeSourceNode as i, addPublicContext as l, createElement as m, callUnmountHandlers as n, identity as o, Fragment as p, getExecutedComponentVelesNode as r, renderTree as s, callMountHandlers as t, createContext as u, onMount as v, onUnmount as y };

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

@@ -151,6 +151,9 @@ function parseChildren({ children, htmlElement, velesNode, portal }) {
 			childComponent.parentVelesElement = velesNode;
 			childComponents.push(childComponent);
 		} else if (childComponent.portal) {
+			if (!childComponent.portalAnchor) throw new Error("Portal node is missing its source anchor");
+			htmlElement.append(childComponent.portalAnchor);
+			lastInsertedNode = childComponent.portalAnchor;
 			childComponent.parentVelesElement = velesNode;
 			childComponents.push(childComponent);
 		} else {
@@ -183,6 +186,7 @@ const FORM_VALUE_TAGS = new Set([
 	"TEXTAREA",
 	"SELECT"
 ]);
+const ATTRIBUTE_ALIASES = { htmlfor: "for" };
 const ENUMERATED_BOOLEAN_ATTRIBUTES = {
 	draggable: {
 		trueValue: "true",
@@ -203,6 +207,11 @@ const ENUMERATED_BOOLEAN_ATTRIBUTES = {
 };
 function assignDomAttribute({ htmlElement, attributeName, value, previousValue }) {
 	const normalizedAttributeName = attributeName.toLowerCase();
+	const domAttributeName = ATTRIBUTE_ALIASES[normalizedAttributeName] ?? attributeName;
+	if (normalizedAttributeName === "dangerouslysetinnerhtml") {
+		assignInnerHTML(htmlElement, value);
+		return;
+	}
 	if (normalizedAttributeName === "value" && isFormValueElement(htmlElement)) {
 		assignFormValueProperty(htmlElement, value);
 		return;
@@ -215,7 +224,7 @@ function assignDomAttribute({ htmlElement, attributeName, value, previousValue }
 		assignBooleanProperty(htmlElement, "selected", value);
 		return;
 	}
-	if (attributeName === "style") {
+	if (normalizedAttributeName === "style") {
 		assignStyle({
 			value,
 			previousValue,
@@ -223,21 +232,32 @@ function assignDomAttribute({ htmlElement, attributeName, value, previousValue }
 		});
 		return;
 	}
+	if (typeof value === "boolean" && (normalizedAttributeName.startsWith("aria-") || normalizedAttributeName.startsWith("data-"))) {
+		htmlElement.setAttribute(domAttributeName, String(value));
+		return;
+	}
 	if (typeof value === "boolean") {
 		const enumeratedConfig = ENUMERATED_BOOLEAN_ATTRIBUTES[normalizedAttributeName];
 		if (enumeratedConfig) {
-			htmlElement.setAttribute(attributeName, value ? enumeratedConfig.trueValue : enumeratedConfig.falseValue);
+			htmlElement.setAttribute(domAttributeName, value ? enumeratedConfig.trueValue : enumeratedConfig.falseValue);
 			return;
 		}
-		if (value) htmlElement.setAttribute(attributeName, "");
-		else htmlElement.removeAttribute(attributeName);
+		if (value) htmlElement.setAttribute(domAttributeName, "");
+		else htmlElement.removeAttribute(domAttributeName);
+		return;
+	}
+	if (value == null) {
+		htmlElement.removeAttribute(domAttributeName);
 		return;
 	}
+	htmlElement.setAttribute(domAttributeName, value);
+}
+function assignInnerHTML(htmlElement, value) {
 	if (value == null) {
-		htmlElement.removeAttribute(attributeName);
+		htmlElement.innerHTML = "";
 		return;
 	}
-	htmlElement.setAttribute(attributeName, value);
+	if (typeof value === "object" && "__html" in value) htmlElement.innerHTML = value.__html == null ? "" : String(value.__html);
 }
 function isFormValueElement(htmlElement) {
 	return FORM_VALUE_TAGS.has(htmlElement.tagName);
@@ -326,6 +346,7 @@ function createElement(element, props = {}) {
 		velesNode.childComponents = childComponents;
 		velesNode.phantom = phantom;
 		velesNode.portal = portal;
+		if (portal) velesNode.portalAnchor = document.createTextNode("");
 		const mountHandlers = [];
 		velesNode._privateMethods = {
 			_addMountHandler(cb) {
@@ -397,10 +418,17 @@ function cleanupComponentFromPortal(componentNode) {
 //#endregion
 //#region src/fragment.ts
 function Fragment({ children }) {
-	return createElement("div", {
+	const fragment = createElement("div", {
 		phantom: true,
 		children
 	});
+	if (fragment.childComponents.length === 0) {
+		const anchor = createTextElement("");
+		anchor.parentVelesElement = fragment;
+		fragment.childComponents.push(anchor);
+		fragment.html.append(anchor.html);
+	}
+	return fragment;
 }
 //#endregion
 //#region src/context/index.ts
@@ -523,45 +551,43 @@ function renderTree(component, { parentVelesElement } = {}) {
 		executedNode.html = component.html;
 		if (parentVelesElement) executedNode.parentVelesElement = parentVelesElement;
 		if (component.phantom) executedNode.phantom = component.phantom;
-		if (component.portal) executedNode.portal = component.portal;
+		if (component.portal) {
+			if (!component.portalAnchor) throw new Error("Portal node is missing its source anchor");
+			executedNode.portal = component.portal;
+			executedNode.portalAnchor = component.portalAnchor;
+		}
 		executedNode.childComponents = component.childComponents.map((childComponent) => renderTree(childComponent, { parentVelesElement: executedNode }));
 		if (component.needExecutedVersion) component.executedVersion = executedNode;
 		return executedNode;
 	}
 	throw new Error("Unknown component type in renderTree");
 }
+function getExecutedVelesNodeSourceNode(node) {
+	if ("executedVelesNode" in node && node.portal) {
+		if (!node.portalAnchor) throw new Error("Portal node is missing its source anchor");
+		return node.portalAnchor;
+	}
+	return node.html;
+}
 function insertNode({ velesElement, adjacentNode, parentVelesElement }) {
 	if (velesElement.phantom) {
 		let lastInsertedNode = null;
 		velesElement.childComponents.forEach((childComponentofPhantom) => {
-			if ("executedVelesNode" in childComponentofPhantom) {
-				if (lastInsertedNode) lastInsertedNode.after(childComponentofPhantom.html);
-				else if (adjacentNode) adjacentNode.after(childComponentofPhantom.html);
-				else parentVelesElement.html.prepend(childComponentofPhantom.html);
-				childComponentofPhantom.parentVelesElement = parentVelesElement;
-				lastInsertedNode = childComponentofPhantom.html;
-			} else if ("executedVelesStringElement" in childComponentofPhantom) {
-				if (lastInsertedNode) lastInsertedNode.after(childComponentofPhantom.html);
-				else if (adjacentNode) adjacentNode.after(childComponentofPhantom.html);
-				else parentVelesElement.html.prepend(childComponentofPhantom.html);
-				childComponentofPhantom.parentVelesElement = parentVelesElement;
-				lastInsertedNode = childComponentofPhantom.html;
-			} else {
-				const executedNode = getExecutedComponentVelesNode(childComponentofPhantom);
-				if (lastInsertedNode) lastInsertedNode.after(executedNode.html);
-				else if (adjacentNode) adjacentNode.after(executedNode.html);
-				else parentVelesElement.html.prepend(executedNode.html);
-				executedNode.parentVelesElement = parentVelesElement;
-				lastInsertedNode = executedNode.html;
-			}
+			const lastInsertedChildNode = insertNode({
+				velesElement: "executedVelesComponent" in childComponentofPhantom ? getExecutedComponentVelesNode(childComponentofPhantom) : childComponentofPhantom,
+				adjacentNode: lastInsertedNode ?? adjacentNode,
+				parentVelesElement
+			});
+			if (lastInsertedChildNode) lastInsertedNode = lastInsertedChildNode;
 		});
 		velesElement.parentVelesElement = parentVelesElement;
 		return lastInsertedNode;
 	} else {
-		if (adjacentNode) adjacentNode.after(velesElement.html);
-		else parentVelesElement.html.prepend(velesElement.html);
+		const sourceNode = getExecutedVelesNodeSourceNode(velesElement);
+		if (adjacentNode) adjacentNode.after(sourceNode);
+		else parentVelesElement.html.prepend(sourceNode);
 		velesElement.parentVelesElement = parentVelesElement;
-		return velesElement.html;
+		return sourceNode;
 	}
 }
 function getMountedNodeExecutedVersion(node, errorMessage) {
@@ -653,6 +679,12 @@ Object.defineProperty(exports, "getExecutedComponentVelesNode", {
 		return getExecutedComponentVelesNode;
 	}
 });
+Object.defineProperty(exports, "getExecutedVelesNodeSourceNode", {
+	enumerable: true,
+	get: function() {
+		return getExecutedVelesNodeSourceNode;
+	}
+});
 Object.defineProperty(exports, "getMountedNodeExecutedVersion", {
 	enumerable: true,
 	get: function() {

package/dist/{fragment-C16zCm8L.d.cts → fragment-COsp_SDE.d.cts}

@@ -1428,6 +1428,7 @@ type VelesElement = {
   html: HTMLElement;
   phantom?: boolean;
   portal?: null | HTMLElement;
+  portalAnchor?: Text;
   needExecutedVersion?: boolean;
   executedVersion?: ExecutedVelesElement; // every element except the most top one should have one
   parentVelesElement?: VelesElement;
@@ -1443,7 +1444,8 @@ type ExecutedVelesElement = {
   executedVelesNode: true;
   html: HTMLElement;
   phantom?: boolean;
-  portal?: HTMLElement; // every element except the most top one should have one
+  portal?: HTMLElement;
+  portalAnchor?: Text; // every element except the most top one should have one
   parentVelesElement?: ExecutedVelesElement;
   childComponents: (ExecutedVelesElement | ExecutedVelesComponent | ExecutedVelesStringElement)[]; // not intended to be used directly
   _privateMethods: {

package/dist/{fragment-yC0-T2O-.d.ts → fragment-CPcYB5D5.d.ts}

@@ -1428,6 +1428,7 @@ type VelesElement = {
   html: HTMLElement;
   phantom?: boolean;
   portal?: null | HTMLElement;
+  portalAnchor?: Text;
   needExecutedVersion?: boolean;
   executedVersion?: ExecutedVelesElement; // every element except the most top one should have one
   parentVelesElement?: VelesElement;
@@ -1443,7 +1444,8 @@ type ExecutedVelesElement = {
   executedVelesNode: true;
   html: HTMLElement;
   phantom?: boolean;
-  portal?: HTMLElement; // every element except the most top one should have one
+  portal?: HTMLElement;
+  portalAnchor?: Text; // every element except the most top one should have one
   parentVelesElement?: ExecutedVelesElement;
   childComponents: (ExecutedVelesElement | ExecutedVelesComponent | ExecutedVelesStringElement)[]; // not intended to be used directly
   _privateMethods: {