stunk 2.0.0 → 2.1.0

package/README.md

@@ -1,6 +1,6 @@
 # Stunk
 
-A lightweight, reactive state management library for TypeScript/JavaScript applications. Stunk combines atomic state management with powerful features like middleware, time travel, and async state handling.
+Stunk is a lightweight, framework-agnostic state management library built on atomic state principles. It simplifies state management by breaking state into manageable "chunks", ensuring efficient updates and reactivity.
 
 - **Pronunciation**: _Stunk_ (A playful blend of "state" and "chunk")
 

package/dist/core/asyncChunk.d.ts

@@ -1,11 +1,11 @@
 import { Chunk } from "./core";
 import { AsyncChunkOpt } from "./types";
-export interface AsyncState<T> {
+export interface AsyncState<T, E extends Error> {
     loading: boolean;
-    error: Error | null;
+    error: E | null;
     data: T | null;
 }
-export interface AsyncChunk<T> extends Chunk<AsyncState<T>> {
+export interface AsyncChunk<T, E extends Error = Error> extends Chunk<AsyncState<T, E>> {
     /**
      * Reload the data from the source.
      */
@@ -19,4 +19,4 @@ export interface AsyncChunk<T> extends Chunk<AsyncState<T>> {
      */
     reset: () => void;
 }
-export declare function asyncChunk<T>(fetcher: () => Promise<T>, options?: AsyncChunkOpt<T>): AsyncChunk<T>;
+export declare function asyncChunk<T, E extends Error = Error>(fetcher: () => Promise<T>, options?: AsyncChunkOpt<T, E>): AsyncChunk<T, E>;

package/dist/core/asyncChunk.js

@@ -18,10 +18,9 @@ export function asyncChunk(fetcher, options = {}) {
                 await new Promise(resolve => setTimeout(resolve, retryDelay));
                 return fetchData(retries - 1);
             }
-            const errorObj = error instanceof Error ? error : new Error(String(error));
-            baseChunk.set({ loading: false, error: errorObj, data: baseChunk.get().data });
+            baseChunk.set({ loading: false, error: error, data: baseChunk.get().data });
             if (onError) {
-                onError(errorObj);
+                onError(error);
             }
         }
     };

package/dist/core/computed.js

@@ -1,42 +1,54 @@
 import { chunk } from "./core";
 export function computed(dependencies, computeFn) {
-    let isDirty = false; // Initialized to false
-    let cachedValue = computeFn(...dependencies.map(d => d.get()));
+    const initialValues = dependencies.map(dep => dep.get());
+    let cachedValue = computeFn(...initialValues);
+    let isDirty = false;
+    let lastDependencyValues = [...initialValues];
+    const computedChunk = chunk(cachedValue);
+    const originalSet = computedChunk.set;
     const recalculate = () => {
-        const values = dependencies.map(dep => dep.get());
-        cachedValue = computeFn(...values);
-        isDirty = false; // Reset to false after recomputation
+        if (!isDirty)
+            return;
+        const currentValues = dependencies.map(dep => dep.get());
+        const hasChanges = currentValues.some((val, i) => val !== lastDependencyValues[i]);
+        if (hasChanges) {
+            lastDependencyValues = [...currentValues];
+            const newValue = computeFn(...currentValues);
+            if (newValue !== cachedValue) {
+                cachedValue = newValue;
+                originalSet(newValue);
+            }
+        }
+        // Always clear the dirty flag after recalculation
+        isDirty = false;
     };
-    const computedChunk = chunk(cachedValue);
-    const originalGet = computedChunk.get;
     computedChunk.get = () => {
         if (isDirty) {
             recalculate();
-            computedChunk.set(cachedValue); // Update the chunk value after recomputation
         }
-        return cachedValue; // Return the cached value directly
+        return cachedValue;
     };
-    const lastValues = dependencies.map(dep => dep.get());
-    dependencies.forEach((dep, index) => {
-        dep.subscribe(() => {
-            const newValue = dep.get();
-            if (newValue !== lastValues[index] && !isDirty) {
-                lastValues[index] = newValue;
-                isDirty = true;
-            }
-        });
-    });
+    const unsub = dependencies.map(dep => dep.subscribe(() => {
+        if (!isDirty) {
+            isDirty = true;
+            recalculate();
+        }
+    }));
     return {
         ...computedChunk,
         isDirty: () => isDirty,
         recompute: () => {
-            if (isDirty) {
-                recalculate();
-                computedChunk.set(cachedValue); // Update the chunk value after manual recomputation
-            }
+            isDirty = true;
+            recalculate();
         },
         set: () => {
-            throw new Error('Cannot directly set a computed value');
+            throw new Error('Cannot set values directly on computed. Modify the source chunk instead.');
+        },
+        destroy: () => {
+            unsub.forEach(cleanup => cleanup());
+            if (computedChunk.destroy) {
+                computedChunk.destroy();
+            }
         }
     };
 }

package/dist/core/selector.js

@@ -1,23 +1,9 @@
-import { chunk } from "./core";
+import { computed } from "./computed";
 export function select(sourceChunk, selector) {
-    const initialValue = selector(sourceChunk.get());
-    const selectedChunk = chunk(initialValue);
-    let previousSelected = initialValue;
-    // Subscribe to source changes with equality checking
-    sourceChunk.subscribe((newValue) => {
-        const newSelected = selector(newValue);
-        // Only update if the selected value actually changed
-        if (!Object.is(newSelected, previousSelected)) {
-            previousSelected = newSelected;
-            selectedChunk.set(newSelected);
-        }
-    });
-    // Return read-only version of the chunk
     return {
-        ...selectedChunk,
-        // Prevent setting values directly on the selector
+        ...computed([sourceChunk], (value) => selector(value)),
         set: () => {
             throw new Error('Cannot set values directly on a selector. Modify the source chunk instead.');
-        }
+        },
     };
 }

package/dist/core/types.d.ts

@@ -1,11 +1,11 @@
 import { AsyncChunk } from "./asyncChunk";
-export type AsyncChunkOpt<T> = {
+export type AsyncChunkOpt<T, E extends Error> = {
     initialData?: T | null;
-    onError?: (error: Error) => void;
+    onError?: (error: E) => void;
     retryCount?: number;
     retryDelay?: number;
 };
-export type InferAsyncData<T> = T extends AsyncChunk<infer U> ? U : never;
+export type InferAsyncData<T> = T extends AsyncChunk<infer U, Error> ? U : never;
 export type CombinedData<T> = {
     [K in keyof T]: InferAsyncData<T[K]> | null;
 };

package/dist/use-react/hooks/useAsyncChunk.d.ts

@@ -3,11 +3,11 @@ import { AsyncChunk, AsyncState } from "../../core/asyncChunk";
  * A hook that handles asynchronous state with built-in reactivity.
  * Provides loading, error, and data states.
  */
-export declare function useAsyncChunk<T>(asyncChunk: AsyncChunk<T>): {
-    state: AsyncState<T>;
+export declare function useAsyncChunk<T, E extends Error>(asyncChunk: AsyncChunk<T, E>): {
+    state: AsyncState<T, E>;
     data: T | null;
     loading: boolean;
-    error: Error | null;
+    error: E | null;
     reload: () => Promise<void>;
     mutate: (mutator: (currentData: T | null) => T) => void;
     reset: () => void;

package/dist/use-react/hooks/useAsyncChunk.js

@@ -22,6 +22,6 @@ export function useAsyncChunk(asyncChunk) {
         error,
         reload,
         mutate,
-        reset
+        reset,
     };
 }

package/package.json

@@ -1,17 +1,26 @@
 {
   "name": "stunk",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Stunk is a lightweight, framework-agnostic state management library for JavaScript and TypeScript. It uses chunk-based state units for efficient updates, reactivity, and performance optimization in React, Vue, Svelte, and Vanilla JS/TS applications.",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest",
+    "prepublishOnly": "vitest && tsc",
+    "prepare": "npm run build"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/I-am-abdulazeez/stunk"
   },
-  "homepage": "https://github.com/I-am-abdulazeez/stunk#readme",
+  "homepage": "https://stunk.vercel.app/",
   "bugs": {
     "url": "https://github.com/I-am-abdulazeez/stunk/issues"
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -24,14 +33,12 @@
     "./react": {
       "import": "./dist/use-react/index.js",
       "types": "./dist/types/use-react/index.d.ts"
+    },
+    "./vue": {
+      "import": "./dist/use-vue/index.js",
+      "types": "./dist/types/use-vue/index.d.ts"
     }
   },
-  "scripts": {
-    "build": "tsc",
-    "test": "jest --runInBand",
-    "prepare": "npm run build"
-  },
-  "testEnvironment": "jsdom",
   "keywords": [
     "state-management",
     "atomic-state",
@@ -64,16 +71,21 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@types/jest": "^29.5.14",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/vue": "^8.1.0",
     "@types/react": "^19.0.10",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "jsdom": "^26.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "ts-jest": "^29.2.5",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "vitest": "^3.0.8",
+    "vue": "^3.5.13"
   },
   "peerDependencies": {
-    "react": "^19.0.0"
+    "react": "^19.0.0",
+    "vue": "^3.5.13"
   }
 }

package/jest.config.js

@@ -1,4 +0,0 @@
-module.exports = {
-  preset: "ts-jest",
-  testEnvironment: "node",
-};

package/src/core/asyncChunk.ts

@@ -1,83 +0,0 @@
-import { chunk, Chunk } from "./core";
-import { AsyncChunkOpt } from "./types";
-
-export interface AsyncState<T> {
-  loading: boolean;
-  error: Error | null;
-  data: T | null;
-}
-
-export interface AsyncChunk<T> extends Chunk<AsyncState<T>> {
-  /**
-   * Reload the data from the source.
-   */
-  reload: () => Promise<void>;
-  /**
-   * Mutate the data directly.
-   */
-  mutate: (mutator: (currentData: T | null) => T) => void;
-  /**
-   * Reset the state to the initial value.
-   */
-  reset: () => void;
-}
-
-export function asyncChunk<T>(fetcher: () => Promise<T>, options: AsyncChunkOpt<T> = {}): AsyncChunk<T> {
-  const {
-    initialData = null,
-    onError,
-    retryCount = 0,
-    retryDelay = 1000,
-  } = options;
-
-  const initialState: AsyncState<T> = {
-    loading: true,
-    error: null,
-    data: initialData,
-  };
-
-  const baseChunk = chunk(initialState);
-
-  const fetchData = async (retries = retryCount): Promise<void> => {
-    baseChunk.set({ ...baseChunk.get(), loading: true, error: null });
-
-    try {
-      const data = await fetcher();
-      baseChunk.set({ loading: false, error: null, data });
-    } catch (error) {
-      if (retries > 0) {
-        await new Promise(resolve => setTimeout(resolve, retryDelay));
-        return fetchData(retries - 1);
-      }
-
-      const errorObj = error instanceof Error ? error : new Error(String(error));
-      baseChunk.set({ loading: false, error: errorObj, data: baseChunk.get().data });
-
-      if (onError) {
-        onError(errorObj);
-      }
-
-    }
-  }
-
-  // Initial fetch
-  fetchData();
-
-  const asyncChunkInstance: AsyncChunk<T> = {
-    ...baseChunk,
-    reload: async () => {
-      await fetchData();
-    },
-    mutate: (mutator: (currentData: T | null) => T) => {
-      const currentState = baseChunk.get();
-      const newData = mutator(currentState.data);
-      baseChunk.set({ ...currentState, data: newData });
-    },
-    reset: () => {
-      baseChunk.set(initialState);
-      fetchData();
-    },
-  }
-
-  return asyncChunkInstance;
-}

package/src/core/computed.ts

@@ -1,65 +0,0 @@
-import { Chunk, chunk } from "./core";
-
-// Helper type to extract the value type from a Chunk
-export type ChunkValue<T> = T extends Chunk<infer U> ? U : never;
-
-// Helper type to transform an array of Chunks into an array of their value types
-export type DependencyValues<T extends Chunk<any>[]> = {
-  [K in keyof T]: T[K] extends Chunk<any> ? ChunkValue<T[K]> : never;
-};
-
-export interface Computed<T> extends Chunk<T> {
-  isDirty: () => boolean;
-  recompute: () => void;
-}
-
-export function computed<TDeps extends Chunk<any>[], TResult>(
-  dependencies: [...TDeps],
-  computeFn: (...args: DependencyValues<TDeps>) => TResult
-): Computed<TResult> {
-  let isDirty = false; // Initialized to false
-  let cachedValue: TResult = computeFn(...dependencies.map(d => d.get()) as DependencyValues<TDeps>);
-
-  const recalculate = () => {
-    const values = dependencies.map(dep => dep.get()) as DependencyValues<TDeps>;
-    cachedValue = computeFn(...values);
-    isDirty = false; // Reset to false after recomputation
-  };
-
-  const computedChunk = chunk(cachedValue);
-
-  const originalGet = computedChunk.get;
-  computedChunk.get = () => {
-    if (isDirty) {
-      recalculate();
-      computedChunk.set(cachedValue); // Update the chunk value after recomputation
-    }
-    return cachedValue; // Return the cached value directly
-  };
-
-  const lastValues = dependencies.map(dep => dep.get());
-
-  dependencies.forEach((dep, index) => {
-    dep.subscribe(() => {
-      const newValue = dep.get();
-      if (newValue !== lastValues[index] && !isDirty) {
-        lastValues[index] = newValue;
-        isDirty = true;
-      }
-    });
-  });
-
-  return {
-    ...computedChunk,
-    isDirty: () => isDirty,
-    recompute: () => {
-      if (isDirty) {
-        recalculate();
-        computedChunk.set(cachedValue); // Update the chunk value after manual recomputation
-      }
-    },
-    set: () => {
-      throw new Error('Cannot directly set a computed value');
-    }
-  };
-}

package/src/core/core.ts

@@ -1,128 +0,0 @@
-import { processMiddleware } from "../utils";
-
-export type Subscriber<T> = (newValue: T) => void;
-export type Middleware<T> = (value: T, next: (newValue: T) => void) => void;
-
-export interface Chunk<T> {
-  /** Get the current value of the chunk. */
-  get: () => T;
-  /** Set a new value for the chunk & Update existing value efficiently. */
-  set: (newValueOrUpdater: T | ((currentValue: T) => T)) => void;
-  /** Subscribe to changes in the chunk. Returns an unsubscribe function. */
-  subscribe: (callback: Subscriber<T>) => () => void;
-  /** Create a derived chunk based on this chunk's value. */
-  derive: <D>(fn: (value: T) => D) => Chunk<D>;
-  /** Reset the chunk to its initial value. */
-  reset: () => void;
-  /** Destroy the chunk and all its subscribers. */
-  destroy: () => void;
-}
-
-let batchDepth = 0;
-const batchQueue = new Set<() => void>();
-
-export function batch(callback: () => void) {
-  batchDepth++;
-  try {
-    callback();
-  } finally {
-    batchDepth--;
-    if (batchDepth === 0) {
-      // Execute all queued updates
-      batchQueue.forEach(update => update());
-      batchQueue.clear();
-    }
-  }
-}
-
-export function chunk<T>(initialValue: T, middleware: Middleware<T>[] = []): Chunk<T> {
-  if (initialValue === undefined || initialValue === null) {
-    throw new Error("Initial value cannot be undefined or null.");
-  }
-
-  let value = initialValue;
-  const subscribers = new Set<Subscriber<T>>();
-  let isDirty = false;
-
-  const notifySubscribers = () => {
-    if (batchDepth > 0) {
-      if (!isDirty) {
-        isDirty = true;
-        batchQueue.add(() => {
-          if (isDirty) {
-            subscribers.forEach((subscriber) => subscriber(value));
-            isDirty = false;
-          }
-        });
-      }
-    } else {
-      subscribers.forEach((subscriber) => subscriber(value));
-    }
-  }
-
-  const get = () => value;
-
-  const set = (newValueOrUpdater: T | ((currentValue: T) => T)) => {
-    let newValue: T;
-
-    if (typeof newValueOrUpdater === 'function') {
-      // Handle updater function
-      newValue = (newValueOrUpdater as (currentValue: T) => T)(value);
-    } else {
-      // Handle direct value assignment
-      newValue = newValueOrUpdater;
-    }
-
-    const processedValue = processMiddleware(newValue, middleware);
-
-    if (processedValue !== value) {
-      value = processedValue as T & {};
-      notifySubscribers();
-    }
-  };
-
-  const subscribe = (callback: Subscriber<T>) => {
-    if (typeof callback !== "function") {
-      throw new Error("Callback must be a function.");
-    }
-    if (subscribers.has(callback)) {
-      console.warn("Callback is already subscribed. This may lead to duplicate updates.");
-    }
-    subscribers.add(callback);
-    callback(value);
-
-    return () => subscribers.delete(callback);
-  };
-
-  const reset = () => {
-    value = initialValue;
-    subscribers.forEach((subscriber) => subscriber(value));
-  };
-
-  const destroy = () => {
-    if (subscribers.size > 0) {
-      console.warn("Destroying chunk with active subscribers. This may lead to memory leaks.");
-    }
-    // Just clear subscribers without calling unsubscribe
-    subscribers.clear();
-    value = initialValue;
-  };
-
-
-  const derive = <D>(fn: (value: T) => D) => {
-    if (typeof fn !== "function") {
-      throw new Error("Derive function must be a function.");
-    }
-    const derivedValue = fn(value);
-    const derivedChunk = chunk(derivedValue);
-
-    subscribe(() => {
-      const newDerivedValue = fn(value);
-      derivedChunk.set(newDerivedValue);
-    });
-
-    return derivedChunk;
-  };
-
-  return { get, set, subscribe, derive, reset, destroy };
-}

package/src/core/selector.ts

@@ -1,27 +0,0 @@
-import { chunk, Chunk } from "./core";
-
-export function select<T, S>(sourceChunk: Chunk<T>, selector: (value: T) => S): Chunk<S> {
-  const initialValue = selector(sourceChunk.get());
-  const selectedChunk = chunk(initialValue);
-  let previousSelected = initialValue;
-
-  // Subscribe to source changes with equality checking
-  sourceChunk.subscribe((newValue) => {
-    const newSelected = selector(newValue);
-
-    // Only update if the selected value actually changed
-    if (!Object.is(newSelected, previousSelected)) {
-      previousSelected = newSelected;
-      selectedChunk.set(newSelected);
-    }
-  });
-
-  // Return read-only version of the chunk
-  return {
-    ...selectedChunk,
-    // Prevent setting values directly on the selector
-    set: () => {
-      throw new Error('Cannot set values directly on a selector. Modify the source chunk instead.');
-    }
-  };
-}

package/src/core/types.ts

@@ -1,17 +0,0 @@
-import { AsyncChunk } from "./asyncChunk";
-
-export type AsyncChunkOpt<T> = {
-  initialData?: T | null;
-  onError?: (error: Error) => void;
-  retryCount?: number;
-  retryDelay?: number;
-}
-
-export type InferAsyncData<T> = T extends AsyncChunk<infer U> ? U : never;
-
-export type CombinedData<T> = { [K in keyof T]: InferAsyncData<T[K]> | null };
-export type CombinedState<T> = {
-  loading: boolean;
-  error: Error | null;
-  data: CombinedData<T>;
-};

package/src/index.ts

@@ -1,10 +0,0 @@
-export { chunk, batch } from './core/core';
-export { asyncChunk } from './core/asyncChunk';
-export { computed } from './core/computed';
-export { select } from './core/selector'
-
-export { combineAsyncChunks, once, isChunk, isValidChunkValue } from './utils';
-
-export type { Chunk, Middleware } from './core/core';
-
-export * as middleware from "./middleware";