Introducing Stunk — A Minimalist, Reactive State Management Library.

If you’ve ever wrestled with state management in JavaScript or TypeScript, you know the struggle: bloated libraries, unnecessary re-renders, and a tangled web of dependencies. What if there was a simpler, more lightweight solution? Enter Stunk — a minimalist, framework-agnostic state management library designed to be reactive, performant, and easy to use. Written in TypeScript with full type inference. Stunk ensures a seamless developer experience without sacrificing power.

Why Stunk?
State management is the backbone of modern frontend development, but most solutions come with trade-offs:

• Redux requires boilerplate.
• Context API causes excessive re-renders.
• Recoil and Jotai introduce their own learning curves.
• Zustand is simple but lacks fine-grained reactivity.

Stunk takes a different approach, balancing simplicity with power:

• Minimalistic API: No unnecessary complexity, just get, set, subscribe, and a few powerful utilities.
• Reactivity First: Fine-grained reactivity ensures that components re-render only when necessary.
• Framework-Agnostic: Works seamlessly with React, Vue, and even vanilla JavaScript.
• Asynchronous State: asyncChunk handles async data elegantly with loading, error, and data states built-in.
• Selectors & Computed State: Update only specific parts of the state while keeping reactivity intact.
• Middlewares & Extensions: Features like withHistory and withPersistence add flexibility without bloating the core.

Talk is cheap. Here's the code.

Getting Started with Stunk

Setting up Stunk is straightforward. Install it via npm or your favorite package manager:

npm i stunk

Then, define and use a Chunk (a reactive state unit):

import { chunk } from 'stunk';

const counter = chunk(0);

console.log(counter.get()); // 0
counter.set(10);
console.log(counter.get()); // 10
counter.set(prev => prev + 1); // Logs: New Value: 11

// Reactively subscribe to changes
counter.subscribe(value => {
  console.log("New Value:", value);
});

// Reset to initial value
counterChunk.reset(); // 0

Stunk in React

Stunk integrates seamlessly with React using stunk/react:

import { chunk } from 'stunk';
import { useChunk } from 'stunk/react';

const count = chunk(0);

function Counter() {
 const [value, set] = useChunk(count);
 return (
   <div>
     <p>Count: {value}</p>
     <button onClick={() => set(prev => prev + 1)}>Increment</button>
   </div>
 );
}

Asynchronous State with asyncChunk

Handling async data? asyncChunk makes it a breeze:

import { asyncChunk } from 'stunk';

const userChunk = asyncChunk(async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
  return res.json(); 
});

userChunk.subscribe(({ loading, data, error }) => {
  if (loading) console.log("Loading...");
  else if (error) console.error(error);
  else console.log("User:", data);
});

Stunk's Vision

Stunk is built to be lightweight yet powerful, giving developers fine-grained control over reactivity without unnecessary complexity. Whether you're building small projects or large-scale applications, Stunk adapts to your needs.

Try Stunk Today

Stunk is open-source and ready for your next project. Check out the GitHub repo and start building:

🔗 GitHub: Github Repo
🚀 Docs: Stunk

Let's redefine state management together. Happy coding! ✨