@webmate-studio/builder 0.2.112 → 0.2.113

package/src/template-parser.js

@@ -0,0 +1,597 @@
+/**
+ * Template Parser — Parses Svelte-style template syntax into an AST.
+ *
+ * Supported syntax:
+ * - {expression}                    → ExpressionNode
+ * - {#if cond}...{:else if}...{:else}...{/if}  → IfBlock
+ * - {#each expr as item, index (key)}...{:else}...{/each}  → EachBlock
+ * - {@html expr}                    → HtmlExpression
+ * - {@const name = expr}            → ConstTag
+ * - {@debug var1, var2}             → DebugTag
+ * - class:name={condition}          → ClassDirective (inside tags)
+ * - attr={expression}               → DynamicAttribute (inside tags)
+ * - Everything else                 → Text
+ *
+ * The parser does NOT fully parse HTML — it only recognizes opening tags
+ * enough to extract class: directives and dynamic attributes.
+ *
+ * @module template-parser
+ */
+
+/**
+ * @typedef {Object} ASTNode
+ * @property {string} type
+ */
+
+class TemplateParser {
+	/**
+	 * Parse a template string into an AST
+	 * @param {string} template
+	 * @returns {ASTNode} Root Fragment node
+	 */
+	parse(template) {
+		this.input = template;
+		this.pos = 0;
+		this.length = template.length;
+
+		const children = this.parseFragment([]);
+		return { type: 'Fragment', children };
+	}
+
+	/**
+	 * Parse a sequence of nodes until we hit a stop token.
+	 * @param {string[]} stopTokens - e.g. ['{/if}', '{:else}', '{:else if']
+	 * @returns {ASTNode[]}
+	 */
+	parseFragment(stopTokens) {
+		const children = [];
+
+		while (this.pos < this.length) {
+			// Check for stop tokens
+			if (stopTokens.length > 0) {
+				for (const stop of stopTokens) {
+					if (this.lookingAt(stop)) {
+						return children;
+					}
+				}
+			}
+
+			const node = this.parseNext();
+			if (node) {
+				// Merge adjacent text nodes
+				if (node.type === 'Text' && children.length > 0 && children[children.length - 1].type === 'Text') {
+					children[children.length - 1].value += node.value;
+				} else {
+					children.push(node);
+				}
+			}
+		}
+
+		return children;
+	}
+
+	/**
+	 * Parse the next node at current position
+	 * @returns {ASTNode|null}
+	 */
+	parseNext() {
+		if (this.pos >= this.length) return null;
+
+		const ch = this.input[this.pos];
+
+		// Template syntax: { ... }
+		if (ch === '{') {
+			const next = this.input[this.pos + 1];
+
+			// Block opening: {#if ...} or {#each ...}
+			if (next === '#') {
+				if (this.lookingAt('{#if ') || this.lookingAt('{#if}')) {
+					return this.parseIfBlock();
+				}
+				if (this.lookingAt('{#each ')) {
+					return this.parseEachBlock();
+				}
+				// Unknown block — treat as text
+				return this.parseText();
+			}
+
+			// Special tags: {@html}, {@const}, {@debug}
+			if (next === '@') {
+				if (this.lookingAt('{@html ')) {
+					return this.parseHtmlTag();
+				}
+				if (this.lookingAt('{@const ')) {
+					return this.parseConstTag();
+				}
+				if (this.lookingAt('{@debug ')) {
+					return this.parseDebugTag();
+				}
+				return this.parseText();
+			}
+
+			// Closing/continuation tags — should be handled by parent
+			if (next === '/' || next === ':') {
+				return null;
+			}
+
+			// Expression: {expr}
+			return this.parseExpression();
+		}
+
+		// HTML tag: < ... >
+		if (ch === '<') {
+			const next = this.input[this.pos + 1];
+			// Only parse opening tags (not closing tags or comments)
+			if (next && /[a-zA-Z]/.test(next)) {
+				return this.parseTag();
+			}
+		}
+
+		// Plain text
+		return this.parseText();
+	}
+
+	// ========================================
+	// {#if} Block
+	// ========================================
+
+	parseIfBlock() {
+		// {#if condition}
+		this.pos += 4; // skip '{#if'
+		const condition = this.readUntilCloseBrace();
+
+		// Parse consequent (the "then" branch)
+		const consequent = this.parseFragment(['{:else if ', '{:else if\t', '{:else if\n', '{:else}', '{/if}']);
+
+		// Collect else-if branches
+		const elseIfBranches = [];
+		while (this.lookingAt('{:else if ') || this.lookingAt('{:else if\t') || this.lookingAt('{:else if\n')) {
+			this.pos += 9; // skip '{:else if'
+			const elseIfCondition = this.readUntilCloseBrace();
+			const elseIfBody = this.parseFragment(['{:else if ', '{:else if\t', '{:else if\n', '{:else}', '{/if}']);
+			elseIfBranches.push({
+				condition: elseIfCondition,
+				body: { type: 'Fragment', children: elseIfBody },
+			});
+		}
+
+		// Optional else branch
+		let alternate = null;
+		if (this.lookingAt('{:else}')) {
+			this.pos += 7; // skip '{:else}'
+			const elseChildren = this.parseFragment(['{/if}']);
+			alternate = { type: 'Fragment', children: elseChildren };
+		}
+
+		// Consume {/if}
+		if (this.lookingAt('{/if}')) {
+			this.pos += 5;
+		}
+
+		return {
+			type: 'IfBlock',
+			condition,
+			consequent: { type: 'Fragment', children: consequent },
+			elseIfBranches,
+			alternate,
+		};
+	}
+
+	// ========================================
+	// {#each} Block
+	// ========================================
+
+	parseEachBlock() {
+		// {#each expression as item, index (key)}
+		this.pos += 7; // skip '{#each '
+
+		// Read everything until closing }
+		const fullExpr = this.readUntilCloseBrace();
+
+		// Parse: expression as item, index (key)
+		const asIndex = fullExpr.indexOf(' as ');
+		if (asIndex === -1) {
+			// Malformed each — treat as text
+			return { type: 'Text', value: `{#each ${fullExpr}}` };
+		}
+
+		const iterableExpr = fullExpr.substring(0, asIndex).trim();
+		let rest = fullExpr.substring(asIndex + 4).trim();
+
+		// Extract optional (key) at the end
+		let keyExpr = null;
+		const keyMatch = rest.match(/\(([^)]+)\)\s*$/);
+		if (keyMatch) {
+			keyExpr = keyMatch[1].trim();
+			rest = rest.substring(0, keyMatch.index).trim();
+		}
+
+		// Extract item and optional index: "item" or "item, index"
+		const parts = rest.split(',').map(s => s.trim());
+		const itemVar = parts[0];
+		const indexVar = parts[1] || null;
+
+		// Parse body
+		const body = this.parseFragment(['{:else}', '{/each}']);
+
+		// Optional else
+		let elseBlock = null;
+		if (this.lookingAt('{:else}')) {
+			this.pos += 7;
+			const elseChildren = this.parseFragment(['{/each}']);
+			elseBlock = { type: 'Fragment', children: elseChildren };
+		}
+
+		// Consume {/each}
+		if (this.lookingAt('{/each}')) {
+			this.pos += 7;
+		}
+
+		return {
+			type: 'EachBlock',
+			expression: iterableExpr,
+			itemVar,
+			indexVar,
+			keyExpr,
+			body: { type: 'Fragment', children: body },
+			else: elseBlock,
+		};
+	}
+
+	// ========================================
+	// {@html expression}
+	// ========================================
+
+	parseHtmlTag() {
+		this.pos += 7; // skip '{@html '
+		const expression = this.readUntilCloseBrace();
+		return { type: 'HtmlExpression', expression };
+	}
+
+	// ========================================
+	// {@const name = expression}
+	// ========================================
+
+	parseConstTag() {
+		this.pos += 8; // skip '{@const '
+		const content = this.readUntilCloseBrace();
+		const eqIndex = content.indexOf('=');
+		if (eqIndex === -1) {
+			return { type: 'Text', value: '' };
+		}
+		const name = content.substring(0, eqIndex).trim();
+		const expression = content.substring(eqIndex + 1).trim();
+		return { type: 'ConstTag', name, expression };
+	}
+
+	// ========================================
+	// {@debug var1, var2}
+	// ========================================
+
+	parseDebugTag() {
+		this.pos += 8; // skip '{@debug '
+		const content = this.readUntilCloseBrace();
+		const variables = content.split(',').map(s => s.trim()).filter(Boolean);
+		return { type: 'DebugTag', variables };
+	}
+
+	// ========================================
+	// {expression} — value interpolation
+	// ========================================
+
+	parseExpression() {
+		this.pos++; // skip '{'
+		const expression = this.readUntilCloseBraceRaw();
+		return { type: 'Expression', expression };
+	}
+
+	// ========================================
+	// HTML Tag parsing (for class: and attr={})
+	// ========================================
+
+	parseTag() {
+		const start = this.pos;
+		this.pos++; // skip '<'
+
+		// Read tag name
+		const tagName = this.readWhile(/[a-zA-Z0-9-]/);
+		if (!tagName) {
+			// Not a valid tag, treat as text
+			this.pos = start;
+			return this.parseTextChar();
+		}
+
+		// Parse attributes
+		const attributes = [];
+		const classDirectives = [];
+
+		this.skipWhitespace();
+
+		while (this.pos < this.length && this.input[this.pos] !== '>' && !this.lookingAt('/>')) {
+			this.skipWhitespace();
+			if (this.pos >= this.length || this.input[this.pos] === '>' || this.lookingAt('/>')) break;
+
+			// class:name={condition}
+			if (this.lookingAt('class:')) {
+				this.pos += 6; // skip 'class:'
+				// Read class name (can contain brackets for Tailwind: e.g. lg:bg-[#fff])
+				let className = '';
+				while (this.pos < this.length) {
+					const c = this.input[this.pos];
+					if (c === '=') break;
+					if (c === ' ' || c === '>' || c === '/') break;
+					if (c === '[') {
+						// Bracket notation (Tailwind arbitrary values)
+						className += c;
+						this.pos++;
+						while (this.pos < this.length && this.input[this.pos] !== ']') {
+							className += this.input[this.pos];
+							this.pos++;
+						}
+						if (this.pos < this.length) {
+							className += this.input[this.pos]; // closing ]
+							this.pos++;
+						}
+						continue;
+					}
+					className += c;
+					this.pos++;
+				}
+
+				if (this.input[this.pos] === '=' && this.input[this.pos + 1] === '{') {
+					this.pos += 2; // skip ={
+					const condition = this.readUntilCloseBraceRaw();
+					classDirectives.push({ name: className, condition });
+				}
+				continue;
+			}
+
+			// Regular attribute
+			const attrName = this.readWhile(/[a-zA-Z0-9_:@.-]/);
+			if (!attrName) {
+				// Skip unknown character
+				this.pos++;
+				continue;
+			}
+
+			this.skipWhitespace();
+
+			if (this.input[this.pos] === '=') {
+				this.pos++; // skip '='
+				this.skipWhitespace();
+
+				if (this.input[this.pos] === '{') {
+					// Dynamic attribute: attr={expression}
+					this.pos++; // skip '{'
+					const expression = this.readUntilCloseBraceRaw();
+					attributes.push({ type: 'DynamicAttribute', name: attrName, expression });
+				} else if (this.input[this.pos] === '"') {
+					// Quoted attribute: attr="value" (may contain {expr} inside)
+					this.pos++; // skip opening "
+					const value = this.readQuotedAttributeValue('"');
+					attributes.push(value.dynamic
+						? { type: 'DynamicQuotedAttribute', name: attrName, parts: value.parts }
+						: { type: 'StaticAttribute', name: attrName, value: value.text }
+					);
+				} else if (this.input[this.pos] === "'") {
+					// Single-quoted attribute
+					this.pos++; // skip opening '
+					const value = this.readQuotedAttributeValue("'");
+					attributes.push(value.dynamic
+						? { type: 'DynamicQuotedAttribute', name: attrName, parts: value.parts }
+						: { type: 'StaticAttribute', name: attrName, value: value.text }
+					);
+				} else {
+					// Unquoted attribute value
+					const value = this.readWhile(/[^\s>]/);
+					attributes.push({ type: 'StaticAttribute', name: attrName, value });
+				}
+			} else {
+				// Boolean attribute: disabled, checked, etc.
+				attributes.push({ type: 'StaticAttribute', name: attrName, value: true });
+			}
+		}
+
+		// Consume closing > or />
+		let selfClosing = false;
+		if (this.lookingAt('/>')) {
+			selfClosing = true;
+			this.pos += 2;
+		} else if (this.input[this.pos] === '>') {
+			this.pos++;
+		}
+
+		return {
+			type: 'Tag',
+			tagName,
+			attributes,
+			classDirectives,
+			selfClosing,
+		};
+	}
+
+	/**
+	 * Read a quoted attribute value, detecting {expression} inside quotes.
+	 * e.g. "Hello {name}, welcome" → parts with text and expressions
+	 */
+	readQuotedAttributeValue(quote) {
+		const parts = [];
+		let text = '';
+		let hasDynamic = false;
+
+		while (this.pos < this.length && this.input[this.pos] !== quote) {
+			if (this.input[this.pos] === '{' && this.input[this.pos + 1] !== '#' &&
+				this.input[this.pos + 1] !== '/' && this.input[this.pos + 1] !== ':' &&
+				this.input[this.pos + 1] !== '@') {
+				// Expression inside quoted attribute
+				if (text) {
+					parts.push({ type: 'text', value: text });
+					text = '';
+				}
+				this.pos++; // skip {
+				const expr = this.readUntilCloseBraceRaw();
+				parts.push({ type: 'expr', value: expr });
+				hasDynamic = true;
+			} else {
+				text += this.input[this.pos];
+				this.pos++;
+			}
+		}
+
+		this.pos++; // skip closing quote
+
+		if (text) {
+			parts.push({ type: 'text', value: text });
+		}
+
+		if (!hasDynamic) {
+			return { dynamic: false, text: parts.map(p => p.value).join('') };
+		}
+
+		return { dynamic: true, parts };
+	}
+
+	// ========================================
+	// Text
+	// ========================================
+
+	parseText() {
+		let text = '';
+		while (this.pos < this.length) {
+			const ch = this.input[this.pos];
+
+			// Stop at template syntax
+			if (ch === '{') break;
+
+			// Stop at HTML tags that we want to parse for attributes
+			if (ch === '<' && this.pos + 1 < this.length) {
+				const next = this.input[this.pos + 1];
+				if (/[a-zA-Z]/.test(next)) break;
+			}
+
+			text += ch;
+			this.pos++;
+		}
+
+		if (!text) return null;
+		return { type: 'Text', value: text };
+	}
+
+	parseTextChar() {
+		const ch = this.input[this.pos];
+		this.pos++;
+		return { type: 'Text', value: ch };
+	}
+
+	// ========================================
+	// Utilities
+	// ========================================
+
+	lookingAt(str) {
+		return this.input.substring(this.pos, this.pos + str.length) === str;
+	}
+
+	/**
+	 * Read until matching } (handles nested {} in expressions)
+	 * Skips the closing }
+	 * Trims the result
+	 */
+	readUntilCloseBrace() {
+		return this.readUntilCloseBraceRaw().trim();
+	}
+
+	/**
+	 * Read until matching } (handles nested {}, strings, template literals)
+	 * Skips the closing }
+	 */
+	readUntilCloseBraceRaw() {
+		let depth = 1;
+		let result = '';
+
+		while (this.pos < this.length && depth > 0) {
+			const ch = this.input[this.pos];
+
+			// Handle strings (don't count {} inside strings)
+			if (ch === '"' || ch === "'" || ch === '`') {
+				result += ch;
+				this.pos++;
+				// Read until matching quote
+				while (this.pos < this.length && this.input[this.pos] !== ch) {
+					if (this.input[this.pos] === '\\') {
+						result += this.input[this.pos];
+						this.pos++;
+						if (this.pos < this.length) {
+							result += this.input[this.pos];
+							this.pos++;
+						}
+					} else {
+						// Handle ${...} in template literals
+						if (ch === '`' && this.input[this.pos] === '$' && this.input[this.pos + 1] === '{') {
+							result += '${';
+							this.pos += 2;
+							// Read the inner expression
+							let innerDepth = 1;
+							while (this.pos < this.length && innerDepth > 0) {
+								if (this.input[this.pos] === '{') innerDepth++;
+								else if (this.input[this.pos] === '}') innerDepth--;
+								if (innerDepth > 0) {
+									result += this.input[this.pos];
+									this.pos++;
+								}
+							}
+							if (this.pos < this.length) {
+								result += '}';
+								this.pos++; // skip closing }
+							}
+						} else {
+							result += this.input[this.pos];
+							this.pos++;
+						}
+					}
+				}
+				if (this.pos < this.length) {
+					result += this.input[this.pos]; // closing quote
+					this.pos++;
+				}
+				continue;
+			}
+
+			if (ch === '{') {
+				depth++;
+				result += ch;
+				this.pos++;
+			} else if (ch === '}') {
+				depth--;
+				if (depth === 0) {
+					this.pos++; // skip closing }
+					return result;
+				}
+				result += ch;
+				this.pos++;
+			} else {
+				result += ch;
+				this.pos++;
+			}
+		}
+
+		return result;
+	}
+
+	readWhile(regex) {
+		let result = '';
+		while (this.pos < this.length && regex.test(this.input[this.pos])) {
+			result += this.input[this.pos];
+			this.pos++;
+		}
+		return result;
+	}
+
+	skipWhitespace() {
+		while (this.pos < this.length && /\s/.test(this.input[this.pos])) {
+			this.pos++;
+		}
+	}
+}
+
+export { TemplateParser };
+export default TemplateParser;