@zenithbuild/core 0.6.2 → 0.6.4

package/compiler/transform/layoutProcessor.ts

@@ -1,132 +0,0 @@
-import type { LayoutMetadata } from '../discovery/layouts'
-
-/**
- * Process a page by inlining a layout
- */
-export function processLayout(
-    source: string,
-    layout: LayoutMetadata,
-    props: Record<string, any> = {}
-): string {
-    // 1. Extract scripts and styles from the page source
-    const pageScripts: string[] = []
-    const pageStyles: string[] = []
-    let isTypeScript = false
-
-    // Extract script blocks
-    const scriptRegex = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi
-    let scriptMatch
-    while ((scriptMatch = scriptRegex.exec(source)) !== null) {
-        const attrString = scriptMatch[1] || ''
-        const content = scriptMatch[2] || ''
-        if (attrString.includes('lang="ts"') || attrString.includes('setup="ts"')) {
-            isTypeScript = true
-        }
-        if (content) pageScripts.push(content.trim())
-    }
-
-    // Extract style blocks
-    const styleRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi
-    let styleMatch
-    while ((styleMatch = styleRegex.exec(source)) !== null) {
-        if (styleMatch[1]) pageStyles.push(styleMatch[1].trim())
-    }
-
-    // 2. Extract content from page source and parse props
-    const layoutTag = layout.name
-    // Support both <DefaultLayout ...> and <DefaultLayout>...</DefaultLayout>
-    const layoutRegex = new RegExp(`<${layoutTag}\\b([^>]*)>(?:([\\s\\S]*?)</${layoutTag}>)?`, 'i')
-    const match = source.match(layoutRegex)
-
-    let pageHtml = ''
-    let layoutPropsStr = ''
-
-    if (match) {
-        layoutPropsStr = match[1] || ''
-        pageHtml = match[2] || ''
-
-        // If it's a self-closing tag or empty, it might not have captured content correctly if regex failed
-        if (!pageHtml && !source.includes(`</${layoutTag}>`)) {
-            // Self-closing check? No, Zenith usually expects explicit tags or the layout to wrap everything.
-        }
-    } else {
-        // If layout tag not found as root, assume everything minus script/style is content
-        pageHtml = source.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
-        pageHtml = pageHtml.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '').trim()
-    }
-
-    // 3. Parse props from the tag
-    const mergedProps = { ...props }
-    if (layoutPropsStr) {
-        // Support legacy props={{...}}
-        const legacyMatch = layoutPropsStr.match(/props=\{\{([^}]+)\}\}/)
-        if (legacyMatch && legacyMatch[1]) {
-            const propsBody = legacyMatch[1]
-            const pairs = propsBody.split(/,(?![^[]*\])(?![^{]*\})/)
-            for (const pair of pairs) {
-                const [key, ...valParts] = pair.split(':')
-                if (key && valParts.length > 0) {
-                    mergedProps[key.trim()] = valParts.join(':').trim()
-                }
-            }
-        }
-
-        // Support natural props: title={"Home"} or title="Home" or title={title}
-        const attrRegex = /([a-zA-Z0-9-]+)=(?:\{([^}]+)\}|"([^"]*)"|'([^']*)')/g
-        let attrMatch
-        while ((attrMatch = attrRegex.exec(layoutPropsStr)) !== null) {
-            const name = attrMatch[1]
-            const value = attrMatch[2] || attrMatch[3] || attrMatch[4]
-            if (name && name !== 'props') {
-                mergedProps[name] = value
-            }
-        }
-    }
-
-    // 4. Merge Scripts with Prop Injection
-    // Layout scripts come first, then page scripts. Props are injected at the very top.
-    const propDeclarations = Object.entries(mergedProps)
-        .map(([key, value]) => {
-            // If value looks like a string literal, keep it as is, otherwise wrap if needed
-            // Actually, if it came from {expression}, we should treat it as code.
-            // If it came from "string", we treat it as a string.
-            const isExpression = layoutPropsStr.includes(`${key}={${value}}`)
-            if (isExpression) {
-                return `const ${key} = ${value};`
-            }
-            return `const ${key} = ${typeof value === 'string' && !value.startsWith("'") && !value.startsWith('"') ? `'${value}'` : value};`
-        })
-        .join('\n')
-
-    const mergedScripts = [
-        propDeclarations,
-        ...layout.scripts,
-        ...pageScripts
-    ].filter(Boolean).join('\n\n')
-
-    // 5. Merge Styles
-    const mergedStyles = [
-        ...layout.styles,
-        ...pageStyles
-    ].filter(Boolean).join('\n\n')
-
-    // 6. Inline HTML into layout slot
-    let finalizedHtml = layout.html.replace(/<Slot\s*\/>/gi, pageHtml)
-    finalizedHtml = finalizedHtml.replace(/<slot\s*>[\s\S]*?<\/slot>/gi, pageHtml)
-
-    // 7. Reconstruct the full .zen source
-    const propNames = Object.keys(mergedProps).join(',')
-    const scriptTag = `<script setup${isTypeScript ? '="ts"' : ''}${propNames ? ` props="${propNames}"` : ''}>`
-
-    return `
-${scriptTag}
-${mergedScripts}
-</script>
-
-${finalizedHtml}
-
-<style>
-${mergedStyles}
-</style>
-`.trim()
-}

package/compiler/transform/slotResolver.ts

@@ -1,292 +0,0 @@
-/**
- * Slot Resolution - Compound Component Model
- * 
- * Resolves slots using compound component pattern (Card.Header, Card.Body)
- * NOT template tags. This matches React/Astro semantics.
- * 
- * IMPORTANT: Slot content must preserve the parent reactive scope.
- * Components are purely structural transforms - they don't create new reactive boundaries.
- * 
- * Example usage:
- * <Card>
- *   <Card.Header><h3>Title</h3></Card.Header>
- *   <p>Body content goes to default slot</p>
- *   <Card.Footer><Button>OK</Button></Card.Footer>
- * </Card>
- */
-
-import type { TemplateNode, ComponentNode, ElementNode, LoopContext } from '../ir/types'
-
-export interface ResolvedSlots {
-    default: TemplateNode[]
-    named: Map<string, TemplateNode[]>
-    // Preserve the parent's reactive scope for slot content
-    parentLoopContext?: LoopContext
-}
-
-/**
- * Extract slots from component children using compound component pattern
- * 
- * Children named `ParentComponent.SlotName` become named slots.
- * All other children go to the default slot.
- * Preserves the parent's reactive scope (loopContext) for all slot content.
- * 
- * @param parentName - Name of the parent component (e.g., "Card")
- * @param children - Child nodes from component usage
- * @param parentLoopContext - The reactive scope from the parent (must be preserved)
- */
-export function extractSlotsFromChildren(
-    parentName: string,
-    children: TemplateNode[],
-    parentLoopContext?: LoopContext
-): ResolvedSlots {
-    const defaultSlot: TemplateNode[] = []
-    const namedSlots = new Map<string, TemplateNode[]>()
-
-    for (const child of children) {
-        // Check if this is a compound component (e.g., Card.Header)
-        if (child.type === 'component') {
-            const compoundMatch = parseCompoundName(child.name, parentName)
-
-            if (compoundMatch) {
-                // This is a named slot (e.g., Card.Header -> "header")
-                const slotName = compoundMatch.toLowerCase()
-
-                if (!namedSlots.has(slotName)) {
-                    namedSlots.set(slotName, [])
-                }
-
-                // The compound component's children become the slot content
-                // Preserve parent's loopContext on each child
-                const scopedChildren = child.children.map(c =>
-                    rebindNodeToScope(c, parentLoopContext)
-                )
-                namedSlots.get(slotName)!.push(...scopedChildren)
-            } else {
-                // Regular component, goes to default slot
-                // Preserve parent's loopContext
-                defaultSlot.push(rebindNodeToScope(child, parentLoopContext))
-            }
-        } else {
-            // Elements, text, expressions go to default slot
-            // Preserve parent's loopContext
-            defaultSlot.push(rebindNodeToScope(child, parentLoopContext))
-        }
-    }
-
-    return {
-        default: defaultSlot,
-        named: namedSlots,
-        parentLoopContext
-    }
-}
-
-/**
- * Rebind a node to the parent's reactive scope
- * 
- * This ensures that expressions and event bindings in slot content
- * remain connected to the parent component's reactive graph.
- * Components must be purely structural - they don't create new reactive boundaries.
- */
-function rebindNodeToScope(node: TemplateNode, loopContext?: LoopContext): TemplateNode {
-    // If no parent scope to preserve, return as-is
-    if (!loopContext) {
-        return node
-    }
-
-    // Merge the parent's loopContext with existing loopContext
-    // Parent scope takes precedence to ensure reactivity flows through
-    switch (node.type) {
-        case 'expression':
-            return {
-                ...node,
-                loopContext: mergeLoopContext(node.loopContext, loopContext)
-            }
-
-        case 'element':
-            return {
-                ...node,
-                loopContext: mergeLoopContext(node.loopContext, loopContext),
-                attributes: node.attributes.map(attr => ({
-                    ...attr,
-                    loopContext: attr.loopContext
-                        ? mergeLoopContext(attr.loopContext, loopContext)
-                        : loopContext
-                })),
-                children: node.children.map(c => rebindNodeToScope(c, loopContext))
-            }
-
-        case 'component':
-            return {
-                ...node,
-                loopContext: mergeLoopContext(node.loopContext, loopContext),
-                children: node.children.map(c => rebindNodeToScope(c, loopContext))
-            }
-
-        case 'text':
-            // Text nodes don't have reactive bindings
-            return node
-
-        default:
-            return node
-    }
-}
-
-/**
- * Merge two loop contexts, combining their variables
- * Parent context variables take precedence (added last so they shadow)
- */
-function mergeLoopContext(existing?: LoopContext, parent?: LoopContext): LoopContext | undefined {
-    if (!existing && !parent) return undefined
-    if (!existing) return parent
-    if (!parent) return existing
-
-    // Combine variables, parent variables shadow existing
-    const allVars = new Set([...existing.variables, ...parent.variables])
-
-    return {
-        variables: Array.from(allVars),
-        mapSource: parent.mapSource || existing.mapSource
-    }
-}
-
-/**
- * Parse compound component name
- * 
- * Given "Card.Header" and parent "Card", returns "Header"
- * Given "Card.Footer" and parent "Card", returns "Footer"
- * Given "Button" and parent "Card", returns null (not a compound)
- * 
- * @param componentName - Full component name (e.g., "Card.Header")
- * @param parentName - Parent component name (e.g., "Card")
- * @returns Slot name or null if not a compound of this parent
- */
-function parseCompoundName(componentName: string, parentName: string): string | null {
-    const prefix = `${parentName}.`
-
-    if (componentName.startsWith(prefix)) {
-        return componentName.slice(prefix.length)
-    }
-
-    return null
-}
-
-/**
- * Resolve slots in component template nodes
- * 
- * Replaces <slot /> and <slot name="X" /> with children from resolved slots.
- * All slot content is rebound to the parent's reactive scope.
- */
-export function resolveSlots(
-    componentNodes: TemplateNode[],
-    slots: ResolvedSlots
-): TemplateNode[] {
-    const resolved: TemplateNode[] = []
-
-    for (const node of componentNodes) {
-        const result = resolveNode(node, slots)
-        if (Array.isArray(result)) {
-            resolved.push(...result)
-        } else {
-            resolved.push(result)
-        }
-    }
-
-    return resolved
-}
-
-/**
- * Resolve a single node, replacing slot tags with content
- * Ensures all slot content maintains the parent's reactive scope
- */
-function resolveNode(
-    node: TemplateNode,
-    slots: ResolvedSlots
-): TemplateNode | TemplateNode[] {
-    if (node.type === 'element' && node.tag === 'slot') {
-        // This is a slot tag - replace it with children
-        const nameAttr = node.attributes.find(attr => attr.name === 'name')
-        const slotName = typeof nameAttr?.value === 'string' ? nameAttr.value : null
-
-        if (slotName) {
-            // Named slot
-            const namedChildren = slots.named.get(slotName.toLowerCase()) || []
-
-            // If no children provided and slot has fallback content, use fallback
-            if (namedChildren.length === 0 && node.children.length > 0) {
-                return node.children
-            }
-
-            // Return slot content (already scoped during extraction)
-            return namedChildren.length > 0 ? namedChildren : []
-        } else {
-            // Default slot
-            // If no children provided and slot has fallback content, use fallback
-            if (slots.default.length === 0 && node.children.length > 0) {
-                return node.children
-            }
-
-            // Return slot content (already scoped during extraction)
-            return slots.default
-        }
-    }
-
-    if (node.type === 'element') {
-        // Recursively resolve slots in children
-        const resolvedChildren: TemplateNode[] = []
-        for (const child of node.children) {
-            const result = resolveNode(child, slots)
-            if (Array.isArray(result)) {
-                resolvedChildren.push(...result)
-            } else {
-                resolvedChildren.push(result)
-            }
-        }
-
-        return {
-            ...node,
-            children: resolvedChildren
-        }
-    }
-
-    if (node.type === 'component') {
-        // Recursively resolve slots in component children
-        const resolvedChildren: TemplateNode[] = []
-        for (const child of node.children) {
-            const result = resolveNode(child, slots)
-            if (Array.isArray(result)) {
-                resolvedChildren.push(...result)
-            } else {
-                resolvedChildren.push(result)
-            }
-        }
-
-        return {
-            ...node,
-            children: resolvedChildren
-        }
-    }
-
-    // Text and expression nodes pass through unchanged
-    return node
-}
-
-/**
- * Check if a node tree contains any slots
- */
-export function hasSlots(nodes: TemplateNode[]): boolean {
-    function checkNode(node: TemplateNode): boolean {
-        if (node.type === 'element') {
-            if (node.tag === 'slot') {
-                return true
-            }
-            return node.children.some(checkNode)
-        }
-        if (node.type === 'component') {
-            return node.children.some(checkNode)
-        }
-        return false
-    }
-
-    return nodes.some(checkNode)
-}

package/compiler/transform/transformNode.ts

@@ -1,126 +0,0 @@
-/**
- * Transform Template Nodes
- * 
- * Transforms IR nodes into HTML strings and collects bindings
- */
-
-import type { TemplateNode, ElementNode, TextNode, ExpressionNode, ExpressionIR, LoopContext } from '../ir/types'
-import type { Binding } from '../output/types'
-
-let bindingIdCounter = 0
-
-function generateBindingId(): string {
-  return `expr_${bindingIdCounter++}`
-}
-
-/**
- * Transform a template node to HTML and collect bindings
- * Phase 7: Supports loop context propagation for map expressions
- */
-export function transformNode(
-  node: TemplateNode,
-  expressions: ExpressionIR[],
-  parentLoopContext?: LoopContext  // Phase 7: Loop context from parent map expressions
-): { html: string; bindings: Binding[] } {
-  const bindings: Binding[] = []
-
-  function transform(node: TemplateNode, loopContext?: LoopContext): string {
-    switch (node.type) {
-      case 'text':
-        return escapeHtml((node as TextNode).value)
-
-      case 'expression': {
-        const exprNode = node as ExpressionNode
-        // Find the expression in the expressions array
-        const expr = expressions.find(e => e.id === exprNode.expression)
-        if (!expr) {
-          throw new Error(`Expression ${exprNode.expression} not found`)
-        }
-
-        const bindingId = expr.id
-        // Phase 7: Use loop context from ExpressionNode if available, otherwise use passed context
-        const activeLoopContext = exprNode.loopContext || loopContext
-
-        bindings.push({
-          id: bindingId,
-          type: 'text',
-          target: 'data-zen-text',
-          expression: expr.code,
-          location: expr.location,
-          loopContext: activeLoopContext  // Phase 7: Attach loop context to binding
-        })
-
-        return `<span data-zen-text="${bindingId}" style="display: contents;"></span>`
-      }
-
-      case 'element': {
-        const elNode = node as ElementNode
-        const tag = elNode.tag
-
-        // Build attributes
-        const attrs: string[] = []
-        for (const attr of elNode.attributes) {
-          if (typeof attr.value === 'string') {
-            // Static attribute
-            const value = escapeHtml(attr.value)
-            attrs.push(`${attr.name}="${value}"`)
-          } else {
-            // Expression attribute
-            const expr = attr.value as ExpressionIR
-            const bindingId = expr.id
-            // Phase 7: Use loop context from AttributeIR if available, otherwise use element's loop context
-            const activeLoopContext = attr.loopContext || loopContext
-
-            bindings.push({
-              id: bindingId,
-              type: 'attribute',
-              target: attr.name,  // e.g., "class", "style"
-              expression: expr.code,
-              location: expr.location,
-              loopContext: activeLoopContext  // Phase 7: Attach loop context to binding
-            })
-
-            // Use data-zen-attr-{name} for attribute expressions
-            attrs.push(`data-zen-attr-${attr.name}="${bindingId}"`)
-          }
-        }
-
-        const attrStr = attrs.length > 0 ? ' ' + attrs.join(' ') : ''
-
-        // Phase 7: Use loop context from ElementNode if available, otherwise use passed context
-        const activeLoopContext = elNode.loopContext || loopContext
-
-        // Transform children
-        const childrenHtml = elNode.children.map(child => transform(child, activeLoopContext)).join('')
-
-        // Self-closing tags
-        const voidElements = new Set([
-          'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
-          'link', 'meta', 'param', 'source', 'track', 'wbr'
-        ])
-
-        if (voidElements.has(tag.toLowerCase()) && childrenHtml === '') {
-          return `<${tag}${attrStr} />`
-        }
-
-        return `<${tag}${attrStr}>${childrenHtml}</${tag}>`
-      }
-    }
-  }
-
-  const html = transform(node, parentLoopContext)
-  return { html, bindings }
-}
-
-/**
- * Escape HTML special characters
- */
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;')
-}
-

package/compiler/transform/transformTemplate.ts

@@ -1,38 +0,0 @@
-/**
- * Transform Template IR to Compiled Template
- * 
- * Phase 2: Transform IR → Static HTML + Runtime Bindings
- */
-
-import type { ZenIR } from '../ir/types'
-import type { CompiledTemplate } from '../output/types'
-import { generateHTML } from './generateHTML'
-import { validateBindings, sortBindings } from './generateBindings'
-
-/**
- * Transform a ZenIR into CompiledTemplate
- */
-export function transformTemplate(ir: ZenIR): CompiledTemplate {
-  // Generate HTML and collect bindings
-  const { html, bindings } = generateHTML(ir.template.nodes, ir.template.expressions)
-  
-  // Validate bindings
-  validateBindings(bindings)
-  
-  // Sort bindings by location for deterministic output
-  const sortedBindings = sortBindings(bindings)
-  
-  // Extract scripts (raw content, pass through)
-  const scripts = ir.script ? ir.script.raw : null
-  
-  // Extract styles (raw content, pass through)
-  const styles = ir.styles.map(s => s.raw)
-  
-  return {
-    html,
-    bindings: sortedBindings,
-    scripts,
-    styles
-  }
-}
-