@zenithbuild/core 0.4.7 → 0.5.0-beta.2.2

package/compiler/runtime/generateDOM.ts

@@ -1,246 +0,0 @@
-/**
- * DOM Generation
- * 
- * Generates JavaScript code that creates DOM elements from template nodes
- */
-
-import type {
-  TemplateNode,
-  ElementNode,
-  TextNode,
-  ExpressionNode,
-  ExpressionIR,
-  ConditionalFragmentNode,
-  OptionalFragmentNode,
-  LoopFragmentNode
-} from '../ir/types'
-
-/**
- * Generate DOM creation code from a template node
- * Returns JavaScript code that creates and returns a DOM element or text node
- */
-export function generateDOMCode(
-  node: TemplateNode,
-  expressions: ExpressionIR[],
-  indent: string = '  ',
-  varCounter: { count: number } = { count: 0 }
-): { code: string; varName: string } {
-  const varName = `node_${varCounter.count++}`
-
-  switch (node.type) {
-    case 'text': {
-      const textNode = node as TextNode
-      const escapedValue = JSON.stringify(textNode.value)
-      return {
-        code: `${indent}const ${varName} = document.createTextNode(${escapedValue});`,
-        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');
-${indent}${varName}.textContent = String(${expr.id}(state) ?? '');
-${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') {
-          // Static attribute
-          const escapedValue = JSON.stringify(attr.value)
-          code += `${indent}${varName}.setAttribute('${attr.name}', ${escapedValue});\n`
-        } else {
-          // 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`
-          } else if (attrName === 'style') {
-            code += `${indent}const styleValue_${varCounter.count} = ${expr.id}(state);
-${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/id, will be bound later
-            const eventType = attrName.slice(2).toLowerCase() // Remove 'on' prefix
-            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);
-${indent}if (${tempVar} != null && ${tempVar} !== false) {
-${indent}  ${varName}.setAttribute('${attrName}', String(${tempVar}));
-${indent}}\n`
-          }
-        }
-      }
-
-      // Handle children
-      if (elNode.children.length > 0) {
-        for (const child of elNode.children) {
-          const childResult = generateDOMCode(child, expressions, indent, varCounter)
-          code += `${childResult.code}\n`
-          code += `${indent}${varName}.appendChild(${childResult.varName});\n`
-        }
-      }
-
-      return { code, varName }
-    }
-
-    case 'component': {
-      // Components should be resolved before reaching DOM generation
-      // If we get here, it means component resolution failed
-      throw new Error(`[Zenith] Unresolved component: ${(node as any).name}. Components must be resolved before DOM generation.`)
-    }
-
-    case 'conditional-fragment': {
-      // Conditional fragment: {condition ? <A /> : <B />}
-      // Both branches are precompiled, runtime toggles visibility
-      const condNode = node as ConditionalFragmentNode
-      const containerVar = varName
-      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`
-
-      // Generate consequent branch
-      code += `${indent}if (${conditionId}_result) {\n`
-      for (const child of condNode.consequent) {
-        const childResult = generateDOMCode(child, expressions, indent + '  ', varCounter)
-        code += `${childResult.code}\n`
-        code += `${indent}  ${containerVar}.appendChild(${childResult.varName});\n`
-      }
-      code += `${indent}} else {\n`
-
-      // Generate alternate branch
-      for (const child of condNode.alternate) {
-        const childResult = generateDOMCode(child, expressions, indent + '  ', varCounter)
-        code += `${childResult.code}\n`
-        code += `${indent}  ${containerVar}.appendChild(${childResult.varName});\n`
-      }
-      code += `${indent}}\n`
-
-      return { code, varName: containerVar }
-    }
-
-    case 'optional-fragment': {
-      // Optional fragment: {condition && <A />}
-      // Fragment is precompiled, runtime mounts/unmounts based on condition
-      const optNode = node as OptionalFragmentNode
-      const containerVar = varName
-      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`
-      code += `${indent}if (${conditionId}_result) {\n`
-
-      for (const child of optNode.fragment) {
-        const childResult = generateDOMCode(child, expressions, indent + '  ', varCounter)
-        code += `${childResult.code}\n`
-        code += `${indent}  ${containerVar}.appendChild(${childResult.varName});\n`
-      }
-
-      code += `${indent}}\n`
-
-      return { code, varName: containerVar }
-    }
-
-    case 'loop-fragment': {
-      // Loop fragment: {items.map(item => <li>...</li>)}
-      // Body is precompiled once, instantiated per item at runtime
-      const loopNode = node as LoopFragmentNode
-      const containerVar = varName
-      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`
-
-      // Loop parameters
-      const itemVar = loopNode.itemVar
-      const indexVar = loopNode.indexVar || `${loopId}_idx`
-
-      code += `${indent}${loopId}_items.forEach(function(${itemVar}, ${indexVar}) {\n`
-
-      // Generate loop body with loop context variables in scope
-      for (const child of loopNode.body) {
-        const childResult = generateDOMCode(child, expressions, indent + '  ', varCounter)
-        // Inject loop variables into the child code
-        let childCode = childResult.code
-        code += `${childCode}\n`
-        code += `${indent}  ${containerVar}.appendChild(${childResult.varName});\n`
-      }
-
-      code += `${indent}});\n`
-
-      return { code, varName: containerVar }
-    }
-
-    default: {
-      throw new Error(`[Zenith] Unknown node type: ${(node as any).type}`)
-    }
-  }
-}
-
-/**
- * Generate DOM creation code for multiple nodes
- * Returns a function that creates DOM elements
- */
-export function generateDOMFunction(
-  nodes: TemplateNode[],
-  expressions: ExpressionIR[],
-  functionName: string = 'renderTemplate'
-): string {
-  if (nodes.length === 0) {
-    return `function ${functionName}(state) {
-  const fragment = document.createDocumentFragment();
-  return fragment;
-}`
-  }
-
-  const varCounter = { count: 0 }
-  let code = `function ${functionName}(state) {
-`
-
-  if (nodes.length === 1) {
-    const node = nodes[0]
-    if (!node) {
-      throw new Error('Empty nodes array passed to generateDOMFunction')
-    }
-    const result = generateDOMCode(node, expressions, '  ', varCounter)
-    code += result.code
-    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

@@ -1,407 +0,0 @@
-/**
- * Generate Hydration Bundle
- * 
- * Phase 5: Generates the complete runtime bundle including expressions and hydration code
- */
-
-import type { ExpressionIR } from '../ir/types'
-import { wrapExpression } from './wrapExpression'
-
-/**
- * Generate the hydration runtime code as a string
- * This is the browser-side runtime that hydrates DOM placeholders
- */
-export function generateHydrationRuntime(): string {
-  return `
-// Zenith Runtime Hydration Layer (Phase 5)
-(function() {
-  'use strict';
-  
-  // Expression registry - maps expression IDs to their evaluation functions
-  if (typeof window !== 'undefined' && !window.__ZENITH_EXPRESSIONS__) {
-    window.__ZENITH_EXPRESSIONS__ = new Map();
-  }
-  
-  // Binding registry - tracks which DOM nodes are bound to which expressions
-  const __zen_bindings = [];
-  
-  /**
-   * Update a text binding
-   * Phase 6: Accepts explicit data arguments
-   */
-  function updateTextBinding(node, expressionId, state, loaderData, props, stores) {
-    try {
-      const expression = window.__ZENITH_EXPRESSIONS__.get(expressionId);
-      if (!expression) {
-        console.warn('[Zenith] Expression ' + expressionId + ' not found in registry');
-        return;
-      }
-      
-      // Call expression with appropriate arguments based on function length
-      const result = expression.length === 1
-        ? expression(state)  // Legacy: state only
-        : expression(state, loaderData, props, stores);  // Phase 6: explicit arguments
-      
-      // Handle different result types
-      if (result === null || result === undefined || result === false) {
-        node.textContent = '';
-      } 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) {
-        // Clear node and append result
-        node.innerHTML = '';
-        node.appendChild(result);
-      } else if (Array.isArray(result)) {
-        // Handle array results (for map expressions)
-        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.appendChild(fragment);
-      } else {
-        node.textContent = String(result);
-      }
-    } catch (error) {
-      console.error('[Zenith] Error evaluating expression ' + expressionId + ':', error);
-      console.error('Expression ID:', expressionId, 'State:', state);
-    }
-  }
-  
-  /**
-   * Update an attribute binding
-   * Phase 6: Accepts explicit data arguments
-   */
-  function updateAttributeBinding(element, attributeName, expressionId, state, loaderData, props, stores) {
-    try {
-      const expression = window.__ZENITH_EXPRESSIONS__.get(expressionId);
-      if (!expression) {
-        console.warn('[Zenith] Expression ' + expressionId + ' not found in registry');
-        return;
-      }
-      
-      // Call expression with appropriate arguments based on function length
-      const result = expression.length === 1
-        ? expression(state)  // Legacy: state only
-        : expression(state, loaderData, props, stores);  // Phase 6: explicit arguments
-      
-      // Handle different attribute types
-      if (attributeName === 'class' || attributeName === 'className') {
-        element.className = String(result != null ? result : '');
-      } else if (attributeName === 'style') {
-        if (typeof result === 'string') {
-          element.setAttribute('style', result);
-        } else if (result && typeof result === 'object') {
-          // Handle style object
-          const styleStr = Object.keys(result).map(function(key) {
-            return key + ': ' + result[key];
-          }).join('; ');
-          element.setAttribute('style', styleStr);
-        }
-      } else if (attributeName === 'disabled' || attributeName === 'checked' || attributeName === 'readonly') {
-        // Boolean attributes
-        if (result) {
-          element.setAttribute(attributeName, '');
-        } else {
-          element.removeAttribute(attributeName);
-        }
-      } else {
-        // Regular attributes
-        if (result === null || result === undefined || result === false) {
-          element.removeAttribute(attributeName);
-        } else {
-          element.setAttribute(attributeName, String(result));
-        }
-      }
-    } catch (error) {
-      console.error('[Zenith] Error updating attribute ' + attributeName + ' with expression ' + expressionId + ':', error);
-      console.error('Expression ID:', expressionId, 'State:', state);
-    }
-  }
-  
-  /**
-   * Hydrate static HTML with dynamic expressions
-   * Phase 6: Accepts explicit loaderData, props, stores arguments
-   */
-  function hydrate(state, loaderData, props, stores, container) {
-    if (!state) {
-      console.warn('[Zenith] hydrate called without state object');
-      return;
-    }
-    
-    // Handle optional arguments (backwards compatibility)
-    if (typeof container === 'undefined' && typeof stores === 'object' && stores && !stores.nodeType) {
-      // Called as hydrate(state, loaderData, props, stores, container)
-      container = document;
-    } else if (typeof props === 'object' && props && !props.nodeType && typeof stores === 'undefined') {
-      // Called as hydrate(state, loaderData, props) - container is props
-      container = props;
-      props = loaderData;
-      loaderData = undefined;
-      stores = undefined;
-    } else if (typeof loaderData === 'object' && loaderData && loaderData.nodeType) {
-      // Called as hydrate(state, container) - legacy signature
-      container = loaderData;
-      loaderData = undefined;
-      props = undefined;
-      stores = undefined;
-    } else {
-      container = container || document;
-    }
-    
-    // Default empty objects for missing arguments
-    loaderData = loaderData || {};
-    props = props || {};
-    stores = stores || {};
-    
-    // Store state and data globally for event handlers
-    if (typeof window !== 'undefined') {
-      window.__ZENITH_STATE__ = state;
-      window.__ZENITH_LOADER_DATA__ = loaderData;
-      window.__ZENITH_PROPS__ = props;
-      window.__ZENITH_STORES__ = stores;
-    }
-    
-    // Clear existing bindings
-    __zen_bindings.length = 0;
-    
-    // Find all text expression placeholders
-    const textPlaceholders = container.querySelectorAll('[data-zen-text]');
-    for (let i = 0; i < textPlaceholders.length; i++) {
-      const node = textPlaceholders[i];
-      const expressionId = node.getAttribute('data-zen-text');
-      if (!expressionId) continue;
-      
-      __zen_bindings.push({
-        node: node,
-        type: 'text',
-        expressionId: expressionId
-      });
-      
-      updateTextBinding(node, expressionId, state, loaderData, props, stores);
-    }
-    
-    // Find all attribute expression placeholders
-    const attrSelectors = [
-      '[data-zen-attr-class]',
-      '[data-zen-attr-style]',
-      '[data-zen-attr-src]',
-      '[data-zen-attr-href]',
-      '[data-zen-attr-disabled]',
-      '[data-zen-attr-checked]'
-    ];
-    
-    for (let s = 0; s < attrSelectors.length; s++) {
-      const attrPlaceholders = container.querySelectorAll(attrSelectors[s]);
-      for (let i = 0; i < attrPlaceholders.length; i++) {
-        const node = attrPlaceholders[i];
-        if (!(node instanceof Element)) continue;
-        
-        // Extract attribute name from selector
-        const attrMatch = attrSelectors[s].match(/data-zen-attr-(\\w+)/);
-        if (!attrMatch) continue;
-        const attrName = attrMatch[1];
-        
-        const expressionId = node.getAttribute('data-zen-attr-' + attrName);
-        if (!expressionId) continue;
-        
-        __zen_bindings.push({
-          node: node,
-          type: 'attribute',
-          attributeName: attrName,
-          expressionId: expressionId
-        });
-        
-        updateAttributeBinding(node, attrName, expressionId, state, loaderData, props, stores);
-      }
-    }
-    
-    // Bind event handlers
-    bindEvents(container);
-  }
-  
-  /**
-   * Bind event handlers to DOM elements
-   */
-  function bindEvents(container) {
-    container = container || document;
-    const eventTypes = ['click', 'change', 'input', 'submit', 'focus', 'blur', 'keyup', 'keydown'];
-    
-    for (let e = 0; e < eventTypes.length; e++) {
-      const eventType = eventTypes[e];
-      const elements = container.querySelectorAll('[data-zen-' + eventType + ']');
-      
-      for (let i = 0; i < elements.length; i++) {
-        const element = elements[i];
-        if (!(element instanceof Element)) continue;
-        
-        const handlerName = element.getAttribute('data-zen-' + eventType);
-        if (!handlerName) continue;
-        
-        // Remove existing listener if any (to avoid duplicates)
-        const handlerKey = '__zen_' + eventType + '_handler';
-        const existingHandler = element[handlerKey];
-        if (existingHandler) {
-          element.removeEventListener(eventType, existingHandler);
-        }
-        
-        // Create new handler
-        const handler = function(event) {
-          try {
-            // 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') {
-              // 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');
-            }
-          } catch (error) {
-            console.error('[Zenith] Error executing event handler "' + handlerName + '":', error);
-          }
-        };
-        
-        // Store handler reference to allow cleanup
-        element[handlerKey] = handler;
-        
-        element.addEventListener(eventType, handler);
-      }
-    }
-  }
-  
-  /**
-   * Update all bindings when state changes
-   * Phase 6: Accepts explicit data arguments
-   */
-  function update(state, loaderData, props, stores) {
-    if (!state) {
-      console.warn('[Zenith] update called without state object');
-      return;
-    }
-    
-    // Handle optional arguments (backwards compatibility)
-    if (typeof loaderData === 'undefined') {
-      loaderData = window.__ZENITH_LOADER_DATA__ || {};
-      props = window.__ZENITH_PROPS__ || {};
-      stores = window.__ZENITH_STORES__ || {};
-    } else {
-      loaderData = loaderData || {};
-      props = props || {};
-      stores = stores || {};
-    }
-    
-    // Update global state and data
-    if (typeof window !== 'undefined') {
-      window.__ZENITH_STATE__ = state;
-      window.__ZENITH_LOADER_DATA__ = loaderData;
-      window.__ZENITH_PROPS__ = props;
-      window.__ZENITH_STORES__ = stores;
-    }
-    
-    // Update all tracked bindings
-    for (let i = 0; i < __zen_bindings.length; i++) {
-      const binding = __zen_bindings[i];
-      if (binding.type === 'text') {
-        updateTextBinding(binding.node, binding.expressionId, state, loaderData, props, stores);
-      } else if (binding.type === 'attribute' && binding.attributeName) {
-        if (binding.node instanceof Element) {
-          updateAttributeBinding(binding.node, binding.attributeName, binding.expressionId, state, loaderData, props, stores);
-        }
-      }
-    }
-  }
-  
-  /**
-   * Clear all bindings and event listeners
-   */
-  function cleanup(container) {
-    container = container || document;
-    
-    // Remove event listeners
-    const eventTypes = ['click', 'change', 'input', 'submit', 'focus', 'blur', 'keyup', 'keydown'];
-    for (let e = 0; e < eventTypes.length; e++) {
-      const eventType = eventTypes[e];
-      const elements = container.querySelectorAll('[data-zen-' + eventType + ']');
-      for (let i = 0; i < elements.length; i++) {
-        const element = elements[i];
-        if (!(element instanceof Element)) continue;
-        const handlerKey = '__zen_' + eventType + '_handler';
-        const handler = element[handlerKey];
-        if (handler) {
-          element.removeEventListener(eventType, handler);
-          delete element[handlerKey];
-        }
-      }
-    }
-    
-    // Clear bindings
-    __zen_bindings.length = 0;
-  }
-  
-  // Export functions to window
-  if (typeof window !== 'undefined') {
-    window.__zenith_hydrate = hydrate;
-    window.__zenith_bindEvents = bindEvents;
-    window.__zenith_update = update;
-    window.__zenith_cleanup = cleanup;
-  }
-})();
-`
-}
-
-/**
- * Generate expression registry initialization code
- */
-export function generateExpressionRegistry(expressions: ExpressionIR[]): string {
-  if (expressions.length === 0) {
-    return `
-  // No expressions to register
-  if (typeof window !== 'undefined' && window.__ZENITH_EXPRESSIONS__) {
-    // 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') {
-    if (!window.__ZENITH_EXPRESSIONS__) {
-      window.__ZENITH_EXPRESSIONS__ = new Map();
-    }
-${registryCode}
-  }`
-}
-