@zenithbuild/runtime 0.1.9 → 0.2.1

package/dist/thin-runtime.js

@@ -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() {
+    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;
+  }
+})();
+`;
+}
+//# sourceMappingURL=thin-runtime.js.map

package/dist/thin-runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thin-runtime.js","sourceRoot":"","sources":["../src/thin-runtime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;;;;;;;;GASG;AACH,MAAM,UAAU,mBAAmB;IAC/B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqIV,CAAA;AACD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenithbuild/runtime",
-  "version": "0.1.9",
+  "version": "0.2.1",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -10,10 +10,14 @@
   "publishConfig": {
     "access": "public"
   },
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
     "build": "tsc"
   },
   "devDependencies": {
     "typescript": "^5.3.3"
   }
-}
+}

package/src/index.ts

@@ -1,6 +1,18 @@
 // Zenith Runtime
 // Ported from hydration_runtime.js
 
+// Exported Types
+export type Signal<T> = ((v?: T) => T) & { _isSignal: true };
+export type Memo<T> = Signal<T>;
+export type Ref<T> = { current: T };
+export type EffectFn = () => (void | (() => void));
+export type DisposeFn = () => void;
+export type Subscriber = { run: () => void; dependencies: Set<Set<any>>; isRunning: boolean };
+export type TrackingContext = { subscriber: Subscriber };
+
+export type MountCallback = () => void;
+export type UnmountCallback = () => void;
+
 // Global types for internal use
 declare global {
     interface Window {
@@ -28,15 +40,60 @@ declare global {
 
 // Internal reactivity state
 let cE: any = null;
-const cS: any[] = [];
+let cS: any[] = [];
 let bD = 0;
+let isFlushing = false;
+let flushScheduled = false;
 const pE = new Set<any>();
+
+// Lifecycle State
+let isMounted = false;
+const unmountCallbacks = new Set<() => void>();
+
+// Public Reactivity Utilities
+export const trackDependency = (s: Set<any>) => { if (cE) { s.add(cE); cE.dependencies.add(s); } };
+export const notifySubscribers = (s: Set<any> | undefined) => {
+    if (!s) return;
+    const es = Array.from(s);
+    for (const e of es) {
+        if (e.isRunning) continue;
+        if (bD > 0 || isFlushing) pE.add(e);
+        else e.run();
+    }
+};
+export const getCurrentContext = () => cE;
+export const pushContext = (e: any) => { cS.push(cE); cE = e; };
+export const popContext = () => { cE = cS.pop(); };
+export const cleanupContext = (e: any) => { for (const d of e.dependencies) d.delete(e); e.dependencies.clear(); };
+export const startBatch = () => { bD++; };
+export const endBatch = () => { bD--; if (bD === 0) flushEffects(); };
+export const isBatching = () => bD > 0;
+export const runUntracked = <T>(fn: () => T): T => {
+    pushContext(null);
+    try { return fn(); } finally { popContext(); }
+};
+
+// Public Lifecycle Utilities
+export const triggerMount = () => { isMounted = true; };
+export const triggerUnmount = () => {
+    isMounted = false;
+    executeUnmountCallbacks();
+};
+export const executeUnmountCallbacks = () => {
+    for (const cb of unmountCallbacks) {
+        try { cb(); } catch (e) { console.error('Error in unmount callback:', e); }
+    }
+    unmountCallbacks.clear();
+};
+export const getIsMounted = () => isMounted;
+export const getUnmountCallbackCount = () => unmountCallbacks.size;
+export const resetMountState = () => { isMounted = false; };
+export const resetUnmountState = () => { unmountCallbacks.clear(); };
+
 if (typeof window !== 'undefined') {
     window.__ZENITH_EXPRESSIONS__ = new Map();
     window.__ZENITH_SCOPES__ = {};
 }
-let isFlushing = false;
-let flushScheduled = false;
 
 // Phase A3: Post-Mount Execution Hook
 const mountedScopes = new Set<string>();
@@ -53,9 +110,12 @@ export function mountComponent(scopeId: string) {
     }
 }
 
-function pC(e: any) { cS.push(cE); cE = e; }
-function oC() { cE = cS.pop(); }
-function tD(s: Set<any>) { if (cE) { s.add(cE); cE.dependencies.add(s); } }
+// Internal shorthand helpers (matching original compiled code requirements if any)
+const pC = pushContext;
+const oC = popContext;
+const tD = trackDependency;
+const nS = notifySubscribers;
+const cEf = cleanupContext;
 
 export function zenRoute() {
     if (typeof window === 'undefined') return { path: '/', slugs: [] };
@@ -66,16 +126,6 @@ export function zenRoute() {
     };
 }
 
-function nS(s: Set<any> | undefined) {
-    if (!s) return;
-    const es = Array.from(s);
-    for (const e of es) {
-        if (e.isRunning) continue;
-        if (bD > 0 || isFlushing) pE.add(e);
-        else e.run();
-    }
-}
-
 function scheduleFlush() {
     if (flushScheduled) return;
     flushScheduled = true;
@@ -101,8 +151,6 @@ function flushEffects() {
     }
 }
 
-function cEf(e: any) { for (const d of e.dependencies) d.delete(e); e.dependencies.clear(); }
-
 export const signal = function (v: any) {
     const s = new Set<any>();
     function sig(nV?: any) {
@@ -190,21 +238,27 @@ export const memo = function (fn: () => any) {
 };
 
 export const batch = function (fn: () => void) {
-    bD++;
-    try { fn(); } finally {
-        bD--;
-        if (bD === 0) flushEffects();
-    }
+    startBatch();
+    try { fn(); } finally { endBatch(); }
 };
 
 export const untrack = function (fn: () => any) {
-    pC(null);
-    try { return fn(); } finally { oC(); }
+    return runUntracked(fn);
 };
 
 export const ref = (i: any) => ({ current: i || null });
-export const onMount = (cb: () => void) => { if (window.__zenith && window.__zenith.activeInstance) window.__zenith.activeInstance.mountHooks.push(cb); };
-export const onUnmount = (cb: () => void) => { /* TODO */ };
+
+export const onMount = (cb: () => void) => {
+    if (typeof window !== 'undefined' && window.__zenith && window.__zenith.activeInstance) {
+        window.__zenith.activeInstance.mountHooks.push(cb);
+    } else {
+        // Fallback for non-component context or SSR
+        if (isMounted) cb();
+    }
+};
+export const onUnmount = (cb: () => void) => {
+    unmountCallbacks.add(cb);
+};
 
 // DOM Helper (hC)
 function hC(parent: Node, child: any) {
@@ -295,24 +349,6 @@ export function hydrate(state: any, container: Element | Document = document, lo
                 oldTitle = document.createElement('title');
                 headMount.appendChild(oldTitle);
             }
-            const resolveContent = (children: any): string => {
-                let result = '';
-                (Array.isArray(children) ? children : [children]).forEach(child => {
-                    if (child == null || child === false) return;
-                    if (typeof child === 'function') {
-                        const val = child();
-                        if (val != null && val !== false) result += String(val);
-                    } else if (typeof child === 'object' && child.fn) {
-                        const val = child.fn();
-                        if (val != null && val !== false) result += String(val);
-                    } else if (child instanceof Node) {
-                        result += child.textContent || '';
-                    } else {
-                        result += String(child);
-                    }
-                });
-                return result;
-            };
             const titleContent = newTitle.childNodes.length > 0
                 ? Array.from(newTitle.childNodes).map((n: any) => n.textContent).join('')
                 : '';
@@ -407,7 +443,6 @@ export function h(tag: string, props: any, children: any) {
                 if (v && typeof v === 'object' && (v as any).fn) fn = (v as any).fn;
                 if (typeof fn === 'function') {
                     el.addEventListener(k.slice(2).toLowerCase(), (e) => {
-                        // Fix: this binding via call(el, e, el)
                         const h = (fn as Function).call(el, e, el);
                         if (typeof h === 'function') h.call(el, e, el);
                     });

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "ES2022",
-        "module": "NodeNext",
-        "moduleResolution": "NodeNext",
-        "declaration": true,
-        "outDir": "./dist",
-        "strict": true,
-        "esModuleInterop": true,
-        "skipLibCheck": true,
-        "forceConsistentCasingInFileNames": true
-    },
-    "include": [
-        "src/**/*"
-    ]
-}