@xaendar/core 0.6.18 → 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.
  *
@@ -510,7 +524,7 @@ declare type RenderElementEvent = {
     /**
      * Event Parameters
      */
-    parameters: NoArgsFunction<unknown>[];
+    parameters: Function_2<[Event], unknown>[];
 };
 
 /**
@@ -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,50 +794,12 @@ 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))
 		};
 	}
 }
 //#endregion
-//#region ../packages/core/src/utils/render-text.util.ts
-/**
-* Creates a reactive text node bound to a named identifier in the current scope.
-*
-* Appends a `Text` node to `parentNode` with the initial value of the identifier.
-* If the identifier is reactive, wraps the text update in an effect so the node
-* content is kept in sync whenever the underlying signal changes.
-*
-* @param parentNode - The parent HTML element to append the text node to.
-* @param context - The current template execution scope used to resolve `text`.
-* @param text - The identifier name to resolve as the text content.
-*/
-function _renderText(parentNode, context, textFn) {
-	const node = document.createTextNode(textFn());
-	parentNode.appendChild(node);
-	context.listen(() => {
-		context.removeNode(node);
-		parentNode.removeChild(node);
-	});
-	context.listen(effect(() => node.textContent = textFn()));
-}
-/**
-* Creates a static (non-reactive) text node with a literal string value.
-*
-* Appends a `Text` node containing `text` directly to `parentNode` and
-* registers a cleanup function that removes the node when the context is
-* destroyed.
-*
-* @param parentNode - The parent HTML element to append the text node to.
-* @param context - The current template execution scope.
-* @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));
-}
-//#endregion
-//#region ../packages/core/src/utils/render-util.ts
+//#region ../packages/core/src/utils/render-element.util.ts
 /**
 * Creates a DOM element, applies attributes and event listeners, appends it
 * to the parent, and registers cleanup functions in the current context.
@@ -829,16 +819,12 @@ function _renderLiteralText(parentNode, context, text) {
 */
 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()))));
 	});
 	events.forEach((event) => {
-		const handler = ($event) => context.getEventHandler(event.handler)(...event.parameters.map((event) => event()));
+		const handler = ($event) => context.getEventHandler(event.handler)(...event.parameters.map((event) => event($event)));
 		const name = event.name;
 		element.addEventListener(name, handler);
 		context.listen(() => element.removeEventListener(name, handler));
@@ -846,6 +832,38 @@ function _renderElement(parentNode, context, tagName, attributes, events) {
 	return element;
 }
 //#endregion
+//#region ../packages/core/src/utils/render-text.util.ts
+/**
+* Creates a reactive text node bound to a named identifier in the current scope.
+*
+* Appends a `Text` node to `parentNode` with the initial value of the identifier.
+* If the identifier is reactive, wraps the text update in an effect so the node
+* content is kept in sync whenever the underlying signal changes.
+*
+* @param parentNode - The parent HTML element to append the text node to.
+* @param context - The current template execution scope used to resolve `text`.
+* @param text - The identifier name to resolve as the text content.
+*/
+function _renderText(parentNode, context, textFn) {
+	const node = document.createTextNode(textFn());
+	mountNode(node, parentNode, context);
+	context.listen(effect(() => node.textContent = textFn()));
+}
+/**
+* Creates a static (non-reactive) text node with a literal string value.
+*
+* Appends a `Text` node containing `text` directly to `parentNode` and
+* registers a cleanup function that removes the node when the context is
+* destroyed.
+*
+* @param parentNode - The parent HTML element to append the text node to.
+* @param context - The current template execution scope.
+* @param text - The literal string to render as text content.
+*/
+function _renderLiteralText(parentNode, context, text) {
+	mountNode(document.createTextNode(text), parentNode, context);
+}
+//#endregion
 //#region ../packages/core/src/utils/switch.util.ts
 /**
 * Creates a reactive switch/case structure by converting it into an if/else-if chain
@@ -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.18",
+  "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.18",
-    "@xaendar/types": "0.6.18"
+    "@xaendar/signals": "0.6.20",
+    "@xaendar/types": "0.6.20"
   }
 }