@zenithbuild/core 1.2.2 → 1.2.4

package/compiler/transform/generateBindings.ts

@@ -1,68 +0,0 @@
-/**
- * Generate Bindings
- * 
- * This module is handled by transformNode, but kept here for future extensibility
- */
-
-import type { Binding } from '../output/types'
-
-/**
- * Valid binding types
- */
-const VALID_BINDING_TYPES = new Set(['text', 'attribute', 'loop', 'conditional', 'optional'])
-
-/**
- * Validate bindings structure
- */
-export function validateBindings(bindings: Binding[]): void {
-  for (const binding of bindings) {
-    if (!binding.id || !binding.type || !binding.target || !binding.expression) {
-      throw new Error(`Invalid binding: ${JSON.stringify(binding)}`)
-    }
-    
-    if (!VALID_BINDING_TYPES.has(binding.type)) {
-      throw new Error(`Invalid binding type: ${binding.type}`)
-    }
-    
-    // Validate specific binding types
-    switch (binding.type) {
-      case 'text':
-        if (binding.target !== 'data-zen-text') {
-          throw new Error(`Text binding must have target 'data-zen-text', got: ${binding.target}`)
-        }
-        break
-      case 'loop':
-        if (binding.target !== 'data-zen-loop') {
-          throw new Error(`Loop binding must have target 'data-zen-loop', got: ${binding.target}`)
-        }
-        break
-      case 'conditional':
-        if (binding.target !== 'data-zen-cond') {
-          throw new Error(`Conditional binding must have target 'data-zen-cond', got: ${binding.target}`)
-        }
-        break
-      case 'optional':
-        if (binding.target !== 'data-zen-opt') {
-          throw new Error(`Optional binding must have target 'data-zen-opt', got: ${binding.target}`)
-        }
-        break
-      case 'attribute':
-        // Attribute bindings can have various targets
-        break
-    }
-  }
-}
-
-/**
- * Sort bindings by location for deterministic output
- */
-export function sortBindings(bindings: Binding[]): Binding[] {
-  return [...bindings].sort((a, b) => {
-    if (!a.location || !b.location) return 0
-    if (a.location.line !== b.location.line) {
-      return a.location.line - b.location.line
-    }
-    return a.location.column - b.location.column
-  })
-}
-

package/compiler/transform/generateHTML.ts

@@ -1,28 +0,0 @@
-/**
- * Generate Static HTML from Transformed Nodes
- * 
- * This generates pure HTML with no expressions or runtime code
- */
-
-import type { TemplateNode } from '../ir/types'
-import { transformNode } from './transformNode'
-
-/**
- * Generate HTML string from template nodes
- */
-export function generateHTML(
-  nodes: TemplateNode[],
-  expressions: any[]
-): { html: string; bindings: any[] } {
-  let html = ''
-  const allBindings: any[] = []
-  
-  for (const node of nodes) {
-    const { html: nodeHtml, bindings } = transformNode(node, expressions)
-    html += nodeHtml
-    allBindings.push(...bindings)
-  }
-  
-  return { html, bindings: allBindings }
-}
-

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)
-}