@zenithbuild/core 0.3.3 → 0.4.2

package/compiler/parse/parseTemplate.ts

@@ -30,52 +30,124 @@ function stripBlocks(html: string): string {
 }
 
 /**
- * Normalize attribute expressions before parsing
- * Replaces attr={expr} with attr="__ZEN_EXPR_base64" so parse5 can parse it
- * Handles nested braces for complex expressions like props={{ title: 'Home' }}
+ * Find the end of a balanced brace expression, handling strings and template literals
+ * Returns the index after the closing brace, or -1 if unbalanced
  */
-function normalizeAttributeExpressions(html: string): { normalized: string; expressions: Map<string, string> } {
-  const exprMap = new Map<string, string>()
-  let exprCounter = 0
-
-  // Improved matching to handle nested braces: attr={ { foo: { bar: 1 } } }
-  let lastPos = 0
-  let normalized = ''
+function findBalancedBraceEnd(html: string, startIndex: number): number {
+  let braceCount = 1
+  let i = startIndex + 1
+  let inString = false
+  let stringChar = ''
+  let inTemplate = false
+
+  while (i < html.length && braceCount > 0) {
+    const char = html[i]
+    const prevChar = i > 0 ? html[i - 1] : ''
+
+    // Handle escape sequences
+    if (prevChar === '\\') {
+      i++
+      continue
+    }
 
-  // Use a regex to find the start of an attribute expression: \w+={
-  const startRegex = /(\w+)=\{/g
-  let match
+    // Handle string literals (not inside template)
+    if (!inString && !inTemplate && (char === '"' || char === "'")) {
+      inString = true
+      stringChar = char
+      i++
+      continue
+    }
 
-  while ((match = startRegex.exec(html)) !== null) {
-    const attrName = match[1]
-    const startIndex = match.index + match[0].length - 1 // Index of '{'
+    if (inString && char === stringChar) {
+      inString = false
+      stringChar = ''
+      i++
+      continue
+    }
 
-    // Find matching closing brace
-    let braceCount = 1
-    let i = startIndex + 1
-    while (i < html.length && braceCount > 0) {
-      if (html[i] === '{') braceCount++
-      else if (html[i] === '}') braceCount--
+    // Handle template literals
+    if (!inString && !inTemplate && char === '`') {
+      inTemplate = true
       i++
+      continue
     }
 
-    if (braceCount === 0) {
-      const expr = html.substring(startIndex + 1, i - 1).trim()
-      const placeholder = `__ZEN_EXPR_${exprCounter++}`
-      exprMap.set(placeholder, expr)
+    if (inTemplate && char === '`') {
+      inTemplate = false
+      i++
+      continue
+    }
 
-      normalized += html.substring(lastPos, match.index)
-      normalized += `${attrName}="${placeholder}"`
-      lastPos = i
+    // Handle ${} inside template literals - need to track nested braces
+    if (inTemplate && char === '$' && html[i + 1] === '{') {
+      // Skip the ${ and count as opening brace
+      i += 2
+      let templateBraceCount = 1
+      while (i < html.length && templateBraceCount > 0) {
+        if (html[i] === '{') templateBraceCount++
+        else if (html[i] === '}') templateBraceCount--
+        i++
+      }
+      continue
+    }
 
-      // Update regex index to continue after the closing brace
-      startRegex.lastIndex = i
+    // Count braces only when not in strings or templates
+    if (!inString && !inTemplate) {
+      if (char === '{') braceCount++
+      else if (char === '}') braceCount--
     }
+
+    i++
   }
 
-  normalized += html.substring(lastPos)
+  return braceCount === 0 ? i : -1
+}
+
+/**
+ * Normalize expressions before parsing
+ * Replaces both attr={expr} and {textExpr} with placeholders so parse5 can parse the HTML correctly
+ * without being confused by tags or braces inside expressions.
+ * 
+ * Uses balanced brace parsing to correctly handle:
+ * - String literals with braces inside
+ * - Template literals with ${} interpolations
+ * - Arrow functions with object returns
+ * - Multi-line JSX expressions
+ */
+function normalizeAllExpressions(html: string): { normalized: string; expressions: Map<string, string> } {
+  const exprMap = new Map<string, string>()
+  let exprCounter = 0
+  let result = ''
+  let lastPos = 0
+
+  for (let i = 0; i < html.length; i++) {
+    // Look for { and check if it's an expression
+    // We handle both text expressions and attribute expressions: attr={...}
+    if (html[i] === '{') {
+      const j = findBalancedBraceEnd(html, i)
+
+      if (j !== -1 && j > i + 1) {
+        const expr = html.substring(i + 1, j - 1).trim()
+
+        // Skip empty expressions
+        if (expr.length === 0) {
+          i++
+          continue
+        }
+
+        const placeholder = `__ZEN_EXPR_${exprCounter++}`
+        exprMap.set(placeholder, expr)
 
-  return { normalized, expressions: exprMap }
+        result += html.substring(lastPos, i)
+        result += placeholder
+        lastPos = j
+        i = j - 1
+      }
+    }
+  }
+  result += html.substring(lastPos)
+
+  return { normalized: result, expressions: exprMap }
 }
 
 
@@ -103,14 +175,15 @@ function extractExpressionsFromText(
   text: string,
   baseLocation: SourceLocation,
   expressions: ExpressionIR[],
-  loopContext?: LoopContext  // Phase 7: Loop context from parent map expressions
+  normalizedExprs: Map<string, string>,
+  loopContext?: LoopContext
 ): { processedText: string; nodes: (TextNode | ExpressionNode)[] } {
   const nodes: (TextNode | ExpressionNode)[] = []
   let processedText = ''
   let currentIndex = 0
 
-  // Match { ... } expressions (non-greedy)
-  const expressionRegex = /\{([^}]+)\}/g
+  // Match __ZEN_EXPR_N placeholders
+  const expressionRegex = /__ZEN_EXPR_\d+/g
   let match
 
   while ((match = expressionRegex.exec(text)) !== null) {
@@ -127,12 +200,13 @@ function extractExpressionsFromText(
       processedText += beforeExpr
     }
 
-    // Extract expression
-    const exprCode = (match[1] || '').trim()
+    // Resolve placeholder to original expression code
+    const placeholder = match[0]
+    const exprCode = (normalizedExprs.get(placeholder) || '').trim()
     const exprId = generateExpressionId()
     const exprLocation: SourceLocation = {
       line: baseLocation.line,
-      column: baseLocation.column + match.index + 1 // +1 for opening brace
+      column: baseLocation.column + match.index
     }
 
     const exprIR: ExpressionIR = {
@@ -142,11 +216,9 @@ function extractExpressionsFromText(
     }
     expressions.push(exprIR)
 
-    // Phase 7: Detect if this is a map expression and extract loop context
+    // Phase 7: Loop context detection and attachment
     const mapLoopContext = extractLoopContextFromExpression(exprIR)
     const activeLoopContext = mergeLoopContext(loopContext, mapLoopContext)
-
-    // Phase 7: Attach loop context if expression references loop variables
     const attachedLoopContext = shouldAttachLoopContext(exprIR, activeLoopContext)
 
     nodes.push({
@@ -156,7 +228,7 @@ function extractExpressionsFromText(
       loopContext: attachedLoopContext
     })
 
-    processedText += `{${exprCode}}` // Keep in processed text for now
+    processedText += `{${exprCode}}`
     currentIndex = match.index + match[0].length
   }
 
@@ -260,7 +332,7 @@ function parseNode(
 
     // Extract expressions from text
     // Phase 7: Pass loop context to detect map expressions and attach context
-    const { nodes } = extractExpressionsFromText(text, location, expressions, parentLoopContext)
+    const { nodes } = extractExpressionsFromText(node.value, location, expressions, normalizedExprs, parentLoopContext)
 
     // If single text node with no expressions, return it
     if (nodes.length === 1 && nodes[0] && nodes[0].type === 'text') {
@@ -375,7 +447,7 @@ function parseNode(
           // Handle text nodes that may contain expressions
           const text = child.value || ''
           const location = getLocation(child, originalHtml)
-          const { nodes: textNodes } = extractExpressionsFromText(text, location, expressions, parentLoopContext)
+          const { nodes: textNodes } = extractExpressionsFromText(text, location, expressions, normalizedExprs, parentLoopContext)
 
           // Add all nodes from text (can be multiple: text + expression + text)
           for (const textNode of textNodes) {
@@ -422,12 +494,12 @@ export function parseTemplate(html: string, filePath: string): TemplateIR {
   // Strip script and style blocks
   let templateHtml = stripBlocks(html)
 
-  // Normalize attribute expressions so parse5 can parse them
-  const { normalized, expressions: normalizedExprs } = normalizeAttributeExpressions(templateHtml)
+  // Normalize all expressions so parse5 can parse them safely
+  const { normalized, expressions: normalizedExprs } = normalizeAllExpressions(templateHtml)
   templateHtml = normalized
 
   try {
-    // Parse HTML using parseFragment (handles fragments without html/body wrapper)
+    // Parse HTML using parseFragment
     const fragment = parseFragment(templateHtml, {
       sourceCodeLocationInfo: true
     })
@@ -436,7 +508,6 @@ export function parseTemplate(html: string, filePath: string): TemplateIR {
     const nodes: TemplateNode[] = []
 
     // Parse fragment children
-    // Phase 7: Start with no loop context (top-level expressions)
     if (fragment.childNodes) {
       for (const node of fragment.childNodes) {
         const parsed = parseNode(node, templateHtml, expressions, normalizedExprs, undefined)

package/compiler/parse/scriptAnalysis.ts

@@ -62,6 +62,12 @@ export function transformStateDeclarations(script: string): string {
     // Remove zenith/runtime imports
     transformed = transformed.replace(/import\s+{[^}]+}\s+from\s+['"]zenith\/runtime['"]\s*;?[ \t]*/g, '')
 
+    // Transform zenith:content imports to global lookups
+    transformed = transformed.replace(
+        /import\s*{\s*([^}]+)\s*}\s*from\s*['"]zenith:content['"]\s*;?/g,
+        (_, imports) => `const { ${imports.trim()} } = window.__zenith;`
+    )
+
     return transformed.trim()
 }
 

package/compiler/runtime/dataExposure.ts

@@ -7,6 +7,7 @@
 
 import type { ExpressionIR } from '../ir/types'
 import { CompilerError } from '../errors/compilerError'
+import { transformExpressionJSX } from '../transform/expressionTransformer'
 
 /**
  * Data dependency information for an expression
@@ -263,10 +264,17 @@ export function generateExplicitExpressionWrapper(
     ? `const __ctx = Object.assign({}, ${contextParts.join(', ')});\n      with (__ctx) {`
     : 'with (state) {'
 
-  const escapedCode = code.replace(/`/g, '\\`').replace(/\$/g, '\\$')
+  // Escape the code for use in a single-line comment (replace newlines with spaces)
+  const commentCode = code.replace(/[\r\n]+/g, ' ').replace(/\s+/g, ' ').substring(0, 100)
+
+  // JSON.stringify the code for error messages (properly escapes quotes, newlines, etc.)
+  const jsonEscapedCode = JSON.stringify(code)
+
+  // Transform JSX
+  const transformedCode = transformExpressionJSX(code)
 
   return `
-  // Expression: ${escapedCode}
+  // Expression: ${commentCode}${code.length > 100 ? '...' : ''}
   // Dependencies: ${JSON.stringify({
     loaderData: dependencies.usesLoaderData,
     props: dependencies.usesProps,
@@ -276,10 +284,10 @@ export function generateExplicitExpressionWrapper(
   const ${id} = (${paramList}) => {
     try {
       ${contextCode}
-        return ${code};
+        return ${transformedCode};
       }
     } catch (e) {
-      console.warn('[Zenith] Expression evaluation error:', ${JSON.stringify(code)}, e);
+      console.warn('[Zenith] Expression evaluation error:', ${jsonEscapedCode}, e);
       return undefined;
     }
   };`

package/compiler/runtime/generateHydrationBundle.ts

@@ -45,27 +45,32 @@ export function generateHydrationRuntime(): string {
       // Handle different result types
       if (result === null || result === undefined || result === false) {
         node.textContent = '';
-      } else if (typeof result === 'string' || typeof result === 'number') {
+      } else if (typeof result === 'string') {
+        if (result.trim().startsWith('<')) {
+          // Render as HTML
+          node.innerHTML = result;
+        } else {
+          node.textContent = result;
+        }
+      } else if (typeof result === 'number') {
         node.textContent = String(result);
       } else if (result instanceof Node) {
-        // Replace node with result node
-        if (node.parentNode) {
-          node.parentNode.replaceChild(result, node);
-        }
+        // Clear node and append result
+        node.innerHTML = '';
+        node.appendChild(result);
       } else if (Array.isArray(result)) {
         // Handle array results (for map expressions)
-        if (node.parentNode) {
-          const fragment = document.createDocumentFragment();
-          for (let i = 0; i < result.length; i++) {
-            const item = result[i];
-            if (item instanceof Node) {
-              fragment.appendChild(item);
-            } else {
-              fragment.appendChild(document.createTextNode(String(item)));
-            }
+        node.innerHTML = '';
+        const fragment = document.createDocumentFragment();
+        for (let i = 0; i < result.length; i++) {
+          const item = result[i];
+          if (item instanceof Node) {
+            fragment.appendChild(item);
+          } else {
+            fragment.appendChild(document.createTextNode(String(item)));
           }
-          node.parentNode.replaceChild(fragment, node);
         }
+        node.appendChild(fragment);
       } else {
         node.textContent = String(result);
       }

package/compiler/runtime/transformIR.ts

@@ -118,20 +118,16 @@ ${parts.hydrationRuntime}
 
 ${parts.navigationRuntime}
 
-${parts.stateInitCode ? `// State initialization
-${parts.stateInitCode}` : ''}
-
 ${parts.stylesCode ? `// Style injection
 ${parts.stylesCode}` : ''}
 
-// User script code and function registration
-(function() {
-  'use strict';
-  
+// User script code - executed first to define variables needed by state initialization
 ${parts.scriptCode ? parts.scriptCode : ''}
 
 ${functionRegistrations}
-})();
+
+${parts.stateInitCode ? `// State initialization
+${parts.stateInitCode}` : ''}
 
 // Export hydration functions
 if (typeof window !== 'undefined') {

package/compiler/runtime/wrapExpression.ts

@@ -12,6 +12,8 @@ import type { ExpressionDataDependencies } from './dataExposure'
 import { generateExplicitExpressionWrapper } from './dataExposure'
 import { wrapExpressionWithLoopContext } from './wrapExpressionWithLoop'
 
+import { transformExpressionJSX } from '../transform/expressionTransformer'
+
 /**
  * Wrap an expression into a runtime function with explicit data arguments
  * 
@@ -23,29 +25,38 @@ export function wrapExpression(
   dependencies?: ExpressionDataDependencies,
   loopContext?: LoopContext  // Phase 7: Loop context for map expressions
 ): string {
+  const { id, code } = expr
+
   // Phase 7: If loop context is provided, use loop-aware wrapper
   if (loopContext && loopContext.variables.length > 0) {
     return wrapExpressionWithLoopContext(expr, loopContext, dependencies)
   }
-  
+
   // If dependencies are provided, use explicit wrapper (Phase 6)
   if (dependencies) {
     return generateExplicitExpressionWrapper(expr, dependencies)
   }
-  
+
   // Fallback to legacy wrapper (backwards compatibility)
-  const { id, code } = expr
-  const escapedCode = code.replace(/`/g, '\\`').replace(/\$/g, '\\$')
-  
+  // Transform JSX-like tags inside expression code
+  const transformedCode = transformExpressionJSX(code)
+  // Escape the code for use in a single-line comment (replace newlines with spaces)
+  const commentCode = code.replace(/[\r\n]+/g, ' ').replace(/\s+/g, ' ').substring(0, 100)
+  const jsonEscapedCode = JSON.stringify(code)
+
   return `
-  // Expression: ${escapedCode}
+  // Expression: ${commentCode}${code.length > 100 ? '...' : ''}
   const ${id} = (state) => {
     try {
+      // Expose zenith helpers for JSX and content
+      const __zenith = window.__zenith || {};
+      const zenCollection = __zenith.zenCollection || ((name) => ({ get: () => [] }));
+      
       with (state) {
-        return ${code};
+        return ${transformedCode};
       }
     } catch (e) {
-      console.warn('[Zenith] Expression evaluation error:', ${JSON.stringify(code)}, e);
+      console.warn('[Zenith] Expression evaluation error:', ${jsonEscapedCode}, e);
       return undefined;
     }
   };`
@@ -65,19 +76,19 @@ export function generateExpressionWrappers(
   if (expressions.length === 0) {
     return ''
   }
-  
+
   if (dependencies && dependencies.length === expressions.length) {
     // Use explicit wrappers with dependencies and optional loop contexts
     return expressions
       .map((expr, index) => {
-        const loopCtx = loopContexts && loopContexts[index] !== undefined 
-          ? loopContexts[index] 
+        const loopCtx = loopContexts && loopContexts[index] !== undefined
+          ? loopContexts[index]
           : undefined
         return wrapExpression(expr, dependencies[index], loopCtx)
       })
       .join('\n')
   }
-  
+
   // Fallback to legacy wrappers (no dependencies, no loop contexts)
   return expressions.map(expr => wrapExpression(expr)).join('\n')
 }

package/compiler/runtime/wrapExpressionWithLoop.ts

@@ -9,6 +9,7 @@
 
 import type { ExpressionIR, LoopContext } from '../ir/types'
 import type { ExpressionDataDependencies } from './dataExposure'
+import { transformExpressionJSX } from '../transform/expressionTransformer'
 
 /**
  * Generate an expression wrapper that accepts loop context
@@ -59,6 +60,12 @@ export function wrapExpressionWithLoopContext(
     ? `const __ctx = Object.assign({}, ${contextMerge.join(', ')});`
     : `const __ctx = loopContext || {};`
 
+  // Transform JSX
+  // The fix for 'undefined' string assignment is applied within transformExpressionJSX
+  // by ensuring that any remaining text is properly quoted as a string literal
+  // or recognized as an existing h() call.
+  const transformedCode = transformExpressionJSX(code)
+
   return `
   // Expression with loop context: ${escapedCode}
   // Loop variables: ${loopContext.variables.join(', ')}
@@ -66,7 +73,7 @@ export function wrapExpressionWithLoopContext(
     try {
       ${contextObject}
       with (__ctx) {
-        return ${code};
+        return ${transformedCode};
       }
     } catch (e) {
       console.warn('[Zenith] Expression evaluation error for "${escapedCode}":', e);
@@ -74,4 +81,3 @@ export function wrapExpressionWithLoopContext(
     }
   };`
 }
-

package/compiler/ssg-build.ts

@@ -19,6 +19,7 @@ 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"
+import { loadContent } from "../cli/utils/content"
 
 // ============================================
 // Types
@@ -130,7 +131,7 @@ function compilePage(
  * Static pages: no JS references
  * Hydrated pages: bundle.js + page-specific JS
  */
-function generatePageHTML(page: CompiledPage, globalStyles: string): string {
+function generatePageHTML(page: CompiledPage, globalStyles: string, contentData: any): string {
     const { html, styles, analysis, routePath, pageScript } = page
 
     // Combine styles
@@ -141,6 +142,7 @@ function generatePageHTML(page: CompiledPage, globalStyles: string): string {
     let scriptTags = ''
     if (analysis.needsHydration) {
         scriptTags = `
+  <script>window.__ZENITH_CONTENT__ = ${JSON.stringify(contentData)};</script>
   <script src="/assets/bundle.js"></script>`
 
         if (pageScript) {
@@ -238,6 +240,8 @@ ${page.pageScript}
  */
 export function buildSSG(options: SSGBuildOptions): void {
     const { pagesDir, outDir, baseDir = path.dirname(pagesDir) } = options
+    const contentDir = path.join(baseDir, 'content')
+    const contentData = loadContent(contentDir)
 
     console.log('🔨 Zenith SSG Build')
     console.log(`   Pages: ${pagesDir}`)
@@ -316,7 +320,7 @@ export function buildSSG(options: SSGBuildOptions): void {
         fs.mkdirSync(pageOutDir, { recursive: true })
 
         // Generate and write HTML
-        const html = generatePageHTML(page, globalStyles)
+        const html = generatePageHTML(page, globalStyles, contentData)
         fs.writeFileSync(path.join(pageOutDir, 'index.html'), html)
 
         // Write page-specific JS if needed
@@ -347,7 +351,7 @@ export function buildSSG(options: SSGBuildOptions): void {
         if (fs.existsSync(custom404Path)) {
             try {
                 const compiled = compilePage(custom404Path, pagesDir, baseDir)
-                const html = generatePageHTML(compiled, globalStyles)
+                const html = generatePageHTML(compiled, globalStyles, contentData)
                 fs.writeFileSync(path.join(outDir, '404.html'), html)
                 console.log('📦 Generated 404.html (custom)')
                 has404 = true