@zenithbuild/runtime 0.1.3 → 0.1.8

package/package.json

@@ -1,19 +1,19 @@
 {
-    "name": "@zenithbuild/runtime",
-    "version": "0.1.3",
-    "type": "module",
-    "main": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "exports": {
-        ".": "./dist/index.js"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "scripts": {
-        "build": "tsc"
-    },
-    "devDependencies": {
-        "typescript": "^5.3.3"
-    }
+  "name": "@zenithbuild/runtime",
+  "version": "0.1.8",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.3"
+  }
 }

package/src/dom-hydration.ts

@@ -0,0 +1,297 @@
+/**
+ * Runtime Hydration Layer (Phase 5)
+ * 
+ * Browser-side runtime that hydrates static HTML with dynamic expressions
+ * 
+ * This runtime:
+ * - Locates DOM placeholders (data-zen-text, data-zen-attr-*)
+ * - Evaluates precompiled expressions against state
+ * - Updates DOM textContent, attributes, and properties
+ * - Binds event handlers
+ * - Handles reactive state updates
+ */
+
+/**
+ * Binding registry - tracks which DOM nodes are bound to which expressions
+ */
+interface Binding {
+    node: Node
+    type: 'text' | 'attribute'
+    attributeName?: string
+    expressionId: string
+}
+
+const bindings: Binding[] = []
+
+/**
+ * Hydrate static HTML with dynamic expressions (Phase 5 Strategy)
+ * 
+ * @param state - The state object to evaluate expressions against
+ * @param container - The container element to hydrate (defaults to document)
+ */
+export function hydrateDom(state: any, container: Document | Element = document): void {
+    if (!state) {
+        console.warn('[Zenith] hydrateDom called without state object')
+        return
+    }
+
+    // Store state globally for event handlers
+    if (typeof window !== 'undefined') {
+        window.__ZENITH_STATE__ = state
+    }
+
+    // Clear existing bindings
+    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]
+        if (!node) continue
+        const expressionId = node.getAttribute('data-zen-text')
+        if (!expressionId) continue
+
+        bindings.push({
+            node,
+            type: 'text',
+            expressionId
+        })
+
+        updateTextBinding(node, expressionId, state)
+    }
+
+    // Find all attribute expression placeholders
+    const attrPlaceholders = container.querySelectorAll('[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 i = 0; i < attrPlaceholders.length; i++) {
+        const node = attrPlaceholders[i]
+        if (!(node instanceof Element)) continue
+
+        // Check each possible attribute
+        const attrNames = ['class', 'style', 'src', 'href', 'disabled', 'checked']
+        for (const attrName of attrNames) {
+            const expressionId = node.getAttribute(`data-zen-attr-${attrName}`)
+            if (!expressionId) continue
+
+            bindings.push({
+                node,
+                type: 'attribute',
+                attributeName: attrName,
+                expressionId
+            })
+
+            updateAttributeBinding(node, attrName, expressionId, state)
+        }
+    }
+
+    // Bind event handlers
+    bindEvents(container)
+}
+
+/**
+ * Update a text binding
+ */
+function updateTextBinding(node: Node, expressionId: string, state: any): void {
+    try {
+        const expression = window.__ZENITH_EXPRESSIONS__?.get(expressionId)
+        if (!expression) {
+            console.warn(`[Zenith] Expression ${expressionId} not found in registry`)
+            return
+        }
+
+        const result = expression(state)
+
+        // Handle different result types
+        if (result === null || result === undefined || result === false) {
+            node.textContent = ''
+        } else if (typeof result === 'string' || typeof result === 'number') {
+            node.textContent = String(result)
+        } else if (result instanceof Node) {
+            // Replace node with result node
+            if (node.parentNode) {
+                node.parentNode.replaceChild(result, node)
+            }
+        } else if (Array.isArray(result)) {
+            // Handle array results (for map expressions)
+            if (node.parentNode) {
+                const fragment = document.createDocumentFragment()
+                for (const item of result) {
+                    if (item instanceof Node) {
+                        fragment.appendChild(item)
+                    } else {
+                        fragment.appendChild(document.createTextNode(String(item)))
+                    }
+                }
+                node.parentNode.replaceChild(fragment, node)
+            }
+        } else {
+            node.textContent = String(result)
+        }
+    } catch (error: any) {
+        console.error(`[Zenith] Error evaluating expression ${expressionId}:`, error)
+        console.error('Expression ID:', expressionId, 'State:', state)
+    }
+}
+
+/**
+ * Update an attribute binding
+ */
+function updateAttributeBinding(
+    element: Element,
+    attributeName: string,
+    expressionId: string,
+    state: any
+): void {
+    try {
+        const expression = window.__ZENITH_EXPRESSIONS__?.get(expressionId)
+        if (!expression) {
+            console.warn(`[Zenith] Expression ${expressionId} not found in registry`)
+            return
+        }
+
+        const result = expression(state)
+
+        // Handle different attribute types
+        if (attributeName === 'class' || attributeName === 'className') {
+            element.className = String(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.entries(result)
+                    .map(([key, value]) => `${key}: ${value}`)
+                    .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: any) {
+        console.error(`[Zenith] Error updating attribute ${attributeName} with expression ${expressionId}:`, error)
+        console.error('Expression ID:', expressionId, 'State:', state)
+    }
+}
+
+/**
+ * Bind event handlers to DOM elements
+ * 
+ * @param container - The container element to bind events in (defaults to document)
+ */
+export function bindEvents(container: Document | Element = document): void {
+    const eventTypes = ['click', 'change', 'input', 'submit', 'focus', 'blur', 'keyup', 'keydown']
+
+    for (const eventType of eventTypes) {
+        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 existingHandler = (element as any)[`__zen_${eventType}_handler`]
+            if (existingHandler) {
+                element.removeEventListener(eventType, existingHandler)
+            }
+
+            // Create new handler
+            const handler = (event: Event) => {
+                try {
+                    // Get handler function from window (functions are registered on window)
+                    const handlerFunc = (window as any)[handlerName]
+                    if (typeof handlerFunc === 'function') {
+                        handlerFunc(event, element)
+                    } else {
+                        console.warn(`[Zenith] Event handler "${handlerName}" not found for ${eventType} event`)
+                    }
+                } catch (error: any) {
+                    console.error(`[Zenith] Error executing event handler "${handlerName}":`, error)
+                }
+            }
+
+                // Store handler reference to allow cleanup
+                ; (element as any)[`__zen_${eventType}_handler`] = handler
+
+            element.addEventListener(eventType, handler)
+        }
+    }
+}
+
+/**
+ * Update all bindings when state changes
+ * 
+ * @param state - The new state object
+ */
+export function updateDom(state: any): void {
+    if (!state) {
+        console.warn('[Zenith] updateDom called without state object')
+        return
+    }
+
+    // Update global state
+    if (typeof window !== 'undefined') {
+        window.__ZENITH_STATE__ = state
+    }
+
+    // Update all tracked bindings
+    for (const binding of bindings) {
+        if (binding.type === 'text') {
+            updateTextBinding(binding.node, binding.expressionId, state)
+        } else if (binding.type === 'attribute' && binding.attributeName) {
+            if (binding.node instanceof Element) {
+                updateAttributeBinding(binding.node, binding.attributeName, binding.expressionId, state)
+            }
+        }
+    }
+}
+
+/**
+ * Initialize the expression registry
+ * Called once when the runtime loads
+ * 
+ * @param expressions - Map of expression IDs to evaluation functions
+ */
+export function initExpressions(expressions: Map<string, (state: any) => any>): void {
+    if (typeof window !== 'undefined') {
+        window.__ZENITH_EXPRESSIONS__ = expressions
+    }
+}
+
+/**
+ * Clear all bindings and event listeners
+ * Useful for cleanup when navigating away
+ */
+export function cleanupDom(container: Document | Element = document): void {
+    // Remove event listeners
+    const eventTypes = ['click', 'change', 'input', 'submit', 'focus', 'blur', 'keyup', 'keydown']
+    for (const eventType of eventTypes) {
+        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 handler = (element as any)[`__zen_${eventType}_handler`]
+            if (handler) {
+                element.removeEventListener(eventType, handler)
+                delete (element as any)[`__zen_${eventType}_handler`]
+            }
+        }
+    }
+
+    // Clear bindings
+    bindings.length = 0
+}

package/src/index.ts

@@ -448,3 +448,6 @@ export function fragment(c: any) {
     items.forEach(i => hC(f, i));
     return f;
 }
+
+export * from './dom-hydration.js';
+export * from './thin-runtime.js';

package/src/thin-runtime.ts

@@ -0,0 +1,159 @@
+/**
+ * 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(): string {
+    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;
+  }
+})();
+`
+}