@zenithbuild/core 0.4.6 → 0.5.0-beta.2.1

package/compiler/transform/componentResolver.ts

@@ -1,289 +0,0 @@
-/**
- * Component Resolution
- * 
- * Resolves component nodes in IR by inlining component templates with slot substitution.
- * Uses compound component pattern for named slots (Card.Header, Card.Footer).
- */
-
-import type { TemplateNode, ComponentNode, ElementNode, ZenIR, LoopContext } from '../ir/types'
-import type { ComponentMetadata } from '../discovery/componentDiscovery'
-import { extractSlotsFromChildren, resolveSlots } from './slotResolver'
-import { throwOrphanCompoundError, throwUnresolvedComponentError } from '../validate/invariants'
-
-// Track which components have been used (for style collection)
-const usedComponents = new Set<string>()
-
-/**
- * Resolve all component nodes in a template IR
- * 
- * Recursively replaces ComponentNode instances with their resolved templates
- * Also collects styles from used components and adds them to the IR
- */
-export function resolveComponentsInIR(
-    ir: ZenIR,
-    components: Map<string, ComponentMetadata>
-): ZenIR {
-    // Clear used components tracking for this compilation
-    usedComponents.clear()
-
-    // Resolve components in template nodes
-    const resolvedNodes = resolveComponentsInNodes(ir.template.nodes, components)
-
-    // Collect styles from all used components
-    const componentStyles = Array.from(usedComponents)
-        .map(name => components.get(name))
-        .filter((meta): meta is ComponentMetadata => meta !== undefined && meta.styles.length > 0)
-        .flatMap(meta => meta.styles.map(raw => ({ raw })))
-
-    return {
-        ...ir,
-        template: {
-            ...ir.template,
-            nodes: resolvedNodes
-        },
-        // Merge component styles with existing page styles
-        styles: [...ir.styles, ...componentStyles]
-    }
-}
-
-/**
- * Resolve component nodes in a list of template nodes
- */
-function resolveComponentsInNodes(
-    nodes: TemplateNode[],
-    components: Map<string, ComponentMetadata>,
-    depth: number = 0
-): TemplateNode[] {
-    const resolved: TemplateNode[] = []
-
-    for (const node of nodes) {
-        const resolvedNode = resolveComponentNode(node, components, depth)
-
-        if (Array.isArray(resolvedNode)) {
-            resolved.push(...resolvedNode)
-        } else {
-            resolved.push(resolvedNode)
-        }
-    }
-
-    return resolved
-}
-
-/**
- * Resolve a single component node
- * 
- * If the node is a component, look up its definition and inline it with slot resolution.
- * Otherwise, recursively process children.
- */
-function resolveComponentNode(
-    node: TemplateNode,
-    components: Map<string, ComponentMetadata>,
-    depth: number = 0
-): TemplateNode | TemplateNode[] {
-    // Handle component nodes
-    if (node.type === 'component') {
-        return resolveComponent(node, components, depth)
-    }
-
-    // Handle element nodes - recursively resolve children
-    if (node.type === 'element') {
-        const resolvedChildren = resolveComponentsInNodes(node.children, components, depth + 1)
-
-        return {
-            ...node,
-            children: resolvedChildren
-        }
-    }
-
-    // Text and expression nodes pass through unchanged
-    return node
-}
-
-/**
- * Get base component name from compound name
- * 
- * "Card.Header" -> "Card"
- * "Button" -> "Button"
- */
-function getBaseComponentName(name: string): string {
-    const dotIndex = name.indexOf('.')
-    return dotIndex > 0 ? name.slice(0, dotIndex) : name
-}
-
-/**
- * Check if a component name is a compound slot marker
- * 
- * "Card.Header" -> true (if Card exists)
- * "Card" -> false
- * "Button" -> false
- */
-function isCompoundSlotMarker(name: string, components: Map<string, ComponentMetadata>): boolean {
-    const dotIndex = name.indexOf('.')
-    if (dotIndex <= 0) return false
-
-    const baseName = name.slice(0, dotIndex)
-    return components.has(baseName)
-}
-
-/**
- * Resolve a component by inlining its template with slot substitution
- */
-function resolveComponent(
-    componentNode: ComponentNode,
-    components: Map<string, ComponentMetadata>,
-    depth: number = 0
-): TemplateNode | TemplateNode[] {
-    const componentName = componentNode.name
-
-    // Check if this is a compound slot marker (Card.Header, Card.Footer)
-    // These are handled by the parent component, not resolved directly
-    // INV007: Orphan compound slot markers are a compile-time error
-    if (isCompoundSlotMarker(componentName, components)) {
-        throwOrphanCompoundError(
-            componentName,
-            getBaseComponentName(componentName),
-            'component', // filePath not available here, will be caught by caller
-            componentNode.location.line,
-            componentNode.location.column
-        )
-    }
-
-    // Look up component metadata
-    const componentMeta = components.get(componentName)
-
-    // INV003: Unresolved components are a compile-time error
-    if (!componentMeta) {
-        throwUnresolvedComponentError(
-            componentName,
-            'component', // filePath not available here, will be caught by caller
-            componentNode.location.line,
-            componentNode.location.column
-        )
-    }
-
-    // Track this component as used (for style collection)
-    usedComponents.add(componentName)
-
-    // Extract slots from component children FIRST (before resolving nested components)
-    // This preserves compound component structure (Card.Header, Card.Footer)
-    // IMPORTANT: Pass parent's loopContext to preserve reactive scope
-    // Components are purely structural - they don't create new reactive boundaries
-    const slots = extractSlotsFromChildren(
-        componentName,
-        componentNode.children,
-        componentNode.loopContext  // Preserve parent's reactive scope
-    )
-
-    // Now resolve nested components within the extracted slot content
-    const resolvedSlots = {
-        default: resolveComponentsInNodes(slots.default, components, depth + 1),
-        named: new Map<string, TemplateNode[]>(),
-        parentLoopContext: slots.parentLoopContext  // Carry through the parent scope
-    }
-
-    for (const [slotName, slotContent] of slots.named) {
-        resolvedSlots.named.set(slotName, resolveComponentsInNodes(slotContent, components, depth + 1))
-    }
-
-    // Deep clone the component template nodes to avoid mutation
-    const templateNodes = JSON.parse(JSON.stringify(componentMeta.nodes)) as TemplateNode[]
-
-    // Resolve slots in component template
-    const resolvedTemplate = resolveSlots(templateNodes, resolvedSlots)
-
-    // Forward attributes from component usage to the root element
-    // This ensures onclick, class, and other attributes are preserved
-    const forwardedTemplate = forwardAttributesToRoot(
-        resolvedTemplate,
-        componentNode.attributes,
-        componentNode.loopContext
-    )
-
-    // Recursively resolve any nested components in the resolved template
-    const fullyResolved = resolveComponentsInNodes(forwardedTemplate, components, depth + 1)
-
-    return fullyResolved
-}
-
-/**
- * Forward attributes from component usage to the template's root element
- * 
- * When using <Button onclick="increment">Text</Button>,
- * the onclick should be applied to the <button> element in Button.zen template.
- */
-function forwardAttributesToRoot(
-    nodes: TemplateNode[],
-    attributes: ComponentNode['attributes'],
-    loopContext?: LoopContext
-): TemplateNode[] {
-    if (attributes.length === 0) {
-        return nodes
-    }
-
-    // Find the first non-text element (the root element)
-    const rootIndex = nodes.findIndex(n => n.type === 'element')
-    if (rootIndex === -1) {
-        return nodes
-    }
-
-    const root = nodes[rootIndex] as ElementNode
-
-    // Merge attributes: component usage attributes override template defaults
-    // Also preserve the parent's loopContext on forwarded attributes
-    const mergedAttributes = [...root.attributes]
-
-    for (const attr of attributes) {
-        const existingIndex = mergedAttributes.findIndex(a => a.name === attr.name)
-
-        // Attach parent's loopContext to forwarded attributes to preserve reactivity
-        const forwardedAttr = {
-            ...attr,
-            loopContext: attr.loopContext || loopContext
-        }
-
-        if (existingIndex >= 0) {
-            const existingAttr = mergedAttributes[existingIndex]!
-            // Special handling for class: merge classes
-            if (attr.name === 'class' && typeof attr.value === 'string' && typeof existingAttr.value === 'string') {
-                mergedAttributes[existingIndex] = {
-                    ...existingAttr,
-                    value: `${existingAttr.value} ${attr.value}`
-                }
-            } else {
-                // Override other attributes
-                mergedAttributes[existingIndex] = forwardedAttr
-            }
-        } else {
-            // Add new attribute
-            mergedAttributes.push(forwardedAttr)
-        }
-    }
-
-    // Return updated nodes with root element having merged attributes
-    return [
-        ...nodes.slice(0, rootIndex),
-        {
-            ...root,
-            attributes: mergedAttributes,
-            loopContext: root.loopContext || loopContext
-        },
-        ...nodes.slice(rootIndex + 1)
-    ]
-}
-
-/**
- * Check if an IR contains any component nodes
- */
-export function hasComponents(nodes: TemplateNode[]): boolean {
-    function checkNode(node: TemplateNode): boolean {
-        if (node.type === 'component') {
-            return true
-        }
-        if (node.type === 'element') {
-            return node.children.some(checkNode)
-        }
-        return false
-    }
-
-    return nodes.some(checkNode)
-}

package/compiler/transform/expressionTransformer.ts

@@ -1,385 +0,0 @@
-/**
- * Expression JSX Transformer
- * 
- * Transforms JSX-like tags inside Zenith expressions into __zenith.h() calls.
- * This allows Zenith to support JSX semantics without a full JSX compiler like Babel.
- * 
- * Handles:
- * - Multi-line JSX expressions
- * - Nested elements
- * - Complex event handlers like onclick={() => fn(item)}
- * - Expression attributes {expr}
- * - Text interpolation {item.title}
- */
-
-/**
- * Find the end of a balanced brace expression
- */
-function findBalancedBraceEnd(code: string, startIndex: number): number {
-    let braceCount = 1
-    let i = startIndex + 1
-    let inString = false
-    let stringChar = ''
-    let inTemplate = false
-
-    while (i < code.length && braceCount > 0) {
-        const char = code[i]
-        const prevChar = i > 0 ? code[i - 1] : ''
-
-        // Handle escape sequences
-        if (prevChar === '\\') {
-            i++
-            continue
-        }
-
-        // Handle string literals
-        if (!inString && !inTemplate && (char === '"' || char === "'")) {
-            inString = true
-            stringChar = char
-            i++
-            continue
-        }
-
-        if (inString && char === stringChar) {
-            inString = false
-            stringChar = ''
-            i++
-            continue
-        }
-
-        // Handle template literals
-        if (!inString && !inTemplate && char === '`') {
-            inTemplate = true
-            i++
-            continue
-        }
-
-        if (inTemplate && char === '`') {
-            inTemplate = false
-            i++
-            continue
-        }
-
-        // Count braces only when not in strings
-        if (!inString && !inTemplate) {
-            if (char === '{') braceCount++
-            else if (char === '}') braceCount--
-        }
-
-        i++
-    }
-
-    return braceCount === 0 ? i : -1
-}
-
-/**
- * Parse JSX attributes using balanced parsing for expression values
- */
-function parseJSXAttributes(code: string, startIndex: number): {
-    attrs: string;
-    endIndex: number;
-    isSelfClosing: boolean
-} {
-    const attrPairs: string[] = []
-    let i = startIndex
-
-    // Skip whitespace
-    while (i < code.length && /\s/.test(code[i]!)) i++
-
-    while (i < code.length) {
-        const char = code[i]
-
-        // Check for end of opening tag
-        if (char === '>') {
-            return { attrs: formatAttrs(attrPairs), endIndex: i + 1, isSelfClosing: false }
-        }
-        if (char === '/' && code[i + 1] === '>') {
-            return { attrs: formatAttrs(attrPairs), endIndex: i + 2, isSelfClosing: true }
-        }
-
-        // Parse attribute name
-        const nameMatch = code.slice(i).match(/^([a-zA-Z_][a-zA-Z0-9_-]*)/)
-        if (!nameMatch) {
-            i++
-            continue
-        }
-
-        const attrName = nameMatch[1]!
-        i += attrName.length
-
-        // Skip whitespace
-        while (i < code.length && /\s/.test(code[i]!)) i++
-
-        // Check for value
-        if (code[i] !== '=') {
-            attrPairs.push(`"${attrName}": true`)
-            continue
-        }
-
-        i++ // Skip '='
-
-        // Skip whitespace
-        while (i < code.length && /\s/.test(code[i]!)) i++
-
-        // Parse value
-        if (code[i] === '"' || code[i] === "'") {
-            const quote = code[i]
-            let endQuote = i + 1
-            while (endQuote < code.length && code[endQuote] !== quote) {
-                if (code[endQuote] === '\\') endQuote++ // Skip escaped chars
-                endQuote++
-            }
-            const value = code.slice(i + 1, endQuote)
-            attrPairs.push(`"${attrName}": "${value}"`)
-            i = endQuote + 1
-        } else if (code[i] === '{') {
-            // Expression value - find balanced end
-            const endBrace = findBalancedBraceEnd(code, i)
-            if (endBrace === -1) {
-                i++
-                continue
-            }
-            const expr = code.slice(i + 1, endBrace - 1).trim()
-            attrPairs.push(`"${attrName}": ${expr}`)
-            i = endBrace
-        } else {
-            // Unquoted value (rare in JSX, but support it)
-            const unquotedMatch = code.slice(i).match(/^([^\s/>]+)/)
-            if (unquotedMatch) {
-                attrPairs.push(`"${attrName}": "${unquotedMatch[1]}"`)
-                i += unquotedMatch[1]!.length
-            }
-        }
-
-        // Skip whitespace
-        while (i < code.length && /\s/.test(code[i]!)) i++
-    }
-
-    return { attrs: formatAttrs(attrPairs), endIndex: i, isSelfClosing: false }
-}
-
-function formatAttrs(pairs: string[]): string {
-    return pairs.length > 0 ? `{ ${pairs.join(', ')} }` : 'null'
-}
-
-/**
- * Find the matching closing tag for an element
- */
-function findClosingTag(code: string, startIndex: number, tagName: string): number {
-    let depth = 1
-    let i = startIndex
-    const openPattern = new RegExp(`<${tagName}(?:\\s|>|/>)`, 'i')
-    const closeTag = `</${tagName}>`
-
-    while (i < code.length && depth > 0) {
-        // Check for closing tag
-        if (code.slice(i, i + closeTag.length).toLowerCase() === closeTag.toLowerCase()) {
-            depth--
-            if (depth === 0) return i
-            i += closeTag.length
-            continue
-        }
-
-        // Check for opening tag (same name, nested)
-        const openMatch = code.slice(i).match(openPattern)
-        if (openMatch && openMatch.index === 0) {
-            // Check if it's self-closing
-            const selfClosing = code.slice(i).match(new RegExp(`<${tagName}[^>]*/>`, 'i'))
-            if (!selfClosing || selfClosing.index !== 0) {
-                depth++
-            }
-            i += openMatch[0].length
-            continue
-        }
-
-        i++
-    }
-
-    return -1
-}
-
-/**
- * Parse JSX children content
- */
-function parseJSXChildren(code: string, startIndex: number, tagName: string): {
-    children: string;
-    endIndex: number
-} {
-    const closingIndex = findClosingTag(code, startIndex, tagName)
-    if (closingIndex === -1) {
-        return { children: 'null', endIndex: code.length }
-    }
-
-    const content = code.slice(startIndex, closingIndex)
-
-    if (!content.trim()) {
-        return { children: 'null', endIndex: closingIndex }
-    }
-
-    // Transform the children content
-    const transformedContent = transformChildContent(content)
-
-    return { children: transformedContent, endIndex: closingIndex }
-}
-
-/**
- * Transform content that may contain text, expressions, and nested JSX
- */
-function transformChildContent(content: string): string {
-    const parts: string[] = []
-    let i = 0
-    let currentText = ''
-
-    while (i < content.length) {
-        const char = content[i]
-
-        // Check for JSX element
-        if (char === '<' && /[a-zA-Z]/.test(content[i + 1] || '')) {
-            // Save any accumulated text
-            if (currentText.trim()) {
-                parts.push(`"${escapeString(currentText.trim())}"`)
-                currentText = ''
-            }
-
-            // Try to parse as JSX element
-            const parsed = parseJSXElement(content, i)
-            if (parsed) {
-                parts.push(parsed.hCall)
-                i = parsed.endIndex
-                continue
-            }
-        }
-
-        // Check for expression {expr}
-        if (char === '{') {
-            const endBrace = findBalancedBraceEnd(content, i)
-            if (endBrace !== -1) {
-                // Save any accumulated text
-                if (currentText.trim()) {
-                    parts.push(`"${escapeString(currentText.trim())}"`)
-                    currentText = ''
-                }
-
-                // Extract and add expression
-                const expr = content.slice(i + 1, endBrace - 1).trim()
-                if (expr) {
-                    // Transform any JSX inside the expression
-                    const transformedExpr = transformExpressionJSX(expr)
-                    parts.push(transformedExpr)
-                }
-                i = endBrace
-                continue
-            }
-        }
-
-        // Accumulate text
-        currentText += char
-        i++
-    }
-
-    // Add remaining text
-    if (currentText.trim()) {
-        parts.push(`"${escapeString(currentText.trim())}"`)
-    }
-
-    if (parts.length === 0) return 'null'
-    if (parts.length === 1) return parts[0]!
-    return `[${parts.join(', ')}]`
-}
-
-/**
- * Escape a string for use in JavaScript
- */
-function escapeString(str: string): string {
-    return str
-        .replace(/\\/g, '\\\\')
-        .replace(/"/g, '\\"')
-        .replace(/\n/g, '\\n')
-        .replace(/\r/g, '\\r')
-        .replace(/\t/g, '\\t')
-}
-
-/**
- * Parse a single JSX element starting at the given index
- */
-function parseJSXElement(code: string, startIndex: number): { hCall: string; endIndex: number } | null {
-    // Extract tag name
-    const tagMatch = code.slice(startIndex).match(/^<([a-zA-Z][a-zA-Z0-9]*)/)
-    if (!tagMatch) return null
-
-    const tagName = tagMatch[1]!
-    let i = startIndex + tagMatch[0].length
-
-    // Parse attributes
-    const { attrs, endIndex: attrEnd, isSelfClosing } = parseJSXAttributes(code, i)
-    i = attrEnd
-
-    if (isSelfClosing) {
-        return {
-            hCall: `__zenith.h("${tagName}", ${attrs}, null)`,
-            endIndex: i
-        }
-    }
-
-    // Parse children until closing tag
-    const { children, endIndex: childEnd } = parseJSXChildren(code, i, tagName)
-    i = childEnd
-
-    // Skip closing tag
-    const closeTag = `</${tagName}>`
-    if (code.slice(i, i + closeTag.length).toLowerCase() === closeTag.toLowerCase()) {
-        i += closeTag.length
-    }
-
-    return {
-        hCall: `__zenith.h("${tagName}", ${attrs}, ${children})`,
-        endIndex: i
-    }
-}
-
-/**
- * Main transformer function
- * 
- * Transforms JSX-like tags inside Zenith expressions into __zenith.h() calls.
- */
-export function transformExpressionJSX(code: string): string {
-    // Skip if no JSX-like content (optimization)
-    if (!/<[a-zA-Z]/.test(code)) {
-        return code
-    }
-
-    let result = ''
-    let i = 0
-
-    while (i < code.length) {
-        // Look for potential JSX tag start
-        // Only treat as JSX if it follows common JSX contexts: (, return, =, :, ,, [, ?
-        if (code[i] === '<' && /[a-zA-Z]/.test(code[i + 1] || '')) {
-            // Check if this looks like a JSX context
-            const beforeChar = i > 0 ? code[i - 1] : ''
-            const beforeTrimmed = code.slice(0, i).trimEnd()
-            const lastChar = beforeTrimmed[beforeTrimmed.length - 1] || ''
-
-            // Common JSX-starting contexts
-            const jsxContexts = ['(', '=', ':', ',', '[', '?', '{', 'n'] // 'n' for 'return'
-            const isJSXContext = jsxContexts.includes(lastChar) ||
-                beforeTrimmed.endsWith('return') ||
-                beforeTrimmed === '' ||
-                (beforeChar && /\s/.test(beforeChar))
-
-            if (isJSXContext) {
-                const parsed = parseJSXElement(code, i)
-                if (parsed) {
-                    result += parsed.hCall
-                    i = parsed.endIndex
-                    continue
-                }
-            }
-        }
-
-        result += code[i]
-        i++
-    }
-
-    return result
-}