@zenithbuild/core 0.6.2 → 0.6.4

package/compiler/transform/componentResolver.ts

@@ -1,312 +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, ComponentScriptIR } 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 and script 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 AND scripts 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 })))
-
-    // Collect scripts from all used components (for bundling)
-    const componentScripts: ComponentScriptIR[] = Array.from(usedComponents)
-        .map(name => components.get(name))
-        .filter((meta): meta is ComponentMetadata => meta !== undefined && meta.script !== null)
-        .map(meta => ({
-            name: meta.name,
-            script: meta.script!,
-            props: meta.props,
-            scriptAttributes: meta.scriptAttributes || {}
-        }))
-
-    return {
-        ...ir,
-        template: {
-            ...ir.template,
-            nodes: resolvedNodes
-        },
-        // Merge component styles with existing page styles
-        styles: [...ir.styles, ...componentStyles],
-        // Add component scripts for bundling
-        componentScripts: [...(ir.componentScripts || []), ...componentScripts]
-    }
-}
-
-/**
- * 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
-    // Also adds data-zen-component marker for hydration-driven instantiation
-    const forwardedTemplate = forwardAttributesToRoot(
-        resolvedTemplate,
-        componentNode.attributes,
-        componentNode.loopContext,
-        componentMeta.hasScript ? componentName : undefined  // Only mark if component has script
-    )
-
-    // 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.
- * 
- * Also adds data-zen-component marker if componentName is provided,
- * enabling hydration-driven instantiation.
- */
-function forwardAttributesToRoot(
-    nodes: TemplateNode[],
-    attributes: ComponentNode['attributes'],
-    loopContext?: LoopContext,
-    componentName?: string  // If provided, adds hydration marker
-): TemplateNode[] {
-    // 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
-
-    // Start with existing attributes
-    const mergedAttributes = [...root.attributes]
-
-    // Add component hydration marker if this component has a script
-    if (componentName) {
-        mergedAttributes.push({
-            name: 'data-zen-component',
-            value: componentName,
-            location: { line: 0, column: 0 }
-        })
-    }
-
-    // Forward attributes from component usage
-    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/componentScriptTransformer.ts

@@ -1,303 +0,0 @@
-/**
- * Component Script Transformer
- * 
- * Transforms component scripts for instance-scoped execution.
- * Uses namespace binding pattern for cleaner output:
- *   const { signal, effect, onMount, ... } = __inst;
- * 
- * Uses Acorn AST parser for deterministic import parsing.
- * Phase 1: Analysis only - imports are parsed and categorized.
- * Phase 2 (bundling) happens in dev.ts.
- * 
- * Import handling:
- * - .zen imports: Stripped (compile-time resolved)
- * - npm imports: Stored as structured metadata for later bundling
- */
-
-import type { ComponentScriptIR, ScriptImport } from '../ir/types'
-import { parseImports, categorizeImports } from '../parse/parseImports'
-import type { ParsedImport } from '../parse/importTypes'
-
-/**
- * Namespace bindings - destructured from the instance
- * This is added at the top of every component script
- */
-const NAMESPACE_BINDINGS = `const { 
-    signal, state, memo, effect, ref, 
-    batch, untrack, onMount, onUnmount 
-} = __inst;`
-
-/**
- * Mapping of zen* prefixed names to unprefixed names
- * These get rewritten to use the destructured namespace
- */
-const ZEN_PREFIX_MAPPINGS: Record<string, string> = {
-    'zenSignal': 'signal',
-    'zenState': 'state',
-    'zenMemo': 'memo',
-    'zenEffect': 'effect',
-    'zenRef': 'ref',
-    'zenBatch': 'batch',
-    'zenUntrack': 'untrack',
-    'zenOnMount': 'onMount',
-    'zenOnUnmount': 'onUnmount',
-}
-
-/**
- * Result of script transformation including extracted imports
- */
-export interface TransformResult {
-    script: string           // Transformed script (imports removed)
-    imports: ScriptImport[]  // Structured npm imports to hoist
-}
-
-/**
- * Convert ParsedImport to ScriptImport for compatibility with existing IR
- */
-function toScriptImport(parsed: ParsedImport): ScriptImport {
-    // Build specifiers string from parsed specifiers
-    let specifiers = ''
-
-    if (parsed.kind === 'default') {
-        specifiers = parsed.specifiers[0]?.local || ''
-    } else if (parsed.kind === 'namespace') {
-        specifiers = `* as ${parsed.specifiers[0]?.local || ''}`
-    } else if (parsed.kind === 'named') {
-        const parts = parsed.specifiers.map(s =>
-            s.imported ? `${s.imported} as ${s.local}` : s.local
-        )
-        specifiers = `{ ${parts.join(', ')} }`
-    } else if (parsed.kind === 'side-effect') {
-        specifiers = ''
-    }
-
-    return {
-        source: parsed.source,
-        specifiers,
-        typeOnly: parsed.isTypeOnly,
-        sideEffect: parsed.kind === 'side-effect'
-    }
-}
-
-/**
- * Strip imports from source code based on parsed import locations
- * 
- * @param source - Original source code
- * @param imports - Parsed imports to strip
- * @returns Source with imports removed
- */
-function stripImportsFromSource(source: string, imports: ParsedImport[]): string {
-    if (imports.length === 0) return source
-
-    // Sort by start position descending for safe removal
-    const sorted = [...imports].sort((a, b) => b.location.start - a.location.start)
-
-    let result = source
-    for (const imp of sorted) {
-        // Remove the import statement
-        const before = result.slice(0, imp.location.start)
-        const after = result.slice(imp.location.end)
-
-        // Also remove trailing newline if present
-        const trimmedAfter = after.startsWith('\n') ? after.slice(1) : after
-        result = before + trimmedAfter
-    }
-
-    return result
-}
-
-/**
- * Parse and extract imports from script content using Acorn AST parser
- * 
- * Phase 1: Deterministic parsing - no bundling or resolution
- * 
- * @param scriptContent - Raw script content
- * @param componentName - Name of the component (for error context)
- * @returns Object with npm imports array and script with all imports stripped
- */
-export function parseAndExtractImports(
-    scriptContent: string,
-    componentName: string = 'unknown'
-): {
-    imports: ScriptImport[]
-    strippedCode: string
-} {
-    // Parse imports using Acorn AST
-    const parseResult = parseImports(scriptContent, componentName)
-
-    if (!parseResult.success) {
-        console.warn(`[Zenith] Import parse warnings for ${componentName}:`, parseResult.errors)
-    }
-
-    // Categorize imports
-    const { zenImports, npmImports, relativeImports } = categorizeImports(parseResult.imports)
-
-    // Convert npm imports to ScriptImport format
-    const scriptImports = npmImports.map(toScriptImport)
-
-    // Strip ALL imports from source (zen, npm, and relative)
-    // - .zen imports: resolved at compile time
-    // - npm imports: will be bundled separately
-    // - relative imports: resolved at compile time
-    const allImportsToStrip = [...zenImports, ...npmImports, ...relativeImports]
-    const strippedCode = stripImportsFromSource(scriptContent, allImportsToStrip)
-
-    return {
-        imports: scriptImports,
-        strippedCode
-    }
-}
-
-/**
- * Transform a component's script content for instance-scoped execution
- * 
- * @param componentName - Name of the component
- * @param scriptContent - Raw script content from the component
- * @param props - Declared prop names
- * @returns TransformResult with transformed script and extracted imports
- */
-export function transformComponentScript(
-    componentName: string,
-    scriptContent: string,
-    props: string[]
-): TransformResult {
-    // Parse and extract imports using Acorn AST
-    const { imports, strippedCode } = parseAndExtractImports(scriptContent, componentName)
-
-    let transformed = strippedCode
-
-    // Rewrite zen* prefixed calls to unprefixed (uses namespace bindings)
-    for (const [zenName, unprefixedName] of Object.entries(ZEN_PREFIX_MAPPINGS)) {
-        // Match the zen* name as a standalone call
-        const regex = new RegExp(`(?<!\\w)${zenName}\\s*\\(`, 'g')
-        transformed = transformed.replace(regex, `${unprefixedName}(`)
-    }
-
-    return {
-        script: transformed.trim(),
-        imports
-    }
-}
-
-/**
- * Generate a component factory function
- * 
- * IMPORTANT: Factories are PASSIVE - they are registered but NOT invoked here.
- * Instantiation is driven by the hydrator when it discovers component markers.
- * 
- * @param componentName - Name of the component
- * @param transformedScript - Script content after hook rewriting
- * @param propNames - Declared prop names for destructuring
- * @returns Component factory registration code (NO eager instantiation)
- */
-export function generateComponentFactory(
-    componentName: string,
-    transformedScript: string,
-    propNames: string[]
-): string {
-    const propsDestructure = propNames.length > 0
-        ? `const { ${propNames.join(', ')} } = props || {};`
-        : ''
-
-    // Register factory only - NO instantiation
-    // Hydrator will call instantiate() when it finds data-zen-component markers
-    return `
-// Component Factory: ${componentName}
-// Instantiation is driven by hydrator, not by bundle load
-__zenith.defineComponent('${componentName}', function(props, rootElement) {
-    const __inst = __zenith.createInstance('${componentName}', rootElement);
-    
-    // Namespace bindings (instance-scoped primitives)
-    ${NAMESPACE_BINDINGS}
-    
-    ${propsDestructure}
-    
-    // Component script (instance-scoped)
-    ${transformedScript}
-    
-    // Execute mount lifecycle (rootElement is already in DOM)
-    __inst.mount();
-    
-    return __inst;
-});
-`
-}
-
-/**
- * Result of transforming all component scripts
- */
-export interface TransformAllResult {
-    code: string             // Combined factory code
-    imports: ScriptImport[]  // All collected npm imports (deduplicated)
-}
-
-/**
- * Deduplicate imports by (source + specifiers + typeOnly) tuple
- * Returns deterministically sorted imports
- */
-function deduplicateImports(imports: ScriptImport[]): ScriptImport[] {
-    const seen = new Map<string, ScriptImport>()
-
-    for (const imp of imports) {
-        const key = `${imp.source}|${imp.specifiers}|${imp.typeOnly}`
-        if (!seen.has(key)) {
-            seen.set(key, imp)
-        }
-    }
-
-    // Sort by source for deterministic output
-    return Array.from(seen.values()).sort((a, b) => a.source.localeCompare(b.source))
-}
-
-/**
- * Emit import statements from structured metadata
- */
-export function emitImports(imports: ScriptImport[]): string {
-    const deduplicated = deduplicateImports(imports)
-
-    return deduplicated.map(imp => {
-        if (imp.sideEffect) {
-            return `import '${imp.source}';`
-        }
-        const typePrefix = imp.typeOnly ? 'type ' : ''
-        return `import ${typePrefix}${imp.specifiers} from '${imp.source}';`
-    }).join('\n')
-}
-
-/**
- * Transform all component scripts from collected ComponentScriptIR
- * 
- * Now synchronous since Acorn parsing is synchronous.
- * 
- * @param componentScripts - Array of component script IRs
- * @returns TransformAllResult with combined code and deduplicated imports
- */
-export function transformAllComponentScripts(
-    componentScripts: ComponentScriptIR[]
-): TransformAllResult {
-    if (!componentScripts || componentScripts.length === 0) {
-        return { code: '', imports: [] }
-    }
-
-    const allImports: ScriptImport[] = []
-
-    const factories = componentScripts
-        .filter(comp => comp.script && comp.script.trim().length > 0)
-        .map(comp => {
-            const result = transformComponentScript(
-                comp.name,
-                comp.script,
-                comp.props
-            )
-
-            // Collect imports
-            allImports.push(...result.imports)
-
-            return generateComponentFactory(comp.name, result.script, comp.props)
-        })
-
-    return {
-        code: factories.join('\n'),
-        imports: deduplicateImports(allImports)
-    }
-}