@zenithbuild/core 0.1.0 → 0.3.1

package/compiler/runtime/generateDOM.ts

@@ -17,7 +17,7 @@ export function generateDOMCode(
   varCounter: { count: number } = { count: 0 }
 ): { code: string; varName: string } {
   const varName = `node_${varCounter.count++}`
-  
+
   switch (node.type) {
     case 'text': {
       const textNode = node as TextNode
@@ -27,14 +27,14 @@ export function generateDOMCode(
         varName
       }
     }
-    
+
     case 'expression': {
       const exprNode = node as ExpressionNode
       const expr = expressions.find(e => e.id === exprNode.expression)
       if (!expr) {
         throw new Error(`Expression ${exprNode.expression} not found`)
       }
-      
+
       // Create a span element to hold the expression result
       return {
         code: `${indent}const ${varName} = document.createElement('span');
@@ -43,13 +43,13 @@ ${indent}${varName}.setAttribute('data-zen-expr', '${exprNode.expression}');`,
         varName
       }
     }
-    
+
     case 'element': {
       const elNode = node as ElementNode
       const tag = elNode.tag
-      
+
       let code = `${indent}const ${varName} = document.createElement('${tag}');\n`
-      
+
       // Handle attributes
       for (const attr of elNode.attributes) {
         if (typeof attr.value === 'string') {
@@ -60,7 +60,7 @@ ${indent}${varName}.setAttribute('data-zen-expr', '${exprNode.expression}');`,
           // Expression attribute
           const expr = attr.value as ExpressionIR
           const attrName = attr.name === 'className' ? 'class' : attr.name
-          
+
           // Handle special attributes
           if (attrName === 'class' || attrName === 'className') {
             code += `${indent}${varName}.className = String(${expr.id}(state) ?? '');\n`
@@ -70,9 +70,10 @@ ${indent}if (typeof styleValue_${varCounter.count} === 'string') {
 ${indent}  ${varName}.style.cssText = styleValue_${varCounter.count};
 ${indent}}\n`
           } else if (attrName.startsWith('on')) {
-            // Event handler - store handler name, will be bound later
+            // Event handler - store handler name/id, will be bound later
             const eventType = attrName.slice(2).toLowerCase() // Remove 'on' prefix
-            code += `${indent}${varName}.setAttribute('data-zen-${eventType}', ${JSON.stringify(attr.value as any)});\n`
+            const value = typeof attr.value === 'string' ? attr.value : (attr.value as ExpressionIR).id
+            code += `${indent}${varName}.setAttribute('data-zen-${eventType}', ${JSON.stringify(value)});\n`
           } else {
             const tempVar = `attr_${varCounter.count++}`
             code += `${indent}const ${tempVar} = ${expr.id}(state);
@@ -82,7 +83,7 @@ ${indent}}\n`
           }
         }
       }
-      
+
       // Handle children
       if (elNode.children.length > 0) {
         for (const child of elNode.children) {
@@ -91,7 +92,7 @@ ${indent}}\n`
           code += `${indent}${varName}.appendChild(${childResult.varName});\n`
         }
       }
-      
+
       return { code, varName }
     }
   }
@@ -112,11 +113,11 @@ export function generateDOMFunction(
   return fragment;
 }`
   }
-  
+
   const varCounter = { count: 0 }
   let code = `function ${functionName}(state) {
 `
-  
+
   if (nodes.length === 1) {
     const node = nodes[0]
     if (!node) {
@@ -127,18 +128,18 @@ export function generateDOMFunction(
     code += `\n  return ${result.varName};\n}`
     return code
   }
-  
+
   // Multiple nodes - create a fragment
   code += `  const fragment = document.createDocumentFragment();\n`
-  
+
   for (const node of nodes) {
     const result = generateDOMCode(node, expressions, '  ', varCounter)
     code += `${result.code}\n`
     code += `  fragment.appendChild(${result.varName});\n`
   }
-  
+
   code += `  return fragment;
 }`
-  
+
   return code
 }

package/compiler/runtime/generateHydrationBundle.ts

@@ -255,10 +255,29 @@ export function generateHydrationRuntime(): string {
         // Create new handler
         const handler = function(event) {
           try {
-            // Get handler function from window (functions are registered on window)
-            const handlerFunc = window[handlerName];
+            // 1. Try to find handler function on window (for named functions)
+            let handlerFunc = window[handlerName];
+            
+            // 2. If not found, try the expression registry (for inline expressions)
+            if (typeof handlerFunc !== 'function' && window.__ZENITH_EXPRESSIONS__) {
+              handlerFunc = window.__ZENITH_EXPRESSIONS__.get(handlerName);
+            }
+
             if (typeof handlerFunc === 'function') {
-              handlerFunc(event, element);
+              // Call the handler. For expressions, we pass the current state.
+              // Note: Phase 6 handles passing loaderData, props, etc. if needed.
+              const state = window.__ZENITH_STATE__ || {};
+              const loaderData = window.__ZENITH_LOADER_DATA__ || {};
+              const props = window.__ZENITH_PROPS__ || {};
+              const stores = window.__ZENITH_STORES__ || {};
+              
+              if (handlerFunc.length === 1) {
+                // Legacy or simple handler
+                handlerFunc(event, element);
+              } else {
+                // Full context handler
+                handlerFunc(event, element, state, loaderData, props, stores);
+              }
             } else {
               console.warn('[Zenith] Event handler "' + handlerName + '" not found for ' + eventType + ' event');
             }
@@ -366,11 +385,11 @@ export function generateExpressionRegistry(expressions: ExpressionIR[]): string
     // Registry already initialized
   }`
   }
-  
+
   const registryCode = expressions.map(expr => {
     return `  window.__ZENITH_EXPRESSIONS__.set('${expr.id}', ${expr.id});`
   }).join('\n')
-  
+
   return `
   // Initialize expression registry
   if (typeof window !== 'undefined') {

package/compiler/runtime/transformIR.ts

@@ -8,9 +8,9 @@ import type { ZenIR } from '../ir/types'
 import { generateExpressionWrappers } from './wrapExpression'
 import { generateDOMFunction } from './generateDOM'
 import { generateHydrationRuntime, generateExpressionRegistry } from './generateHydrationBundle'
-import { analyzeAllExpressions, type ExpressionDataDependencies } from './dataExposure'
+import { analyzeAllExpressions } from './dataExposure'
 import { generateNavigationRuntime } from './navigation'
-import { extractStateDeclarations } from '../legacy/parse'
+import { extractStateDeclarations, extractProps, transformStateDeclarations } from '../parse/scriptAnalysis'
 
 export interface RuntimeCode {
   expressions: string  // Expression wrapper functions
@@ -30,44 +30,46 @@ export function transformIR(ir: ZenIR): RuntimeCode {
   const expressionDependencies = analyzeAllExpressions(
     ir.template.expressions,
     ir.filePath,
-    [], // declaredLoaderProps - can be enhanced with loader analysis
-    [], // declaredProps - can be enhanced with component prop analysis
-    []  // declaredStores - can be enhanced with store import analysis
+    [], // declaredLoaderProps
+    ir.script?.attributes['props'] ? ir.script.attributes['props'].split(',') : [], // declaredProps
+    []  // declaredStores
   )
-  
+
   // Generate expression wrappers with dependencies
   const expressions = generateExpressionWrappers(ir.template.expressions, expressionDependencies)
-  
+
   // Generate DOM creation code
   const renderFunction = generateDOMFunction(
     ir.template.nodes,
     ir.template.expressions,
     'renderDynamicPage'
   )
-  
+
   // Generate hydrate function (legacy, for reference)
   const hydrateFunction = generateHydrateFunction()
-  
+
   // Generate Phase 5 hydration runtime
   const hydrationRuntime = generateHydrationRuntime()
-  
+
   // Generate Phase 7 navigation runtime
   const navigationRuntime = generateNavigationRuntime()
-  
+
   // Generate expression registry initialization
   const expressionRegistry = generateExpressionRegistry(ir.template.expressions)
-  
+
   // Generate style injection code
   const stylesCode = generateStyleInjection(ir.styles)
-  
-  // Extract state declarations and generate initialization
+
+  // Extract state and prop declarations
   const scriptContent = ir.script?.raw || ''
   const stateDeclarations = extractStateDeclarations(scriptContent)
-  const stateInitCode = generateStateInitialization(stateDeclarations)
-  
-  // Transform script (remove state declarations, they're handled by runtime)
-  const scriptCode = transformScript(scriptContent, stateDeclarations)
-  
+  const propKeys = Object.keys(ir.script?.attributes || {}).filter(k => k !== 'setup' && k !== 'lang')
+  const propDeclarations = extractProps(scriptContent)
+  const stateInitCode = generateStateInitialization(stateDeclarations, [...propDeclarations, ...propKeys])
+
+  // Transform script (remove state and prop declarations, they're handled by runtime)
+  const scriptCode = transformStateDeclarations(scriptContent)
+
   // Generate complete runtime bundle
   const bundle = generateRuntimeBundle({
     expressions,
@@ -78,7 +80,7 @@ export function transformIR(ir: ZenIR): RuntimeCode {
     scriptCode,
     stateInitCode
   })
-  
+
   return {
     expressions,
     render: renderFunction,
@@ -102,6 +104,9 @@ function generateRuntimeBundle(parts: {
   scriptCode: string
   stateInitCode: string
 }): string {
+  // Extract function declarations from script code to register on window
+  const functionRegistrations = extractFunctionRegistrations(parts.scriptCode)
+
   return `// Zenith Runtime Bundle (Phase 5)
 // Generated at compile time - no .zen parsing in browser
 
@@ -119,8 +124,14 @@ ${parts.stateInitCode}` : ''}
 ${parts.stylesCode ? `// Style injection
 ${parts.stylesCode}` : ''}
 
-${parts.scriptCode ? `// User script code
-${parts.scriptCode}` : ''}
+// User script code and function registration
+(function() {
+  'use strict';
+  
+${parts.scriptCode ? parts.scriptCode : ''}
+
+${functionRegistrations}
+})();
 
 // Export hydration functions
 if (typeof window !== 'undefined') {
@@ -137,9 +148,95 @@ if (typeof window !== 'undefined') {
     console.warn('[Zenith] Cleanup runtime not loaded');
   };
 }
+
+// Auto-hydrate on page mount
+(function() {
+  'use strict';
+  
+  function autoHydrate() {
+    // Initialize state object
+    const state = window.__ZENITH_STATE__ || {};
+    
+    // Run state initialization if defined
+    if (typeof initializeState === 'function') {
+      initializeState(state);
+    }
+    
+    // Store state globally
+    window.__ZENITH_STATE__ = state;
+    
+    // Expose state variables on window with reactive getters/setters
+    // This allows user functions (like increment) to access state variables directly
+    for (const key in state) {
+      if (state.hasOwnProperty(key) && !window.hasOwnProperty(key)) {
+        Object.defineProperty(window, key, {
+          get: function() { return window.__ZENITH_STATE__[key]; },
+          set: function(value) { 
+            window.__ZENITH_STATE__[key] = value;
+            // Trigger reactive update
+            if (window.__zenith_update) {
+              window.__zenith_update(window.__ZENITH_STATE__);
+            }
+          },
+          configurable: true
+        });
+      }
+    }
+    
+    // Inject styles if defined
+    if (typeof injectStyles === 'function') {
+      injectStyles();
+    }
+    
+    // Get the router outlet or body
+    const container = document.querySelector('#app') || document.body;
+    
+    // Hydrate with state
+    if (window.__zenith_hydrate) {
+      window.__zenith_hydrate(state, {}, {}, {}, container);
+    }
+  }
+  
+  // Run on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', autoHydrate);
+  } else {
+    // DOM already loaded, run on next tick to ensure all scripts are executed
+    setTimeout(autoHydrate, 0);
+  }
+})();
 `
 }
 
+/**
+ * Extract function declarations and generate window registration code
+ */
+function extractFunctionRegistrations(scriptCode: string): string {
+  if (!scriptCode) return ''
+
+  // Match function declarations: function name(...) { ... }
+  const functionPattern = /function\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*\(/g
+  const functionNames: string[] = []
+  let match
+
+  while ((match = functionPattern.exec(scriptCode)) !== null) {
+    if (match[1]) {
+      functionNames.push(match[1])
+    }
+  }
+
+  if (functionNames.length === 0) {
+    return ''
+  }
+
+  // Generate window registration for each function
+  const registrations = functionNames.map(name =>
+    `  if (typeof ${name} === 'function') window.${name} = ${name};`
+  ).join('\n')
+
+  return `// Register functions on window for event handlers\n${registrations}`
+}
+
 /**
  * Generate hydrate function that mounts the DOM with reactivity
  */
@@ -204,7 +301,7 @@ function generateStyleInjection(styles: Array<{ raw: string }>): string {
   if (styles.length === 0) {
     return ''
   }
-  
+
   const styleBlocks = styles.map((style, index) => {
     const escapedStyle = style.raw.replace(/`/g, '\\`').replace(/\$/g, '\\$')
     return `
@@ -212,45 +309,39 @@ function generateStyleInjection(styles: Array<{ raw: string }>): string {
   style${index}.textContent = \`${escapedStyle}\`;
   document.head.appendChild(style${index});`
   }).join('')
-  
+
   return `function injectStyles() {${styleBlocks}
 }`
 }
 
 /**
  * Generate state initialization code
+ * In Phase 9: Also handles props passing
  */
-function generateStateInitialization(stateDeclarations: Map<string, string>): string {
-  if (stateDeclarations.size === 0) {
-    return ''
-  }
-  
-  const initCode = Array.from(stateDeclarations.entries()).map(([name, value]) => {
+function generateStateInitialization(stateDeclarations: Map<string, string>, propDeclarations: string[]): string {
+  const stateInit = Array.from(stateDeclarations.entries()).map(([name, value]) => {
     return `
   // Initialize state: ${name}
-  if (!state.${name}) {
+  if (typeof state.${name} === 'undefined') {
     state.${name} = ${value};
   }`
   }).join('')
-  
-  return `function initializeState(state) {${initCode}
+
+  const legacyPropInit = propDeclarations.includes('props') ? `
+  // Initialize props object (legacy)
+  if (typeof window.__ZEN_PROPS__ !== 'undefined') {
+    state.props = window.__ZEN_PROPS__;
+  }` : ''
+
+  const individualPropInit = propDeclarations.filter(p => p !== 'props').map(prop => `
+  // Initialize prop: ${prop}
+  if (typeof state.${prop} === 'undefined' && typeof window.__ZEN_PROPS__ !== 'undefined' && typeof window.__ZEN_PROPS__.${prop} !== 'undefined') {
+    state.${prop} = window.__ZEN_PROPS__.${prop};
+  }`).join('')
+
+  return `function initializeState(state) {${stateInit}${legacyPropInit}${individualPropInit}
 }`
 }
 
-/**
- * Transform script content
- * Removes state declarations (they're handled by state initialization)
- */
-function transformScript(scriptContent: string, stateDeclarations: Map<string, string>): string {
-  // Remove state declarations - they're handled by initializeState
-  let transformed = scriptContent
-  
-  for (const [name] of stateDeclarations.entries()) {
-    // Remove "state name = value" declarations
-    const stateRegex = new RegExp(`state\\s+${name}\\s*=[^;]*;?`, 'g')
-    transformed = transformed.replace(stateRegex, '')
-  }
-  
-  return transformed.trim()
-}
+// Note: transformScript is now handled by transformStateDeclarations in legacy/parse.ts
 

package/compiler/runtime/wrapExpressionWithLoop.ts

@@ -23,42 +23,42 @@ export function wrapExpressionWithLoopContext(
 ): string {
   const { id, code } = expr
   const escapedCode = code.replace(/`/g, '\\`').replace(/\$/g, '\\$')
-  
+
   if (!loopContext || loopContext.variables.length === 0) {
     // No loop context - use standard wrapper (will be handled by wrapExpression)
     return ''
   }
-  
+
   // Determine arguments based on dependencies
   const args: string[] = []
-  if (dependencies?.usesState || dependencies?.stateProperties.length > 0) args.push('state')
+  if (dependencies?.usesState || (dependencies?.stateProperties && dependencies.stateProperties.length > 0)) args.push('state')
   if (dependencies?.usesLoaderData) args.push('loaderData')
   if (dependencies?.usesProps) args.push('props')
   if (dependencies?.usesStores) args.push('stores')
-  
+
   // Phase 7: Always add loopContext as the last argument
   args.push('loopContext')
-  
+
   const argsStr = args.join(', ')
-  
+
   // Generate function that merges state and loop context
   // Loop context variables take precedence over state properties with the same name
   const loopVarsDecl = loopContext.variables.map(v => `    const ${v} = loopContext?.${v};`).join('\n')
   const loopVarsObject = `{ ${loopContext.variables.join(', ')} }`
-  
+
   // Create merged context for expression evaluation
   // Order: loopContext > stores > props > loaderData > state
   const contextMerge: string[] = []
-  if (dependencies?.usesState || dependencies?.stateProperties.length > 0) contextMerge.push('state')
+  if (dependencies?.usesState || (dependencies?.stateProperties && dependencies.stateProperties.length > 0)) contextMerge.push('state')
   if (dependencies?.usesStores) contextMerge.push('stores')
   if (dependencies?.usesProps) contextMerge.push('props')
   if (dependencies?.usesLoaderData) contextMerge.push('loaderData')
   if (loopContext) contextMerge.push('loopContext')
-  
-  const contextObject = contextMerge.length > 0 
+
+  const contextObject = contextMerge.length > 0
     ? `const __ctx = Object.assign({}, ${contextMerge.join(', ')});`
     : `const __ctx = loopContext || {};`
-  
+
   return `
   // Expression with loop context: ${escapedCode}
   // Loop variables: ${loopContext.variables.join(', ')}