what-core 0.5.4 → 0.5.5

package/README.md

@@ -111,7 +111,7 @@ mount(h(Counter), '#app');
 ## Links
 
 - [Documentation](https://whatfw.com)
-- [GitHub](https://github.com/zvndev/what-fw)
+- [GitHub](https://github.com/CelsianJs/whatfw)
 - [Benchmarks](https://benchmarks.whatfw.com)
 
 ## License

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "what-core",
-  "version": "0.5.4",
+  "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://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);
+      }
     }
   }
 

package/src/dom.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); }
     }
   }
 
@@ -111,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);
@@ -996,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/reactive.js

@@ -279,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++) {
@@ -289,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(', ')}`