npm - @zenithbuild/compiler - Versions diffs - 1.0.2 - Mend

@zenithbuild/compiler 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (145) hide show

package/LICENSE +21 -0
package/README.md +30 -0
package/dist/build-analyzer.d.ts +44 -0
package/dist/build-analyzer.js +87 -0
package/dist/bundler.d.ts +31 -0
package/dist/bundler.js +86 -0
package/dist/core/components/index.d.ts +9 -0
package/dist/core/components/index.js +13 -0
package/dist/core/config/index.d.ts +11 -0
package/dist/core/config/index.js +10 -0
package/dist/core/config/loader.d.ts +17 -0
package/dist/core/config/loader.js +60 -0
package/dist/core/config/types.d.ts +98 -0
package/dist/core/config/types.js +32 -0
package/dist/core/index.d.ts +7 -0
package/dist/core/index.js +6 -0
package/dist/core/lifecycle/index.d.ts +16 -0
package/dist/core/lifecycle/index.js +19 -0
package/dist/core/lifecycle/zen-mount.d.ts +66 -0
package/dist/core/lifecycle/zen-mount.js +151 -0
package/dist/core/lifecycle/zen-unmount.d.ts +54 -0
package/dist/core/lifecycle/zen-unmount.js +76 -0
package/dist/core/plugins/bridge.d.ts +116 -0
package/dist/core/plugins/bridge.js +121 -0
package/dist/core/plugins/index.d.ts +6 -0
package/dist/core/plugins/index.js +6 -0
package/dist/core/plugins/registry.d.ts +67 -0
package/dist/core/plugins/registry.js +113 -0
package/dist/core/reactivity/index.d.ts +30 -0
package/dist/core/reactivity/index.js +33 -0
package/dist/core/reactivity/tracking.d.ts +74 -0
package/dist/core/reactivity/tracking.js +136 -0
package/dist/core/reactivity/zen-batch.d.ts +45 -0
package/dist/core/reactivity/zen-batch.js +54 -0
package/dist/core/reactivity/zen-effect.d.ts +48 -0
package/dist/core/reactivity/zen-effect.js +98 -0
package/dist/core/reactivity/zen-memo.d.ts +43 -0
package/dist/core/reactivity/zen-memo.js +100 -0
package/dist/core/reactivity/zen-ref.d.ts +44 -0
package/dist/core/reactivity/zen-ref.js +34 -0
package/dist/core/reactivity/zen-signal.d.ts +48 -0
package/dist/core/reactivity/zen-signal.js +84 -0
package/dist/core/reactivity/zen-state.d.ts +35 -0
package/dist/core/reactivity/zen-state.js +147 -0
package/dist/core/reactivity/zen-untrack.d.ts +38 -0
package/dist/core/reactivity/zen-untrack.js +41 -0
package/dist/css/index.d.ts +73 -0
package/dist/css/index.js +246 -0
package/dist/discovery/componentDiscovery.d.ts +42 -0
package/dist/discovery/componentDiscovery.js +56 -0
package/dist/discovery/layouts.d.ts +13 -0
package/dist/discovery/layouts.js +41 -0
package/dist/errors/compilerError.d.ts +31 -0
package/dist/errors/compilerError.js +51 -0
package/dist/finalize/finalizeOutput.d.ts +32 -0
package/dist/finalize/finalizeOutput.js +62 -0
package/dist/finalize/generateFinalBundle.d.ts +24 -0
package/dist/finalize/generateFinalBundle.js +68 -0
package/dist/index.d.ts +36 -0
package/dist/index.js +51 -0
package/dist/ir/types.d.ts +181 -0
package/dist/ir/types.js +8 -0
package/dist/output/types.d.ts +30 -0
package/dist/output/types.js +6 -0
package/dist/parse/detectMapExpressions.d.ts +45 -0
package/dist/parse/detectMapExpressions.js +77 -0
package/dist/parse/parseScript.d.ts +8 -0
package/dist/parse/parseScript.js +36 -0
package/dist/parse/parseTemplate.d.ts +11 -0
package/dist/parse/parseTemplate.js +487 -0
package/dist/parse/parseZenFile.d.ts +11 -0
package/dist/parse/parseZenFile.js +50 -0
package/dist/parse/scriptAnalysis.d.ts +25 -0
package/dist/parse/scriptAnalysis.js +60 -0
package/dist/parse/trackLoopContext.d.ts +20 -0
package/dist/parse/trackLoopContext.js +62 -0
package/dist/parseZenFile.d.ts +10 -0
package/dist/parseZenFile.js +55 -0
package/dist/runtime/analyzeAndEmit.d.ts +20 -0
package/dist/runtime/analyzeAndEmit.js +70 -0
package/dist/runtime/build.d.ts +6 -0
package/dist/runtime/build.js +13 -0
package/dist/runtime/bundle-generator.d.ts +27 -0
package/dist/runtime/bundle-generator.js +1263 -0
package/dist/runtime/client-runtime.d.ts +41 -0
package/dist/runtime/client-runtime.js +397 -0
package/dist/runtime/dataExposure.d.ts +52 -0
package/dist/runtime/dataExposure.js +227 -0
package/dist/runtime/generateDOM.d.ts +21 -0
package/dist/runtime/generateDOM.js +194 -0
package/dist/runtime/generateHydrationBundle.d.ts +15 -0
package/dist/runtime/generateHydrationBundle.js +399 -0
package/dist/runtime/hydration.d.ts +53 -0
package/dist/runtime/hydration.js +271 -0
package/dist/runtime/navigation.d.ts +58 -0
package/dist/runtime/navigation.js +372 -0
package/dist/runtime/serve.d.ts +13 -0
package/dist/runtime/serve.js +76 -0
package/dist/runtime/thinRuntime.d.ts +23 -0
package/dist/runtime/thinRuntime.js +158 -0
package/dist/runtime/transformIR.d.ts +19 -0
package/dist/runtime/transformIR.js +285 -0
package/dist/runtime/wrapExpression.d.ts +24 -0
package/dist/runtime/wrapExpression.js +76 -0
package/dist/runtime/wrapExpressionWithLoop.d.ts +17 -0
package/dist/runtime/wrapExpressionWithLoop.js +75 -0
package/dist/spa-build.d.ts +26 -0
package/dist/spa-build.js +866 -0
package/dist/ssg-build.d.ts +32 -0
package/dist/ssg-build.js +408 -0
package/dist/test/analyze-emit.test.d.ts +1 -0
package/dist/test/analyze-emit.test.js +88 -0
package/dist/test/bundler-contract.test.d.ts +1 -0
package/dist/test/bundler-contract.test.js +137 -0
package/dist/test/compiler-authority.test.d.ts +1 -0
package/dist/test/compiler-authority.test.js +90 -0
package/dist/test/component-instance-test.d.ts +1 -0
package/dist/test/component-instance-test.js +115 -0
package/dist/test/error-native-bridge.test.d.ts +1 -0
package/dist/test/error-native-bridge.test.js +51 -0
package/dist/test/error-serialization.test.d.ts +1 -0
package/dist/test/error-serialization.test.js +38 -0
package/dist/test/macro-inlining.test.d.ts +1 -0
package/dist/test/macro-inlining.test.js +178 -0
package/dist/test/validate-test.d.ts +6 -0
package/dist/test/validate-test.js +95 -0
package/dist/transform/classifyExpression.d.ts +46 -0
package/dist/transform/classifyExpression.js +354 -0
package/dist/transform/componentResolver.d.ts +15 -0
package/dist/transform/componentResolver.js +30 -0
package/dist/transform/expressionTransformer.d.ts +19 -0
package/dist/transform/expressionTransformer.js +333 -0
package/dist/transform/fragmentLowering.d.ts +25 -0
package/dist/transform/fragmentLowering.js +468 -0
package/dist/transform/layoutProcessor.d.ts +5 -0
package/dist/transform/layoutProcessor.js +34 -0
package/dist/transform/transformTemplate.d.ts +11 -0
package/dist/transform/transformTemplate.js +33 -0
package/dist/validate/invariants.d.ts +23 -0
package/dist/validate/invariants.js +55 -0
package/native/compiler-native/compiler-native.node +0 -0
package/native/compiler-native/index.d.ts +113 -0
package/native/compiler-native/index.js +19 -0
package/native/compiler-native/package.json +19 -0
package/package.json +49 -0

package/dist/runtime/serve.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+/**
+ * Zenith Development Server
+ *
+ * SPA-compatible server that:
+ * - Serves static assets directly (js, css, ico, images)
+ * - Serves index.html for all other routes (SPA fallback)
+ *
+ * This enables client-side routing to work on:
+ * - Direct URL entry
+ * - Hard refresh
+ * - Back/forward navigation
+ */
+export {};

package/dist/runtime/serve.js ADDED Viewed

@@ -0,0 +1,76 @@
+/**
+ * Zenith Development Server
+ *
+ * SPA-compatible server that:
+ * - Serves static assets directly (js, css, ico, images)
+ * - Serves index.html for all other routes (SPA fallback)
+ *
+ * This enables client-side routing to work on:
+ * - Direct URL entry
+ * - Hard refresh
+ * - Back/forward navigation
+ */
+import { serve } from "bun";
+import path from "path";
+const distDir = path.resolve(import.meta.dir, "..", "app", "dist");
+// File extensions that should be served as static assets
+const STATIC_EXTENSIONS = new Set([
+    ".js",
+    ".css",
+    ".ico",
+    ".png",
+    ".jpg",
+    ".jpeg",
+    ".gif",
+    ".svg",
+    ".webp",
+    ".woff",
+    ".woff2",
+    ".ttf",
+    ".eot",
+    ".json",
+    ".map"
+]);
+serve({
+    port: 3000,
+    async fetch(req) {
+        const url = new URL(req.url);
+        const pathname = url.pathname;
+        // Get file extension
+        const ext = path.extname(pathname).toLowerCase();
+        // Check if this is a static asset request
+        if (STATIC_EXTENSIONS.has(ext)) {
+            const filePath = path.join(distDir, pathname);
+            const file = Bun.file(filePath);
+            // Check if file exists
+            if (await file.exists()) {
+                return new Response(file);
+            }
+            // Static file not found
+            return new Response("Not found", { status: 404 });
+        }
+        // For all other routes, serve index.html (SPA fallback)
+        const indexPath = path.join(distDir, "index.html");
+        const indexFile = Bun.file(indexPath);
+        if (await indexFile.exists()) {
+            return new Response(indexFile, {
+                headers: {
+                    "Content-Type": "text/html; charset=utf-8"
+                }
+            });
+        }
+        // No index.html found - likely need to run build first
+        return new Response(`<html>
+        <head><title>Zenith - Build Required</title></head>
+        <body style="font-family: system-ui; padding: 2rem; text-align: center;">
+          <h1>Build Required</h1>
+          <p>Run <code>bun runtime/build.ts</code> first to compile the pages.</p>
+        </body>
+      </html>`, {
+            status: 500,
+            headers: { "Content-Type": "text/html; charset=utf-8" }
+        });
+    }
+});
+console.log("🚀 Zenith dev server running at http://localhost:3000");
+console.log("   SPA mode: All routes serve index.html");

package/dist/runtime/thinRuntime.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+/**
+ * Thin Runtime
+ *
+ * Phase 8/9/10: Declarative runtime for DOM updates and event binding
+ *
+ * This runtime is purely declarative - it:
+ * - Updates DOM nodes by ID
+ * - Binds event handlers
+ * - Reacts to state changes
+ * - Does NOT parse templates or expressions
+ * - Does NOT use eval, new Function, or with(window)
+ */
+/**
+ * Generate thin declarative runtime code
+ *
+ * This runtime is minimal and safe - it only:
+ * 1. Updates DOM nodes using pre-compiled expression functions
+ * 2. Binds event handlers by ID
+ * 3. Provides reactive state updates
+ *
+ * All expressions are pre-compiled at build time.
+ */
+export declare function generateThinRuntime(): string;

package/dist/runtime/thinRuntime.js ADDED Viewed

@@ -0,0 +1,158 @@
+/**
+ * Thin Runtime
+ *
+ * Phase 8/9/10: Declarative runtime for DOM updates and event binding
+ *
+ * This runtime is purely declarative - it:
+ * - Updates DOM nodes by ID
+ * - Binds event handlers
+ * - Reacts to state changes
+ * - Does NOT parse templates or expressions
+ * - Does NOT use eval, new Function, or with(window)
+ */
+/**
+ * Generate thin declarative runtime code
+ *
+ * This runtime is minimal and safe - it only:
+ * 1. Updates DOM nodes using pre-compiled expression functions
+ * 2. Binds event handlers by ID
+ * 3. Provides reactive state updates
+ *
+ * All expressions are pre-compiled at build time.
+ */
+export function generateThinRuntime() {
+    return `
+// Zenith Thin Runtime (Phase 8/9/10)
+// Purely declarative - no template parsing, no eval, no with(window)
+(function() {
+  'use strict';
+  /**
+   * Update a single DOM node with expression result
+   * Node is identified by data-zen-text or data-zen-attr-* attribute
+   */
+  function updateNode(node, expressionId, state, loaderData, props, stores) {
+    const expression = window.__ZENITH_EXPRESSIONS__.get(expressionId);
+    if (!expression) {
+      console.warn('[Zenith] Expression not found:', expressionId);
+      return;
+    }
+    try {
+      const result = expression(state, loaderData, props, stores);
+      // Update node based on attribute type
+      if (node.hasAttribute('data-zen-text')) {
+        // Text node update
+        if (result === null || result === undefined || result === false) {
+          node.textContent = '';
+        } else {
+          node.textContent = String(result);
+        }
+      } else {
+        // Attribute update - determine attribute name from data-zen-attr-*
+        const attrMatch = Array.from(node.attributes)
+          .find(attr => attr.name.startsWith('data-zen-attr-'));
+        if (attrMatch) {
+          const attrName = attrMatch.name.replace('data-zen-attr-', '');
+          if (attrName === 'class' || attrName === 'className') {
+            node.className = String(result ?? '');
+          } else if (attrName === 'style') {
+            if (typeof result === 'string') {
+              node.setAttribute('style', result);
+            }
+          } else if (attrName === 'disabled' || attrName === 'checked') {
+            if (result) {
+              node.setAttribute(attrName, '');
+            } else {
+              node.removeAttribute(attrName);
+            }
+          } else {
+            if (result != null && result !== false) {
+              node.setAttribute(attrName, String(result));
+            } else {
+              node.removeAttribute(attrName);
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.error('[Zenith] Error updating node:', expressionId, error);
+    }
+  }
+  /**
+   * Update all hydrated nodes
+   * Called when state changes
+   */
+  function updateAll(state, loaderData, props, stores) {
+    // Find all nodes with hydration markers
+    const textNodes = document.querySelectorAll('[data-zen-text]');
+    const attrNodes = document.querySelectorAll('[data-zen-attr-class], [data-zen-attr-style], [data-zen-attr-src], [data-zen-attr-href]');
+    textNodes.forEach(node => {
+      const expressionId = node.getAttribute('data-zen-text');
+      if (expressionId) {
+        updateNode(node, expressionId, state, loaderData, props, stores);
+      }
+    });
+    attrNodes.forEach(node => {
+      const attrMatch = Array.from(node.attributes)
+        .find(attr => attr.name.startsWith('data-zen-attr-'));
+      if (attrMatch) {
+        const expressionId = attrMatch.value;
+        if (expressionId) {
+          updateNode(node, expressionId, state, loaderData, props, stores);
+        }
+      }
+    });
+  }
+  /**
+   * Bind event handlers
+   * Handlers are pre-compiled and registered on window
+   */
+  function bindEvents(container) {
+    container = container || document;
+    const eventTypes = ['click', 'change', 'input', 'submit', 'focus', 'blur', 'keyup', 'keydown', 'mouseenter'];
+    eventTypes.forEach(eventType => {
+      const elements = container.querySelectorAll('[data-zen-' + eventType + ']');
+      elements.forEach(element => {
+        const handlerName = element.getAttribute('data-zen-' + eventType);
+        if (!handlerName) return;
+        // Remove existing handler
+        const handlerKey = '__zen_' + eventType + '_handler';
+        const existingHandler = element[handlerKey];
+        if (existingHandler) {
+          element.removeEventListener(eventType, existingHandler);
+        }
+        // Bind new handler (pre-compiled, registered on window)
+        const handler = function(event) {
+          const handlerFunc = window[handlerName];
+          if (typeof handlerFunc === 'function') {
+            handlerFunc(event, element);
+          }
+        };
+        element[handlerKey] = handler;
+        element.addEventListener(eventType, handler);
+      });
+    });
+  }
+  // Export to window
+  if (typeof window !== 'undefined') {
+    window.__zenith_updateAll = updateAll;
+    window.__zenith_bindEvents = bindEvents;
+  }
+})();
+`;
+}

package/dist/runtime/transformIR.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+/**
+ * Transform IR to Runtime Code
+ *
+ * Phase 4: Transform ZenIR into runtime-ready JavaScript code with full reactivity
+ */
+import type { ZenIR } from '../ir/types';
+export interface RuntimeCode {
+    expressions: string;
+    render: string;
+    hydration: string;
+    styles: string;
+    script: string;
+    stateInit: string;
+    bundle: string;
+}
+/**
+ * Transform ZenIR into runtime JavaScript code
+ */
+export declare function transformIR(ir: ZenIR): RuntimeCode;

package/dist/runtime/transformIR.js ADDED Viewed

@@ -0,0 +1,285 @@
+/**
+ * Transform IR to Runtime Code
+ *
+ * Phase 4: Transform ZenIR into runtime-ready JavaScript code with full reactivity
+ */
+import { generateExpressionWrappers } from './wrapExpression';
+import { generateDOMFunction } from './generateDOM';
+import { generateHydrationRuntime, generateExpressionRegistry } from './generateHydrationBundle';
+import { analyzeAllExpressions } from './dataExposure';
+import { generateNavigationRuntime } from './navigation';
+import { extractStateDeclarations, extractProps, transformStateDeclarations } from '../parse/scriptAnalysis';
+/**
+ * Transform ZenIR into runtime JavaScript code
+ */
+export function transformIR(ir) {
+    // Phase 6: Analyze expression dependencies for explicit data exposure
+    const expressionDependencies = analyzeAllExpressions(ir.template.expressions, ir.filePath, [], // 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 and prop declarations
+    const scriptContent = ir.script?.raw || '';
+    const stateDeclarations = extractStateDeclarations(scriptContent);
+    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,
+        expressionRegistry,
+        hydrationRuntime,
+        navigationRuntime,
+        stylesCode,
+        scriptCode,
+        stateInitCode
+    });
+    return {
+        expressions,
+        render: renderFunction,
+        hydration: hydrationRuntime,
+        styles: stylesCode,
+        script: scriptCode,
+        stateInit: stateInitCode,
+        bundle
+    };
+}
+/**
+ * Generate complete runtime bundle
+ */
+function generateRuntimeBundle(parts) {
+    // 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
+${parts.expressions}
+${parts.expressionRegistry}
+${parts.hydrationRuntime}
+${parts.navigationRuntime}
+${parts.stylesCode ? `// Style injection
+${parts.stylesCode}` : ''}
+// User script code - executed first to define variables needed by state initialization
+${parts.scriptCode ? parts.scriptCode : ''}
+${functionRegistrations}
+${parts.stateInitCode ? `// State initialization
+${parts.stateInitCode}` : ''}
+// Export hydration functions
+if (typeof window !== 'undefined') {
+  window.zenithHydrate = window.__zenith_hydrate || function(state, container) {
+    console.warn('[Zenith] Hydration runtime not loaded');
+  };
+  window.zenithUpdate = window.__zenith_update || function(state) {
+    console.warn('[Zenith] Update runtime not loaded');
+  };
+  window.zenithBindEvents = window.__zenith_bindEvents || function(container) {
+    console.warn('[Zenith] Event binding runtime not loaded');
+  };
+  window.zenithCleanup = window.__zenith_cleanup || function(container) {
+    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, hydrate immediately
+    autoHydrate();
+  }
+})();
+`;
+}
+/**
+ * Extract function declarations and generate window registration code
+ */
+function extractFunctionRegistrations(scriptCode) {
+    if (!scriptCode)
+        return '';
+    // Match function declarations: function name(...) { ... }
+    const functionPattern = /function\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*\(/g;
+    const functionNames = [];
+    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
+ */
+function generateHydrateFunction() {
+    return `function hydrate(root, state) {
+  if (!root) {
+    // SSR fallback - return initial HTML string
+    console.warn('[Zenith] hydrate called without root element - SSR mode');
+    return '';
+  }
+  // Clear root
+  root.innerHTML = '';
+  // Render template
+  const dom = renderDynamicPage(state);
+  // Append to root
+  if (dom instanceof DocumentFragment) {
+    root.appendChild(dom);
+  } else if (dom instanceof Node) {
+    root.appendChild(dom);
+  }
+  // Bind event handlers
+  bindEventHandlers(root, state);
+  // Set up reactive updates (if state is reactive)
+  setupReactiveUpdates(root, state);
+  return root;
+}
+function bindEventHandlers(root, state) {
+  // Find all elements with data-zen-* event attributes
+  const eventTypes = ['click', 'change', 'input', 'submit', 'focus', 'blur'];
+  for (const eventType of eventTypes) {
+    const elements = root.querySelectorAll(\`[data-zen-\${eventType}]\`);
+    for (const el of elements) {
+      const handlerName = el.getAttribute(\`data-zen-\${eventType}\`);
+      if (handlerName && typeof window[handlerName] === 'function') {
+        el.addEventListener(eventType, (e) => {
+          window[handlerName](e, el);
+        });
+      }
+    }
+  }
+}
+function setupReactiveUpdates(root, state) {
+  // For now, reactive updates are handled by the existing binding system
+  // This is a placeholder for future reactive DOM updates
+  // The existing runtime handles reactivity via state property setters
+}`;
+}
+/**
+ * Generate style injection code
+ */
+function generateStyleInjection(styles) {
+    if (styles.length === 0) {
+        return '';
+    }
+    const styleBlocks = styles.map((style, index) => {
+        const escapedStyle = style.raw.replace(/`/g, '\\`').replace(/\$/g, '\\$');
+        return `
+  const style${index} = document.createElement('style');
+  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, propDeclarations) {
+    const stateInit = Array.from(stateDeclarations.entries()).map(([name, value]) => {
+        return `
+  // Initialize state: ${name}
+  if (typeof state.${name} === 'undefined') {
+    state.${name} = ${value};
+  }`;
+    }).join('');
+    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}
+}`;
+}
+// Note: transformScript is now handled by transformStateDeclarations in legacy/parse.ts

package/dist/runtime/wrapExpression.d.ts ADDED Viewed

@@ -0,0 +1,24 @@
+/**
+ * Expression Wrapper
+ *
+ * Wraps extracted expressions into runtime functions with explicit data arguments
+ *
+ * Phase 6: Expressions now accept explicit loaderData, props, stores arguments
+ * instead of relying on implicit globals
+ */
+import type { ExpressionIR, LoopContext } from '../ir/types';
+import type { ExpressionDataDependencies } from './dataExposure';
+/**
+ * Wrap an expression into a runtime function with explicit data arguments
+ *
+ * Phase 6: Supports explicit loaderData, props, stores arguments
+ * Phase 7: Supports loop context for expressions inside map iterations
+ */
+export declare function wrapExpression(expr: ExpressionIR, dependencies?: ExpressionDataDependencies, loopContext?: LoopContext): string;
+/**
+ * Generate all expression wrappers for a set of expressions
+ *
+ * Phase 6: Accepts dependencies array for explicit data exposure
+ * Phase 7: Accepts loop contexts for expressions inside map iterations
+ */
+export declare function generateExpressionWrappers(expressions: ExpressionIR[], dependencies?: ExpressionDataDependencies[], loopContexts?: (LoopContext | undefined)[]): string;

package/dist/runtime/wrapExpression.js ADDED Viewed

@@ -0,0 +1,76 @@
+/**
+ * Expression Wrapper
+ *
+ * Wraps extracted expressions into runtime functions with explicit data arguments
+ *
+ * Phase 6: Expressions now accept explicit loaderData, props, stores arguments
+ * instead of relying on implicit globals
+ */
+import { generateExplicitExpressionWrapper } from './dataExposure';
+import { wrapExpressionWithLoopContext } from './wrapExpressionWithLoop';
+import { transformExpressionJSX } from '../transform/expressionTransformer';
+/**
+ * Wrap an expression into a runtime function with explicit data arguments
+ *
+ * Phase 6: Supports explicit loaderData, props, stores arguments
+ * Phase 7: Supports loop context for expressions inside map iterations
+ */
+export function wrapExpression(expr, dependencies, loopContext // Phase 7: Loop context for map expressions
+) {
+    const { id, code } = expr;
+    // Phase 7: If loop context is provided, use loop-aware wrapper
+    if (loopContext && loopContext.variables.length > 0) {
+        return wrapExpressionWithLoopContext(expr, loopContext, dependencies);
+    }
+    // If dependencies are provided, use explicit wrapper (Phase 6)
+    if (dependencies) {
+        return generateExplicitExpressionWrapper(expr, dependencies);
+    }
+    // Fallback to legacy wrapper (backwards compatibility)
+    // Transform JSX-like tags inside expression code
+    const transformedCode = transformExpressionJSX(code);
+    // 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);
+    const jsonEscapedCode = JSON.stringify(code);
+    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};
+      }
+    } catch (e) {
+      console.warn('[Zenith] Expression evaluation error:', ${jsonEscapedCode}, e);
+      return undefined;
+    }
+  };`;
+}
+/**
+ * Generate all expression wrappers for a set of expressions
+ *
+ * Phase 6: Accepts dependencies array for explicit data exposure
+ * Phase 7: Accepts loop contexts for expressions inside map iterations
+ */
+export function generateExpressionWrappers(expressions, dependencies, loopContexts // Phase 7: Loop contexts for each expression
+) {
+    if (expressions.length === 0) {
+        return '';
+    }
+    if (dependencies && dependencies.length === expressions.length) {
+        // Use explicit wrappers with dependencies and optional loop contexts
+        return expressions
+            .map((expr, index) => {
+            const loopCtx = loopContexts && loopContexts[index] !== undefined
+                ? loopContexts[index]
+                : undefined;
+            return wrapExpression(expr, dependencies[index], loopCtx);
+        })
+            .join('\n');
+    }
+    // Fallback to legacy wrappers (no dependencies, no loop contexts)
+    return expressions.map(expr => wrapExpression(expr)).join('\n');
+}