tova 0.2.9 → 0.3.1

package/src/runtime/reactivity.js

@@ -363,9 +363,9 @@ export function watch(getter, callback, options = {}) {
   const effect = createEffect(() => {
     const newValue = getter();
     if (initialized) {
-      callback(newValue, oldValue);
+      untrack(() => callback(newValue, oldValue));
     } else if (options.immediate) {
-      callback(newValue, undefined);
+      untrack(() => callback(newValue, undefined));
     }
     oldValue = newValue;
     initialized = true;
@@ -447,29 +447,41 @@ export function createErrorBoundary(options = {}) {
   return { error, run, reset };
 }
 
-export function ErrorBoundary({ fallback, children, onError, onReset, retry = 0 }) {
+let __errorBoundaryIdCounter = 0;
+
+export function ErrorBoundary({ fallback, children, onError, onReset, onErrorCleared, retry = 0 }) {
   const [error, setError] = createSignal(null);
   const [retryCount, setRetryCount] = createSignal(0);
+  const boundaryId = ++__errorBoundaryIdCounter;
+  let lastErrorId = 0;
 
   function handleError(e) {
     const stack = buildComponentStack();
-    if (e && typeof e === 'object') e.__tovaComponentStack = stack;
+    const errorId = `EB${boundaryId}-${++lastErrorId}`;
+
+    if (e && typeof e === 'object') {
+      e.__tovaComponentStack = stack;
+      e.__tovaErrorId = errorId;
+    }
+
     if (retryCount() < retry) {
       setRetryCount(c => c + 1);
       setError(null); // clear to re-trigger render
       return;
     }
     setError(e);
-    if (onError) onError({ error: e, componentStack: stack });
+    if (onError) onError({ error: e, componentStack: stack, errorId, retryCount: retryCount() });
   }
 
-  pushErrorHandler(handleError);
+  function resetBoundary() {
+    setRetryCount(0);
+    setError(null);
+    if (onReset) onReset();
+  }
 
   // Return a reactive wrapper that switches between children and fallback
   const childContent = children && children.length === 1 ? children[0] : tova_fragment(children || []);
 
-  popErrorHandler();
-
   const vnode = {
     __tova: true,
     tag: '__dynamic',
@@ -477,19 +489,20 @@ export function ErrorBoundary({ fallback, children, onError, onReset, retry = 0
     children: [],
     _fallback: fallback,
     _componentName: 'ErrorBoundary',
+    _errorHandler: handleError, // Active during __dynamic effect render cycle
     compute: () => {
       const err = error();
       if (err) {
         // Render fallback — if fallback itself throws, propagate to parent boundary
         try {
+          const errorId = err && typeof err === 'object' ? err.__tovaErrorId : null;
           return typeof fallback === 'function'
             ? fallback({
                 error: err,
-                reset: () => {
-                  setRetryCount(0);
-                  setError(null);
-                  if (onReset) onReset();
-                },
+                errorId,
+                retryCount: retryCount(),
+                componentStack: err && typeof err === 'object' ? err.__tovaComponentStack : [],
+                reset: resetBoundary,
               })
             : fallback;
         } catch (fallbackError) {
@@ -500,6 +513,10 @@ export function ErrorBoundary({ fallback, children, onError, onReset, retry = 0
           return null;
         }
       }
+      // Children rendered successfully — fire onErrorCleared if we recovered from an error
+      if (onErrorCleared && lastErrorId > 0 && retryCount() === 0) {
+        queueMicrotask(() => onErrorCleared());
+      }
       return childContent;
     },
   };
@@ -507,6 +524,58 @@ export function ErrorBoundary({ fallback, children, onError, onReset, retry = 0
   return vnode;
 }
 
+// Built-in ErrorInfo component — renders a formatted error display
+// Usage: <ErrorBoundary fallback={fn(props) ErrorInfo(props)} />
+export function ErrorInfo({ error, errorId, componentStack, reset, retryCount }) {
+  const message = error instanceof Error ? error.message : String(error);
+  const stackTrace = error instanceof Error && error.stack ? error.stack : '';
+  const compStack = (componentStack || []).join(' > ');
+
+  const children = [
+    tova_el('h3', { style: { margin: '0 0 8px 0', color: '#e53e3e' } }, ['Something went wrong']),
+    tova_el('p', { style: { margin: '4px 0', fontFamily: 'monospace', fontSize: '14px' } }, [message]),
+  ];
+
+  if (compStack) {
+    children.push(
+      tova_el('p', { style: { margin: '4px 0', fontSize: '12px', color: '#718096' } }, [
+        'Component: ', compStack
+      ])
+    );
+  }
+
+  if (errorId) {
+    children.push(
+      tova_el('p', { style: { margin: '4px 0', fontSize: '11px', color: '#a0aec0' } }, [
+        'Error ID: ', errorId
+      ])
+    );
+  }
+
+  if (stackTrace) {
+    children.push(
+      tova_el('details', { style: { marginTop: '8px', fontSize: '12px' } }, [
+        tova_el('summary', { style: { cursor: 'pointer', color: '#4a5568' } }, ['Stack trace']),
+        tova_el('pre', { style: { margin: '4px 0', padding: '8px', background: '#1a202c', color: '#e2e8f0', borderRadius: '4px', overflow: 'auto', fontSize: '11px', maxHeight: '200px' } }, [stackTrace]),
+      ])
+    );
+  }
+
+  if (reset) {
+    children.push(
+      tova_el('button', {
+        style: { marginTop: '8px', padding: '6px 16px', background: '#3182ce', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '13px' },
+        onClick: reset,
+      }, [retryCount > 0 ? 'Retry again' : 'Try again'])
+    );
+  }
+
+  return tova_el('div', {
+    style: { padding: '16px', border: '1px solid #fed7d7', borderRadius: '8px', background: '#fff5f5', color: '#2d3748', fontFamily: 'system-ui, -apple-system, sans-serif' },
+    role: 'alert',
+  }, children);
+}
+
 // ─── Dynamic Component ──────────────────────────────────
 // Renders a component dynamically based on a reactive signal.
 // Usage: Dynamic({ component: mySignal, ...props })
@@ -547,6 +616,7 @@ export function Portal({ target, children }) {
 
 export function lazy(loader) {
   let resolved = null;
+  let loadError = null;
   let promise = null;
 
   return function LazyWrapper(props) {
@@ -554,28 +624,28 @@ export function lazy(loader) {
       return resolved(props);
     }
 
-    const [comp, setComp] = createSignal(null);
-    const [err, setErr] = createSignal(null);
-
     if (!promise) {
       promise = loader()
         .then(mod => {
           resolved = mod.default || mod;
-          setComp(() => resolved);
         })
-        .catch(e => setErr(e));
+        .catch(e => { loadError = e; });
     }
 
+    const [tick, setTick] = createSignal(0);
+
+    // Trigger re-render when promise settles
+    promise.then(() => setTick(1)).catch(() => setTick(1));
+
     return {
       __tova: true,
       tag: '__dynamic',
       props: {},
       children: [],
       compute: () => {
-        const e = err();
-        if (e) return tova_el('span', { className: 'tova-error' }, [String(e)]);
-        const c = comp();
-        if (c) return c(props);
+        tick(); // Track for reactivity
+        if (loadError) return tova_el('span', { className: 'tova-error' }, [String(loadError)]);
+        if (resolved) return resolved(props);
         // Fallback while loading
         return props && props.fallback ? props.fallback : null;
       },
@@ -631,6 +701,100 @@ export function tova_fragment(children) {
   return { __tova: true, tag: '__fragment', props: {}, children };
 }
 
+// ─── Transitions ──────────────────────────────────────────
+// CSS transition directives for mount/unmount animations.
+// Usage: tova_transition(vnode, "fade", { duration: 300 })
+
+const TRANSITION_DEFAULTS = {
+  fade: { duration: 200, easing: 'ease' },
+  slide: { duration: 300, easing: 'ease-out', axis: 'y' },
+  scale: { duration: 200, easing: 'ease' },
+  fly: { duration: 300, easing: 'ease-out', x: 0, y: -20 },
+};
+
+function getTransitionCSS(name, config, phase) {
+  const opts = { ...TRANSITION_DEFAULTS[name], ...config };
+  const dur = opts.duration + 'ms';
+  const ease = opts.easing;
+
+  switch (name) {
+    case 'fade':
+      if (phase === 'enter-from' || phase === 'leave-to') {
+        return { opacity: '0', transition: `opacity ${dur} ${ease}` };
+      }
+      return { opacity: '1', transition: `opacity ${dur} ${ease}` };
+
+    case 'slide': {
+      const axis = opts.axis || 'y';
+      const prop = axis === 'x' ? 'translateX' : 'translateY';
+      const dist = (opts.distance || 20) + 'px';
+      if (phase === 'enter-from' || phase === 'leave-to') {
+        return { transform: `${prop}(${dist})`, opacity: '0', transition: `transform ${dur} ${ease}, opacity ${dur} ${ease}` };
+      }
+      return { transform: `${prop}(0)`, opacity: '1', transition: `transform ${dur} ${ease}, opacity ${dur} ${ease}` };
+    }
+
+    case 'scale':
+      if (phase === 'enter-from' || phase === 'leave-to') {
+        return { transform: 'scale(0)', opacity: '0', transition: `transform ${dur} ${ease}, opacity ${dur} ${ease}` };
+      }
+      return { transform: 'scale(1)', opacity: '1', transition: `transform ${dur} ${ease}, opacity ${dur} ${ease}` };
+
+    case 'fly': {
+      const x = (opts.x || 0) + 'px';
+      const y = (opts.y || -20) + 'px';
+      if (phase === 'enter-from' || phase === 'leave-to') {
+        return { transform: `translate(${x}, ${y})`, opacity: '0', transition: `transform ${dur} ${ease}, opacity ${dur} ${ease}` };
+      }
+      return { transform: 'translate(0, 0)', opacity: '1', transition: `transform ${dur} ${ease}, opacity ${dur} ${ease}` };
+    }
+
+    default:
+      return {};
+  }
+}
+
+export function tova_transition(vnode, name, config = {}) {
+  if (!vnode || !vnode.__tova) return vnode;
+  vnode._transition = { name, config };
+  return vnode;
+}
+
+// Apply enter transition to a DOM element after render
+function applyEnterTransition(el, trans) {
+  if (!trans) return;
+  const fromStyles = getTransitionCSS(trans.name, trans.config, 'enter-from');
+  const toStyles = getTransitionCSS(trans.name, trans.config, 'enter-to');
+
+  // Set initial state
+  Object.assign(el.style, fromStyles);
+
+  // Force reflow, then apply target state
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      Object.assign(el.style, toStyles);
+    });
+  });
+}
+
+// Apply leave transition and return a Promise that resolves when done
+function applyLeaveTransition(el, trans) {
+  if (!trans) return Promise.resolve();
+  const duration = (trans.config && trans.config.duration) || TRANSITION_DEFAULTS[trans.name]?.duration || 200;
+  const toStyles = getTransitionCSS(trans.name, trans.config, 'leave-to');
+  Object.assign(el.style, toStyles);
+
+  return new Promise(resolve => {
+    const handler = () => {
+      el.removeEventListener('transitionend', handler);
+      resolve();
+    };
+    el.addEventListener('transitionend', handler);
+    // Fallback timeout in case transitionend doesn't fire
+    setTimeout(resolve, duration + 50);
+  });
+}
+
 // Inject a key prop into a vnode for keyed reconciliation
 export function tova_keyed(key, vnode) {
   if (vnode && vnode.__tova) {
@@ -741,8 +905,17 @@ function insertRendered(parent, rendered, ref, owner) {
 // Clear a marker's content from the DOM and reset __tovaNodes
 function clearMarkerContent(marker) {
   for (const node of marker.__tovaNodes) {
-    disposeNode(node);
-    if (node.parentNode) node.parentNode.removeChild(node);
+    // If element has a leave transition, animate out before removing
+    if (node.__tovaTransition && node.nodeType === 1) {
+      const el = node;
+      applyLeaveTransition(el, el.__tovaTransition).then(() => {
+        disposeNode(el);
+        if (el.parentNode) el.parentNode.removeChild(el);
+      });
+    } else {
+      disposeNode(node);
+      if (node.parentNode) node.parentNode.removeChild(node);
+    }
   }
   marker.__tovaNodes = [];
 }
@@ -861,22 +1034,36 @@ export function render(vnode) {
     frag.appendChild(marker);
 
     let prevDispose = null;
+    const errHandler = vnode._errorHandler || null;
     createEffect(() => {
-      const inner = vnode.compute();
-      const parent = marker.parentNode;
-      const ref = nextSiblingAfterMarker(marker);
+      if (errHandler) pushErrorHandler(errHandler);
+      try {
+        const inner = vnode.compute();
+        const parent = marker.parentNode;
+        const ref = nextSiblingAfterMarker(marker);
+
+        if (prevDispose) {
+          prevDispose();
+          prevDispose = null;
+        }
+        clearMarkerContent(marker);
 
-      if (prevDispose) {
-        prevDispose();
-        prevDispose = null;
+        createRoot((dispose) => {
+          prevDispose = dispose;
+          const rendered = render(inner);
+          marker.__tovaNodes = insertRendered(parent, rendered, ref, marker);
+        });
+      } catch (e) {
+        if (errHandler) {
+          errHandler(e);
+        } else if (currentErrorHandler) {
+          currentErrorHandler(e);
+        } else {
+          console.error('Uncaught error during render:', e);
+        }
+      } finally {
+        if (errHandler) popErrorHandler();
       }
-      clearMarkerContent(marker);
-
-      createRoot((dispose) => {
-        prevDispose = dispose;
-        const rendered = render(inner);
-        marker.__tovaNodes = insertRendered(parent, rendered, ref, marker);
-      });
     });
 
     return frag;
@@ -919,6 +1106,12 @@ export function render(vnode) {
   // Store vnode reference for patching
   el.__vnode = vnode;
 
+  // Apply enter transition if present
+  if (vnode._transition) {
+    el.__tovaTransition = vnode._transition;
+    applyEnterTransition(el, vnode._transition);
+  }
+
   return el;
 }
 
@@ -965,6 +1158,14 @@ function applyPropValue(el, key, val) {
   } else if (key === 'disabled' || key === 'readOnly' || key === 'hidden') {
     el[key] = !!val;
   } else if (key === 'style' && typeof val === 'object') {
+    // Clear old properties not present in new style object
+    for (let i = el.style.length - 1; i >= 0; i--) {
+      const prop = el.style[i];
+      const camel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+      if (!(prop in val) && !(camel in val)) {
+        el.style.removeProperty(prop);
+      }
+    }
     Object.assign(el.style, val);
   } else {
     const s = val == null ? '' : String(val);
@@ -1150,11 +1351,7 @@ function patchPositionalInMarker(marker, newChildren) {
     if (oldNodes[i].parentNode === parent) parent.removeChild(oldNodes[i]);
   }
 
-  marker.__tovaNodes = oldNodes.slice(0, Math.max(newCount, oldCount > newCount ? newCount : oldNodes.length));
-  // Simplify: rebuild __tovaNodes from what should remain
-  if (newCount <= oldCount) {
-    marker.__tovaNodes = oldNodes.slice(0, newCount);
-  }
+  marker.__tovaNodes = oldNodes.slice(0, newCount);
 }
 
 // Keyed reconciliation for children of an element (not marker-based)

package/src/stdlib/advanced-collections.js

@@ -0,0 +1,81 @@
+// Advanced collection data structures for Tova
+// These are the real JS implementations used for testing and reference.
+
+export class OrderedDict {
+  constructor(entries) {
+    this._map = new Map(entries || []);
+  }
+  get(key) { return this._map.has(key) ? this._map.get(key) : null; }
+  set(key, value) { const m = new Map(this._map); m.set(key, value); return new OrderedDict([...m]); }
+  delete(key) { const m = new Map(this._map); m.delete(key); return new OrderedDict([...m]); }
+  has(key) { return this._map.has(key); }
+  keys() { return [...this._map.keys()]; }
+  values() { return [...this._map.values()]; }
+  entries() { return [...this._map.entries()]; }
+  get length() { return this._map.size; }
+  [Symbol.iterator]() { return this._map[Symbol.iterator](); }
+  toString() { return 'OrderedDict(' + this._map.size + ' entries)'; }
+}
+
+export class DefaultDict {
+  constructor(defaultFn) {
+    this._map = new Map();
+    this._default = defaultFn;
+  }
+  get(key) {
+    if (!this._map.has(key)) {
+      this._map.set(key, this._default());
+    }
+    return this._map.get(key);
+  }
+  set(key, value) { this._map.set(key, value); return this; }
+  has(key) { return this._map.has(key); }
+  delete(key) { this._map.delete(key); return this; }
+  keys() { return [...this._map.keys()]; }
+  values() { return [...this._map.values()]; }
+  entries() { return [...this._map.entries()]; }
+  get length() { return this._map.size; }
+  [Symbol.iterator]() { return this._map[Symbol.iterator](); }
+  toString() { return 'DefaultDict(' + this._map.size + ' entries)'; }
+}
+
+export class Counter {
+  constructor(items) {
+    this._counts = new Map();
+    if (items) {
+      for (const item of items) {
+        const k = item;
+        this._counts.set(k, (this._counts.get(k) || 0) + 1);
+      }
+    }
+  }
+  count(item) { return this._counts.get(item) || 0; }
+  total() { let s = 0; for (const v of this._counts.values()) s += v; return s; }
+  most_common(n) {
+    const sorted = [...this._counts.entries()].sort((a, b) => b[1] - a[1]);
+    return n !== undefined ? sorted.slice(0, n) : sorted;
+  }
+  keys() { return [...this._counts.keys()]; }
+  values() { return [...this._counts.values()]; }
+  entries() { return [...this._counts.entries()]; }
+  has(item) { return this._counts.has(item); }
+  get length() { return this._counts.size; }
+  [Symbol.iterator]() { return this._counts[Symbol.iterator](); }
+  toString() { return 'Counter(' + this._counts.size + ' items)'; }
+}
+
+export class Deque {
+  constructor(items) {
+    this._items = items ? [...items] : [];
+  }
+  push_back(val) { return new Deque([...this._items, val]); }
+  push_front(val) { return new Deque([val, ...this._items]); }
+  pop_back() { if (this._items.length === 0) return [null, this]; const items = this._items.slice(0, -1); return [this._items[this._items.length - 1], new Deque(items)]; }
+  pop_front() { if (this._items.length === 0) return [null, this]; return [this._items[0], new Deque(this._items.slice(1))]; }
+  peek_front() { return this._items.length > 0 ? this._items[0] : null; }
+  peek_back() { return this._items.length > 0 ? this._items[this._items.length - 1] : null; }
+  get length() { return this._items.length; }
+  toArray() { return [...this._items]; }
+  [Symbol.iterator]() { return this._items[Symbol.iterator](); }
+  toString() { return 'Deque(' + this._items.length + ' items)'; }
+}