@zenithbuild/core 0.1.0 → 0.3.1

package/compiler/parse/parseTemplate.ts

@@ -32,22 +32,53 @@ 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' }}
  */
 function normalizeAttributeExpressions(html: string): { normalized: string; expressions: Map<string, string> } {
   const exprMap = new Map<string, string>()
   let exprCounter = 0
-  
-  // Match attributes with expression values: attr={...}
-  // Use a more sophisticated regex to handle nested braces and quotes
-  const normalized = html.replace(/(\w+)=\{([^}]+)\}/g, (match, attrName, expr) => {
-    const placeholder = `__ZEN_EXPR_${exprCounter++}`
-    exprMap.set(placeholder, expr.trim())
-    return `${attrName}="${placeholder}"`
-  })
-  
+
+  // Improved matching to handle nested braces: attr={ { foo: { bar: 1 } } }
+  let lastPos = 0
+  let normalized = ''
+
+  // Use a regex to find the start of an attribute expression: \w+={
+  const startRegex = /(\w+)=\{/g
+  let match
+
+  while ((match = startRegex.exec(html)) !== null) {
+    const attrName = match[1]
+    const startIndex = match.index + match[0].length - 1 // Index of '{'
+
+    // 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--
+      i++
+    }
+
+    if (braceCount === 0) {
+      const expr = html.substring(startIndex + 1, i - 1).trim()
+      const placeholder = `__ZEN_EXPR_${exprCounter++}`
+      exprMap.set(placeholder, expr)
+
+      normalized += html.substring(lastPos, match.index)
+      normalized += `${attrName}="${placeholder}"`
+      lastPos = i
+
+      // Update regex index to continue after the closing brace
+      startRegex.lastIndex = i
+    }
+  }
+
+  normalized += html.substring(lastPos)
+
   return { normalized, expressions: exprMap }
 }
 
+
 /**
  * Calculate source location from parse5 node
  */
@@ -77,11 +108,11 @@ function extractExpressionsFromText(
   const nodes: (TextNode | ExpressionNode)[] = []
   let processedText = ''
   let currentIndex = 0
-  
+
   // Match { ... } expressions (non-greedy)
   const expressionRegex = /\{([^}]+)\}/g
   let match
-  
+
   while ((match = expressionRegex.exec(text)) !== null) {
     const beforeExpr = text.substring(currentIndex, match.index)
     if (beforeExpr) {
@@ -95,7 +126,7 @@ function extractExpressionsFromText(
       })
       processedText += beforeExpr
     }
-    
+
     // Extract expression
     const exprCode = (match[1] || '').trim()
     const exprId = generateExpressionId()
@@ -103,32 +134,32 @@ function extractExpressionsFromText(
       line: baseLocation.line,
       column: baseLocation.column + match.index + 1 // +1 for opening brace
     }
-    
+
     const exprIR: ExpressionIR = {
       id: exprId,
       code: exprCode,
       location: exprLocation
     }
     expressions.push(exprIR)
-    
+
     // Phase 7: Detect if this is a map expression and extract loop context
     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({
       type: 'expression',
       expression: exprId,
       location: exprLocation,
       loopContext: attachedLoopContext
     })
-    
+
     processedText += `{${exprCode}}` // Keep in processed text for now
     currentIndex = match.index + match[0].length
   }
-  
+
   // Add remaining text
   const remaining = text.substring(currentIndex)
   if (remaining) {
@@ -142,7 +173,7 @@ function extractExpressionsFromText(
     })
     processedText += remaining
   }
-  
+
   // If no expressions found, return single text node
   if (nodes.length === 0) {
     nodes.push({
@@ -152,7 +183,7 @@ function extractExpressionsFromText(
     })
     processedText = text
   }
-  
+
   return { processedText, nodes }
 }
 
@@ -173,41 +204,41 @@ function parseAttributeValue(
     if (!exprCode) {
       throw new Error(`Normalized expression placeholder not found: ${value}`)
     }
-    
+
     const exprId = generateExpressionId()
-    
+
     expressions.push({
       id: exprId,
       code: exprCode,
       location: baseLocation
     })
-    
+
     return {
       id: exprId,
       code: exprCode,
       location: baseLocation
     }
   }
-  
+
   // Check if attribute value is an expression { ... } (shouldn't happen after normalization)
   const exprMatch = value.match(/^\{([^}]+)\}$/)
   if (exprMatch && exprMatch[1]) {
     const exprCode = exprMatch[1].trim()
     const exprId = generateExpressionId()
-    
+
     expressions.push({
       id: exprId,
       code: exprCode,
       location: baseLocation
     })
-    
+
     return {
       id: exprId,
       code: exprCode,
       location: baseLocation
     }
   }
-  
+
   // Regular string value
   return value
 }
@@ -226,16 +257,16 @@ function parseNode(
   if (node.nodeName === '#text') {
     const text = node.value || ''
     const location = getLocation(node, originalHtml)
-    
+
     // Extract expressions from text
     // Phase 7: Pass loop context to detect map expressions and attach context
     const { nodes } = extractExpressionsFromText(text, location, expressions, parentLoopContext)
-    
+
     // If single text node with no expressions, return it
     if (nodes.length === 1 && nodes[0] && nodes[0].type === 'text') {
       return nodes[0]
     }
-    
+
     // Otherwise, we need to handle multiple nodes
     // For Phase 1, we'll flatten to text for now (will be handled in future phases)
     // This is a limitation we accept for Phase 1
@@ -249,32 +280,32 @@ function parseNode(
       location
     }
   }
-  
+
   if (node.nodeName === '#comment') {
     // Skip comments for Phase 1
     return null
   }
-  
+
   if (node.nodeName && node.nodeName !== '#text' && node.nodeName !== '#comment') {
     const location = getLocation(node, originalHtml)
     const tag = node.tagName?.toLowerCase() || node.nodeName
-    
+
     // Parse attributes
     const attributes: AttributeIR[] = []
     if (node.attrs) {
       for (const attr of node.attrs) {
-        const attrLocation = node.sourceCodeLocation?.attrs?.[attr.name] 
+        const attrLocation = node.sourceCodeLocation?.attrs?.[attr.name]
           ? {
-              line: node.sourceCodeLocation.attrs[attr.name].startLine || location.line,
-              column: node.sourceCodeLocation.attrs[attr.name].startCol || location.column
-            }
+            line: node.sourceCodeLocation.attrs[attr.name].startLine || location.line,
+            column: node.sourceCodeLocation.attrs[attr.name].startCol || location.column
+          }
           : location
-        
+
         // Handle :attr="expr" syntax (colon-prefixed reactive attributes)
         let attrName = attr.name
         let attrValue = attr.value || ''
         let isReactive = false
-        
+
         if (attrName.startsWith(':')) {
           // This is a reactive attribute like :class="expr"
           attrName = attrName.slice(1) // Remove the colon
@@ -283,17 +314,17 @@ function parseNode(
           // Treat it as an expression
           const exprId = generateExpressionId()
           const exprCode = attrValue.trim()
-          
+
           const exprIR: ExpressionIR = {
             id: exprId,
             code: exprCode,
             location: attrLocation
           }
           expressions.push(exprIR)
-          
+
           // Phase 7: Attach loop context if expression references loop variables
           const attachedLoopContext = shouldAttachLoopContext(exprIR, parentLoopContext)
-          
+
           attributes.push({
             name: attrName, // Store without colon (e.g., "class" not ":class")
             value: exprIR,
@@ -303,23 +334,30 @@ function parseNode(
         } else {
           // Regular attribute or attr={expr} syntax
           const attrValueResult = parseAttributeValue(attrValue, attrLocation, expressions, normalizedExprs, parentLoopContext)
-          
+
+          // Transform event attributes: onclick -> data-zen-click, onchange -> data-zen-change, etc.
+          let finalAttrName = attrName
+          if (attrName.startsWith('on') && attrName.length > 2) {
+            const eventType = attrName.slice(2) // Remove "on" prefix
+            finalAttrName = `data-zen-${eventType}`
+          }
+
           if (typeof attrValueResult === 'string') {
             // Static attribute value
             attributes.push({
-              name: attrName,
+              name: finalAttrName,
               value: attrValueResult,
               location: attrLocation
             })
           } else {
             // Expression attribute value
             const exprIR = attrValueResult
-            
+
             // Phase 7: Attach loop context if expression references loop variables
             const attachedLoopContext = shouldAttachLoopContext(exprIR, parentLoopContext)
-            
+
             attributes.push({
-              name: attrName,
+              name: finalAttrName,
               value: exprIR,
               location: attrLocation,
               loopContext: attachedLoopContext
@@ -328,7 +366,7 @@ function parseNode(
         }
       }
     }
-    
+
     // Parse children
     const children: TemplateNode[] = []
     if (node.childNodes) {
@@ -338,7 +376,7 @@ function parseNode(
           const text = child.value || ''
           const location = getLocation(child, originalHtml)
           const { nodes: textNodes } = extractExpressionsFromText(text, location, expressions, parentLoopContext)
-          
+
           // Add all nodes from text (can be multiple: text + expression + text)
           for (const textNode of textNodes) {
             children.push(textNode)
@@ -351,11 +389,11 @@ function parseNode(
         }
       }
     }
-    
+
     // Phase 7: Check if any child expression is a map expression and extract its loop context
     // This allows nested loops to work correctly
     let elementLoopContext = parentLoopContext
-    
+
     // Check children for map expressions (they create new loop contexts)
     for (const child of children) {
       if (child.type === 'expression' && child.loopContext) {
@@ -363,7 +401,7 @@ function parseNode(
         elementLoopContext = mergeLoopContext(elementLoopContext, child.loopContext)
       }
     }
-    
+
     return {
       type: 'element',
       tag,
@@ -373,7 +411,7 @@ function parseNode(
       loopContext: elementLoopContext  // Phase 7: Inherited loop context for child processing
     }
   }
-  
+
   return null
 }
 
@@ -383,20 +421,20 @@ function parseNode(
 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)
   templateHtml = normalized
-  
+
   try {
     // Parse HTML using parseFragment (handles fragments without html/body wrapper)
     const fragment = parseFragment(templateHtml, {
       sourceCodeLocationInfo: true
     })
-    
+
     const expressions: ExpressionIR[] = []
     const nodes: TemplateNode[] = []
-    
+
     // Parse fragment children
     // Phase 7: Start with no loop context (top-level expressions)
     if (fragment.childNodes) {
@@ -407,7 +445,7 @@ export function parseTemplate(html: string, filePath: string): TemplateIR {
         }
       }
     }
-    
+
     return {
       raw: templateHtml,
       nodes,

package/compiler/parse/scriptAnalysis.ts

@@ -0,0 +1,77 @@
+/**
+ * Script Analysis Utilities
+ * 
+ * Extracts state and prop declarations from <script> blocks
+ */
+
+export interface StateInfo {
+    name: string
+    value: string
+}
+
+/**
+ * Extract state declarations: state name = value
+ */
+export function extractStateDeclarations(script: string): Map<string, string> {
+    const states = new Map<string, string>()
+    const statePattern = /state\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*=\s*([^;]+?)(?:\s*;|\s*$)/gm
+    let match
+
+    while ((match = statePattern.exec(script)) !== null) {
+        if (match[1] && match[2]) {
+            states.set(match[1], match[2].trim())
+        }
+    }
+
+    return states
+}
+
+/**
+ * Extract prop declarations: export let props: Props;
+ */
+export function extractProps(script: string): string[] {
+    const props: string[] = []
+    const propPattern = /export\s+let\s+props(?:\s*:\s*([^;]+))?[ \t]*;?/g
+    let match
+
+    while ((match = propPattern.exec(script)) !== null) {
+        if (!props.includes('props')) {
+            props.push('props')
+        }
+    }
+
+    return props
+}
+
+/**
+ * Transform script by removing state and prop declarations
+ */
+export function transformStateDeclarations(script: string): string {
+    let transformed = script
+
+    // Remove state declarations (state count = 0)
+    transformed = transformed.replace(/state\s+([a-zA-Z_$][a-zA-Z0-9_$]*)[ \t]*=[ \t]*([^;]+?)(?:[ \t]*;|\s*$)/gm, '')
+
+    // Remove export let props (legacy)
+    transformed = transformed.replace(/export\s+let\s+props(?:\s*:\s*([^;]+))?\s*;?[ \t]*/g, '')
+
+    // Remove type/interface Props (carefully handling comments)
+    // We search for the start of the word 'type' or 'interface' and match until the closing brace
+    transformed = transformed.replace(/(?:type|interface)\s+Props\s*=?\s*\{[^}]*(?:\{[^}]*\}[^}]*)*\}[ \t]*;?/gs, '')
+
+    // Remove zenith/runtime imports
+    transformed = transformed.replace(/import\s+{[^}]+}\s+from\s+['"]zenith\/runtime['"]\s*;?[ \t]*/g, '')
+
+    return transformed.trim()
+}
+
+/**
+ * Inject props into a setup script as top-level variables
+ */
+export function injectPropsIntoSetup(script: string, props: Record<string, any>): string {
+    const propDeclarations = Object.entries(props)
+        .map(([key, value]) => `const ${key} = ${typeof value === 'string' ? `'${value}'` : JSON.stringify(value)};`)
+        .join('\n')
+
+    return `${propDeclarations}\n\n${script}`
+}

package/compiler/runtime/dataExposure.ts

@@ -39,7 +39,7 @@ export function analyzeExpressionDependencies(
   declaredStores: string[] = []
 ): ExpressionDataDependencies {
   const { id, code } = expr
-  
+
   const dependencies: ExpressionDataDependencies = {
     expressionId: id,
     usesLoaderData: false,
@@ -51,14 +51,14 @@ export function analyzeExpressionDependencies(
     storeNames: [],
     stateProperties: []
   }
-  
+
   // Simple pattern matching (for Phase 6 - can be enhanced with proper AST parsing later)
-  
+
   // Check for loader data references (loaderData.property or direct property access)
   // We assume properties not starting with props/stores/state are loader data
   const loaderPattern = /\b(loaderData\.(\w+(?:\.\w+)*)|(?<!props\.|stores\.|state\.)(\w+)\.(\w+))/g
   let match
-  
+
   // Check for explicit loaderData references
   if (/loaderData\./.test(code)) {
     dependencies.usesLoaderData = true
@@ -71,7 +71,7 @@ export function analyzeExpressionDependencies(
       }
     }
   }
-  
+
   // Check for props references
   const propsPattern = /\bprops\.(\w+)(?:\.(\w+))*/g
   if (/props\./.test(code)) {
@@ -83,7 +83,7 @@ export function analyzeExpressionDependencies(
       }
     }
   }
-  
+
   // Check for stores references
   const storesPattern = /\bstores\.(\w+)(?:\.(\w+))*/g
   if (/stores\./.test(code)) {
@@ -95,12 +95,12 @@ export function analyzeExpressionDependencies(
       }
     }
   }
-  
+
   // Check for state references (top-level properties)
   // Simple identifiers that aren't part of props/stores/loaderData paths
   const identifierPattern = /\b([a-zA-Z_$][a-zA-Z0-9_$]*)\b/g
   const reserved = ['props', 'stores', 'loaderData', 'state', 'true', 'false', 'null', 'undefined', 'this', 'window']
-  
+
   const identifiers = new Set<string>()
   while ((match = identifierPattern.exec(code)) !== null) {
     const ident = match[1]
@@ -108,13 +108,31 @@ export function analyzeExpressionDependencies(
       identifiers.add(ident)
     }
   }
-  
-  // If we have identifiers and no explicit data source, assume state
-  if (identifiers.size > 0 && !dependencies.usesLoaderData && !dependencies.usesProps && !dependencies.usesStores) {
-    dependencies.usesState = true
-    dependencies.stateProperties = Array.from(identifiers)
+
+  // If we have identifiers, check if they are props or state
+  if (identifiers.size > 0) {
+    const propIdents: string[] = []
+    const stateIdents: string[] = []
+
+    for (const ident of identifiers) {
+      if (declaredProps.includes(ident)) {
+        propIdents.push(ident)
+      } else {
+        stateIdents.push(ident)
+      }
+    }
+
+    if (propIdents.length > 0) {
+      dependencies.usesProps = true
+      dependencies.propNames = [...new Set([...dependencies.propNames, ...propIdents])]
+    }
+
+    if (stateIdents.length > 0) {
+      dependencies.usesState = true
+      dependencies.stateProperties = Array.from(new Set([...dependencies.stateProperties, ...stateIdents]))
+    }
   }
-  
+
   return dependencies
 }
 
@@ -129,7 +147,7 @@ export function validateDataDependencies(
   declaredStores: string[] = []
 ): void {
   const errors: CompilerError[] = []
-  
+
   // Validate loader data properties
   if (dependencies.usesLoaderData && dependencies.loaderProperties.length > 0) {
     // For Phase 6, we'll allow any loader property (can be enhanced with type checking later)
@@ -145,7 +163,7 @@ export function validateDataDependencies(
       }
     }
   }
-  
+
   // Validate props
   if (dependencies.usesProps && dependencies.propNames.length > 0) {
     for (const propName of dependencies.propNames) {
@@ -155,7 +173,7 @@ export function validateDataDependencies(
       }
     }
   }
-  
+
   // Validate stores
   if (dependencies.usesStores && dependencies.storeNames.length > 0) {
     for (const storeName of dependencies.storeNames) {
@@ -169,7 +187,7 @@ export function validateDataDependencies(
       }
     }
   }
-  
+
   if (errors.length > 0) {
     throw errors[0] // Throw first error (can be enhanced to collect all)
   }
@@ -189,14 +207,14 @@ export function transformExpressionCode(
   declaredProps: string[] = []
 ): string {
   let transformed = code
-  
+
   // For Phase 6, we keep the code as-is but ensure expressions
   // receive the right arguments. The actual transformation happens
   // in the expression wrapper function signature.
-  
+
   // However, if the code references properties directly (without loaderData/props/stores prefix),
   // we need to assume they're state properties (backwards compatibility)
-  
+
   return transformed
 }
 
@@ -208,10 +226,10 @@ export function generateExplicitExpressionWrapper(
   dependencies: ExpressionDataDependencies
 ): string {
   const { id, code } = expr
-  
+
   // Build function signature based on dependencies
   const params: string[] = ['state']
-  
+
   if (dependencies.usesLoaderData) {
     params.push('loaderData')
   }
@@ -221,12 +239,12 @@ export function generateExplicitExpressionWrapper(
   if (dependencies.usesStores) {
     params.push('stores')
   }
-  
+
   const paramList = params.join(', ')
-  
+
   // Build evaluation context
   const contextParts: string[] = []
-  
+
   if (dependencies.usesLoaderData) {
     contextParts.push('loaderData')
   }
@@ -239,14 +257,14 @@ export function generateExplicitExpressionWrapper(
   if (dependencies.usesState) {
     contextParts.push('state')
   }
-  
+
   // Create merged context for 'with' statement
   const contextCode = contextParts.length > 0
     ? `const __ctx = Object.assign({}, ${contextParts.join(', ')});\n      with (__ctx) {`
     : 'with (state) {'
-  
+
   const escapedCode = code.replace(/`/g, '\\`').replace(/\$/g, '\\$')
-  
+
   return `
   // Expression: ${escapedCode}
   // Dependencies: ${JSON.stringify({
@@ -280,12 +298,12 @@ export function analyzeAllExpressions(
   const dependencies = expressions.map(expr =>
     analyzeExpressionDependencies(expr, declaredLoaderProps, declaredProps, declaredStores)
   )
-  
+
   // Validate all dependencies
   for (const dep of dependencies) {
     validateDataDependencies(dep, filePath, declaredLoaderProps, declaredProps, declaredStores)
   }
-  
+
   return dependencies
 }