@braine/statemanagement 1.0.0

package/README.md

@@ -0,0 +1,106 @@
+# EasyState
+
+**The "State-First" Reactive Library for React.**  
+> Better performance than Context. Simpler than Redux. More integrated than TanStack Query.
+
+[![npm version](https://badge.fury.io/js/statemanagement.svg)](https://badge.fury.io/js/statemanagement)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- 🚀 **Zero Boilerplate**: Just assign values. `store.count = 1`.
+- ⚡ **Deep Reactivity**: Only re-renders components that *read* the changed property. (No `useSelector` needed).
+- 🔄 **State-First Async**: Assign promises to state. `store.user = fetch('/user')`.
+    - Auto-suspense support.
+    - Auto-error handling.
+- 🧠 **Computed Properties**: Memoized derived state.
+- 🛠 **DevTools**: Redux DevTools integration built-in.
+- 📦 **Tiny**: < 1kb minified & gzipped.
+
+## Installation
+
+```bash
+npm install statemanagement
+# or
+yarn add statemanagement
+```
+
+## Quick Start
+
+### 1. Create a Store
+```typescript
+// store.ts
+import { createState } from 'statemanagement';
+
+export const store = createState({
+  count: 0,
+  increment() {
+    this.count++;
+  },
+  // Async? Just use async/await!
+  async login() {
+    this.user = await fetch('/api/login').then(r => r.json());
+  }
+});
+```
+
+### 2. Use in React
+```tsx
+import { useStore } from 'statemanagement';
+import { store } from './store';
+
+function Counter() {
+  const snap = useStore(store);
+  return <button onClick={() => store.increment()}>{snap.count}</button>;
+}
+```
+
+## The "Killer Feature": Async State
+Stop writing `isLoading`, `isError` manually. Stop creating 5 files for one API call.
+
+```typescript
+const store = createState({
+    // 1. Assign a promise
+    todos: fetch('/api/todos').then(r => r.json()),
+    
+    async refresh() {
+        // 2. Re-assign to refetch. UI updates automatically.
+        this.todos = fetch('/api/todos').then(r => r.json());
+    }
+});
+```
+In your component:
+```tsx
+function TodoList() {
+    const snap = useStore(store);
+    // accessing snap.todos AUTOMATICALLY triggers Suspense if pending!
+    return <div>{snap.todos.map(t => <div key={t.id}>{t.text}</div>)}</div>;
+}
+```
+
+## Advanced
+
+### Computed Properties
+```typescript
+import { computed } from 'statemanagement';
+
+const double = computed(() => store.count * 2);
+```
+
+### Redux DevTools
+```typescript
+import { enableDevTools } from 'statemanagement';
+enableDevTools(store, 'MyGlobalStore');
+```
+
+## Comparison
+
+| Feature | Redux / RTK | Zustand | EasyState |
+| :--- | :--- | :--- | :--- |
+| **API Style** | Reducers/Actions | Hooks/Setters | Mutable (Proxies) |
+| **Boilerplate** | High | Low | **Zero** |
+| **Async** | Middleware / Thunks | Manual Loading State | **Native Promise Support** |
+| **Reactivity** | Manual Selectors | Manual Selectors | **Automatic** |
+
+## License
+MIT