@xaendar/core 0.6.19 → 0.6.20

package/dist/xaendar-core.es.d.ts

@@ -273,9 +273,10 @@ export declare type EventOptions = Beautify<RequireOne<Omit<CustomEventInit, 'de
  * @param parentNode - The parent HTML element where the conditional structure is applied.
  * @param parentContext - The parent Context object containing all the variables definition from the Parent Closure
  * @param condition - A reactive function that returns the array of items to iterate over.
+ * @param trackExpression - An expression used to identify univocally single iterations to not duplicate DOM elements between different renders
  * @param forFn - A callback invoked for each item, receiving the parent node, the item, and its index. Must return an array of cleanup functions.
  */
-export declare function _for(parentNode: HTMLElement, parentContext: Context, condition: () => unknown[], forFn: Function_2<[parentNode: HTMLElement, context: Context, items: unknown[], index: number], Context>): void;
+export declare function _for(parentNode: HTMLElement, parentContext: Context, condition: () => unknown[], trackExpression: Function_2<[unknown], string | number>, forFn: Function_2<[parentNode: HTMLElement, context: Context, items: unknown[], index: number], Context>): void;
 
 /**
  * Creates a reactive conditional structure from a list of branches.
@@ -382,6 +383,19 @@ export declare function _iterationVariables(items: unknown[], index: number, ite
     $odd: string;
 }): Record<string, unknown>;
 
+/**
+ * Mounts a node into the DOM and binds it to the context lifecycle.
+ *
+ * Registers the node with the context, appends it to `parentNode`, and
+ * schedules a cleanup listener that removes the node from both the context
+ * and the DOM when the context is destroyed.
+ *
+ * @param node - The node to mount.
+ * @param parentNode - The parent HTML element to append the node to.
+ * @param context - The current template execution scope that owns the node's lifecycle.
+ */
+export declare function mountNode(node: Node, parentNode: HTMLElement, context: Context): void;
+
 /**
  * Represents the output type returned by an `@Event` decorator in a web component.
  *
@@ -607,6 +621,13 @@ export declare function _switch(parentNode: HTMLElement, parentContext: Context,
     block: Function_2<[HTMLElement, Context], Context>;
 }>): void;
 
+/**
+ * Executes a function without tracking any dependencies.
+ * @param fn - The function to execute without tracking.
+ * @returns The result of the function execution.
+ */
+export declare const untracked: typeof Signal.subtle.untrack;
+
 /**
  * Decorator that registers a class as a custom web component.
  *

package/dist/xaendar-core.es.js

@@ -486,6 +486,14 @@ function signal(value, options) {
 	return getter;
 }
 //#endregion
+//#region ../packages/core/src/signals/untracked.ts
+/**
+* Executes a function without tracking any dependencies.
+* @param fn - The function to execute without tracking.
+* @returns The result of the function execution.
+*/
+var untracked = Signal.subtle.untrack;
+//#endregion
 //#region ../packages/core/src/utils/context.util.ts
 /**
 * Tracks identifier scope during run time template function execution
@@ -586,6 +594,25 @@ var Context = class {
 		this._nodes = [];
 	}
 };
+/**
+* Mounts a node into the DOM and binds it to the context lifecycle.
+*
+* Registers the node with the context, appends it to `parentNode`, and
+* schedules a cleanup listener that removes the node from both the context
+* and the DOM when the context is destroyed.
+*
+* @param node - The node to mount.
+* @param parentNode - The parent HTML element to append the node to.
+* @param context - The current template execution scope that owns the node's lifecycle.
+*/
+function mountNode(node, parentNode, context) {
+	context.addNode(node);
+	parentNode.appendChild(node);
+	context.listen(() => {
+		context.removeNode(node);
+		parentNode.removeChild(node);
+	});
+}
 //#endregion
 //#region ../packages/core/src/utils/for.util.ts
 /**
@@ -595,9 +622,10 @@ var Context = class {
 * @param parentNode - The parent HTML element where the conditional structure is applied.
 * @param parentContext - The parent Context object containing all the variables definition from the Parent Closure
 * @param condition - A reactive function that returns the array of items to iterate over.
+* @param trackExpression - An expression used to identify univocally single iterations to not duplicate DOM elements between different renders
 * @param forFn - A callback invoked for each item, receiving the parent node, the item, and its index. Must return an array of cleanup functions.
 */
-function _for(parentNode, parentContext, condition, forFn) {
+function _for(parentNode, parentContext, condition, trackExpression, forFn) {
 	let contexts = new Array();
 	const unlistener = effect(() => {
 		contexts.forEach((context) => {
@@ -606,7 +634,7 @@ function _for(parentNode, parentContext, condition, forFn) {
 		});
 		contexts = [];
 		const items = condition();
-		Signal.subtle.untrack(() => {
+		untracked(() => {
 			for (let i = 0; i < items.length; i++) {
 				const context = forFn(parentNode, parentContext, items, i);
 				contexts.push(context);
@@ -766,7 +794,7 @@ function checkAndUpdateState(parentNode, parentContext, state, newState, conditi
 		state?.context.unlisten();
 		return {
 			activeBranch: newState,
-			context: Signal.subtle.untrack(() => conditionalBlockFn(parentNode, parentContext))
+			context: untracked(() => conditionalBlockFn(parentNode, parentContext))
 		};
 	}
 }
@@ -791,11 +819,7 @@ function checkAndUpdateState(parentNode, parentContext, state, newState, conditi
 */
 function _renderElement(parentNode, context, tagName, attributes, events) {
 	const element = document.createElement(tagName);
-	parentNode.appendChild(element);
-	context.listen(() => {
-		context.removeNode(element);
-		parentNode.removeChild(element);
-	});
+	mountNode(element, parentNode, context);
 	attributes.forEach(({ name, value, literal }) => {
 		literal ? element.setAttribute(name, String(value())) : context.listen(effect(() => element.setAttribute(name, String(value()))));
 	});
@@ -822,11 +846,7 @@ function _renderElement(parentNode, context, tagName, attributes, events) {
 */
 function _renderText(parentNode, context, textFn) {
 	const node = document.createTextNode(textFn());
-	parentNode.appendChild(node);
-	context.listen(() => {
-		context.removeNode(node);
-		parentNode.removeChild(node);
-	});
+	mountNode(node, parentNode, context);
 	context.listen(effect(() => node.textContent = textFn()));
 }
 /**
@@ -841,9 +861,7 @@ function _renderText(parentNode, context, textFn) {
 * @param text - The literal string to render as text content.
 */
 function _renderLiteralText(parentNode, context, text) {
-	const node = document.createTextNode(text);
-	parentNode.appendChild(node);
-	context.listen(() => parentNode.removeChild(node));
+	mountNode(document.createTextNode(text), parentNode, context);
 }
 //#endregion
 //#region ../packages/core/src/utils/switch.util.ts
@@ -879,4 +897,4 @@ function _switch(parentNode, parentContext, expression, blocks) {
 	})));
 }
 //#endregion
-export { BaseWebComponent, Context, Event, Property, WebComponent, _for, _if, _iterationVariables, _renderElement, _renderLiteralText, _renderText, _switch, computed, effect, input, signal };
+export { BaseWebComponent, Context, Event, Property, WebComponent, _for, _if, _iterationVariables, _renderElement, _renderLiteralText, _renderText, _switch, computed, effect, input, mountNode, signal, untracked };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaendar/core",
-  "version": "0.6.19",
+  "version": "0.6.20",
   "description": "A library containing core utils such as webcomponent base classes and theming support",
   "sideEffects": false,
   "type": "module",
@@ -16,7 +16,7 @@
     }
   },
   "dependencies": {
-    "@xaendar/signals": "0.6.19",
-    "@xaendar/types": "0.6.19"
+    "@xaendar/signals": "0.6.20",
+    "@xaendar/types": "0.6.20"
   }
 }