src/main.ts

@@ -156,7 +156,6 @@ export default (options: ComponentOptions) => {
 				setupArrowFunctionHandler: this._setupArrowFunctionHandler.bind(this),
 				setupFunctionCallHandler: this._setupFunctionCallHandler.bind(this),
 				setupExpressionHandler: this._setupExpressionHandler.bind(this),
-				setupConditionRendering: this._setupConditionRendering.bind(this),
 				setupListRendering: this._setupListRendering.bind(this),
 				stateToElementsMap: this._stateToElementsMap,
 				textBindings: this._textBindings,
@@ -168,6 +167,10 @@ export default (options: ComponentOptions) => {
 						name !== 'constructor',
 				),
 				stateListeners: this._statesListeners,
+				conditionalElements: this._conditionalElements,
+				evaluateIfCondition: this._evaluateIfCondition.bind(this),
+				extractStatePathsFromExpression:
+					this._extractStatePathsFromExpression.bind(this),
 			})
 		}
 
@@ -200,27 +203,6 @@ export default (options: ComponentOptions) => {
 			}
 		}
 
-		// Handle condition rendering (%if macro)
-		private _setupConditionRendering(element: Element, expr: string) {
-			const placeholder = document.createComment(` %if: ${expr} `)
-			element.parentNode?.insertBefore(placeholder, element)
-
-			this._conditionalElements.set(element, {
-				expr,
-				placeholder,
-				isPresent: true,
-			})
-
-			this._evaluateIfCondition(element, expr)
-
-			const statePaths = this._extractStatePathsFromExpression(expr)
-			for (const path of statePaths) {
-				if (!this._stateToElementsMap[path])
-					this._stateToElementsMap[path] = new Set()
-				this._stateToElementsMap[path].add(element as HTMLElement)
-			}
-		}
-
 		// Handle list rendering (%for macro)
 		private _setupListRendering(element: Element, expr: string) {
 			// Parse the expression (e.g., "item in items" or "(item, index) in items")

src/utils/processTemplateMarco.ts

@@ -24,7 +24,6 @@ export default function processTemplateMacros(
 			eventName: string,
 			handlerValue: string,
 		) => void
-		setupConditionRendering: (element: Element, expr: string) => void
 		setupListRendering: (element: Element, expr: string) => void
 		stateToElementsMap: Record<string, Set<HTMLElement>>
 		textBindings: {
@@ -34,6 +33,12 @@ export default function processTemplateMacros(
 		}[]
 		availableFuncs: string[]
 		stateListeners: Record<string, (newValue: unknown) => void>
+		conditionalElements: Map<
+			Element,
+			{ expr: string; placeholder: Comment; isPresent: boolean }
+		>
+		evaluateIfCondition: (element: Element, expr: string) => void
+		extractStatePathsFromExpression: (expr: string) => string[]
 	},
 ) {
 	/*
@@ -214,7 +219,12 @@ export default function processTemplateMacros(
 
 	// Process all collected %if directives after the main traversal
 	for (const { element: ifElement, expr } of ifDirectivesToProcess) {
-		options.setupConditionRendering(ifElement, expr)
+		setupConditionRendering(ifElement, expr, {
+			conditionalElements: options.conditionalElements,
+			evaluateIfCondition: options.evaluateIfCondition.bind(context),
+			extractStatePathsFromExpression: options.extractStatePathsFromExpression,
+			stateToElementsMap: options.stateToElementsMap,
+		})
 	}
 }
 
@@ -254,3 +264,35 @@ function setupTwoWayBinding(
 		else element.setAttribute('data-laterano-connect', String(newValue))
 	}
 }
+
+// Handle condition rendering (%if macro)
+function setupConditionRendering(
+	element: Element,
+	expr: string,
+	ops: {
+		conditionalElements: Map<
+			Element,
+			{ expr: string; placeholder: Comment; isPresent: boolean }
+		>
+		evaluateIfCondition: (element: Element, expr: string) => void
+		extractStatePathsFromExpression: (expr: string) => string[]
+		stateToElementsMap: Record<string, Set<HTMLElement>>
+	},
+) {
+	const placeholder = document.createComment(` %if: ${expr} `)
+	element.parentNode?.insertBefore(placeholder, element)
+
+	ops.conditionalElements.set(element, {
+		expr,
+		placeholder,
+		isPresent: true,
+	})
+
+	ops.evaluateIfCondition(element, expr)
+
+	const statePaths = ops.extractStatePathsFromExpression(expr)
+	for (const path of statePaths) {
+		if (!ops.stateToElementsMap[path]) ops.stateToElementsMap[path] = new Set()
+		ops.stateToElementsMap[path].add(element as HTMLElement)
+	}
+}