what-core 0.5.3 → 0.5.5

package/README.md

@@ -0,0 +1,119 @@
+# what-core
+
+The reactive engine behind [What Framework](https://whatfw.com). Provides signals, fine-grained reactivity, components, hooks, and DOM rendering -- all without a virtual DOM diffing step.
+
+Most users should install [`what-framework`](https://www.npmjs.com/package/what-framework) instead. `what-core` is the internal engine consumed by other What packages.
+
+## Install
+
+```bash
+npm install what-core
+```
+
+## Reactive Primitives
+
+```js
+import { signal, computed, effect, batch, untrack } from 'what-core';
+
+const count = signal(0);
+
+// Read
+count();          // 0
+
+// Write
+count.set(5);
+count.set(c => c + 1);
+
+// Derived value
+const doubled = computed(() => count() * 2);
+
+// Side effects
+effect(() => {
+  console.log('Count:', count());
+});
+
+// Batch updates (effects run once at the end)
+batch(() => {
+  a.set(1);
+  b.set(2);
+});
+
+// Read without subscribing
+untrack(() => someSignal());
+count.peek();
+```
+
+## Hooks
+
+React-compatible hooks backed by signals internally.
+
+```js
+import {
+  useState, useEffect, useMemo, useCallback,
+  useRef, useReducer, useContext, createContext,
+  onMount, onCleanup,
+} from 'what-core';
+
+const [count, setCount] = useState(0);
+
+useEffect(() => {
+  const id = setInterval(tick, 1000);
+  return () => clearInterval(id);
+}, []);
+```
+
+## Components
+
+```js
+import { h, mount, Fragment, memo, lazy, Suspense, ErrorBoundary, Show, For } from 'what-core';
+
+function Counter() {
+  const count = signal(0);
+  return h('button', { onclick: () => count.set(c => c + 1) }, () => count());
+}
+
+mount(h(Counter), '#app');
+```
+
+## Additional Modules
+
+| Export path | Contents |
+|---|---|
+| `what-core` | Signals, hooks, components, store, forms, data fetching, animation, a11y, skeleton loaders |
+| `what-core/render` | Fine-grained rendering primitives (`template`, `insert`, `spread`, `delegateEvents`) |
+| `what-core/jsx-runtime` | JSX automatic runtime |
+| `what-core/testing` | Test utilities |
+
+## API Overview
+
+**Reactivity** -- `signal`, `computed`, `effect`, `batch`, `untrack`, `flushSync`, `createRoot`
+
+**Rendering** -- `h`, `Fragment`, `html`, `mount`, `template`, `insert`, `spread`, `delegateEvents`
+
+**Hooks** -- `useState`, `useSignal`, `useComputed`, `useEffect`, `useMemo`, `useCallback`, `useRef`, `useContext`, `useReducer`, `createContext`, `onMount`, `onCleanup`, `createResource`
+
+**Components** -- `memo`, `lazy`, `Suspense`, `ErrorBoundary`, `Show`, `For`, `Switch`, `Match`, `Island`, `Portal`
+
+**Store** -- `createStore`, `derived`, `atom`
+
+**Data Fetching** -- `useSWR`, `useQuery`, `useInfiniteQuery`, `invalidateQueries`, `prefetchQuery`
+
+**Forms** -- `useForm`, `useField`, `rules`, `zodResolver`, `Input`, `Select`, `Checkbox`, `ErrorMessage`
+
+**Animation** -- `spring`, `tween`, `easings`, `useGesture`, `useTransition`
+
+**Accessibility** -- `useFocusTrap`, `FocusTrap`, `announce`, `SkipLink`, `useRovingTabIndex`, `VisuallyHidden`, `useId`
+
+**Scheduler** -- `scheduleRead`, `scheduleWrite`, `measure`, `mutate`, `onResize`, `onIntersect`
+
+**Head** -- `Head`, `clearHead`
+
+## Links
+
+- [Documentation](https://whatfw.com)
+- [GitHub](https://github.com/CelsianJs/whatfw)
+- [Benchmarks](https://benchmarks.whatfw.com)
+
+## License
+
+MIT

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "what-core",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "What Framework - The closest framework to vanilla JS",
   "type": "module",
-  "main": "dist/what.js",
+  "main": "src/index.js",
   "module": "src/index.js",
   "types": "index.d.ts",
   "exports": {
@@ -44,14 +44,14 @@
     "lightweight",
     "vdom"
   ],
-  "author": "",
+  "author": "ZVN DEV (https://zvndev.com)",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/zvndev/what-fw"
+    "url": "https://github.com/CelsianJs/whatfw"
   },
   "bugs": {
-    "url": "https://github.com/zvndev/what-fw/issues"
+    "url": "https://github.com/CelsianJs/whatfw/issues"
   },
-  "homepage": "https://whatframework.dev"
+  "homepage": "https://whatfw.com"
 }

package/src/animation.js

@@ -77,7 +77,9 @@ export function spring(initialValue, options = {}) {
 
   function set(newTarget) {
     target.set(newTarget);
-    if (!isAnimating.peek()) {
+    // Use rafId check instead of isAnimating signal — signal may not have flushed
+    // after a synchronous stop() call, causing duplicate animation frames
+    if (rafId === null) {
       isAnimating.set(true);
       lastTime = null;
       rafId = requestAnimationFrame(tick);

package/src/data.js

@@ -68,7 +68,7 @@ function subscribeToKey(key, revalidateFn) {
   };
 }
 
-const inFlightRequests = new Map();
+const inFlightRequests = new Map(); // key -> { promise, timestamp, refCount }
 const lastFetchTimestamps = new Map(); // key -> timestamp of last completed fetch
 
 // Create an effect scoped to the current component's lifecycle.
@@ -200,6 +200,7 @@ export function useSWR(key, fetcher, options = {}) {
     if (inFlightRequests.has(key)) {
       const existing = inFlightRequests.get(key);
       if (now - existing.timestamp < dedupingInterval) {
+        existing.refCount++;
         return existing.promise;
       }
     }
@@ -210,15 +211,20 @@ export function useSWR(key, fetcher, options = {}) {
       return cacheS.peek();
     }
 
-    // Abort previous request
-    if (abortController) abortController.abort();
+    // Abort previous request only if no other subscribers are using it
+    if (abortController) {
+      const existing = inFlightRequests.get(key);
+      if (!existing || existing.refCount <= 1) {
+        abortController.abort();
+      }
+    }
     abortController = new AbortController();
     const { signal: abortSignal } = abortController;
 
     isValidating.set(true);
 
     const promise = fetcher(key, { signal: abortSignal });
-    inFlightRequests.set(key, { promise, timestamp: now });
+    inFlightRequests.set(key, { promise, timestamp: now, refCount: 1 });
 
     try {
       const result = await promise;
@@ -238,7 +244,11 @@ export function useSWR(key, fetcher, options = {}) {
       throw e;
     } finally {
       if (!abortSignal.aborted) isValidating.set(false);
-      inFlightRequests.delete(key);
+      const flight = inFlightRequests.get(key);
+      if (flight) {
+        flight.refCount--;
+        if (flight.refCount <= 0) inFlightRequests.delete(key);
+      }
     }
   }
 
@@ -636,3 +646,20 @@ export function clearCache() {
   lastFetchTimestamps.clear();
   inFlightRequests.clear();
 }
+
+/**
+ * Get a snapshot of all cache entries for devtools.
+ * @internal
+ */
+export function __getCacheSnapshot() {
+  const entries = [];
+  for (const [key, sig] of cacheSignals) {
+    entries.push({
+      key,
+      data: sig.peek(),
+      error: errorSignals.has(key) ? errorSignals.get(key).peek() : null,
+      isValidating: validatingSignals.has(key) ? validatingSignals.get(key).peek() : false,
+    });
+  }
+  return entries;
+}

package/src/dom.js

@@ -3,7 +3,7 @@
 // Components use <what-c> wrapper elements (display:contents) for clean reconciliation.
 // No virtual DOM tree kept in memory — we diff against the live DOM.
 
-import { effect, batch, untrack, signal } from './reactive.js';
+import { effect, batch, untrack, signal, __DEV__, __devtools } from './reactive.js';
 import { reportError, _injectGetCurrentComponent, shallowEqual } from './components.js';
 import { _setComponentRef } from './helpers.js';
 
@@ -78,17 +78,18 @@ function disposeComponent(ctx) {
   if (ctx.disposed) return;
   ctx.disposed = true;
 
-  // Run useEffect cleanup functions
-  for (const hook of ctx.hooks) {
+  // Run useEffect cleanup functions in reverse order (last effect first, matching React)
+  for (let i = ctx.hooks.length - 1; i >= 0; i--) {
+    const hook = ctx.hooks[i];
     if (hook && typeof hook === 'object' && 'cleanup' in hook && hook.cleanup) {
       try { hook.cleanup(); } catch (e) { console.error('[what] cleanup error:', e); }
     }
   }
 
-  // Run onCleanup callbacks
+  // Run onCleanup callbacks in reverse order (last registered first)
   if (ctx._cleanupCallbacks) {
-    for (const fn of ctx._cleanupCallbacks) {
-      try { fn(); } catch (e) { console.error('[what] onCleanup error:', e); }
+    for (let i = ctx._cleanupCallbacks.length - 1; i >= 0; i--) {
+      try { ctx._cleanupCallbacks[i](); } catch (e) { console.error('[what] onCleanup error:', e); }
     }
   }
 
@@ -97,6 +98,7 @@ function disposeComponent(ctx) {
     try { dispose(); } catch (e) { /* effect already disposed */ }
   }
 
+  if (__DEV__ && __devtools?.onComponentUnmount) __devtools.onComponentUnmount(ctx);
   mountedComponents.delete(ctx);
 }
 
@@ -110,6 +112,12 @@ export function disposeTree(node) {
   if (node._dispose) {
     try { node._dispose(); } catch (e) { /* already disposed */ }
   }
+  // Dispose reactive prop effects (value: () => ..., class: () => ..., etc.)
+  if (node._propEffects) {
+    for (const key in node._propEffects) {
+      try { node._propEffects[key](); } catch (e) { /* already disposed */ }
+    }
+  }
   if (node.childNodes) {
     for (const child of node.childNodes) {
       disposeTree(child);
@@ -304,6 +312,7 @@ function createComponent(vnode, parent, isSvg) {
 
   // Track for disposal
   mountedComponents.add(ctx);
+  if (__DEV__ && __devtools?.onComponentMount) __devtools.onComponentMount(ctx);
 
   // Props signal for reactive updates from parent
   // Match React's children semantics: 0→undefined, 1→single child, N→array
@@ -994,6 +1003,25 @@ function applyProps(el, newProps, oldProps, isSvg) {
 }
 
 function setProp(el, key, value, isSvg) {
+  // Reactive function props — wrap in effect() for fine-grained updates.
+  // Applies to any non-event prop where the value is a function, e.g.:
+  //   h('input', { value: () => name(), class: () => active() ? 'on' : 'off' })
+  // The function is called inside an effect, so signal reads create subscriptions.
+  // When signals change, the prop is re-applied automatically.
+  if (typeof value === 'function' && !(key.startsWith('on') && key.length > 2) && key !== 'ref') {
+    // Store dispose functions on the element for cleanup
+    if (!el._propEffects) el._propEffects = {};
+    // Dispose previous effect for this prop if re-applying
+    if (el._propEffects[key]) {
+      try { el._propEffects[key](); } catch (e) { /* already disposed */ }
+    }
+    el._propEffects[key] = effect(() => {
+      const resolved = value();
+      setProp(el, key, resolved, isSvg);
+    });
+    return;
+  }
+
   // Event handlers: onClick -> click, onFocusCapture -> focus (capture phase)
   // Wrap in untrack so signal reads in handlers don't create subscriptions
   if (key.startsWith('on') && key.length > 2) {

package/src/form.js

@@ -62,6 +62,7 @@ function createFormController(options = {}) {
   const isDirty = signal(false);
   const isSubmitting = signal(false);
   const isSubmitted = signal(false);
+  const isValidating = signal(false);
   const submitCount = signal(0);
 
   // Helper: get all current values as a plain object.
@@ -128,34 +129,42 @@ function createFormController(options = {}) {
   async function validate(fieldName) {
     if (!resolver) return true;
 
-    const result = await resolver(getAllValues(false));
-    const nextErrors = result?.errors || {};
-
-    if (fieldName) {
-      const nextError = nextErrors[fieldName] ?? null;
-      setFieldError(fieldName, nextError);
-      return !nextError;
-    } else {
-      replaceAllErrors(nextErrors);
-      return Object.keys(nextErrors).length === 0;
+    isValidating.set(true);
+    try {
+      const result = await resolver(getAllValues(false));
+      const nextErrors = result?.errors || {};
+
+      if (fieldName) {
+        const nextError = nextErrors[fieldName] ?? null;
+        setFieldError(fieldName, nextError);
+        return !nextError;
+      } else {
+        replaceAllErrors(nextErrors);
+        return Object.keys(nextErrors).length === 0;
+      }
+    } finally {
+      isValidating.set(false);
     }
   }
 
   // Register a field — only subscribes to THIS field's signal
   function register(name, options = {}) {
     const fieldSig = getFieldSignal(name);
-    return {
-      name,
-      // Use getter so value is always fresh, even if register result is cached
-      get value() { return fieldSig(); },
-      onInput: (e) => {
-        const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
-        setValue(name, value);
+    const isCheckbox = options.type === 'checkbox' || options.type === 'radio';
 
-        if (mode === 'onChange' || (isSubmitted.peek() && reValidateMode === 'onChange')) {
-          validate(name);
-        }
-      },
+    const handler = (e) => {
+      const value = (e.target.type === 'checkbox' || e.target.type === 'radio')
+        ? e.target.checked
+        : e.target.value;
+      setValue(name, value);
+
+      if (mode === 'onChange' || (isSubmitted.peek() && reValidateMode === 'onChange')) {
+        validate(name);
+      }
+    };
+
+    const result = {
+      name,
       onBlur: () => {
         getTouchedSignal(name).set(true);
 
@@ -166,6 +175,24 @@ function createFormController(options = {}) {
       onFocus: () => {},
       ref: options.ref,
     };
+
+    if (isCheckbox) {
+      // Checkbox/radio: use checked prop + onchange event
+      Object.defineProperty(result, 'checked', {
+        get() { return !!fieldSig(); },
+        enumerable: true,
+      });
+      result.onchange = handler;
+    } else {
+      // Text/select/textarea: use value prop + oninput event
+      Object.defineProperty(result, 'value', {
+        get() { return fieldSig(); },
+        enumerable: true,
+      });
+      result.oninput = handler;
+    }
+
+    return result;
   }
 
   // Set single field value — only triggers re-render for components reading this field
@@ -273,6 +300,7 @@ function createFormController(options = {}) {
       },
       isDirty: () => isDirty(),
       isValid,
+      isValidating: () => isValidating(),
       isSubmitting: () => isSubmitting(),
       isSubmitted: () => isSubmitted(),
       submitCount: () => submitCount(),

package/src/index.js

@@ -2,7 +2,7 @@
 // The closest framework to vanilla JS.
 
 // Reactive primitives
-export { signal, computed, effect, memo as signalMemo, batch, untrack, flushSync, createRoot } from './reactive.js';
+export { signal, computed, effect, memo as signalMemo, batch, untrack, flushSync, createRoot, __setDevToolsHooks } from './reactive.js';
 
 // Fine-grained rendering primitives
 export { template, insert, mapArray, spread, setProp, delegateEvents, on, classList } from './render.js';
@@ -132,6 +132,7 @@ export {
   setQueryData,
   getQueryData,
   clearCache,
+  __getCacheSnapshot,
 } from './data.js';
 
 // Form utilities

package/src/reactive.js

@@ -2,7 +2,9 @@
 // Signals + Effects: fine-grained reactivity without virtual DOM overhead
 
 // Dev-mode flag — build tools can dead-code-eliminate when false
-export const __DEV__ = typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production' || true;
+export const __DEV__ = typeof process !== 'undefined'
+  ? process.env?.NODE_ENV !== 'production'
+  : true;
 
 // DevTools hooks — set by what-devtools when installed.
 // These are no-ops in production (dead-code eliminated with __DEV__).
@@ -22,7 +24,7 @@ let pendingEffects = [];
 // 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) {
+export function signal(initial, debugName) {
   let value = initial;
   const subs = new Set();
 
@@ -59,6 +61,10 @@ export function signal(initial) {
   };
 
   sig._signal = true;
+  if (__DEV__) {
+    sig._subs = subs;
+    if (debugName) sig._debugName = debugName;
+  }
 
   // Notify devtools of signal creation
   if (__DEV__ && __devtools) __devtools.onSignalCreate(sig);
@@ -175,9 +181,13 @@ function _runEffect(e) {
     try {
       const result = e.fn();
       if (typeof result === 'function') e._cleanup = result;
+    } catch (err) {
+      if (__devtools?.onError) __devtools.onError(err, { type: 'effect', effect: e });
+      if (__DEV__) console.warn('[what] Error in stable effect:', err);
     } finally {
       currentEffect = prev;
     }
+    if (__DEV__ && __devtools?.onEffectRun) __devtools.onEffectRun(e);
     return;
   }
 
@@ -185,6 +195,7 @@ function _runEffect(e) {
   // Run effect cleanup from previous run
   if (e._cleanup) {
     try { e._cleanup(); } catch (err) {
+      if (__devtools?.onError) __devtools.onError(err, { type: 'effect-cleanup', effect: e });
       if (__DEV__) console.warn('[what] Error in effect cleanup:', err);
     }
     e._cleanup = null;
@@ -197,9 +208,13 @@ function _runEffect(e) {
     if (typeof result === 'function') {
       e._cleanup = result;
     }
+  } catch (err) {
+    if (__devtools?.onError) __devtools.onError(err, { type: 'effect', effect: e });
+    throw err;
   } finally {
     currentEffect = prev;
   }
+  if (__DEV__ && __devtools?.onEffectRun) __devtools.onEffectRun(e);
 }
 
 function _disposeEffect(e) {
@@ -238,6 +253,7 @@ function notify(subs) {
           e._cleanup = result;
         }
       } catch (err) {
+        if (__devtools?.onError) __devtools.onError(err, { type: 'effect', effect: e });
         if (__DEV__) console.warn('[what] Error in stable effect:', err);
       } finally {
         currentEffect = prev;
@@ -263,7 +279,7 @@ function scheduleMicrotask() {
 
 function flush() {
   let iterations = 0;
-  while (pendingEffects.length > 0 && iterations < 100) {
+  while (pendingEffects.length > 0 && iterations < 25) {
     const batch = pendingEffects;
     pendingEffects = [];
     for (let i = 0; i < batch.length; i++) {
@@ -273,12 +289,12 @@ function flush() {
     }
     iterations++;
   }
-  if (iterations >= 100) {
+  if (iterations >= 25) {
     if (__DEV__) {
       const remaining = pendingEffects.slice(0, 3);
       const effectNames = remaining.map(e => e.fn?.name || e.fn?.toString().slice(0, 60) || '(anonymous)');
       console.warn(
-        `[what] Possible infinite effect loop detected (100 iterations). ` +
+        `[what] Possible infinite effect loop detected (25 iterations). ` +
         `Likely cause: an effect writes to a signal it also reads, creating a cycle. ` +
         `Use untrack() to read signals without subscribing. ` +
         `Looping effects: ${effectNames.join(', ')}`