@zenithbuild/core 0.1.0 → 0.3.1

package/compiler/ssg-build.ts

@@ -0,0 +1,412 @@
+/**
+ * Zenith SSG Build System
+ * 
+ * SSG-first (Static Site Generation) build system that outputs:
+ * - Per-page HTML files: dist/{route}/index.html
+ * - Shared runtime: dist/assets/bundle.js
+ * - Global styles: dist/assets/styles.css
+ * - Page-specific JS only for pages needing hydration: dist/assets/page_{name}.js
+ * 
+ * Static pages get pure HTML+CSS, no JavaScript.
+ * Hydrated pages reference the shared bundle.js and their page-specific JS.
+ */
+
+import fs from "fs"
+import path from "path"
+import { compileZenSource } from "./index"
+import { discoverLayouts } from "./discovery/layouts"
+import { processLayout } from "./transform/layoutProcessor"
+import { discoverPages, generateRouteDefinition } from "../router/manifest"
+import { analyzePageSource, getAnalysisSummary, getBuildOutputType, type PageAnalysis } from "./build-analyzer"
+import { generateBundleJS } from "../runtime/bundle-generator"
+
+// ============================================
+// Types
+// ============================================
+
+interface CompiledPage {
+    /** Route path like "/" or "/about" or "/blog/:id" */
+    routePath: string
+    /** Original file path */
+    filePath: string
+    /** Compiled HTML content */
+    html: string
+    /** Page-specific JavaScript (empty if static) */
+    pageScript: string
+    /** Page styles */
+    styles: string[]
+    /** Route score for matching priority */
+    score: number
+    /** Dynamic route parameter names */
+    paramNames: string[]
+    /** Build analysis result */
+    analysis: PageAnalysis
+    /** Output directory relative to dist/ */
+    outputDir: string
+}
+
+export interface SSGBuildOptions {
+    /** Pages directory (e.g., app/pages) */
+    pagesDir: string
+    /** Output directory (e.g., app/dist) */
+    outDir: string
+    /** Base directory for components/layouts (e.g., app/) */
+    baseDir?: string
+    /** Include source maps */
+    sourceMaps?: boolean
+}
+
+// ============================================
+// Page Compilation
+// ============================================
+
+/**
+ * Compile a single page file for SSG output
+ */
+function compilePage(
+    pagePath: string,
+    pagesDir: string,
+    baseDir: string = process.cwd()
+): CompiledPage {
+    const source = fs.readFileSync(pagePath, 'utf-8')
+
+    // Analyze page requirements
+    const analysis = analyzePageSource(source)
+
+    // Discover layouts
+    const layoutsDir = path.join(baseDir, 'layouts')
+    const layouts = discoverLayouts(layoutsDir)
+
+    // Process with layout if one is used
+    let processedSource = source
+    const layoutToUse = layouts.get('DefaultLayout')
+
+    if (layoutToUse) {
+        processedSource = processLayout(source, layoutToUse)
+    }
+
+    // Compile with new pipeline
+    const result = compileZenSource(processedSource, pagePath)
+
+    if (!result.finalized) {
+        throw new Error(`Compilation failed for ${pagePath}: No finalized output`)
+    }
+
+    // Extract compiled output
+    const html = result.finalized.html
+    const js = result.finalized.js || ''
+    const styles = result.finalized.styles || []
+
+    // Generate route definition
+    const routeDef = generateRouteDefinition(pagePath, pagesDir)
+
+    // Determine output directory from route path
+    // "/" -> "index", "/about" -> "about", "/blog/post" -> "blog/post"
+    let outputDir = routeDef.path === '/' ? 'index' : routeDef.path.replace(/^\//, '')
+
+    // Handle dynamic routes - they'll be placeholders for now
+    // [id] segments become _id_ for folder names
+    outputDir = outputDir.replace(/\[([^\]]+)\]/g, '_$1_')
+
+    return {
+        routePath: routeDef.path,
+        filePath: pagePath,
+        html,
+        pageScript: analysis.needsHydration ? js : '',
+        styles,
+        score: routeDef.score,
+        paramNames: routeDef.paramNames,
+        analysis,
+        outputDir
+    }
+}
+
+// ============================================
+// HTML Generation
+// ============================================
+
+/**
+ * Generate the final HTML for a page
+ * Static pages: no JS references
+ * Hydrated pages: bundle.js + page-specific JS
+ */
+function generatePageHTML(page: CompiledPage, globalStyles: string): string {
+    const { html, styles, analysis, routePath, pageScript } = page
+
+    // Combine styles
+    const pageStyles = styles.join('\n')
+    const allStyles = globalStyles + '\n' + pageStyles
+
+    // Build script tags only if needed
+    let scriptTags = ''
+    if (analysis.needsHydration) {
+        scriptTags = `
+  <script src="/assets/bundle.js"></script>`
+
+        if (pageScript) {
+            // Generate a safe filename from route path
+            const pageJsName = routePath === '/'
+                ? 'page_index.js'
+                : `page_${routePath.replace(/^\//, '').replace(/\//g, '_')}.js`
+            scriptTags += `
+  <script src="/assets/${pageJsName}"></script>`
+        }
+    }
+
+    // Check if HTML already has full document structure
+    const hasHtmlTag = /<html[^>]*>/i.test(html)
+
+    if (hasHtmlTag) {
+        // HTML already has structure from layout - inject styles and scripts
+        let finalHtml = html
+
+        // Inject styles into <head> if not already there
+        if (!/<style[^>]*>/.test(finalHtml)) {
+            finalHtml = finalHtml.replace(
+                '</head>',
+                `  <style>\n${allStyles}\n  </style>\n</head>`
+            )
+        }
+
+        // Inject scripts before </body>
+        if (scriptTags) {
+            finalHtml = finalHtml.replace(
+                '</body>',
+                `${scriptTags}\n</body>`
+            )
+        }
+
+        return finalHtml
+    }
+
+    // Generate full HTML document for pages without layout
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Zenith App</title>
+  <style>
+${allStyles}
+  </style>
+</head>
+<body>
+${html}${scriptTags}
+</body>
+</html>`
+}
+
+// ============================================
+// Asset Generation
+// ============================================
+
+/**
+ * Generate page-specific JavaScript
+ */
+function generatePageJS(page: CompiledPage): string {
+    if (!page.pageScript) return ''
+
+    // Wrap in IIFE for isolation
+    return `// Zenith Page: ${page.routePath}
+(function() {
+  'use strict';
+  
+${page.pageScript}
+
+  // Trigger hydration after DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() {
+      if (window.__zenith && window.__zenith.triggerMount) {
+        window.__zenith.triggerMount();
+      }
+    });
+  } else {
+    if (window.__zenith && window.__zenith.triggerMount) {
+      window.__zenith.triggerMount();
+    }
+  }
+})();
+`
+}
+
+// ============================================
+// Main Build Function
+// ============================================
+
+/**
+ * Build all pages using SSG approach
+ */
+export function buildSSG(options: SSGBuildOptions): void {
+    const { pagesDir, outDir, baseDir = path.dirname(pagesDir) } = options
+
+    console.log('🔨 Zenith SSG Build')
+    console.log(`   Pages: ${pagesDir}`)
+    console.log(`   Output: ${outDir}`)
+    console.log('')
+
+    // Clean and create output directory
+    if (fs.existsSync(outDir)) {
+        fs.rmSync(outDir, { recursive: true, force: true })
+    }
+    fs.mkdirSync(outDir, { recursive: true })
+    fs.mkdirSync(path.join(outDir, 'assets'), { recursive: true })
+
+    // Discover pages
+    const pageFiles = discoverPages(pagesDir)
+
+    if (pageFiles.length === 0) {
+        console.warn('⚠️ No pages found in', pagesDir)
+        return
+    }
+
+    console.log(`📄 Found ${pageFiles.length} page(s)`)
+
+    // Compile all pages
+    const compiledPages: CompiledPage[] = []
+    let hasHydratedPages = false
+
+    for (const pageFile of pageFiles) {
+        const relativePath = path.relative(pagesDir, pageFile)
+        console.log(`   Compiling: ${relativePath}`)
+
+        try {
+            const compiled = compilePage(pageFile, pagesDir, baseDir)
+            compiledPages.push(compiled)
+
+            if (compiled.analysis.needsHydration) {
+                hasHydratedPages = true
+            }
+
+            const outputType = getBuildOutputType(compiled.analysis)
+            const summary = getAnalysisSummary(compiled.analysis)
+            console.log(`     → ${outputType.toUpperCase()} [${summary}]`)
+        } catch (error: any) {
+            console.error(`   ❌ Error: ${error.message}`)
+            throw error
+        }
+    }
+
+    console.log('')
+
+    // Load global styles
+    let globalStyles = ''
+    const globalCssPath = path.join(baseDir, 'styles', 'global.css')
+    if (fs.existsSync(globalCssPath)) {
+        globalStyles = fs.readFileSync(globalCssPath, 'utf-8')
+        console.log('📦 Loaded global.css')
+    }
+
+    // Write bundle.js if any pages need hydration
+    if (hasHydratedPages) {
+        const bundleJS = generateBundleJS()
+        fs.writeFileSync(path.join(outDir, 'assets', 'bundle.js'), bundleJS)
+        console.log('📦 Generated assets/bundle.js')
+    }
+
+    // Write global styles
+    if (globalStyles) {
+        fs.writeFileSync(path.join(outDir, 'assets', 'styles.css'), globalStyles)
+        console.log('📦 Generated assets/styles.css')
+    }
+
+    // Write each page
+    for (const page of compiledPages) {
+        // Create output directory
+        const pageOutDir = path.join(outDir, page.outputDir)
+        fs.mkdirSync(pageOutDir, { recursive: true })
+
+        // Generate and write HTML
+        const html = generatePageHTML(page, globalStyles)
+        fs.writeFileSync(path.join(pageOutDir, 'index.html'), html)
+
+        // Write page-specific JS if needed
+        if (page.pageScript) {
+            const pageJsName = page.routePath === '/'
+                ? 'page_index.js'
+                : `page_${page.routePath.replace(/^\//, '').replace(/\//g, '_')}.js`
+            const pageJS = generatePageJS(page)
+            fs.writeFileSync(path.join(outDir, 'assets', pageJsName), pageJS)
+        }
+
+        console.log(`✅ ${page.outputDir}/index.html`)
+    }
+
+    // Copy favicon if exists
+    const faviconPath = path.join(baseDir, 'favicon.ico')
+    if (fs.existsSync(faviconPath)) {
+        fs.copyFileSync(faviconPath, path.join(outDir, 'favicon.ico'))
+        console.log('📦 Copied favicon.ico')
+    }
+
+    // Generate 404 page
+    const custom404Candidates = ['404.zen', '+404.zen', 'not-found.zen']
+    let has404 = false
+
+    for (const candidate of custom404Candidates) {
+        const custom404Path = path.join(pagesDir, candidate)
+        if (fs.existsSync(custom404Path)) {
+            try {
+                const compiled = compilePage(custom404Path, pagesDir, baseDir)
+                const html = generatePageHTML(compiled, globalStyles)
+                fs.writeFileSync(path.join(outDir, '404.html'), html)
+                console.log('📦 Generated 404.html (custom)')
+                has404 = true
+                if (compiled.pageScript) {
+                    const pageJS = generatePageJS(compiled)
+                    fs.writeFileSync(path.join(outDir, 'assets', 'page_404.js'), pageJS)
+                }
+            } catch (error: any) {
+                console.warn(`   ⚠️ Could not compile ${candidate}: ${error.message}`)
+            }
+            break
+        }
+    }
+
+    if (!has404) {
+        const default404HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Page Not Found | Zenith</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: system-ui, sans-serif; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: #f1f5f9; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
+    .container { text-align: center; padding: 2rem; }
+    .error-code { font-size: 8rem; font-weight: 800; background: linear-gradient(135deg, #3b82f6, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 1rem; }
+    h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: #e2e8f0; }
+    .message { color: #94a3b8; margin-bottom: 2rem; }
+    a { display: inline-block; background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; text-decoration: none; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 500; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="error-code">404</div>
+    <h1>Page Not Found</h1>
+    <p class="message">The page you're looking for doesn't exist.</p>
+    <a href="/">← Go Home</a>
+  </div>
+</body>
+</html>`
+        fs.writeFileSync(path.join(outDir, '404.html'), default404HTML)
+        console.log('📦 Generated 404.html (default)')
+    }
+
+    // Summary
+    console.log('')
+    console.log('✨ Build complete!')
+    console.log(`   Static pages: ${compiledPages.filter(p => p.analysis.isStatic).length}`)
+    console.log(`   Hydrated pages: ${compiledPages.filter(p => p.analysis.needsHydration).length}`)
+    console.log(`   SSR pages: ${compiledPages.filter(p => p.analysis.needsSSR).length}`)
+    console.log('')
+
+    // Route manifest
+    console.log('📍 Routes:')
+    for (const page of compiledPages.sort((a, b) => b.score - a.score)) {
+        const type = getBuildOutputType(page.analysis)
+        console.log(`   ${page.routePath.padEnd(20)} → ${page.outputDir}/index.html (${type})`)
+    }
+}
+
+// Legacy export for backwards compatibility
+export { buildSSG as buildSPA }

package/compiler/transform/layoutProcessor.ts

@@ -0,0 +1,132 @@
+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/transformNode.ts

@@ -10,7 +10,7 @@ import type { Binding } from '../output/types'
 let bindingIdCounter = 0
 
 function generateBindingId(): string {
-  return `exp_${bindingIdCounter++}`
+  return `expr_${bindingIdCounter++}`
 }
 
 /**
@@ -23,12 +23,12 @@ export function transformNode(
   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
@@ -36,11 +36,11 @@ export function transformNode(
         if (!expr) {
           throw new Error(`Expression ${exprNode.expression} not found`)
         }
-        
-        const bindingId = generateBindingId()
+
+        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',
@@ -49,14 +49,14 @@ export function transformNode(
           location: expr.location,
           loopContext: activeLoopContext  // Phase 7: Attach loop context to binding
         })
-        
+
         return `<span data-zen-text="${bindingId}"></span>`
       }
-      
+
       case 'element': {
         const elNode = node as ElementNode
         const tag = elNode.tag
-        
+
         // Build attributes
         const attrs: string[] = []
         for (const attr of elNode.attributes) {
@@ -67,10 +67,10 @@ export function transformNode(
           } else {
             // Expression attribute
             const expr = attr.value as ExpressionIR
-            const bindingId = generateBindingId()
+            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',
@@ -79,35 +79,35 @@ export function transformNode(
               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 }
 }