stunk 1.2.4 → 1.4.5

package/README.md

@@ -73,30 +73,6 @@ count.set(10);
 // "Double count: 20"
 ```
 
-## Batch Updates
-
-Batch Update group multiple **state changes** together and notify **subscribers** only once at the end of the **batch**. This is particularly useful for **optimizing performance** when you need to **update multiple** chunks at the same time.
-
-```typescript
-import { chunk, batch } from "stunk";
-
-const nameChunk = chunk("Olamide");
-const ageChunk = chunk(30);
-
-batch(() => {
-  nameChunk.set("AbdulAzeez");
-  ageChunk.set(31);
-}); // Only one notification will be sent to subscribers
-
-// Nested batches are also supported
-batch(() => {
-  firstName.set("Olanrewaju");
-  batch(() => {
-    age.set(29);
-  });
-}); // Only one notification will be sent to subscribers
-```
-
 ## State Selection
 
 Efficiently access and react to specific state parts:
@@ -120,59 +96,30 @@ nameChunk.subscribe((name) => console.log("Name changed:", name));
 nameChunk.set("Olamide"); // ❌ this will throw an error, because it is a readonly.
 ```
 
-## Middleware
-
-Middleware allows you to customize how values are set in a **chunk**. For example, you can add **logging**, **validation**, or any custom behavior when a chunk's value changes.
-
-```typescript
-import { chunk } from "stunk";
-import { logger, nonNegativeValidator } from "stunk/middleware";
-
-// You can also create yours and pass it chunk as the second param
-
-// Use middleware for logging and validation
-const age = chunk(25, [logger, nonNegativeValidator]);
-
-age.set(30); // Logs: "Setting value: 30"
-age.set(-5); // ❌ Throws an error: "Value must be non-negative!"
-```
-
-## Time Travel (Middleware)
+## Batch Updates
 
-The withHistory middleware extends a chunk to support undo and redo functionality. This allows you to navigate back and forth between previous states, making it useful for implementing features like undo/redo, form history, and state time travel.
+Batch Update group multiple **state changes** together and notify **subscribers** only once at the end of the `batch`. This is particularly useful for **optimizing performance** when you need to **update multiple** chunks at the same time.
 
 ```typescript
-import { chunk } from "stunk";
-import { withHistory } from "stunk/midddleware";
-
-const counterChunk = withHistory(chunk(0));
-
-counterChunk.set(1);
-counterChunk.set(2);
-
-counterChunk.undo(); // Goes back to 1
-counterChunk.undo(); // Goes back to 0
-
-counterChunk.redo(); // Goes forward to 1
-
-counterChunk.canUndo(); // Returns `true` if there is a previous state to revert to..
-counterChunk.canRedo(); // Returns `true` if there is a next state to move to.
-
-counterChunk.getHistory(); // Returns an array of all the values in the history.
+import { chunk, batch } from "stunk";
 
-counterChunk.clearHistory(); // Clears the history, keeping only the current value.
-```
+const nameChunk = chunk("Olamide");
+const ageChunk = chunk(30);
 
-**Example: Limiting History Size (Optional)**
-You can specify a max history size to prevent excessive memory usage.
+batch(() => {
+  nameChunk.set("AbdulAzeez");
+  ageChunk.set(31);
+}); // Only one notification will be sent to subscribers
 
-```ts
-const counter = withHistory(chunk(0), { maxHistory: 5 });
-// Only keeps the last 5 changes -- default is 100.
+// Nested batches are also supported
+batch(() => {
+  firstName.set("Olanrewaju");
+  batch(() => {
+    age.set(29);
+  });
+}); // Only one notification will be sent to subscribers
 ```
 
-This prevents the history from growing indefinitely and ensures efficient memory usage.
-
 ## Computed
 
 Computed Chunks in Stunk allow you to create state derived from other chunks in a reactive way. Unlike derived chunks, computed chunks can depend on multiple sources, and they automatically recalculate when any of the source chunks change.
@@ -202,10 +149,10 @@ firstNameChunk.set("Ola");
 ageChunk.set(10);
 
 console.log(fullInfoChunk.get());
-// ✅ { fullName: "Jane Doe", isAdult: true }
+// ✅ { fullName: "Ola Doe", isAdult: true }
 ```
 
-Computed chunks are ideal for scenarios where state depends on multiple sources or needs complex calculations. They ensure your application remains performant and maintainable.
+`computed` chunks are ideal for scenarios where state depends on multiple sources or needs complex calculations. They ensure your application remains performant and maintainable.
 
 ## Advanced Examples
 
@@ -277,7 +224,60 @@ const filteredPostsChunk = computed(
 );
 ```
 
-## State Persistence
+## Middleware
+
+Middleware allows you to customize how values are set in a **chunk**. For example, you can add **logging**, **validation**, or any custom behavior when a chunk's value changes.
+
+```typescript
+import { chunk } from "stunk";
+import { logger, nonNegativeValidator } from "stunk/middleware";
+
+// You can also create yours and pass it chunk as the second param
+
+// Use middleware for logging and validation
+const age = chunk(25, [logger, nonNegativeValidator]);
+
+age.set(30); // Logs: "Setting value: 30"
+age.set(-5); // ❌ Throws an error: "Value must be non-negative!"
+```
+
+## Time Travel (Middleware)
+
+The `withHistory` middleware extends a chunk to support undo and redo functionality. This allows you to navigate back and forth between previous states, making it useful for implementing features like undo/redo, form history, and state time travel.
+
+```typescript
+import { chunk } from "stunk";
+import { withHistory } from "stunk/midddleware";
+
+const counterChunk = withHistory(chunk(0));
+
+counterChunk.set(1);
+counterChunk.set(2);
+
+counterChunk.undo(); // Goes back to 1
+counterChunk.undo(); // Goes back to 0
+
+counterChunk.redo(); // Goes forward to 1
+
+counterChunk.canUndo(); // Returns `true` if there is a previous state to revert to..
+counterChunk.canRedo(); // Returns `true` if there is a next state to move to.
+
+counterChunk.getHistory(); // Returns an array of all the values in the history.
+
+counterChunk.clearHistory(); // Clears the history, keeping only the current value.
+```
+
+**Example: Limiting History Size (Optional)**
+You can specify a max history size to prevent excessive memory usage.
+
+```ts
+const counter = withHistory(chunk(0), { maxHistory: 5 });
+// Only keeps the last 5 changes -- default is 100.
+```
+
+This prevents the history from growing indefinitely and ensures efficient memory usage.
+
+## State Persistence (Middleware)
 
 Stunk provides a persistence middleware to automatically save state changes to storage (localStorage, sessionStorage, etc).
 
@@ -314,6 +314,35 @@ const encryptedChunk = withPersistence(baseChunk, {
 });
 ```
 
+## Once
+
+`Once` utility is a function that ensures a given piece of code or a function is executed only once, no matter how many times it's called. It's typically used to optimize performance by preventing redundant calculations or event handlers from running multiple times.
+
+How It Works:
+
+- It wraps a function and tracks whether it has been called.
+- On the first call, it executes the function and saves the result.
+- On subsequent calls, it simply returns the saved result without executing the function again.
+
+```typescript
+const numbersChunk = chunk([1, 2, 3, 4, 5]);
+
+const expensiveCalculation = once(() => {
+  console.log("Expensive calculation running...");
+  return numbersChunk.get().reduce((sum, num) => sum + num, 0);
+});
+
+// Derived chunk using the once utility
+const totalChunk = numbersChunk.derive(() => expensiveCalculation());
+
+totalChunk.subscribe((total) => {
+  console.log("Total:", total);
+});
+
+// Even if numbersChunk updates, the expensive calculation runs only once
+numbersChunk.set([10, 20, 30, 40, 50]);
+```
+
 ## Async State
 
 Async Chunks in Stunk are designed to manage asynchronous state seamlessly. They handle loading, error, and data states automatically, making it easier to work with APIs and other asynchronous operations.
@@ -384,6 +413,53 @@ user.mutate(currentUser => ({
 }));
 ```
 
+## Combine Async Chunk
+
+`combineAsyncChunks` utility is used for managing multiple related async chunks.
+
+- Maintains reactivity through the entire chain
+- Preserves previous data during reloading
+- Proper error propagation
+
+```typescript
+// Basic fetch
+const userChunk = asyncChunk(async () => {
+  const response = await fetch("/api/user");
+  return response.json();
+});
+
+// With options
+const postsChunk = asyncChunk(
+  async () => {
+    const response = await fetch("/api/posts");
+    return response.json();
+  },
+  {
+    initialData: [],
+    retryCount: 3,
+    retryDelay: 2000,
+    onError: (error) => console.error("Failed to fetch posts:", error),
+  }
+);
+
+// Combining chunks
+const profileChunk = combineAsyncChunks({
+  user: userChunk,
+  posts: postsChunk,
+});
+
+// Reactive updates
+profileChunk.subscribe(({ loading, error, data }) => {
+  if (loading) {
+    showLoadingSpinner();
+  } else if (error) {
+    showError(error);
+  } else {
+    updateUI(data);
+  }
+});
+```
+
 ## API Reference
 
 ### Core

package/dist/index.js

@@ -2,5 +2,5 @@ export { chunk, batch } from './core/core';
 export { asyncChunk } from './core/asyncChunk';
 export { computed } from './core/computed';
 export { select } from './core/selector';
-export { combineAsyncChunks } from './utils';
-export * from "./middleware";
+export { combineAsyncChunks, once, isChunk, isValidChunkValue } from './utils';
+export * as middleware from "./middleware";

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

@@ -0,0 +1,27 @@
+import { useState, useEffect, useCallback } from "react";
+/**
+ * A hook that handles asynchronous state with built-in reactivity.
+ * Provides loading, error, and data states.
+ */
+export function useAsyncChunk(asyncChunk) {
+    const [state, setState] = useState(() => asyncChunk.get());
+    useEffect(() => {
+        const unsubscribe = asyncChunk.subscribe((newState) => {
+            setState(newState);
+        });
+        return () => unsubscribe();
+    }, [asyncChunk]);
+    const reload = useCallback(() => asyncChunk.reload(), [asyncChunk]);
+    const mutate = useCallback((mutator) => asyncChunk.mutate(mutator), [asyncChunk]);
+    const reset = useCallback(() => asyncChunk.reset(), [asyncChunk]);
+    const { data, loading, error } = state;
+    return {
+        state,
+        data,
+        loading,
+        error,
+        reload,
+        mutate,
+        reset
+    };
+}

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

@@ -0,0 +1,29 @@
+import { useState, useEffect, useCallback } from "react";
+import { select } from "../../core/selector";
+/**
+ * A lightweight hook that subscribes to a chunk and returns its current value, along with setters, selector, reset and destroy.
+ * Ensures reactivity and prevents unnecessary re-renders.
+ */
+export function useChunk(chunk, selector) {
+    const selectedChunk = selector ? select(chunk, selector) : chunk;
+    const [state, setState] = useState(() => selectedChunk.get());
+    useEffect(() => {
+        const unsubscribe = selectedChunk.subscribe((newValue) => {
+            setState(() => newValue);
+        });
+        return () => unsubscribe();
+    }, [selectedChunk]);
+    const set = useCallback((value) => {
+        chunk.set(value);
+    }, [chunk]);
+    const update = useCallback((updater) => {
+        chunk.update(updater);
+    }, [chunk]);
+    const reset = useCallback(() => {
+        chunk.reset();
+    }, [chunk]);
+    const destroy = useCallback(() => {
+        chunk.destroy();
+    }, [chunk]);
+    return [state, set, update, reset, destroy];
+}

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

@@ -0,0 +1,10 @@
+import { useMemo } from "react";
+import { useChunkValue } from "./useChunkValue";
+/**
+ * A hook that subscribes to a specific property of a chunk.
+ * This optimizes renders by only updating when the selected property changes.
+ */
+export function useChunkProperty(chunk, property) {
+    const selector = useMemo(() => (state) => state[property], [property]);
+    return useChunkValue(chunk, selector);
+}

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

@@ -0,0 +1,9 @@
+import { useChunk } from "./useChunk";
+/**
+ * A lightweight hook that subscribes to a chunk and returns only its current value.
+ * Useful for read-only components that don't need to update the chunk.
+ */
+export function useChunkValue(chunk, selector) {
+    const [value] = useChunk(chunk, selector);
+    return value;
+}

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

@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+/**
+ * Hook to read values from multiple chunks at once.
+ * Only re-renders when any of the chunk values change.
+ */
+export function useChunkValues(chunks) {
+    const [values, setValues] = useState(() => {
+        return chunks.map(chunk => chunk.get());
+    });
+    useEffect(() => {
+        const unsubscribes = chunks.map((chunk, index) => {
+            return chunk.subscribe((newValue) => {
+                setValues(prev => {
+                    const newValues = [...prev];
+                    newValues[index] = newValue;
+                    return newValues;
+                });
+            });
+        });
+        return () => {
+            unsubscribes.forEach(unsubscribe => unsubscribe());
+        };
+    }, [chunks]);
+    return values;
+}

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

@@ -0,0 +1,22 @@
+import { useState, useEffect, useMemo } from "react";
+import { computed } from "../../core/computed";
+/**
+ * A hook that computes a value based on multiple chunks.
+ * Automatically re-computes when any dependency changes.
+ */
+export function useComputed(dependencies, computeFn) {
+    // Create the computed value - memoize it based on dependencies to prevent recreation
+    const computedValue = useMemo(() => computed(dependencies, computeFn), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [...dependencies]);
+    const [state, setState] = useState(() => computedValue.get());
+    useEffect(() => {
+        const unsubscribe = computedValue.subscribe((newValue) => {
+            setState(newValue);
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [computedValue]);
+    return state;
+}

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

@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+import { useChunk } from "./useChunk";
+/**
+ * A hook for creating a read-only derived value from a chunk.
+ * Ensures reactivity and updates when the source chunk changes.
+ */
+export function useDerive(chunk, fn) {
+    const derivedChunk = useMemo(() => chunk.derive(fn), [chunk, fn]);
+    const [derivedValue] = useChunk(derivedChunk);
+    return derivedValue;
+}

package/dist/use-react/index.js

@@ -0,0 +1,7 @@
+export { useChunk } from './hooks/useChunk';
+export { useDerive } from './hooks/useDerive';
+export { useComputed } from './hooks/useComputed';
+export { useChunkValue } from './hooks/useChunkValue';
+export { useChunkProperty } from './hooks/useChunkProperty';
+export { useChunkValues } from './hooks/useChunkValues';
+export { useAsyncChunk } from './hooks/useAsyncChunk';

package/dist/utils.js

@@ -12,6 +12,18 @@ export function isChunk(value) {
         typeof value.reset === 'function' &&
         typeof value.destroy === 'function';
 }
+export function once(fn) {
+    let called = false;
+    let result;
+    return () => {
+        if (!called) {
+            result = fn();
+            called = true;
+        }
+        return result;
+    };
+}
+;
 export function combineAsyncChunks(chunks) {
     // Create initial state with proper typing
     const initialData = Object.keys(chunks).reduce((acc, key) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stunk",
-  "version": "1.2.4",
+  "version": "1.4.5",
   "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.",
   "repository": {
     "type": "git",
@@ -12,6 +12,20 @@
   },
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./middleware": {
+      "import": "./dist/middleware/index.js",
+      "types": "./dist/types/middleware/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/use-react/index.js",
+      "types": "./dist/types/use-react/index.d.ts"
+    }
+  },
   "scripts": {
     "build": "tsc",
     "test": "jest --runInBand",
@@ -51,9 +65,15 @@
   "license": "MIT",
   "devDependencies": {
     "@types/jest": "^29.5.14",
+    "@types/react": "^19.0.10",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "ts-jest": "^29.2.5",
     "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
   }
 }

package/src/core/computed.ts

@@ -1,10 +1,10 @@
-import { Chunk, chunk, batch } from "./core";
+import { Chunk, chunk } from "./core";
 
 // Helper type to extract the value type from a Chunk
-type ChunkValue<T> = T extends Chunk<infer U> ? U : never;
+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
-type DependencyValues<T extends Chunk<any>[]> = {
+export type DependencyValues<T extends Chunk<any>[]> = {
   [K in keyof T]: T[K] extends Chunk<any> ? ChunkValue<T[K]> : never;
 };
 

package/src/index.ts

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

package/src/use-react/hooks/useAsyncChunk.ts

@@ -0,0 +1,38 @@
+import { useState, useEffect, useCallback } from "react";
+
+import { AsyncChunk, AsyncState } from "../../core/asyncChunk";
+
+/**
+ * A hook that handles asynchronous state with built-in reactivity.
+ * Provides loading, error, and data states.
+ */
+export function useAsyncChunk<T>(asyncChunk: AsyncChunk<T>) {
+  const [state, setState] = useState<AsyncState<T>>(() => asyncChunk.get());
+
+  useEffect(() => {
+    const unsubscribe = asyncChunk.subscribe((newState) => {
+      setState(newState);
+    });
+
+    return () => unsubscribe();
+  }, [asyncChunk]);
+
+  const reload = useCallback(() => asyncChunk.reload(), [asyncChunk]);
+  const mutate = useCallback(
+    (mutator: (currentData: T | null) => T) => asyncChunk.mutate(mutator),
+    [asyncChunk]
+  );
+  const reset = useCallback(() => asyncChunk.reset(), [asyncChunk]);
+
+  const { data, loading, error } = state;
+
+  return {
+    state,
+    data,
+    loading,
+    error,
+    reload,
+    mutate,
+    reset
+  };
+}

package/src/use-react/hooks/useChunk.ts

@@ -0,0 +1,47 @@
+import { useState, useEffect, useCallback } from "react";
+
+import { select } from "../../core/selector";
+
+import type { Chunk } from "../../core/core";
+
+/**
+ * A lightweight hook that subscribes to a chunk and returns its current value, along with setters, selector, reset and destroy.
+ * Ensures reactivity and prevents unnecessary re-renders.
+ */
+
+export function useChunk<T, S = T>(
+  chunk: Chunk<T>,
+  selector?: (value: T) => S
+) {
+  const selectedChunk = selector ? select(chunk, selector) : chunk;
+
+  const [state, setState] = useState<S>(() => selectedChunk.get() as S);
+
+  useEffect(() => {
+    const unsubscribe = selectedChunk.subscribe((newValue) => {
+      setState(() => newValue as S);
+    });
+    return () => unsubscribe();
+  }, [selectedChunk]);
+
+  const set = useCallback((value: T) => {
+    chunk.set(value);
+  }, [chunk]);
+
+  const update = useCallback(
+    (updater: (currentValue: T) => T) => {
+      chunk.update(updater);
+    },
+    [chunk]
+  );
+
+  const reset = useCallback(() => {
+    chunk.reset();
+  }, [chunk]);
+
+  const destroy = useCallback(() => {
+    chunk.destroy();
+  }, [chunk]);
+
+  return [state, set, update, reset, destroy] as const;
+}

package/src/use-react/hooks/useChunkProperty.ts

@@ -0,0 +1,21 @@
+import { useMemo } from "react";
+
+import { useChunkValue } from "./useChunkValue";
+
+import type { Chunk } from "../../core/core";
+
+/**
+ * A hook that subscribes to a specific property of a chunk.
+ * This optimizes renders by only updating when the selected property changes.
+ */
+export function useChunkProperty<T, K extends keyof T>(
+  chunk: Chunk<T>,
+  property: K
+): T[K] {
+  const selector = useMemo(
+    () => (state: T) => state[property],
+    [property]
+  );
+
+  return useChunkValue(chunk, selector);
+}

package/src/use-react/hooks/useChunkValue.ts

@@ -0,0 +1,15 @@
+import { useChunk } from "./useChunk";
+
+import type { Chunk } from "../../core/core";
+
+/**
+ * A lightweight hook that subscribes to a chunk and returns only its current value.
+ * Useful for read-only components that don't need to update the chunk.
+ */
+export function useChunkValue<T, S = T>(
+  chunk: Chunk<T>,
+  selector?: (value: T) => S
+): S {
+  const [value] = useChunk(chunk, selector);
+  return value;
+}

package/src/use-react/hooks/useChunkValues.ts

@@ -0,0 +1,35 @@
+import { useState, useEffect } from "react";
+
+import type { Chunk } from "../../core/core";
+
+/**
+ * Hook to read values from multiple chunks at once.
+ * Only re-renders when any of the chunk values change.
+ */
+export function useChunkValues<T extends Chunk<any>[]>(
+  chunks: [...T]
+): { [K in keyof T]: T[K] extends Chunk<infer U> ? U : never } {
+  type ReturnType = { [K in keyof T]: T[K] extends Chunk<infer U> ? U : never };
+
+  const [values, setValues] = useState<ReturnType>(() => {
+    return chunks.map(chunk => chunk.get()) as ReturnType;
+  });
+
+  useEffect(() => {
+    const unsubscribes = chunks.map((chunk, index) => {
+      return chunk.subscribe((newValue) => {
+        setValues(prev => {
+          const newValues = [...prev] as ReturnType;
+          newValues[index] = newValue;
+          return newValues;
+        });
+      });
+    });
+
+    return () => {
+      unsubscribes.forEach(unsubscribe => unsubscribe());
+    };
+  }, [chunks]);
+
+  return values;
+}

package/src/use-react/hooks/useComputed.ts

@@ -0,0 +1,34 @@
+import { useState, useEffect, useMemo } from "react";
+
+import { computed, DependencyValues } from "../../core/computed";
+import type { Chunk } from "../../core/core";
+
+/**
+ * A hook that computes a value based on multiple chunks.
+ * Automatically re-computes when any dependency changes.
+ */
+export function useComputed<TDeps extends Chunk<any>[], TResult>(
+  dependencies: [...TDeps],
+  computeFn: (...args: DependencyValues<TDeps>) => TResult
+): TResult {
+  // Create the computed value - memoize it based on dependencies to prevent recreation
+  const computedValue = useMemo(
+    () => computed(dependencies, computeFn),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [...dependencies]
+  );
+
+  const [state, setState] = useState<TResult>(() => computedValue.get());
+
+  useEffect(() => {
+    const unsubscribe = computedValue.subscribe((newValue) => {
+      setState(newValue);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [computedValue]);
+
+  return state;
+}

package/src/use-react/hooks/useDerive.ts

@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+
+import { useChunk } from "./useChunk";
+import type { Chunk } from "../../core/core";
+
+/**
+ * A hook for creating a read-only derived value from a chunk.
+ * Ensures reactivity and updates when the source chunk changes.
+ */
+export function useDerive<T, D>(chunk: Chunk<T>, fn: (value: T) => D): D {
+  const derivedChunk = useMemo(() => chunk.derive(fn), [chunk, fn]);
+  const [derivedValue] = useChunk(derivedChunk);
+
+  return derivedValue;
+}

package/src/use-react/index.ts

@@ -0,0 +1,9 @@
+export { useChunk } from './hooks/useChunk'
+export { useDerive } from './hooks/useDerive'
+export { useComputed } from './hooks/useComputed'
+
+export { useChunkValue } from './hooks/useChunkValue'
+export { useChunkProperty } from './hooks/useChunkProperty'
+export { useChunkValues } from './hooks/useChunkValues'
+
+export { useAsyncChunk } from './hooks/useAsyncChunk'

package/src/utils.ts

@@ -18,6 +18,18 @@ export function isChunk<T>(value: any): value is Chunk<T> {
     typeof value.destroy === 'function';
 }
 
+export function once<T>(fn: () => T): () => T {
+  let called = false;
+  let result: T;
+  return () => {
+    if (!called) {
+      result = fn();
+      called = true;
+    }
+    return result;
+  };
+};
+
 export function combineAsyncChunks<T extends Record<string, AsyncChunk<any>>>(
   chunks: T
 ): Chunk<{

package/tsconfig.json

@@ -6,10 +6,17 @@
     "outDir": "./dist",
     "declaration": true,
     "declarationDir": "./dist/types",
+    "baseUrl": "./src",
+    "paths": {
+      "stunk/middleware": ["middleware"],
+      "stunk/react": ["use-react"]
+    },
     "typeRoots": ["./node_modules/@types", "./types"],
     "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react",
     "esModuleInterop": true,
-    "skipLibCheck": true
+    "allowSyntheticDefaultImports": true
   },
   "include": ["src/**/*", "types/stunk.d.ts"],
   "exclude": ["node_modules", "dist"]

package/types/stunk.d.ts

@@ -4,8 +4,11 @@ declare module 'stunk' {
   export interface Chunk<T> {
     get: () => T;
     set: (value: T) => void;
+    update: (updater: (currentValue: T) => T) => void;
     subscribe: (callback: Subscriber<T>) => () => void;
-    derive?: <D>(fn: (value: T) => D) => Chunk<D>;
+    derive: <D>(fn: (value: T) => D) => Chunk<D>;
+    reset: () => void;
+    destroy: () => void;
   }
 
   export function chunk<T>(initialValue: T): Chunk<T>;