@webmate-studio/builder 0.2.62 → 0.2.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.62",
+  "version": "0.2.63",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [

package/src/index.js

@@ -4,6 +4,7 @@ import { cleanComponentHTML } from './html-cleaner.js';
 import { bundleIsland, bundleComponentIslands } from './bundler.js';
 import { deduplicateCSS } from './css-deduplicator.js';
 import { markdownToHtml, processMarkdownProps } from './markdown.js';
+import TemplateProcessor, { templateProcessor } from './template-processor.js';
 import { readFileSync } from 'fs';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
@@ -16,4 +17,4 @@ function getMotionRuntime() {
 	return readFileSync(join(__dirname, '../dist/motion-runtime.min.js'), 'utf-8');
 }
 
-export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, bundleIsland, bundleComponentIslands, deduplicateCSS, markdownToHtml, processMarkdownProps, getMotionRuntime };
+export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, bundleIsland, bundleComponentIslands, deduplicateCSS, markdownToHtml, processMarkdownProps, getMotionRuntime, TemplateProcessor, templateProcessor };

package/src/template-processor.js

@@ -0,0 +1,608 @@
+/**
+ * Template Processor (Universal Version)
+ *
+ * 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)
+ *
+ * This is the canonical version used by:
+ * - Browser preview (via script tag)
+ * - Build service (Node.js)
+ * - CMS rendering engine
+ *
+ * @module template-processor
+ */
+
+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;
+	}
+
+	/**
+	 * Process class:name={condition} conditionals
+	 *
+	 * 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} html - HTML template with class: directives
+	 * @param {Object} contextData - Data context for evaluation
+	 * @returns {string} Processed HTML with class: directives replaced
+	 */
+	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(' ')}"`;
+				}
+			}
+
+			return `<${tagName}${processedAttrs}>`;
+		});
+	}
+
+	/**
+	 * Find the matching {/each} for a {#each} opening tag
+	 * Handles nested {#each} blocks correctly
+	 *
+	 * @param {string} html - HTML string to search
+	 * @param {number} startPos - Position after {#each ...}
+	 * @returns {number} Position of matching {/each} or -1 if not found
+	 */
+	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;
+	}
+
+	/**
+	 * 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
+	 */
+	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} → alt="value")
+						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 image objects - extract URL
+							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 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 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;
+	}
+
+	/**
+	 * 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
+	 */
+	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}`);
+
+						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;
+					}
+				}
+
+				// Replace in result
+				result = result.substring(0, openStart) + replacement + result.substring(closeEnd);
+			}
+
+			if (!foundMatch) break;
+		}
+
+		if (iteration >= maxIterations) {
+			console.warn(`${indent}[processIfConditionals] Max iterations reached - possible infinite loop`);
+		}
+
+		return result;
+	}
+}
+
+// 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;
+
+// Also export singleton instance for convenience
+export const templateProcessor = new TemplateProcessor();