@webmate-studio/builder 0.2.110 → 0.2.113

package/src/template-processor.js

@@ -1,623 +1,128 @@
 /**
- * Template Processor (Universal Version)
+ * Template Processor — Unified entry point for template processing.
  *
- * Handles all Svelte-style template syntax processing:
- * - {#if} conditionals with {:else if} and {:else}
- * - {#each} loops with index, keys, and {:else}
- * - Expression evaluation (delegates to ExpressionEvaluator)
+ * Single API: process(template, data) → HTML
  *
- * This is the canonical version used by:
- * - Browser preview (via script tag)
- * - Build service (Node.js)
+ * Used identically by:
+ * - Preview (browser, via window global)
+ * - Build service (Node.js, via npm import)
  * - CMS rendering engine
  *
+ * Internally:
+ * 1. Parses template into AST (cached)
+ * 2. Evaluates AST with data context → HTML
+ *
  * @module template-processor
  */
 
+import { TemplateParser } from './template-parser.js';
+import { TemplateEvaluator } from './template-evaluator.js';
+import expressionEvaluator from './expression-evaluator.js';
+
 class TemplateProcessor {
 	constructor() {
-		// Will be set by init()
-		this.evaluateExpression = null;
-		this.evaluateExpressionValue = null;
-		this.propSchema = null;
-	}
-
-	/**
-	 * Initialize with expression evaluator functions
-	 * @param {Function} evaluateExprFn - Function to evaluate expressions (returns boolean)
-	 * @param {Function} evaluateExprValueFn - Function to evaluate expressions (returns value)
-	 * @param {Object} propSchema - Optional: Prop schema for markdown detection
-	 */
-	init(evaluateExprFn, evaluateExprValueFn, propSchema = null) {
-		this.evaluateExpression = evaluateExprFn;
-		this.evaluateExpressionValue = evaluateExprValueFn;
-		this.propSchema = propSchema;
+		this.parser = new TemplateParser();
+		this.evaluator = new TemplateEvaluator(expressionEvaluator);
+		this.templateCache = new Map();
+		this.maxCacheSize = 200;
 	}
 
 	/**
-	 * Process class:name={condition} conditionals
+	 * Process a template with data and return HTML.
 	 *
-	 * Finds all class: directives in HTML tags and evaluates their conditions.
-	 * If condition is truthy, adds the class to the element's class attribute.
+	 * @param {string} template - HTML template with Svelte-style syntax
+	 * @param {Object} data - Data context (props)
+	 * @param {Object} [options] - Optional configuration
+	 * @param {boolean} [options.cache=true] - Whether to cache the parsed AST
+	 * @returns {string} Processed HTML
 	 *
-	 * @param {string} html - HTML template with class: directives
-	 * @param {Object} contextData - Data context for evaluation
-	 * @returns {string} Processed HTML with class: directives replaced
+	 * @example
+	 * const html = processor.process(
+	 *   '<h1>{title}</h1>{#if show}<p>{text}</p>{/if}',
+	 *   { title: 'Hello', show: true, text: 'World' }
+	 * );
+	 * // → '<h1>Hello</h1><p>World</p>'
 	 */
-	processClassConditionals(html, contextData) {
-		const classCondPattern = /class:((?:[^\s=[]|\[[^\]]*\])+)=\{([^}]+)\}/g;
-
-		// Debug: ALWAYS log to verify this function is called
-		console.log('[processClassConditionals] ✨ v0.2.23 ALWAYS CALLED! HTML length:', html.length, 'contains class:?', html.includes('class:'));
-
-		// Debug: Check if HTML contains class: directives
-		if (html.includes('class:')) {
-			console.log('[processClassConditionals] Input HTML snippet:', html.substring(0, 300));
-		}
-
-		return html.replace(/<([a-z][a-z0-9-]*)([^>]*)>/gi, (match, tagName, attrs) => {
-			const conditionalClasses = [];
-			let processedAttrs = attrs;
-
-			let classMatch;
-			classCondPattern.lastIndex = 0;
-			while ((classMatch = classCondPattern.exec(attrs)) !== null) {
-				let className = classMatch[1];
-				const condition = classMatch[2];
-
-				// Normalize calc() expressions
-				className = className.replace(/calc\([^)]*\)/g, (m) => m.replace(/\s+/g, ''));
-
-				// Evaluate condition
-				let conditionResult = false;
-				try {
-					conditionResult = this.evaluateExpression(condition.trim(), contextData);
-					console.log(`[Class:] "${className}" condition="${condition}" result=${conditionResult}`);
-				} catch (err) {
-					console.warn(`[Preview] Failed to evaluate class condition "${condition}":`, err);
-				}
-
-				if (conditionResult) {
-					conditionalClasses.push(className);
-				}
-
-				// Remove the class:name={} from attributes
-				processedAttrs = processedAttrs.replace(classMatch[0], '');
-			}
-
-			// Merge conditional classes into class attribute
-			if (conditionalClasses.length > 0) {
-				const classAttrMatch = processedAttrs.match(/class="([^"]*)"/);
-				if (classAttrMatch) {
-					const existingClasses = classAttrMatch[1];
-					const mergedClasses = existingClasses + ' ' + conditionalClasses.join(' ');
-					processedAttrs = processedAttrs.replace(/class="[^"]*"/, `class="${mergedClasses.trim()}"`);
-				} else {
-					processedAttrs += ` class="${conditionalClasses.join(' ')}"`;
-				}
+	process(template, data = {}, options = {}) {
+		const useCache = options.cache !== false;
+
+		// 1. Parse template into AST (or retrieve from cache)
+		let ast;
+		if (useCache) {
+			ast = this.templateCache.get(template);
+			if (!ast) {
+				ast = this.parser.parse(template);
+				this.cacheTemplate(template, ast);
 			}
+		} else {
+			ast = this.parser.parse(template);
+		}
 
-			return `<${tagName}${processedAttrs}>`;
-		});
+		// 2. Evaluate AST with data → HTML
+		// Create a shallow copy of data so @const doesn't pollute the original
+		const ctx = { ...data };
+		return this.evaluator.evaluate(ast, ctx);
 	}
 
 	/**
-	 * Find the matching {/each} for a {#each} opening tag
-	 * Handles nested {#each} blocks correctly
+	 * Backwards-compatible methods for gradual migration.
+	 * These all delegate to process() internally.
 	 *
-	 * @param {string} html - HTML string to search
-	 * @param {number} startPos - Position after {#each ...}
-	 * @returns {number} Position of matching {/each} or -1 if not found
+	 * @deprecated Use process() instead
 	 */
-	findMatchingEachEnd(html, startPos) {
-		let depth = 1;
-		let pos = startPos;
-
-		while (depth > 0 && pos < html.length) {
-			const nextOpen = html.indexOf('{#each', pos);
-			const nextClose = html.indexOf('{/each}', pos);
 
-			if (nextClose === -1) return -1; // No closing tag found
-
-			if (nextOpen !== -1 && nextOpen < nextClose) {
-				// Found opening tag first
-				depth++;
-				pos = nextOpen + 6; // length of '{#each'
-			} else {
-				// Found closing tag first
-				depth--;
-				if (depth === 0) {
-					return nextClose;
-				}
-				pos = nextClose + 7; // length of '{/each}'
-			}
-		}
-
-		return -1;
+	/**
+	 * @deprecated Use process() instead
+	 */
+	init(evaluateExprFn, evaluateExprValueFn, propSchema = null) {
+		// No-op — expression evaluator is built in now
 	}
 
 	/**
-	 * Process {#each} loops recursively
-	 *
-	 * Syntax supported:
-	 * - {#each items as item}
-	 * - {#each items as item, index}
-	 * - {#each items as item (item.id)}
-	 * - {#each items as item, index (item.id)}
-	 * - {#each items as item}{:else}Empty state{/each}
-	 *
-	 * @param {string} html - HTML template with {#each} blocks
-	 * @param {Object} contextData - Data context for evaluation
-	 * @param {number} depth - Nesting depth (for logging)
-	 * @param {string|null} parentLoopVar - Parent loop variable name
-	 * @returns {string} Processed HTML
+	 * @deprecated Use process() instead
 	 */
-	processEachLoops(html, contextData, depth = 0, parentLoopVar = null) {
-		const indent = '  '.repeat(depth);
-		console.log(`${indent}[processEachLoops] depth=${depth}, parentLoopVar=${parentLoopVar}, contextData keys:`, Object.keys(contextData));
-
-		if (depth === 0) {
-			console.log(`${indent}[DEBUG] 🎯 processEachLoops INPUT HTML (first 600 chars):`, html.substring(0, 600));
-		}
-
-		// Find all {#each} opening tags with optional index parameter and key
-		// Matches: {#each items as item} or {#each items as item, index} or {#each items as item (item.id)}
-		const openPattern = /\{#each\s+([a-zA-Z_][a-zA-Z0-9_.]*)\s+as\s+([a-zA-Z_][a-zA-Z0-9_]*)(?:,\s*([a-zA-Z_][a-zA-Z0-9_]*))?\s*(?:\(([^)]+)\))?\}/g;
-
-		let result = html;
-		let iteration = 0;
-		const maxIterations = 20;
-
-		// Process loops from innermost to outermost by repeatedly finding and replacing
-		while (iteration < maxIterations) {
-			iteration++;
-			let foundMatch = false;
-
-			// Reset regex
-			openPattern.lastIndex = 0;
-			let match;
-
-			// Process ONLY the first match to avoid index issues
-			if ((match = openPattern.exec(html)) !== null) {
-				const arrayPath = match[1];
-				const loopVar = match[2];
-				const indexVar = match[3]; // Optional index variable
-				const keyExpr = match[4]; // Optional key expression
-				const openStart = match.index;
-				const openEnd = match.index + match[0].length;
-
-				if (indexVar) {
-					console.log(`${indent}[processEachLoops] Found index variable: ${indexVar}`);
-				}
-				if (keyExpr) {
-					console.log(`${indent}[processEachLoops] Found key expression: ${keyExpr} (used for tracking, no effect in preview mode)`);
-				}
-
-				// Find matching closing tag
-				const closeStart = this.findMatchingEachEnd(html, openEnd);
-				if (closeStart === -1) {
-					console.warn(`${indent}[processEachLoops] No matching {/each} for ${loopVar} in ${arrayPath}`);
-					break;
-				}
-
-				const closeEnd = closeStart + 7; // length of '{/each}'
-				let content = html.substring(openEnd, closeStart);
-				let elseContent = '';
-
-				console.log(`${indent}[DEBUG] Extracted content for ${loopVar} in ${arrayPath}, content snippet:`, content.substring(0, 300));
-
-				// Check for {:else} within this each block (for empty state)
-				// IMPORTANT: Only match {:else} at depth 0 (not inside nested {#if} blocks)
-				let elsePos = -1;
-				let ifDepth = 0; // Track {#if} nesting depth to avoid matching {:else} inside conditionals
-				for (let i = 0; i < content.length; i++) {
-					// Check for {#if} opening
-					if (content.substring(i, i + 4) === '{#if' && (content[i + 4] === ' ' || content[i + 4] === '}')) {
-						ifDepth++;
-						i += 3; // Skip ahead
-						continue;
-					}
-					// Check for {/if} closing
-					if (ifDepth > 0 && content.substring(i, i + 5) === '{/if}') {
-						ifDepth--;
-						i += 4; // Skip ahead
-						continue;
-					}
-					// Check for {:else} at depth 0 (belongs to the each block)
-					if (ifDepth === 0 && content.substring(i, i + 7) === '{:else}') {
-						elsePos = i;
-						break;
-					}
-				}
-
-				if (elsePos !== -1) {
-					elseContent = content.substring(elsePos + 7); // Content after {:else}
-					content = content.substring(0, elsePos); // Content before {:else}
-					console.log(`${indent}[processEachLoops] Found {:else} in each block at depth 0`);
-				}
-
-				foundMatch = true;
-				console.log(`${indent}[processEachLoops] iteration=${iteration}, FOUND: ${loopVar} in ${arrayPath}`);
-
-				// Parse array path: "items" or "item.subitems"
-				let pathParts = arrayPath.split('.');
-
-				// If we're in a nested context and the path starts with the parent loop variable,
-				// strip it since the context IS that variable
-				if (depth > 0 && parentLoopVar && pathParts.length > 1 && pathParts[0] === parentLoopVar) {
-					console.log(`${indent}[processEachLoops] Stripping parent loop var "${parentLoopVar}" from path "${arrayPath}"`);
-					pathParts = pathParts.slice(1);
-				}
-
-				let arrayValue = contextData;
-
-				// Navigate through path
-				let pathValid = true;
-				for (const part of pathParts) {
-					if (arrayValue === null || arrayValue === undefined) {
-						console.warn(`[Preview] Array path not found: ${arrayPath} (stopped at ${part})`);
-						pathValid = false;
-						break;
-					}
-					arrayValue = arrayValue[part];
-				}
-
-				let replacement = '';
-
-				// If array doesn't exist or path invalid, use else content or remove
-				if (!pathValid || !Array.isArray(arrayValue)) {
-					if (!pathValid || !Array.isArray(arrayValue)) {
-						console.warn(`[Preview] Not an array: ${arrayPath}`, arrayValue);
-					}
-					replacement = elseContent;
-				}
-				// If array is empty, use else content or remove
-				else if (arrayValue.length === 0) {
-					console.log(`${indent}[Preview] Array ${arrayPath} is empty, using else content:`, elseContent ? 'yes' : 'no');
-					replacement = elseContent;
-				}
-				// Render each item
-				else {
-					replacement = arrayValue.map((item, index) => {
-						console.log(`${indent}[Preview] Processing loop item #${index}: ${loopVar} in ${arrayPath}`, item);
-						let itemHtml = content;
-
-						// First, recursively process any nested loops with this item as context
-						// Pass loopVar as parentLoopVar so nested loops can strip it from paths
-						console.log(`${indent}[DEBUG] BEFORE nested processEachLoops - HTML snippet:`, itemHtml.substring(0, 300));
-						itemHtml = this.processEachLoops(itemHtml, item, depth + 1, loopVar);
-						console.log(`${indent}[DEBUG] AFTER nested processEachLoops - HTML snippet:`, itemHtml.substring(0, 300));
-
-						// Process class:name={loopVar.field} conditionals BEFORE replacing {loopVar.field}
-						// Use loop item as context so loop variables are available
-						const loopContext = { [loopVar]: item };
-						if (indexVar) {
-							loopContext[indexVar] = index;
-						}
-						// Add the array itself to context (use the last part of the path as name)
-						const arrayName = arrayPath.split('.').pop();
-						loopContext[arrayName] = arrayValue;
-						itemHtml = this.processClassConditionals(itemHtml, loopContext);
-
-						// First: Replace attribute expressions with quoted values (e.g., alt={item.image.alt} or alt="{item.image.alt}" → alt="value")
-						// Pattern matches both: attr={expr} and attr="{expr}"
-						itemHtml = itemHtml.replace(new RegExp(`(\\w+)=["']?\\{\\s*${loopVar}\\.([a-zA-Z0-9_.]+)\\s*\\}["']?`, 'g'), (m, attrName, path) => {
-							// Navigate through nested path (e.g., "image.src")
-							const pathParts = path.split('.');
-							let value = item;
-							for (const part of pathParts) {
-								if (value === null || value === undefined) {
-									value = '';
-									break;
-								}
-								value = value[part];
-							}
-
-							// Handle link objects (from LinkField) - extract path for preview/production
-							if (typeof value === 'object' && value !== null && value.type === 'page' && value.pageUuid) {
-								// In preview mode: use /preview/{pageUuid}
-								value = `/preview/${value.pageUuid}`;
-							}
-							// Handle image objects - extract URL
-							else if (typeof value === 'object' && value !== null && (value.src || value.filename)) {
-								value = value.src || value.filename || '';
-							}
-
-							// Ensure value is string
-							if (value === undefined || value === null) {
-								value = '';
-							} else {
-								value = String(value);
-							}
-
-							// Escape quotes
-							value = value.replace(/"/g, '&quot;');
-
-							// Always return quoted attribute
-							return `${attrName}="${value}"`;
-						});
-
-						// Second: Replace {loopVar.field} and {loopVar.nested.path} in text content
-						itemHtml = itemHtml.replace(new RegExp(`\\{\\s*${loopVar}\\.([a-zA-Z0-9_.]+)\\s*\\}`, 'g'), (m, path) => {
-							// Navigate through nested path (e.g., "image.src")
-							const pathParts = path.split('.');
-							let value = item;
-							for (const part of pathParts) {
-								if (value === null || value === undefined) {
-									return '';
-								}
-								value = value[part];
-							}
-
-							// Handle link objects (from LinkField) - extract path for preview
-							if (typeof value === 'object' && value !== null && value.type === 'page' && value.pageUuid) {
-								return `/preview/${value.pageUuid}`;
-							}
-
-							// Handle image objects - extract URL
-							if (typeof value === 'object' && value !== null && (value.src || value.filename)) {
-								return value.src || value.filename || '';
-							}
-
-							return value !== undefined ? value : '';
-						});
-
-						// Replace {@html loopVar.field} (unescaped) - keep this for compatibility
-						itemHtml = itemHtml.replace(new RegExp(`{@html\\s+${loopVar}\\.([a-zA-Z0-9_.]+)}`, 'g'), (m, path) => {
-							// Navigate through nested path (e.g., "image.src")
-							const pathParts = path.split('.');
-							let value = item;
-							for (const part of pathParts) {
-								if (value === null || value === undefined) {
-									return '';
-								}
-								value = value[part];
-							}
-							return value !== undefined ? value : '';
-						});
-
-						// Replace {indexVar} with the current loop index (if indexVar is defined) - single braces
-						if (indexVar) {
-							itemHtml = itemHtml.replace(new RegExp(`{\\s*${indexVar}\\s*}`, 'g'), () => {
-								return String(index);
-							});
-						}
-
-						// Replace {loopVar} with the item value (for primitive arrays like ['A', 'B']) - single braces
-						itemHtml = itemHtml.replace(new RegExp(`{\\s*${loopVar}\\s*}`, 'g'), () => {
-							// If item is object, convert to string representation
-							if (typeof item === 'object' && item !== null) {
-								return JSON.stringify(item);
-							}
-							return String(item !== undefined ? item : '');
-						});
-
-						// Process {#if} conditionals within loop (supports {:else if})
-						// Merge loop variable with parent context for nested conditionals
-						const evalContext = { ...contextData, [loopVar]: item };
-						if (indexVar) {
-							evalContext[indexVar] = index;
-						}
-						// Add the array itself to context
-						evalContext[arrayName] = arrayValue;
-						itemHtml = this.processIfConditionals(itemHtml, evalContext, depth + 2);
-
-						// Process complex expressions within loop (e.g., {item.image.src ? "Ja" : "Nein"})
-						// This handles expressions that couldn't be processed by the simple regex replacements above
-						itemHtml = itemHtml.replace(/\{(?![#/@:])[^}]+\}/g, (match) => {
-							const expression = match.slice(1, -1).trim();
-
-							// Skip JSON-like patterns
-							if (/^["']/.test(expression) && expression.includes(':')) {
-								return match;
-							}
-
-							// Skip simple variable references already handled above
-							if (/^[a-zA-Z_][a-zA-Z0-9_]*(\.[a-zA-Z0-9_]+)*$/.test(expression)) {
-								return match; // Already processed
-							}
-
-							// Evaluate complex expressions with loop context
-							try {
-								const result = this.evaluateExpressionValue(expression, evalContext);
-								if (result === undefined || result === null) {
-									return '';
-								}
-								// Handle link objects (from LinkField) - extract path for preview
-								if (typeof result === 'object' && result !== null && result.type === 'page' && result.pageUuid) {
-									return `/preview/${result.pageUuid}`;
-								}
-								// Handle image objects
-								if (typeof result === 'object' && result !== null && (result.src || result.filename)) {
-									return result.src || result.filename || '';
-								}
-								return String(result);
-							} catch (err) {
-								console.warn(`[Loop] Failed to evaluate expression "${expression}":`, err.message);
-								return match; // Keep as-is on error
-							}
-						});
-
-						return itemHtml;
-					}).join('');
-				}
-
-				// Replace in html
-				html = html.substring(0, openStart) + replacement + html.substring(closeEnd);
-			}
-
-			if (!foundMatch) break;
-		}
-
-		if (iteration >= maxIterations) {
-			console.warn(`${indent}[processEachLoops] Max iterations reached - possible infinite loop`);
-		}
-
-		return html;
+	processEachLoops(html, contextData) {
+		return this.process(html, contextData);
 	}
 
 	/**
-	 * Process {#if} conditionals recursively
-	 *
-	 * Syntax supported:
-	 * - {#if condition}...{/if}
-	 * - {#if condition}...{:else}...{/if}
-	 * - {#if condition}...{:else if condition2}...{:else}...{/if}
-	 *
-	 * @param {string} html - HTML template with {#if} blocks
-	 * @param {Object} contextData - Data context for evaluation
-	 * @param {number} depth - Nesting depth (for logging)
-	 * @returns {string} Processed HTML
+	 * @deprecated Use process() instead
 	 */
-	processIfConditionals(html, contextData, depth = 0) {
-		const indent = '  '.repeat(depth);
-		if (depth === 0) {
-			console.log('[processIfConditionals] ✅ NEW VERSION v3.0 - {:else if} support');
-		}
-		let result = html;
-		let iteration = 0;
-		const maxIterations = 50;
-
-		// Process from innermost to outermost by repeatedly finding and replacing
-		while (iteration < maxIterations) {
-			iteration++;
-			let foundMatch = false;
-
-			// Find {#if} opening tag
-			const openPattern = /\{#if\s+([^}]+)\}/g;
-			let match;
-
-			// Find the first {#if}
-			if ((match = openPattern.exec(result)) !== null) {
-				const condition = match[1];
-				const openStart = match.index;
-				const openEnd = match.index + match[0].length;
-
-				// Find matching closing tag and all {:else if} / {:else} branches
-				let depth = 1;
-				let pos = openEnd;
-				let branches = []; // Array of {type: 'if'|'else if'|'else', condition: string, start: number, end: number}
-				let closeStart = -1;
-
-				console.log(`${indent}[DEBUG] Looking for matching {/if} for condition: ${condition}, starting at pos ${openEnd}, html length: ${result.length}`);
-
-				// Add initial {#if} branch
-				branches.push({ type: 'if', condition: condition, start: openEnd, end: -1 });
-
-				while (pos < result.length && depth > 0) {
-					// Check for nested {#if} - must have space or } after to avoid false matches
-					if (result.substring(pos, pos + 4) === '{#if' && (result[pos + 4] === ' ' || result[pos + 4] === '}')) {
-						depth++;
-						console.log(`${indent}[DEBUG] Found nested {#if} at pos ${pos}, depth now: ${depth}`);
-						console.log(`${indent}[DEBUG] Context:`, JSON.stringify(result.substring(pos, pos + 20)));
-						pos += 4;
-						continue;
-					}
-
-					// Check for {:else if condition} at current depth
-					if (depth === 1 && result.substring(pos, pos + 9) === '{:else if') {
-						// Find the closing } to get the full condition
-						const condEnd = result.indexOf('}', pos + 9);
-						if (condEnd !== -1) {
-							const elseIfCondition = result.substring(pos + 10, condEnd).trim();
-							// Close previous branch
-							branches[branches.length - 1].end = pos;
-							// Add new else if branch
-							branches.push({ type: 'else if', condition: elseIfCondition, start: condEnd + 1, end: -1 });
-							console.log(`${indent}[DEBUG] Found {:else if ${elseIfCondition}} at pos ${pos}`);
-							pos = condEnd + 1;
-							continue;
-						}
-					}
-
-					// Check for {:else} at current depth
-					if (depth === 1 && result.substring(pos, pos + 7) === '{:else}') {
-						// Close previous branch
-						branches[branches.length - 1].end = pos;
-						// Add else branch
-						branches.push({ type: 'else', condition: null, start: pos + 7, end: -1 });
-						console.log(`${indent}[DEBUG] Found {:else} at pos ${pos}`);
-						pos += 7;
-						continue;
-					}
-
-					// Check for {/if} - CORRECTED: {/if} is 5 chars, not 6!
-					const substr = result.substring(pos, pos + 5);
-					if (substr === '{/if}') {
-						depth--;
-						console.log(`${indent}[DEBUG] Found {/if} at pos ${pos}, depth now: ${depth}`);
-						if (depth === 0) {
-							closeStart = pos;
-							// Close last branch
-							branches[branches.length - 1].end = pos;
-							break;
-						}
-						pos += 5;
-						continue;
-					}
-
-					// Debug: Log when we see something that looks like {/
-					if (result[pos] === '{' && result[pos + 1] === '/') {
-						console.log(`${indent}[DEBUG] At pos ${pos}, found '{/' but full check failed. Next 10 chars:`, JSON.stringify(result.substring(pos, pos + 10)));
-					}
-					pos++;
-				}
-
-				console.log(`${indent}[DEBUG] Scan complete. closeStart: ${closeStart}, final depth: ${depth}, branches:`, branches.length);
-
-				if (closeStart === -1) {
-					console.warn(`${indent}[processIfConditionals] No matching {/if} for condition: ${condition}`);
-					console.log(`${indent}[DEBUG] HTML snippet around openEnd:`, result.substring(openEnd, Math.min(openEnd + 200, result.length)));
-					break;
-				}
-
-				foundMatch = true;
-				const closeEnd = closeStart + 5; // length of '{/if}' - CORRECTED: 5 chars, not 6!
-
-				// Process each branch recursively and evaluate conditions
-				let replacement = '';
-				for (const branch of branches) {
-					let branchContent = result.substring(branch.start, branch.end);
-
-					// Recursively process nested ifs
-					branchContent = this.processIfConditionals(branchContent, contextData, depth + 1);
-
-					// Evaluate condition
-					if (branch.type === 'if' || branch.type === 'else if') {
-						const shouldShow = this.evaluateExpression(branch.condition.trim(), contextData);
-						console.log(`${indent}[If] ${branch.type}="${branch.condition}" result=${shouldShow}`);
+	processIfConditionals(html, contextData) {
+		return this.process(html, contextData);
+	}
 
-						if (shouldShow) {
-							replacement = branchContent;
-							break; // First matching condition wins
-						}
-					} else if (branch.type === 'else') {
-						// Else branch - use if no previous condition matched
-						console.log(`${indent}[If] Using else branch`);
-						replacement = branchContent;
-						break;
-					}
-				}
+	/**
+	 * @deprecated Use process() instead
+	 */
+	processClassConditionals(html, contextData) {
+		return this.process(html, contextData);
+	}
 
-				// Replace in result
-				result = result.substring(0, openStart) + replacement + result.substring(closeEnd);
-			}
+	/**
+	 * Clear the template AST cache
+	 */
+	clearCache() {
+		this.templateCache.clear();
+		expressionEvaluator.clearCache();
+	}
 
-			if (!foundMatch) break;
-		}
+	// ========================================
+	// Internal
+	// ========================================
 
-		if (iteration >= maxIterations) {
-			console.warn(`${indent}[processIfConditionals] Max iterations reached - possible infinite loop`);
+	cacheTemplate(key, ast) {
+		if (this.templateCache.size >= this.maxCacheSize) {
+			// Remove oldest entry
+			const firstKey = this.templateCache.keys().next().value;
+			this.templateCache.delete(firstKey);
 		}
-
-		return result;
+		this.templateCache.set(key, ast);
 	}
 }
 
-// Universal export - works in both Browser and Node.js
-// For Browser: Use as ES6 module or create global via script
-// For Node.js: Use as ES6 module import
-export default TemplateProcessor;
+// Singleton
+const templateProcessor = new TemplateProcessor();
 
-// Also export singleton instance for convenience
-export const templateProcessor = new TemplateProcessor();
+export default TemplateProcessor;
+export { templateProcessor, TemplateProcessor };