@zenithbuild/compiler 1.0.2

package/dist/runtime/dataExposure.js

@@ -0,0 +1,227 @@
+/**
+ * Explicit Data Exposure Analysis
+ *
+ * Phase 6: Analyzes expressions to detect data dependencies and ensure
+ * all data references are explicit (loader, props, stores) rather than implicit globals
+ */
+import { CompilerError } from '../errors/compilerError';
+import { transformExpressionJSX } from '../transform/expressionTransformer';
+/**
+ * Analyze an expression to detect its data dependencies
+ *
+ * This is a simple heuristic-based analyzer that looks for patterns like:
+ * - user.name, user.email → loader data
+ * - props.title, props.showWelcome → props
+ * - stores.cart, stores.notifications → stores
+ * - count, isLoading → state (top-level properties)
+ */
+export function analyzeExpressionDependencies(expr, declaredLoaderProps = [], declaredProps = [], declaredStores = []) {
+    const { id, code } = expr;
+    const dependencies = {
+        expressionId: id,
+        usesLoaderData: false,
+        usesProps: false,
+        usesStores: false,
+        usesState: false,
+        loaderProperties: [],
+        propNames: [],
+        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;
+        while ((match = loaderPattern.exec(code)) !== null) {
+            if (match[1]?.startsWith('loaderData.')) {
+                const propPath = match[1].replace('loaderData.', '');
+                if (!dependencies.loaderProperties.includes(propPath)) {
+                    dependencies.loaderProperties.push(propPath);
+                }
+            }
+        }
+    }
+    // Check for props references
+    const propsPattern = /\bprops\.(\w+)(?:\.(\w+))*/g;
+    if (/props\./.test(code)) {
+        dependencies.usesProps = true;
+        while ((match = propsPattern.exec(code)) !== null) {
+            const propName = match[1];
+            if (propName && !dependencies.propNames.includes(propName)) {
+                dependencies.propNames.push(propName);
+            }
+        }
+    }
+    // Check for stores references
+    const storesPattern = /\bstores\.(\w+)(?:\.(\w+))*/g;
+    if (/stores\./.test(code)) {
+        dependencies.usesStores = true;
+        while ((match = storesPattern.exec(code)) !== null) {
+            const storeName = match[1];
+            if (storeName && !dependencies.storeNames.includes(storeName)) {
+                dependencies.storeNames.push(storeName);
+            }
+        }
+    }
+    // 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();
+    while ((match = identifierPattern.exec(code)) !== null) {
+        const ident = match[1];
+        if (ident && !reserved.includes(ident) && !ident.includes('.')) {
+            identifiers.add(ident);
+        }
+    }
+    // If we have identifiers, check if they are props or state
+    if (identifiers.size > 0) {
+        const propIdents = [];
+        const stateIdents = [];
+        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;
+}
+/**
+ * Validate that all referenced data exists
+ */
+export function validateDataDependencies(dependencies, filePath, declaredLoaderProps = [], declaredProps = [], declaredStores = []) {
+    const errors = [];
+    // 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)
+        // Just warn if property path is suspicious
+        for (const prop of dependencies.loaderProperties) {
+            if (!/^[a-zA-Z_$][a-zA-Z0-9_$.]*$/.test(prop)) {
+                errors.push(new CompilerError(`Invalid loader data property reference: ${prop}`, filePath, 0, 0));
+            }
+        }
+    }
+    // Validate props
+    if (dependencies.usesProps && dependencies.propNames.length > 0) {
+        for (const propName of dependencies.propNames) {
+            if (declaredProps.length > 0 && !declaredProps.includes(propName)) {
+                // This is a warning, not an error - props might be passed at runtime
+                console.warn(`[Zenith] Prop "${propName}" referenced but not declared in component`);
+            }
+        }
+    }
+    // Validate stores
+    if (dependencies.usesStores && dependencies.storeNames.length > 0) {
+        for (const storeName of dependencies.storeNames) {
+            if (declaredStores.length > 0 && !declaredStores.includes(storeName)) {
+                errors.push(new CompilerError(`Store "${storeName}" referenced but not imported or declared`, filePath, 0, 0));
+            }
+        }
+    }
+    if (errors.length > 0) {
+        throw errors[0]; // Throw first error (can be enhanced to collect all)
+    }
+}
+/**
+ * Transform expression code to use explicit data arguments
+ *
+ * Converts patterns like:
+ * - user.name → loaderData.user.name
+ * - title → props.title (if declared as prop)
+ * - cart.items → stores.cart.items
+ */
+export function transformExpressionCode(code, dependencies, declaredProps = []) {
+    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;
+}
+/**
+ * Generate expression wrapper with explicit data arguments
+ */
+export function generateExplicitExpressionWrapper(expr, dependencies) {
+    const { id, code } = expr;
+    // Build function signature based on dependencies
+    const params = ['state'];
+    if (dependencies.usesLoaderData) {
+        params.push('loaderData');
+    }
+    if (dependencies.usesProps) {
+        params.push('props');
+    }
+    if (dependencies.usesStores) {
+        params.push('stores');
+    }
+    const paramList = params.join(', ');
+    // Build evaluation context
+    const contextParts = [];
+    if (dependencies.usesLoaderData) {
+        contextParts.push('loaderData');
+    }
+    if (dependencies.usesProps) {
+        contextParts.push('props');
+    }
+    if (dependencies.usesStores) {
+        contextParts.push('stores');
+    }
+    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) {';
+    // 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: ${commentCode}${code.length > 100 ? '...' : ''}
+  // Dependencies: ${JSON.stringify({
+        loaderData: dependencies.usesLoaderData,
+        props: dependencies.usesProps,
+        stores: dependencies.usesStores,
+        state: dependencies.usesState
+    })}
+  const ${id} = (${paramList}) => {
+    try {
+      ${contextCode}
+        return ${transformedCode};
+      }
+    } catch (e) {
+      console.warn('[Zenith] Expression evaluation error:', ${jsonEscapedCode}, e);
+      return undefined;
+    }
+  };`;
+}
+/**
+ * Analyze all expressions in a template
+ */
+export function analyzeAllExpressions(expressions, filePath, declaredLoaderProps = [], declaredProps = [], declaredStores = []) {
+    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;
+}

package/dist/runtime/generateDOM.d.ts

@@ -0,0 +1,21 @@
+/**
+ * DOM Generation
+ *
+ * Generates JavaScript code that creates DOM elements from template nodes
+ */
+import type { TemplateNode, ExpressionIR } 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 declare function generateDOMCode(node: TemplateNode, expressions: ExpressionIR[], indent?: string, varCounter?: {
+    count: number;
+}): {
+    code: string;
+    varName: string;
+};
+/**
+ * Generate DOM creation code for multiple nodes
+ * Returns a function that creates DOM elements
+ */
+export declare function generateDOMFunction(nodes: TemplateNode[], expressions: ExpressionIR[], functionName?: string): string;

package/dist/runtime/generateDOM.js

@@ -0,0 +1,194 @@
+/**
+ * DOM Generation
+ *
+ * Generates JavaScript code that creates DOM elements from template nodes
+ */
+/**
+ * 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, expressions, indent = '  ', varCounter = { count: 0 }) {
+    const varName = `node_${varCounter.count++}`;
+    switch (node.type) {
+        case 'text': {
+            const textNode = node;
+            const escapedValue = JSON.stringify(textNode.value);
+            return {
+                code: `${indent}const ${varName} = document.createTextNode(${escapedValue});`,
+                varName
+            };
+        }
+        case 'expression': {
+            const exprNode = node;
+            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;
+            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;
+                    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.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.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;
+            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;
+            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;
+            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.type}`);
+        }
+    }
+}
+/**
+ * Generate DOM creation code for multiple nodes
+ * Returns a function that creates DOM elements
+ */
+export function generateDOMFunction(nodes, expressions, functionName = 'renderTemplate') {
+    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/dist/runtime/generateHydrationBundle.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Generate Hydration Bundle
+ *
+ * Phase 5: Generates the complete runtime bundle including expressions and hydration code
+ */
+import type { ExpressionIR } from '../ir/types';
+/**
+ * Generate the hydration runtime code as a string
+ * This is the browser-side runtime that hydrates DOM placeholders
+ */
+export declare function generateHydrationRuntime(): string;
+/**
+ * Generate expression registry initialization code
+ */
+export declare function generateExpressionRegistry(expressions: ExpressionIR[]): string;