what-core 0.1.0 → 0.2.0

package/dist/reactive.js

@@ -1,124 +1,167 @@
+// What Framework - Reactive Primitives
+// Signals + Effects: fine-grained reactivity without virtual DOM overhead
+
 let currentEffect = null;
 let batchDepth = 0;
 let pendingEffects = new Set();
+
+// --- Signal ---
+// A reactive value. Reading inside an effect auto-tracks the dependency.
+// Writing triggers only the effects that depend on this signal.
+
 export function signal(initial) {
-let value = initial;
-const subs = new Set();
-function read() {
-if (currentEffect) {
-subs.add(currentEffect);
-currentEffect.deps.add(subs); 
-}
-return value;
-}
-read.set = (next) => {
-const nextVal = typeof next === 'function' ? next(value) : next;
-if (Object.is(value, nextVal)) return;
-value = nextVal;
-notify(subs);
-};
-read.peek = () => value;
-read.subscribe = (fn) => {
-return effect(() => fn(read()));
-};
-read._signal = true;
-return read;
-}
+  let value = initial;
+  const subs = new Set();
+
+  function read() {
+    if (currentEffect) {
+      subs.add(currentEffect);
+      currentEffect.deps.add(subs); // Track reverse dep for cleanup
+    }
+    return value;
+  }
+
+  read.set = (next) => {
+    const nextVal = typeof next === 'function' ? next(value) : next;
+    if (Object.is(value, nextVal)) return;
+    value = nextVal;
+    notify(subs);
+  };
+
+  read.peek = () => value;
+
+  read.subscribe = (fn) => {
+    return effect(() => fn(read()));
+  };
+
+  read._signal = true;
+  return read;
+}
+
+// --- Computed ---
+// Derived signal. Lazy: only recomputes when a dependency changes AND it's read.
+
 export function computed(fn) {
-let value, dirty = true;
-const subs = new Set();
-const inner = _createEffect(() => {
-value = fn();
-dirty = false;
-notify(subs);
-}, { lazy: true });
-function read() {
-if (currentEffect) {
-subs.add(currentEffect);
-currentEffect.deps.add(subs);
-}
-if (dirty) _runEffect(inner);
-return value;
-}
-inner._onNotify = () => { dirty = true; };
-read._signal = true;
-read.peek = () => {
-if (dirty) _runEffect(inner);
-return value;
-};
-return read;
-}
+  let value, dirty = true;
+  const subs = new Set();
+
+  const inner = _createEffect(() => {
+    value = fn();
+    dirty = false;
+    notify(subs);
+  }, { lazy: true });
+
+  function read() {
+    if (currentEffect) {
+      subs.add(currentEffect);
+      currentEffect.deps.add(subs);
+    }
+    if (dirty) _runEffect(inner);
+    return value;
+  }
+
+  inner._onNotify = () => { dirty = true; };
+
+  read._signal = true;
+  read.peek = () => {
+    if (dirty) _runEffect(inner);
+    return value;
+  };
+
+  return read;
+}
+
+// --- Effect ---
+// Runs a function, auto-tracking signal reads. Re-runs when deps change.
+// Returns a dispose function.
+
 export function effect(fn) {
-const e = _createEffect(fn);
-_runEffect(e);
-return () => _disposeEffect(e);
-}
+  const e = _createEffect(fn);
+  _runEffect(e);
+  return () => _disposeEffect(e);
+}
+
+// --- Batch ---
+// Group multiple signal writes; effects run once at the end.
+
 export function batch(fn) {
-batchDepth++;
-try {
-fn();
-} finally {
-batchDepth--;
-if (batchDepth === 0) flush();
-}
-}
+  batchDepth++;
+  try {
+    fn();
+  } finally {
+    batchDepth--;
+    if (batchDepth === 0) flush();
+  }
+}
+
+// --- Internals ---
+
 function _createEffect(fn, opts = {}) {
-return {
-fn,
-deps: new Set(),     
-lazy: opts.lazy || false,
-_onNotify: null,
-disposed: false,
-};
-}
+  return {
+    fn,
+    deps: new Set(),     // subscriber sets this effect belongs to
+    lazy: opts.lazy || false,
+    _onNotify: null,
+    disposed: false,
+  };
+}
+
 function _runEffect(e) {
-if (e.disposed) return;
-cleanup(e);
-const prev = currentEffect;
-currentEffect = e;
-try {
-e.fn();
-} finally {
-currentEffect = prev;
-}
-}
+  if (e.disposed) return;
+  cleanup(e);
+  const prev = currentEffect;
+  currentEffect = e;
+  try {
+    e.fn();
+  } finally {
+    currentEffect = prev;
+  }
+}
+
 function _disposeEffect(e) {
-e.disposed = true;
-cleanup(e);
+  e.disposed = true;
+  cleanup(e);
 }
+
 function cleanup(e) {
-for (const dep of e.deps) dep.delete(e);
-e.deps.clear();
+  for (const dep of e.deps) dep.delete(e);
+  e.deps.clear();
 }
+
 function notify(subs) {
-const snapshot = [...subs];
-for (const e of snapshot) {
-if (e.disposed) continue;
-if (e._onNotify) {
-e._onNotify();
-if (batchDepth > 0) pendingEffects.add(e);
-continue;
-}
-if (batchDepth > 0) {
-pendingEffects.add(e);
-} else {
-_runEffect(e);
-}
-}
-}
+  // Snapshot to avoid infinite loop when effects re-subscribe during run
+  const snapshot = [...subs];
+  for (const e of snapshot) {
+    if (e.disposed) continue;
+    if (e._onNotify) {
+      e._onNotify();
+      if (batchDepth > 0) pendingEffects.add(e);
+      continue;
+    }
+    if (batchDepth > 0) {
+      pendingEffects.add(e);
+    } else {
+      _runEffect(e);
+    }
+  }
+}
+
 function flush() {
-const effects = [...pendingEffects];
-pendingEffects.clear();
-for (const e of effects) {
-if (!e.disposed && !e._onNotify) _runEffect(e);
-}
-}
+  const effects = [...pendingEffects];
+  pendingEffects.clear();
+  for (const e of effects) {
+    if (!e.disposed && !e._onNotify) _runEffect(e);
+  }
+}
+
+// --- Untrack ---
+// Read signals without subscribing
 export function untrack(fn) {
-const prev = currentEffect;
-currentEffect = null;
-try {
-return fn();
-} finally {
-currentEffect = prev;
+  const prev = currentEffect;
+  currentEffect = null;
+  try {
+    return fn();
+  } finally {
+    currentEffect = prev;
+  }
 }
-}

package/dist/scheduler.js

@@ -0,0 +1,241 @@
+// What Framework - DOM Scheduler
+// Batches DOM reads and writes to prevent layout thrashing.
+// Inspired by fastdom but integrated with our reactive system.
+
+// Queue phases: reads run first, then writes
+const readQueue = [];
+const writeQueue = [];
+let scheduled = false;
+
+// --- Schedule a DOM read operation ---
+// Reads should be batched together and run before writes
+// to avoid forced synchronous layouts.
+//
+// Example:
+//   scheduleRead(() => {
+//     const height = element.offsetHeight; // Read
+//     scheduleWrite(() => {
+//       element.style.height = height + 'px'; // Write
+//     });
+//   });
+
+export function scheduleRead(fn) {
+  readQueue.push(fn);
+  schedule();
+  return () => {
+    const idx = readQueue.indexOf(fn);
+    if (idx !== -1) readQueue.splice(idx, 1);
+  };
+}
+
+// --- Schedule a DOM write operation ---
+// Writes are batched and run after all reads complete.
+
+export function scheduleWrite(fn) {
+  writeQueue.push(fn);
+  schedule();
+  return () => {
+    const idx = writeQueue.indexOf(fn);
+    if (idx !== -1) writeQueue.splice(idx, 1);
+  };
+}
+
+// --- Flush all queued operations immediately ---
+// Useful when you need synchronous DOM access.
+
+export function flushScheduler() {
+  // Run all reads first
+  while (readQueue.length > 0) {
+    const fn = readQueue.shift();
+    try { fn(); } catch (e) { console.error('[what] Scheduler read error:', e); }
+  }
+
+  // Then all writes
+  while (writeQueue.length > 0) {
+    const fn = writeQueue.shift();
+    try { fn(); } catch (e) { console.error('[what] Scheduler write error:', e); }
+  }
+
+  scheduled = false;
+}
+
+// --- Internal scheduling ---
+
+function schedule() {
+  if (scheduled) return;
+  scheduled = true;
+  requestAnimationFrame(flushScheduler);
+}
+
+// --- Measure helper ---
+// Read a layout property without causing thrashing.
+// Returns a promise that resolves with the value.
+
+export function measure(fn) {
+  return new Promise(resolve => {
+    scheduleRead(() => {
+      resolve(fn());
+    });
+  });
+}
+
+// --- Mutate helper ---
+// Write to DOM without causing thrashing.
+// Returns a promise that resolves when the write is done.
+
+export function mutate(fn) {
+  return new Promise(resolve => {
+    scheduleWrite(() => {
+      fn();
+      resolve();
+    });
+  });
+}
+
+// --- useScheduledEffect ---
+// Effect that automatically batches DOM operations.
+
+import { effect } from './reactive.js';
+
+export function useScheduledEffect(readFn, writeFn) {
+  return effect(() => {
+    scheduleRead(() => {
+      const data = readFn();
+      if (writeFn) {
+        scheduleWrite(() => writeFn(data));
+      }
+    });
+  });
+}
+
+// --- Animation frame helper ---
+// Like requestAnimationFrame but returns a cancellable promise.
+
+export function nextFrame() {
+  let cancel;
+  const promise = new Promise((resolve, reject) => {
+    const id = requestAnimationFrame(resolve);
+    cancel = () => {
+      cancelAnimationFrame(id);
+      reject(new Error('Cancelled'));
+    };
+  });
+  promise.cancel = cancel;
+  return promise;
+}
+
+// --- Debounced RAF ---
+// Only runs the latest callback once per frame.
+
+const debouncedCallbacks = new Map();
+
+export function raf(key, fn) {
+  if (debouncedCallbacks.has(key)) {
+    // Replace callback, don't schedule new frame
+    debouncedCallbacks.set(key, fn);
+  } else {
+    debouncedCallbacks.set(key, fn);
+    requestAnimationFrame(() => {
+      const callback = debouncedCallbacks.get(key);
+      debouncedCallbacks.delete(key);
+      if (callback) callback();
+    });
+  }
+}
+
+// --- Resize Observer helper ---
+// Batched resize observations.
+
+const resizeObservers = new WeakMap();
+let sharedResizeObserver = null;
+
+export function onResize(element, callback) {
+  if (typeof ResizeObserver === 'undefined') {
+    // Fallback: just call once
+    callback(element.getBoundingClientRect());
+    return () => {};
+  }
+
+  if (!sharedResizeObserver) {
+    sharedResizeObserver = new ResizeObserver(entries => {
+      scheduleRead(() => {
+        for (const entry of entries) {
+          const cb = resizeObservers.get(entry.target);
+          if (cb) {
+            cb(entry.contentRect);
+          }
+        }
+      });
+    });
+  }
+
+  resizeObservers.set(element, callback);
+  sharedResizeObserver.observe(element);
+
+  return () => {
+    resizeObservers.delete(element);
+    sharedResizeObserver.unobserve(element);
+  };
+}
+
+// --- Intersection Observer helper ---
+// Batched intersection observations.
+
+export function onIntersect(element, callback, options = {}) {
+  if (typeof IntersectionObserver === 'undefined') {
+    // Fallback: assume visible
+    callback({ isIntersecting: true, intersectionRatio: 1 });
+    return () => {};
+  }
+
+  const observer = new IntersectionObserver(entries => {
+    scheduleRead(() => {
+      for (const entry of entries) {
+        callback(entry);
+      }
+    });
+  }, options);
+
+  observer.observe(element);
+
+  return () => observer.disconnect();
+}
+
+// --- Smooth scrolling with scheduler ---
+
+export function smoothScrollTo(element, options = {}) {
+  const { duration = 300, easing = t => t * (2 - t) } = options;
+
+  return new Promise(resolve => {
+    let startY;
+    let targetY;
+    let startTime;
+
+    scheduleRead(() => {
+      startY = window.scrollY;
+      const rect = element.getBoundingClientRect();
+      targetY = startY + rect.top;
+      startTime = performance.now();
+      tick();
+    });
+
+    function tick() {
+      scheduleRead(() => {
+        const elapsed = performance.now() - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        const easedProgress = easing(progress);
+        const currentY = startY + (targetY - startY) * easedProgress;
+
+        scheduleWrite(() => {
+          window.scrollTo(0, currentY);
+
+          if (progress < 1) {
+            requestAnimationFrame(tick);
+          } else {
+            resolve();
+          }
+        });
+      });
+    }
+  });
+}