@zenithbuild/runtime 0.2.1 → 0.5.0-beta.2.3

package/src/index.ts

@@ -1,488 +0,0 @@
-// 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 {
-        __ZENITH_RUNTIME__: any;
-        __ZENITH_STATE__: any;
-        __ZENITH_SCOPES__: any;
-        __ZENITH_EXPRESSIONS__: any;
-        __zenith: any;
-        zenSignal: any;
-        zenState: any;
-        zenEffect: any;
-        zenMemo: any;
-        zenBatch: any;
-        zenUntrack: any;
-        zenRef: any;
-        zenOnMount: any;
-        zenOnUnmount: any;
-        zenithHydrate: any;
-        zenithNotify: any;
-        zenithSubscribe: any;
-        zenOrder: any;
-        zenFixSVGNamespace: any;
-    }
-}
-
-// Internal reactivity state
-let cE: any = null;
-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__ = {};
-}
-
-// Phase A3: Post-Mount Execution Hook
-const mountedScopes = new Set<string>();
-
-export function mountComponent(scopeId: string) {
-    if (mountedScopes.has(scopeId)) return;
-    mountedScopes.add(scopeId);
-
-    const scope = window.__ZENITH_SCOPES__[scopeId];
-    if (!scope) return;
-
-    if (typeof scope.__run === 'function') {
-        scope.__run();
-    }
-}
-
-// 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: [] };
-    const path = window.location.pathname;
-    return {
-        path: path,
-        slugs: path.split('/').filter(Boolean)
-    };
-}
-
-function scheduleFlush() {
-    if (flushScheduled) return;
-    flushScheduled = true;
-    queueMicrotask(() => {
-        flushScheduled = false;
-        flushEffects();
-    });
-}
-
-function flushEffects() {
-    if (isFlushing || bD > 0) return;
-    isFlushing = true;
-    try {
-        while (pE.size > 0) {
-            const efs = Array.from(pE);
-            pE.clear();
-            for (const e of efs) {
-                if (!e.isRunning) e.run();
-            }
-        }
-    } finally {
-        isFlushing = false;
-    }
-}
-
-export const signal = function (v: any) {
-    const s = new Set<any>();
-    function sig(nV?: any) {
-        if (arguments.length === 0) { tD(s); return v; }
-        if (nV !== v) { v = nV; nS(s); scheduleFlush(); }
-        return v;
-    }
-    sig._isSignal = true; sig.toString = () => String(v); sig.valueOf = () => v;
-    return sig;
-};
-
-export const state = function (o: any) {
-    const subs = new Map<string, Set<any>>();
-    function gS(p: string) { if (!subs.has(p)) subs.set(p, new Set()); return subs.get(p); }
-    function notify(p: string) { nS(gS(p)); scheduleFlush(); }
-    function subscribe(p: string, ef: any) { gS(p)!.add(ef); ef.dependencies.add(gS(p)); }
-    function cP(obj: any, pPath = ''): any {
-        if (obj === null || typeof obj !== 'object' || obj._isSignal) return obj;
-        return new Proxy(obj, {
-            get(t, p) {
-                if (p === Symbol.for('zenith_notify')) return notify;
-                if (p === Symbol.for('zenith_subscribe')) return subscribe;
-                if (typeof p === 'symbol') return t[p];
-                const path = pPath ? `${pPath}.${String(p)}` : String(p);
-                tD(gS(path)!);
-                const v = t[p];
-                if (v !== null && typeof v === 'object' && !v._isSignal) return cP(v, path);
-                return v;
-            },
-            set(t, p, nV) {
-                if (typeof p === 'symbol') { t[p] = nV; return true; }
-                const path = pPath ? `${pPath}.${String(p)}` : String(p);
-                const oV = t[p];
-                if (oV && typeof oV === 'function' && oV._isSignal) oV(nV);
-                else if (oV !== nV) {
-                    t[p] = nV;
-                    nS(gS(path));
-                    const pts = path.split('.');
-                    for (let i = pts.length - 1; i >= 0; i--) {
-                        const pp = pts.slice(0, i).join('.');
-                        if (pp) nS(gS(pp));
-                    }
-                    scheduleFlush();
-                }
-                return true;
-            }
-        });
-    }
-    return cP(o);
-};
-
-export const effect = function (fn: () => any, opts: any = {}) {
-    let cl: any, tm: any;
-    const ef: any = {
-        dependencies: new Set(),
-        isRunning: false,
-        run: () => {
-            if (ef.isRunning) return;
-            const schedule = opts.scheduler || ((f: any) => f());
-            if (opts.debounce) {
-                if (tm) clearTimeout(tm);
-                tm = setTimeout(() => schedule(ex), opts.debounce);
-            } else schedule(ex);
-        }
-    };
-    function ex() {
-        if (ef.isRunning) return;
-        ef.isRunning = true;
-        cEf(ef);
-        pC(ef);
-        try { if (cl) cl(); cl = fn(); }
-        finally {
-            oC();
-            ef.isRunning = false;
-        }
-    }
-    if (!opts.defer) ex();
-    return () => { cEf(ef); if (cl) cl(); };
-};
-
-export const memo = function (fn: () => any) {
-    const sig = signal(undefined);
-    effect(() => sig(fn()));
-    const m = () => sig(); m._isSignal = true; return m;
-};
-
-export const batch = function (fn: () => void) {
-    startBatch();
-    try { fn(); } finally { endBatch(); }
-};
-
-export const untrack = function (fn: () => any) {
-    return runUntracked(fn);
-};
-
-export const ref = (i: any) => ({ current: i || null });
-
-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) {
-    if (child == null || child === false) return;
-
-    let fn = child;
-    let id: string | null = null;
-    if (typeof child === 'object' && child.fn) {
-        fn = child.fn;
-        id = child.id;
-    }
-
-    const isTitle = parent && (parent as any).tagName && (parent as any).tagName.toLowerCase() === 'title';
-
-    if (typeof fn === 'function') {
-        if (isTitle) {
-            const val = fn();
-            if (val != null && val !== false) {
-                const text = String(val);
-                parent.appendChild(document.createTextNode(text));
-                document.title = text;
-            }
-            effect(() => {
-                const newVal = fn();
-                if (newVal != null && newVal !== false) {
-                    const newText = String(newVal);
-                    if (document.title !== newText) {
-                        parent.textContent = newText;
-                        document.title = newText;
-                    }
-                }
-            }, { id: id ? `title-${id}` : 'title-sync' });
-        } else {
-            const ph = document.createComment('expr' + (id ? ':' + id : ''));
-            parent.appendChild(ph);
-            let curNodes: Node[] = [];
-            effect(() => {
-                const r = fn();
-                curNodes.forEach(n => { if (n.parentNode) n.parentNode.removeChild(n); });
-                curNodes = [];
-                if (r == null || r === false) return;
-                const items = Array.isArray(r) ? r.flat(Infinity) : [r];
-                items.forEach(item => {
-                    if (item == null || item === false) return;
-                    const node = item instanceof Node ? item : document.createTextNode(String(item));
-                    if (ph.parentNode) {
-                        ph.parentNode.insertBefore(node, ph);
-                        curNodes.push(node);
-                    }
-                });
-            }, { id });
-        }
-    } else if (Array.isArray(child)) {
-        child.flat(Infinity).forEach(c => hC(parent, c));
-    } else {
-        parent.appendChild(child instanceof Node ? child : document.createTextNode(String(child)));
-    }
-}
-
-// Global Hydration
-export function hydrate(state: any, container: Element | Document = document, locals: any = {}) {
-    const ir = (window as any).canonicalIR; if (!ir) return;
-    window.__ZENITH_STATE__ = state;
-    const rootScope = { state, props: {}, locals: locals };
-    const nodes = ir(rootScope);
-
-    function findTag(items: any, tag: string): any {
-        const list = Array.isArray(items) ? items : [items];
-        for (const item of list) {
-            if (item instanceof Element && item.tagName.toLowerCase() === tag) return item;
-            if (item instanceof DocumentFragment) {
-                const found = findTag(Array.from(item.childNodes), tag);
-                if (found) return found;
-            }
-        }
-        return null;
-    }
-
-    const headNode = findTag(nodes, 'head');
-    const bodyNode = findTag(nodes, 'body');
-
-    if (headNode) {
-        const headMount = document.head;
-        const newTitle = headNode.querySelector('title');
-        if (newTitle) {
-            let oldTitle = headMount.querySelector('title');
-            if (!oldTitle) {
-                oldTitle = document.createElement('title');
-                headMount.appendChild(oldTitle);
-            }
-            const titleContent = newTitle.childNodes.length > 0
-                ? Array.from(newTitle.childNodes).map((n: any) => n.textContent).join('')
-                : '';
-            oldTitle.textContent = titleContent;
-            document.title = titleContent;
-            effect(() => {
-                const text = oldTitle!.textContent?.trim();
-                if (text && document.title !== text) {
-                    document.title = text;
-                }
-            }, { id: 'title-sync' });
-        }
-        headNode.querySelectorAll('meta').forEach((newMeta: Element) => {
-            const name = newMeta.getAttribute('name');
-            if (name) {
-                const oldMeta = headMount.querySelector(`meta[name="${name}"]`);
-                if (oldMeta) oldMeta.setAttribute('content', newMeta.getAttribute('content')!);
-                else headMount.appendChild(newMeta.cloneNode(true));
-            }
-        });
-        headNode.childNodes.forEach((n: Node) => {
-            if ((n as Element).tagName === 'TITLE' || (n as Element).tagName === 'META') return;
-            headMount.appendChild(n.cloneNode(true));
-        });
-    }
-
-    const bodyMount = container === document ? document.body : (container as Element);
-    if (bodyNode) {
-        bodyMount.innerHTML = '';
-        Array.from(bodyNode.childNodes).forEach(n => hC(bodyMount, n));
-    } else {
-        bodyMount.innerHTML = '';
-        const items = Array.isArray(nodes) ? nodes : [nodes];
-        items.forEach(n => hC(bodyMount, n));
-    }
-
-    for (const scopeId in window.__ZENITH_SCOPES__) {
-        mountComponent(scopeId);
-    }
-
-    queueMicrotask(() => {
-        flushEffects();
-        const titleEl = document.querySelector('title');
-        if (titleEl && titleEl.textContent) {
-            const text = titleEl.textContent.trim();
-            if (text && document.title !== text) {
-                document.title = text;
-            }
-        }
-    });
-}
-
-// Ordered Effects
-export function order(fn: () => void) {
-    if (typeof fn === 'function') fn();
-}
-
-// Hyperscript
-let currentNamespace: string | null = null;
-export function h(tag: string, props: any, children: any) {
-    const SVG_NS = 'http://www.w3.org/2000/svg';
-    const SVG_TAGS = new Set(['svg', 'path', 'circle', 'ellipse', 'line', 'polygon', 'polyline', 'rect', 'g', 'defs', 'clipPath', 'mask', 'use', 'symbol', 'text', 'tspan', 'textPath', 'image', 'foreignObject', 'switch', 'desc', 'title', 'metadata', 'linearGradient', 'radialGradient', 'stop', 'pattern', 'filter', 'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feFlood', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'feSpecularLighting', 'feTile', 'feTurbulence', 'animate', 'animateMotion', 'animateTransform', 'set', 'marker']);
-
-    const isSvgTag = SVG_TAGS.has(tag) || SVG_TAGS.has(tag.toLowerCase());
-    const useSvgNamespace = isSvgTag || currentNamespace === SVG_NS;
-
-    const el = useSvgNamespace ? document.createElementNS(SVG_NS, tag) : document.createElement(tag);
-
-    const previousNamespace = currentNamespace;
-    if (tag === 'svg' || tag === 'SVG') {
-        currentNamespace = SVG_NS;
-    }
-
-    if (props) {
-        const setClass = (element: Element, value: any) => {
-            if (useSvgNamespace && 'className' in element && typeof (element as any).className === 'object') {
-                (element as any).className.baseVal = String(value || '');
-            } else {
-                (element as any).className = String(value || '');
-            }
-        };
-
-        for (const [k, v] of Object.entries(props)) {
-            if (k === 'ref') {
-                if (v && typeof v === 'object' && 'current' in v) (v as any).current = el;
-                else if (typeof v === 'string') {
-                    const s = window.__ZENITH_STATE__;
-                    if (s && s[v] && typeof s[v] === 'object' && 'current' in s[v]) s[v].current = el;
-                }
-            } else if (k.startsWith('on')) {
-                let fn = v;
-                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) => {
-                        const h = (fn as Function).call(el, e, el);
-                        if (typeof h === 'function') h.call(el, e, el);
-                    });
-                }
-            } else {
-                let fn = v;
-                let id = null;
-                if (typeof v === 'object' && (v as any).fn) {
-                    fn = (v as any).fn;
-                    id = (v as any).id;
-                }
-                if (typeof fn === 'function') {
-                    effect(() => {
-                        const val = (fn as Function)();
-                        if (k === 'class' || k === 'className') setClass(el, val);
-                        else if (val == null || val === false) el.removeAttribute(k);
-                        else if (el.setAttribute) el.setAttribute(k, String(val));
-                    }, { id });
-                } else {
-                    if (k === 'class' || k === 'className') setClass(el, v);
-                    else if (el.setAttribute) el.setAttribute(k, String(v));
-                }
-            }
-        }
-    }
-    if (children) {
-        const items = Array.isArray(children) ? children : [children];
-        items.forEach(c => hC(el, c));
-    }
-
-    currentNamespace = previousNamespace;
-    return el;
-}
-
-export function fragment(c: any) {
-    const f = document.createDocumentFragment();
-    const items = Array.isArray(c) ? c : [c];
-    items.forEach(i => hC(f, i));
-    return f;
-}
-
-export * from './dom-hydration.js';
-export * from './thin-runtime.js';

package/src/thin-runtime.ts

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