@zenithbuild/core 0.6.3 → 1.1.0

package/cli/commands/dev.ts

@@ -1,3 +1,23 @@
+/**
+ * @zenith/cli - Dev Command
+ * 
+ * Development server with HMR support.
+ * 
+ * ═══════════════════════════════════════════════════════════════════════════════
+ * CLI HARDENING: BLIND ORCHESTRATOR PATTERN
+ * ═══════════════════════════════════════════════════════════════════════════════
+ * 
+ * This file follows the CLI Hardening Plan:
+ * - NO plugin-specific branching (no `if (hasContentPlugin)`)
+ * - NO semantic helpers (no `getContentData()`)
+ * - NO plugin type imports or casts
+ * - ONLY opaque data forwarding via hooks
+ * 
+ * The CLI dispatches lifecycle hooks and collects payloads.
+ * It never understands what the data means.
+ * ═══════════════════════════════════════════════════════════════════════════════
+ */
+
 import path from 'path'
 import fs from 'fs'
 import { serve, type ServerWebSocket } from 'bun'
@@ -7,13 +27,19 @@ import * as brand from '../utils/branding'
 import { compileZenSource } from '../../compiler/index'
 import { discoverLayouts } from '../../compiler/discovery/layouts'
 import { processLayout } from '../../compiler/transform/layoutProcessor'
-import { generateRouteDefinition } from '../../router/manifest'
+import { generateRouteDefinition } from '@zenithbuild/router'
 import { generateBundleJS } from '../../runtime/bundle-generator'
-import { loadContent } from '../utils/content'
 import { loadZenithConfig } from '../../core/config/loader'
-import { PluginRegistry, createPluginContext } from '../../core/plugins/registry'
-import type { ContentItem } from '../../core/config/types'
+import { PluginRegistry, createPluginContext, getPluginDataByNamespace } from '../../core/plugins/registry'
 import { compileCssAsync, resolveGlobalsCss } from '../../compiler/css'
+import {
+    createBridgeAPI,
+    runPluginHooks,
+    collectHookReturns,
+    buildRuntimeEnvelope,
+    clearHooks,
+    type HookContext
+} from '../../core/plugins/bridge'
 
 export interface DevOptions {
     port?: number
@@ -83,39 +109,48 @@ export async function dev(options: DevOptions = {}): Promise<void> {
     const port = options.port || parseInt(process.env.PORT || '3000', 10)
     const pagesDir = project.pagesDir
     const rootDir = project.root
-    const contentDir = path.join(rootDir, 'content')
 
     // Load zenith.config.ts if present
     const config = await loadZenithConfig(rootDir)
     const registry = new PluginRegistry()
+    const bridgeAPI = createBridgeAPI()
+
+    // Clear any previously registered hooks (important for restarts)
+    clearHooks()
 
     console.log('[Zenith] Config plugins:', config.plugins?.length ?? 0)
 
-    // Register plugins from config
+    // ============================================
+    // Plugin Registration (Unconditional)
+    // ============================================
+    // CLI registers ALL plugins without checking which ones exist.
+    // Each plugin decides what hooks to register.
     for (const plugin of config.plugins || []) {
         console.log('[Zenith] Registering plugin:', plugin.name)
         registry.register(plugin)
+
+        // Let plugin register its CLI hooks (if it wants to)
+        // CLI does NOT check what the plugin is - it just offers the API
+        if (plugin.registerCLI) {
+            plugin.registerCLI(bridgeAPI)
+        }
     }
 
-    // Initialize content data
-    let contentData: Record<string, ContentItem[]> = {}
-
-    // Initialize plugins with context
-    const hasContentPlugin = registry.has('zenith-content')
-    console.log('[Zenith] Has zenith-content plugin:', hasContentPlugin)
-
-    if (hasContentPlugin) {
-        await registry.initAll(createPluginContext(rootDir, (data) => {
-            console.log('[Zenith] Content plugin set data, collections:', Object.keys(data))
-            contentData = data
-        }))
-    } else {
-        // Fallback to legacy content loading if no content plugin configured
-        console.log('[Zenith] Using legacy content loading from:', contentDir)
-        contentData = loadContent(contentDir)
+    // ============================================
+    // Plugin Initialization (Unconditional)
+    // ============================================
+    // Initialize ALL plugins unconditionally.
+    // If no plugins, this is a no-op. CLI doesn't branch on plugin presence.
+    await registry.initAll(createPluginContext(rootDir))
+
+    // Create hook context - CLI provides this but NEVER uses getPluginData itself
+    const hookCtx: HookContext = {
+        projectRoot: rootDir,
+        getPluginData: getPluginDataByNamespace
     }
 
-    console.log('[Zenith] Content collections loaded:', Object.keys(contentData))
+    // Dispatch lifecycle hook - plugins decide if they care
+    await runPluginHooks('cli:dev:start', hookCtx)
 
     // ============================================
     // CSS Compilation (Compiler-Owned)
@@ -189,10 +224,50 @@ export async function dev(options: DevOptions = {}): Promise<void> {
         }
     }
 
-    // Set up file watching for HMR
+    /**
+     * Generate dev HTML with plugin data envelope
+     * 
+     * CLI collects payloads from plugins via 'cli:runtime:collect' hook.
+     * It serializes blindly - never inspecting what's inside.
+     */
+    async function generateDevHTML(page: CompiledPage): Promise<string> {
+        // Collect runtime payloads from ALL plugins
+        // CLI doesn't know which plugins will respond - it just collects
+        const payloads = await collectHookReturns('cli:runtime:collect', hookCtx)
+
+        // Build envelope - CLI doesn't know what's inside
+        const envelope = buildRuntimeEnvelope(payloads)
+
+        // Escape </script> sequences in JSON to prevent breaking the script tag
+        const envelopeJson = JSON.stringify(envelope).replace(/<\//g, '<\\/')
+
+        // Single neutral injection point - NOT plugin-specific
+        const runtimeTag = `<script src="/runtime.js"></script>`
+        const pluginDataTag = `<script>window.__ZENITH_PLUGIN_DATA__ = ${envelopeJson};</script>`
+        const scriptTag = `<script type="module">\n${page.script}\n</script>`
+        const allScripts = `${runtimeTag}\n${pluginDataTag}\n${scriptTag}`
+
+        return page.html.includes('</body>')
+            ? page.html.replace('</body>', `${allScripts}\n</body>`)
+            : `${page.html}\n${allScripts}`
+    }
+
+    // ============================================
+    // File Watcher (Plugin-Agnostic)
+    // ============================================
+    // CLI watches files but delegates decisions to plugins via hooks.
+    // No branching on file types that are "content" vs "not content".
     const watcher = fs.watch(path.join(pagesDir, '..'), { recursive: true }, async (event, filename) => {
         if (!filename) return
 
+        // Dispatch file change hook to ALL plugins
+        // Each plugin decides if it cares about this file
+        await runPluginHooks('cli:dev:file-change', {
+            ...hookCtx,
+            filename,
+            event
+        })
+
         if (filename.endsWith('.zen')) {
             logger.hmr('Page', filename)
 
@@ -223,16 +298,13 @@ export async function dev(options: DevOptions = {}): Promise<void> {
             for (const client of clients) {
                 client.send(JSON.stringify({ type: 'style-update', url: '/assets/styles.css' }))
             }
-        } else if (filename.startsWith('content') || filename.includes('zenith-docs')) {
-            logger.hmr('Content', filename)
-            // Reinitialize content plugin to reload data
-            if (registry.has('zenith-content')) {
-                registry.initAll(createPluginContext(rootDir, (data) => {
-                    contentData = data
-                }))
-            } else {
-                contentData = loadContent(contentDir)
-            }
+        } else {
+            // For all other file changes, re-initialize plugins unconditionally
+            // Plugins decide internally whether they need to reload data
+            // CLI does NOT branch on "is this a content file"
+            await registry.initAll(createPluginContext(rootDir))
+
+            // Broadcast reload for any non-code file changes
             for (const client of clients) {
                 client.send(JSON.stringify({ type: 'reload' }))
             }
@@ -305,7 +377,7 @@ export async function dev(options: DevOptions = {}): Promise<void> {
 
                 if (cached) {
                     const renderStart = performance.now()
-                    const html = generateDevHTML(cached, contentData)
+                    const html = await generateDevHTML(cached)
                     const renderEnd = performance.now()
 
                     const totalTime = Math.round(performance.now() - startTime)
@@ -373,16 +445,3 @@ function findPageForRoute(route: string, pagesDir: string): string | null {
 
     return null
 }
-
-function generateDevHTML(page: CompiledPage, contentData: any = {}): string {
-    const runtimeTag = `<script src="/runtime.js"></script>`
-    // Escape </script> sequences in JSON content to prevent breaking the script tag
-    const contentJson = JSON.stringify(contentData).replace(/<\//g, '<\\/')
-    const contentTag = `<script>window.__ZENITH_CONTENT__ = ${contentJson};</script>`
-    // Use type="module" to support ES6 imports from npm packages
-    const scriptTag = `<script type="module">\n${page.script}\n</script>`
-    const allScripts = `${runtimeTag}\n${contentTag}\n${scriptTag}`
-    return page.html.includes('</body>')
-        ? page.html.replace('</body>', `${allScripts}\n</body>`)
-        : `${page.html}\n${allScripts}`
-}

package/compiler/discovery/componentDiscovery.ts

@@ -1,14 +1,33 @@
 /**
  * Component Discovery
  * 
- * Discovers and catalogs components in a Zenith project
- * Similar to layout discovery but for reusable components
+ * Discovers and catalogs components in a Zenith project.
+ * Components are auto-imported based on filename:
+ * 
+ * Auto-Import Rules:
+ *   - Component name = filename (without .zen extension)
+ *   - Subdirectories are for organization, not namespacing
+ *   - Name collisions produce compile-time errors with clear messages
+ * 
+ * Examples:
+ *   components/Header.zen → <Header />
+ *   components/sections/HeroSection.zen → <HeroSection />
+ *   components/ui/buttons/Primary.zen → <Primary />
+ * 
+ * If you have name collisions (same filename in different directories),
+ * you must rename one of the components.
+ * 
+ * Requirements:
+ *   - Auto-import resolution is deterministic and compile-time only
+ *   - Name collisions produce compile-time errors with clear messages
+ *   - No runtime component registration or global singleton registries
  */
 
 import * as fs from 'fs'
 import * as path from 'path'
 import { parseZenFile } from '../parse/parseZenFile'
-import type { TemplateNode } from '../ir/types'
+import { CompilerError } from '../errors/compilerError'
+import type { TemplateNode, ExpressionIR } from '../ir/types'
 
 export interface SlotDefinition {
     name: string | null  // null = default slot, string = named slot
@@ -19,10 +38,12 @@ export interface SlotDefinition {
 }
 
 export interface ComponentMetadata {
-    name: string          // Component name (e.g., "Card", "Button")
+    name: string          // Component name (e.g., "Card", "HeroSection")
     path: string          // Absolute path to .zen file
+    relativePath: string  // Relative path from components directory
     template: string      // Raw template HTML
     nodes: TemplateNode[] // Parsed template nodes
+    expressions: ExpressionIR[] // Expressions referenced by nodes
     slots: SlotDefinition[]
     props: string[]       // Declared props
     styles: string[]      // Raw CSS from <style> blocks
@@ -33,12 +54,18 @@ export interface ComponentMetadata {
 }
 
 /**
- * Discover all components in a directory
+ * Discover all components in a directory with auto-import naming
+ * 
+ * Components are named by their filename (without .zen extension).
+ * Subdirectories are for organization only and do not affect the component name.
+ * 
  * @param baseDir - Base directory to search (e.g., src/components)
  * @returns Map of component name to metadata
+ * @throws CompilerError on name collisions
  */
 export function discoverComponents(baseDir: string): Map<string, ComponentMetadata> {
     const components = new Map<string, ComponentMetadata>()
+    const collisions = new Map<string, string[]>() // name → [relative paths]
 
     // Check if components directory exists
     if (!fs.existsSync(baseDir)) {
@@ -50,15 +77,43 @@ export function discoverComponents(baseDir: string): Map<string, ComponentMetada
 
     for (const filePath of zenFiles) {
         try {
-            const metadata = parseComponentFile(filePath)
+            const metadata = parseComponentFile(filePath, baseDir)
             if (metadata) {
-                components.set(metadata.name, metadata)
+                // Check for collision
+                if (components.has(metadata.name)) {
+                    const existing = components.get(metadata.name)!
+                    if (!collisions.has(metadata.name)) {
+                        collisions.set(metadata.name, [existing.relativePath])
+                    }
+                    collisions.get(metadata.name)!.push(metadata.relativePath)
+                } else {
+                    components.set(metadata.name, metadata)
+                }
             }
         } catch (error: any) {
             console.warn(`[Zenith] Failed to parse component ${filePath}: ${error.message}`)
         }
     }
 
+    // Report all collisions as a single error
+    if (collisions.size > 0) {
+        const collisionMessages = Array.from(collisions.entries())
+            .map(([name, paths]) => {
+                const pathList = paths.map(p => `  - ${p}`).join('\n')
+                return `Component name "${name}" is used by multiple files:\n${pathList}`
+            })
+            .join('\n\n')
+        
+        throw new CompilerError(
+            `Component name collision detected!\n\n${collisionMessages}\n\n` +
+            `Each component must have a unique filename.\n` +
+            `To fix: Rename one of the conflicting components to have a unique name.`,
+            baseDir,
+            0,
+            0
+        )
+    }
+
     return components
 }
 
@@ -89,13 +144,20 @@ function findZenFiles(dir: string): string[] {
 
 /**
  * Parse a component file and extract metadata
+ * 
+ * Component name is derived from the filename (without .zen extension).
+ * 
+ * @param filePath - Absolute path to the component file
+ * @param baseDir - Base directory for component discovery (used for relative path)
  */
-function parseComponentFile(filePath: string): ComponentMetadata | null {
+function parseComponentFile(filePath: string, baseDir: string): ComponentMetadata | null {
     const ir = parseZenFile(filePath)
 
-    // Extract component name from filename
-    const basename = path.basename(filePath, '.zen')
-    const componentName = basename
+    // Component name is just the filename (without .zen extension)
+    const componentName = path.basename(filePath, '.zen')
+    
+    // Relative path for error messages and debugging
+    const relativePath = path.relative(baseDir, filePath)
 
     // Extract slots from template
     const slots = extractSlots(ir.template.nodes)
@@ -109,8 +171,10 @@ function parseComponentFile(filePath: string): ComponentMetadata | null {
     return {
         name: componentName,
         path: filePath,
+        relativePath,
         template: ir.template.raw,
         nodes: ir.template.nodes,
+        expressions: ir.template.expressions,  // Store expressions for later merging
         slots,
         props,
         styles,

package/compiler/output/types.ts

@@ -2,8 +2,11 @@
  * Compiled Template Output Types
  * 
  * Phase 2: Transform IR → Static HTML + Runtime Bindings
+ * Phase 8: Extended with fragment binding types (loop, conditional, optional)
  */
 
+import type { TemplateNode } from '../ir/types'
+
 export type CompiledTemplate = {
   html: string
   bindings: Binding[]
@@ -13,7 +16,7 @@ export type CompiledTemplate = {
 
 export type Binding = {
   id: string
-  type: 'text' | 'attribute'
+  type: 'text' | 'attribute' | 'loop' | 'conditional' | 'optional'
   target: string  // e.g., "data-zen-text" or "class" for attribute bindings
   expression: string  // The original expression code
   location?: {
@@ -21,6 +24,17 @@ export type Binding = {
     column: number
   }
   loopContext?: LoopContext  // Phase 7: Loop context for expressions inside map iterations
+  loopMeta?: LoopMeta  // Phase 8: Metadata for loop bindings
+}
+
+/**
+ * Loop binding metadata
+ * Phase 8: Contains loop variable names and body template for runtime instantiation
+ */
+export type LoopMeta = {
+  itemVar: string
+  indexVar?: string
+  bodyTemplate: TemplateNode[]
 }
 
 /**

package/compiler/parse/parseTemplate.ts

@@ -548,6 +548,31 @@ function parseNode(
   return null
 }
 
+/**
+ * Convert self-closing component tags to properly closed tags
+ * 
+ * HTML5/parse5 treats `<ComponentName />` as an opening tag (the `/` is ignored),
+ * which causes following siblings to be incorrectly nested as children.
+ * 
+ * This function converts `<ComponentName />` to `<ComponentName></ComponentName>`
+ * for tags that start with uppercase (Zenith components).
+ * 
+ * Example:
+ *   Input:  `<Header /><Hero /><Footer />`
+ *   Output: `<Header></Header><Hero></Hero><Footer></Footer>`
+ */
+function convertSelfClosingComponents(html: string): string {
+  // Match self-closing tags that start with uppercase (component tags)
+  // Pattern: <ComponentName ... />
+  // Captures: ComponentName and any attributes
+  const selfClosingPattern = /<([A-Z][a-zA-Z0-9._-]*)([^>]*?)\/>/g
+  
+  return html.replace(selfClosingPattern, (match, tagName, attributes) => {
+    // Convert to properly closed tag
+    return `<${tagName}${attributes}></${tagName}>`
+  })
+}
+
 /**
  * Parse template from HTML string
  */
@@ -555,6 +580,10 @@ export function parseTemplate(html: string, filePath: string): TemplateIR {
   // Strip script and style blocks
   let templateHtml = stripBlocks(html)
 
+  // Convert self-closing component tags to properly closed tags
+  // This fixes the component stacking bug where siblings become nested children
+  templateHtml = convertSelfClosingComponents(templateHtml)
+
   // Normalize all expressions so parse5 can parse them safely
   const { normalized, expressions: normalizedExprs } = normalizeAllExpressions(templateHtml)
   templateHtml = normalized

package/compiler/runtime/dataExposure.ts

@@ -259,10 +259,10 @@ export function generateExplicitExpressionWrapper(
     contextParts.push('state')
   }
 
-  // Create merged context for 'with' statement
+  // Create merged context code
   const contextCode = contextParts.length > 0
-    ? `const __ctx = Object.assign({}, ${contextParts.join(', ')});\n      with (__ctx) {`
-    : 'with (state) {'
+    ? `var __ctx = Object.assign({}, ${contextParts.join(', ')});`
+    : 'var __ctx = state || {};'
 
   // 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)
@@ -273,6 +273,13 @@ export function generateExplicitExpressionWrapper(
   // Transform JSX
   const transformedCode = transformExpressionJSX(code)
 
+  // Properly escape the transformed code for use inside a string
+  const escapedTransformedCode = transformedCode
+    .replace(/\\/g, '\\\\')
+    .replace(/'/g, "\\'")
+    .replace(/\n/g, '\\n')
+    .replace(/\r/g, '\\r')
+
   return `
   // Expression: ${commentCode}${code.length > 100 ? '...' : ''}
   // Dependencies: ${JSON.stringify({
@@ -281,16 +288,24 @@ export function generateExplicitExpressionWrapper(
     stores: dependencies.usesStores,
     state: dependencies.usesState
   })}
-  const ${id} = (${paramList}) => {
-    try {
-      ${contextCode}
-        return ${transformedCode};
+  const ${id} = (function() {
+    // Create the evaluator function once (with 'with' support in sloppy mode)
+    var evalFn = new Function('__ctx',
+      'with (__ctx) { return (' + '${escapedTransformedCode}' + '); }'
+    );
+    
+    return function(${paramList}) {
+      try {
+        // Merge window globals with context (for script-level variables)
+        var __baseCtx = Object.assign({}, window);
+        ${contextCode.replace('var __ctx', 'var __ctx').replace('= Object.assign({},', '= Object.assign(__baseCtx,')}
+        return evalFn(__ctx);
+      } catch (e) {
+        console.warn('[Zenith] Expression evaluation error:', ${jsonEscapedCode}, e);
+        return undefined;
       }
-    } catch (e) {
-      console.warn('[Zenith] Expression evaluation error:', ${jsonEscapedCode}, e);
-      return undefined;
-    }
-  };`
+    };
+  })();`
 }
 
 /**

package/compiler/runtime/generateDOM.ts

@@ -119,7 +119,10 @@ ${indent}}\n`
       const conditionId = `cond_${varCounter.count++}`
 
       let code = `${indent}const ${containerVar} = document.createDocumentFragment();\n`
-      code += `${indent}const ${conditionId}_result = (function() { with (state) { return ${condNode.condition}; } })();\n`
+      // Evaluate condition with state context using new Function (sloppy mode allows 'with')
+      const escapedCondition = condNode.condition.replace(/\\/g, '\\\\').replace(/'/g, "\\'")
+      code += `${indent}const ${conditionId}_evalFn = new Function('state', 'with (state) { return (' + '${escapedCondition}' + '); }');\n`
+      code += `${indent}const ${conditionId}_result = (function() { try { return ${conditionId}_evalFn(state); } catch(e) { return false; } })();\n`
 
       // Generate consequent branch
       code += `${indent}if (${conditionId}_result) {\n`
@@ -149,7 +152,10 @@ ${indent}}\n`
       const conditionId = `opt_${varCounter.count++}`
 
       let code = `${indent}const ${containerVar} = document.createDocumentFragment();\n`
-      code += `${indent}const ${conditionId}_result = (function() { with (state) { return ${optNode.condition}; } })();\n`
+      // Evaluate condition with state context using new Function (sloppy mode allows 'with')
+      const escapedCondition = optNode.condition.replace(/\\/g, '\\\\').replace(/'/g, "\\'")
+      code += `${indent}const ${conditionId}_evalFn = new Function('state', 'with (state) { return (' + '${escapedCondition}' + '); }');\n`
+      code += `${indent}const ${conditionId}_result = (function() { try { return ${conditionId}_evalFn(state); } catch(e) { return false; } })();\n`
       code += `${indent}if (${conditionId}_result) {\n`
 
       for (const child of optNode.fragment) {
@@ -171,7 +177,10 @@ ${indent}}\n`
       const loopId = `loop_${varCounter.count++}`
 
       let code = `${indent}const ${containerVar} = document.createDocumentFragment();\n`
-      code += `${indent}const ${loopId}_items = (function() { with (state) { return ${loopNode.source}; } })() || [];\n`
+      // Evaluate loop source with state context using new Function (sloppy mode allows 'with')
+      const escapedSource = loopNode.source.replace(/\\/g, '\\\\').replace(/'/g, "\\'")
+      code += `${indent}const ${loopId}_evalFn = new Function('state', 'with (state) { return (' + '${escapedSource}' + '); }');\n`
+      code += `${indent}const ${loopId}_items = (function() { try { return ${loopId}_evalFn(state); } catch(e) { return []; } })() || [];\n`
 
       // Loop parameters
       const itemVar = loopNode.itemVar

package/compiler/runtime/transformIR.ts

@@ -115,6 +115,9 @@ function generateRuntimeBundle(parts: {
   // Extract function declarations from script code to register on window
   const functionRegistrations = extractFunctionRegistrations(parts.scriptCode)
 
+  // Extract const/let declarations from script code to register on window
+  const variableRegistrations = extractVariableRegistrations(parts.scriptCode)
+
   // Generate npm imports header (hoisted, deduplicated, deterministic)
   const npmImportsHeader = parts.npmImports.length > 0
     ? `// NPM Imports (hoisted from component scripts)\n${emitImports(parts.npmImports)}\n\n`
@@ -139,6 +142,8 @@ ${parts.scriptCode ? parts.scriptCode : ''}
 
 ${functionRegistrations}
 
+${variableRegistrations}
+
 ${parts.stateInitCode ? `// State initialization
 ${parts.stateInitCode}` : ''}
 
@@ -260,6 +265,37 @@ function extractFunctionRegistrations(scriptCode: string): string {
   return `// Register functions on window for event handlers\n${registrations}`
 }
 
+/**
+ * Extract const/let declarations and generate window registration code
+ * This allows expressions evaluated via new Function() to access script-level variables
+ */
+function extractVariableRegistrations(scriptCode: string): string {
+  if (!scriptCode) return ''
+
+  // Match const/let declarations: const name = ... or let name = ...
+  // Also match destructured: const { a, b } = ... but we only care about simple assignments
+  const varPattern = /(?:const|let)\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*=/g
+  const varNames: string[] = []
+  let match
+
+  while ((match = varPattern.exec(scriptCode)) !== null) {
+    if (match[1]) {
+      varNames.push(match[1])
+    }
+  }
+
+  if (varNames.length === 0) {
+    return ''
+  }
+
+  // Generate window registration for each variable
+  const registrations = varNames.map(name =>
+    `  if (typeof ${name} !== 'undefined') window.${name} = ${name};`
+  ).join('\n')
+
+  return `// Register script variables on window for expression access\n${registrations}`
+}
+
 /**
  * Generate hydrate function that mounts the DOM with reactivity
  */

package/compiler/runtime/wrapExpression.ts

@@ -44,22 +44,41 @@ export function wrapExpression(
   const commentCode = code.replace(/[\r\n]+/g, ' ').replace(/\s+/g, ' ').substring(0, 100)
   const jsonEscapedCode = JSON.stringify(code)
 
+  // Properly escape the transformed code for use inside a string
+  const escapedTransformedCode = transformedCode
+    .replace(/\\/g, '\\\\')
+    .replace(/'/g, "\\'")
+    .replace(/\n/g, '\\n')
+    .replace(/\r/g, '\\r')
+
+  // Note: We cannot use `with (state)` in ES modules (strict mode)
+  // Instead, we use new Function() which runs in non-strict sloppy mode by default
+  // and allows 'with' statements. This is a workaround for strict mode limitations.
   return `
   // 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 ${transformedCode};
+  const ${id} = (function() {
+    // Create the evaluator function once (with 'with' support in sloppy mode)
+    var evalFn = new Function('__ctx',
+      'with (__ctx) { return (' + '${escapedTransformedCode}' + '); }'
+    );
+    
+    return function(state) {
+      try {
+        var __zenith = window.__zenith || {};
+        var zenCollection = __zenith.zenCollection || function(name) { return { get: function() { return []; } }; };
+        var createZenOrder = __zenith.createZenOrder || function(sections) { return { sections: [], getSectionBySlug: function() { return null; }, getDocBySlug: function() { return null; } }; };
+        
+        // Merge window globals (script variables) with state
+        // State takes precedence over window globals
+        var __ctx = Object.assign({}, window, { zenCollection: zenCollection, createZenOrder: createZenOrder }, state || {});
+        
+        return evalFn(__ctx);
+      } catch (e) {
+        console.warn('[Zenith] Expression evaluation error:', ${jsonEscapedCode}, e);
+        return undefined;
       }
-    } catch (e) {
-      console.warn('[Zenith] Expression evaluation error:', ${jsonEscapedCode}, e);
-      return undefined;
-    }
-  };`
+    };
+  })();`
 }
 
 /**