stunk 2.2.2 → 2.3.0

package/README.md

@@ -32,6 +32,167 @@ Read Docs:
 
 [Stunk](https://stunk.vercel.app/)
 
+## Creating a Chunk
+
+```typescript
+import { chunk } from "stunk";
+
+// Create a chunk holding a number
+const count = chunk(0);
+
+// Create a chunk holding a string
+const name = chunk("Stunky, chunky");
+```
+
+👉 [See full explanation in docs](https://stunk.vercel.app/chunk.html)
+
+## Interacting with a Chunk
+
+```typescript
+// Get value
+console.log(count.get()); // 0
+
+// Set a new value
+count.set(10);
+
+// Update based on the previous value
+count.set((prev) => prev + 1);
+
+// Reset to the initial value
+count.reset();
+
+// Destroy the chunk and all its subscribers.
+count.destroy();
+```
+
+👉 [See full explanation in docs](https://stunk.vercel.app/chunk.html)
+
+## React via useChunk
+
+The `useChunk` hook, enables components to reactively read and update state from a Chunk. The counter example below depicts
+
+```typescript
+import { chunk } from "stunk";
+import { useChunk } from "stunk/react";
+
+const count = chunk(0);
+
+const Counter = () => {
+  const [value, set, reset] = useChunk(count);
+
+  return (
+    <div>
+      <p>Count: {value}</p>
+      <button onClick={() => set((prev) => prev + 1)}>Increment</button>
+      <button onClick={() => reset()}>Reset</button>
+    </div>
+  );
+};
+```
+
+👉 [See full explanation in docs](https://stunk.vercel.app/useChunk.html)
+
+## React via useDerive
+
+Hook that lets you create a read-only derived state from a Chunk. It keeps the derived value reactive, automatically updating whenever the source Chunk changes.
+
+```typescript
+import { chunk } from "stunk";
+import { useDerive } from "stunk/react";
+
+const count = chunk(0);
+
+const DoubledCount = () => {
+  const double = useDerive(count, (value) => value * 2);
+
+  return <p>Double: {double}</p>;
+};
+```
+
+👉 [See full explanation in docs](https://stunk.vercel.app/useDerive.html)
+
+## React via useComputed
+
+Hook that derives a computed value from one or more Chunks. It automatically re-evaluates whenever any of its dependencies change, ensuring efficient and reactive updates.
+
+```typescript
+import { chunk } from "stunk";
+import { useComputed } from "stunk/react";
+
+const count = chunk(2);
+const multiplier = chunk(3);
+
+const ComputedExample = () => {
+  const product = useComputed([count, multiplier], (c, m) => c * m);
+
+  return <p>Product: {product}</p>;
+};
+```
+
+👉 [See full explanation in docs](https://stunk.vercel.app/useComputed.html)
+
+## React via useAsyncChunk
+
+Hook that manages that manages asynchronous state. It offers built-in reactivity, handling loading, error, and data states, ensuring the UI stays in sync with asynchronous operations.
+
+```typescript
+import { asyncChunk } from "stunk";
+import { useAsyncChunk } from "stunk/react";
+
+const fetchUser = asyncChunk(async () => {
+  const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
+  return res.json();
+});
+
+const UserProfile = () => {
+  const { data, loading, error, reload } = useAsyncChunk(fetchUser);
+
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error.message}</p>;
+
+  return (
+    <div>
+      <h2>{data.name}</h2>
+      <p>{data.email}</p>
+      <button onClick={reload}>Reload</button>
+    </div>
+  );
+};
+```
+
+👉 [See full explanation in docs](https://stunk.vercel.app/useAysncChunk.html)
+
+## React via useChunkValue
+
+Hook that subscribes to a Chunk and returns its current value. It is useful for read-only components that don’t need to modify the state.
+
+```typescript
+import { chunk } from "stunk";
+import { useChunkValue } from "stunk/react";
+
+const count = chunk(0);
+
+const CounterDisplay = () => {
+  const value = useChunkValue(count);
+
+  return <p>Count: {value}</p>;
+};
+```
+
+👉 [See full explanation in docs](https://stunk.vercel.app/read-only-values.html)
+
+Live Examples:
+
+👉 [Visit](https://stunk-examples.vercel.app/)
+
+Coding Examples:
+
+👉 [Visit](https://stunk.vercel.app/examples.html)
+
+Further Examples:
+
+👉 [Visit](https://github.com/I-am-abdulazeez/stunk-examples/)
+
 ## Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "stunk",
-  "version": "2.2.2",
+  "version": "2.3.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 --project tsconfig.json && npm run build:cjs",
     "build:cjs": "echo 'module.exports = require(\"./index.js\");' > dist/index.cjs",
     "test": "tsc --project tsconfig.test.json && vitest",
+    "test:react17": "npm install react@^17.0.0 react-dom@^17.0.0 @types/react@^17.0.0 && npm test",
+    "test:react18": "npm install react@^18.0.0 react-dom@^18.0.0 @types/react@^18.0.0 && npm test",
+    "test:react19": "npm install react@^19.0.0 react-dom@^19.0.0 @types/react@^19.0.0 && npm test",
     "prepublishOnly": "vitest && tsc",
     "prepare": "npm run build",
     "lint": "eslint . --ext .js,.ts,.tsx,.vue"
@@ -79,7 +82,7 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@testing-library/vue": "^8.1.0",
-    "@types/react": "^19.0.10",
+    "@types/react": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^8.26.1",
     "@typescript-eslint/parser": "^8.27.0",
     "@vitejs/plugin-react": "^4.3.4",
@@ -87,14 +90,22 @@
     "eslint": "^9.22.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "jsdom": "^26.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "typescript": "^5.0.0",
     "vitest": "^3.0.8",
     "vue": "^3.5.13"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "vue": "^3.5.13"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
   }
 }