context-scoped-state 0.0.10 → 0.0.12

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx as C } from "react/jsx-runtime";
-import b, { useSyncExternalStore as H } from "react";
+import h, { useSyncExternalStore as H } from "react";
 var m = function(e, r) {
   return m = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(t, n) {
     t.__proto__ = n;
@@ -7,7 +7,7 @@ var m = function(e, r) {
     for (var o in n) Object.prototype.hasOwnProperty.call(n, o) && (t[o] = n[o]);
   }, m(e, r);
 };
-function p(e, r) {
+function v(e, r) {
   if (typeof r != "function" && r !== null)
     throw new TypeError("Class extends value " + String(r) + " is not a constructor or null");
   m(e, r);
@@ -85,8 +85,8 @@ var S = (function() {
         if (this._parentage = null, Array.isArray(s))
           try {
             for (var u = w(s), c = u.next(); !c.done; c = u.next()) {
-              var h = c.value;
-              h.remove(this);
+              var f = c.value;
+              f.remove(this);
             }
           } catch (a) {
             r = { error: a };
@@ -110,8 +110,8 @@ var S = (function() {
       if (P) {
         this._finalizers = null;
         try {
-          for (var v = w(P), f = v.next(); !f.done; f = v.next()) {
-            var V = f.value;
+          for (var b = w(P), p = b.next(); !p.done; p = b.next()) {
+            var V = p.value;
             try {
               A(V);
             } catch (a) {
@@ -122,7 +122,7 @@ var S = (function() {
           n = { error: a };
         } finally {
           try {
-            f && !f.done && (o = v.return) && o.call(v);
+            p && !p.done && (o = b.return) && o.call(b);
           } finally {
             if (n) throw n.error;
           }
@@ -169,7 +169,7 @@ function A(e) {
 }
 var $ = {
   Promise: void 0
-}, q = {
+}, W = {
   setTimeout: function(e, r) {
     for (var t = [], n = 2; n < arguments.length; n++)
       t[n - 2] = arguments[n];
@@ -180,21 +180,21 @@ var $ = {
   },
   delegate: void 0
 };
-function D(e) {
-  q.setTimeout(function() {
+function q(e) {
+  W.setTimeout(function() {
     throw e;
   });
 }
-function I() {
+function T() {
 }
 function y(e) {
   e();
 }
 var F = (function(e) {
-  p(r, e);
+  v(r, e);
   function r(t) {
     var n = e.call(this) || this;
-    return n.isStopped = !1, t ? (n.destination = t, R(t) && t.add(n)) : n.destination = K, n;
+    return n.isStopped = !1, t ? (n.destination = t, R(t) && t.add(n)) : n.destination = J, n;
   }
   return r.create = function(t, n, o) {
     return new O(t, n, o);
@@ -221,7 +221,7 @@ var F = (function(e) {
       this.unsubscribe();
     }
   }, r;
-})(S), G = (function() {
+})(S), D = (function() {
   function e(r) {
     this.partialObserver = r;
   }
@@ -253,42 +253,42 @@ var F = (function(e) {
       }
   }, e;
 })(), O = (function(e) {
-  p(r, e);
+  v(r, e);
   function r(t, n, o) {
     var i = e.call(this) || this, s;
     return l(t) || !t ? s = {
       next: t ?? void 0,
       error: n ?? void 0,
       complete: o ?? void 0
-    } : s = t, i.destination = new G(s), i;
+    } : s = t, i.destination = new D(s), i;
   }
   return r;
 })(F);
 function d(e) {
-  D(e);
+  q(e);
 }
-function J(e) {
+function G(e) {
   throw e;
 }
-var K = {
+var J = {
   closed: !0,
-  next: I,
-  error: J,
-  complete: I
-}, L = (function() {
+  next: T,
+  error: G,
+  complete: T
+}, K = (function() {
   return typeof Symbol == "function" && Symbol.observable || "@@observable";
 })();
-function Q(e) {
+function L(e) {
   return e;
 }
-function W(e) {
-  return e.length === 0 ? Q : e.length === 1 ? e[0] : function(t) {
+function Q(e) {
+  return e.length === 0 ? L : e.length === 1 ? e[0] : function(t) {
     return e.reduce(function(n, o) {
       return o(n);
     }, t);
   };
 }
-var T = (function() {
+var I = (function() {
   function e(r) {
     r && (this._subscribe = r);
   }
@@ -326,12 +326,12 @@ var T = (function() {
   }, e.prototype._subscribe = function(r) {
     var t;
     return (t = this.source) === null || t === void 0 ? void 0 : t.subscribe(r);
-  }, e.prototype[L] = function() {
+  }, e.prototype[K] = function() {
     return this;
   }, e.prototype.pipe = function() {
     for (var r = [], t = 0; t < arguments.length; t++)
       r[t] = arguments[t];
-    return W(r)(this);
+    return Q(r)(this);
   }, e.prototype.toPromise = function(r) {
     var t = this;
     return r = k(r), new r(function(n, o) {
@@ -363,7 +363,7 @@ var z = M(function(e) {
     e(this), this.name = "ObjectUnsubscribedError", this.message = "object unsubscribed";
   };
 }), B = (function(e) {
-  p(r, e);
+  v(r, e);
   function r() {
     var t = e.call(this) || this;
     return t.closed = !1, t.currentObservers = null, t.observers = [], t.isStopped = !1, t.hasError = !1, t.thrownError = null, t;
@@ -385,8 +385,8 @@ var z = M(function(e) {
             var c = u.value;
             c.next(t);
           }
-        } catch (h) {
-          o = { error: h };
+        } catch (f) {
+          o = { error: f };
         } finally {
           try {
             u && !u.done && (i = s.return) && i.call(s);
@@ -436,13 +436,13 @@ var z = M(function(e) {
     var n = this, o = n.hasError, i = n.thrownError, s = n.isStopped;
     o ? t.error(i) : s && t.complete();
   }, r.prototype.asObservable = function() {
-    var t = new T();
+    var t = new I();
     return t.source = this, t;
   }, r.create = function(t, n) {
     return new U(t, n);
   }, r;
-})(T), U = (function(e) {
-  p(r, e);
+})(I), U = (function(e) {
+  v(r, e);
   function r(t, n) {
     var o = e.call(this) || this;
     return o.destination = t, o.source = n, o;
@@ -461,7 +461,7 @@ var z = M(function(e) {
     return (o = (n = this.source) === null || n === void 0 ? void 0 : n.subscribe(t)) !== null && o !== void 0 ? o : Y;
   }, r;
 })(B), N = (function(e) {
-  p(r, e);
+  v(r, e);
   function r(t) {
     var n = e.call(this) || this;
     return n._value = t, n;
@@ -486,8 +486,10 @@ var z = M(function(e) {
 })(B);
 class et {
   _stateSubject;
-  constructor() {
-    this.state = this.getInitialState(), this._stateSubject = new N(this.getInitialState());
+  constructor(r) {
+    this._stateSubject = new N(
+      this.getInitialState(r)
+    );
   }
   getState() {
     return this._stateSubject.value;
@@ -495,7 +497,6 @@ class et {
   state$() {
     return this._stateSubject.asObservable();
   }
-  state;
   setState(r) {
     const t = typeof r == "function" ? r(this._stateSubject.value) : r;
     this._stateSubject.next(t);
@@ -506,10 +507,14 @@ class et {
   }
 }
 function nt(e) {
-  const r = b.createContext(void 0);
-  function t() {
-    const n = b.useContext(r);
-    if (!n)
+  const r = class extends e {
+    state;
+  }, t = h.createContext(
+    void 0
+  );
+  function n() {
+    const o = h.useContext(t);
+    if (!o)
       throw new Error(
         `Store hook used outside of its Context provider.
 
@@ -521,38 +526,42 @@ Then wrap your component with:
     <YourComponent />
   </useYourStore.Context>`
       );
-    const o = H(
-      (i) => {
-        const s = n.state$().subscribe(i);
-        return () => s.unsubscribe();
+    const i = h.useCallback(
+      (u) => {
+        const c = o.state$().subscribe(u);
+        return () => c.unsubscribe();
       },
-      () => n.getState(),
-      () => n.getState()
+      [o]
+    ), s = H(
+      i,
+      () => o.getState(),
+      () => o.getState()
       // getServerSnapshot for SSR
     );
-    return n.state = o, n;
+    return o.state = s, o;
   }
-  return t.Context = function({
-    children: o
+  return n.Context = function({
+    children: i,
+    value: s
   }) {
-    const [i] = b.useState(() => new e());
-    return /* @__PURE__ */ C(r.Provider, { value: i, children: o });
-  }, t.MockContext = function({
-    children: o,
-    state: i
+    const [u] = h.useState(() => new r(s));
+    return /* @__PURE__ */ C(t.Provider, { value: u, children: i });
+  }, n.MockContext = function({
+    children: i,
+    state: s
   }) {
-    const s = () => {
-      if (i === void 0)
-        return new e();
-      class c extends e {
+    const u = () => {
+      if (s === void 0)
+        return new r();
+      const f = class extends r {
         getInitialState() {
-          return i;
+          return s;
         }
-      }
-      return new c();
-    }, u = b.useRef(s());
-    return /* @__PURE__ */ C(r.Provider, { value: u.current, children: o });
-  }, t;
+      };
+      return new f();
+    }, c = h.useRef(u());
+    return /* @__PURE__ */ C(t.Provider, { value: c.current, children: i });
+  }, n;
 }
 export {
   et as Store,

package/dist/lib/Store.d.ts

@@ -1,10 +1,9 @@
-declare abstract class Store<T> {
-    protected abstract getInitialState(): T;
+declare abstract class Store<T, C = Partial<T>> {
+    protected abstract getInitialState(contextValue?: C): T;
     private readonly _stateSubject;
-    constructor();
+    constructor(contextValue?: C);
     getState(): T;
     state$(): import('rxjs').Observable<T>;
-    state: T;
     protected setState(newState: T | ((currentState: T) => T)): void;
     protected patchState(partialState: Partial<T> | ((currentState: T) => Partial<T>)): void;
 }

package/dist/lib/Store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Store.d.ts","sourceRoot":"","sources":["../../src/lib/Store.ts"],"names":[],"mappings":"AAEA,uBAAe,KAAK,CAAC,CAAC;IACpB,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,CAAC;IAEvC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAqB;;IAOnD,QAAQ,IAAI,CAAC;IAIb,MAAM;IAIC,KAAK,EAAE,CAAC,CAAC;IAEhB,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI;IAQhE,SAAS,CAAC,UAAU,CAClB,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,GAC3D,IAAI;CAQR;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Store.d.ts","sourceRoot":"","sources":["../../src/lib/Store.ts"],"names":[],"mappings":"AAEA,uBAAe,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;IACpC,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC;IAEvD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAqB;gBAEvC,YAAY,CAAC,EAAE,CAAC;IAM5B,QAAQ,IAAI,CAAC;IAIb,MAAM;IAIN,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI;IAQhE,SAAS,CAAC,UAAU,CAClB,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,GAC3D,IAAI;CAQR;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/lib/createStore.d.ts

@@ -1,9 +1,12 @@
 import { default as React } from 'react';
 import { Store } from './Store';
-declare function createStoreHook<T extends Store<any>>(storeClass: new () => T): {
-    (): T;
-    Context({ children, }: {
+declare function createStoreHook<T extends Store<any, any>>(storeClass: new (contextValue?: any) => T): {
+    (): T & {
+        readonly state: ReturnType<T["getState"]>;
+    };
+    Context({ children, value, }: {
         children: React.ReactNode;
+        value?: T extends Store<any, infer C> ? C : never;
     }): import("react/jsx-runtime").JSX.Element;
     MockContext({ children, state, }: {
         children: React.ReactNode;

package/dist/lib/createStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createStore.d.ts","sourceRoot":"","sources":["../../src/lib/createStore.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC,iBAAS,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,EAAE,UAAU,EAAE,UAAU,CAAC;QAG/C,CAAC;2BA+BnB;QACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B;sCAWE;QACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;KACnC;EAuBF;AACD,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"createStore.d.ts","sourceRoot":"","sources":["../../src/lib/createStore.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC,iBAAS,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,EAChD,UAAU,EAAE,KAAK,YAAY,CAAC,EAAE,GAAG,KAAK,CAAC;;;;kCAyDtC;QACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,KAAK,CAAC,6BAvD2C,CAAC,cAuDzB;KAC1B;sCAWE;QACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,KAAK,CAAC,4BAAY;KACnB;EAwBF;AACD,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "context-scoped-state",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "license": "MIT",
   "type": "module",
   "repository": {

package/README.md

@@ -1,233 +0,0 @@
-<div align="center">
-  <img src="logo.svg" alt="context-scoped-state logo" width="120" height="120">
-  <h1>context-scoped-state</h1>
-  <p><strong>State management that respects component boundaries.</strong></p>
-</div>
-
-Unlike global state libraries (Redux, Zustand), `context-scoped-state` keeps your state where it belongs — scoped to the component tree that needs it. Each context provider creates an independent store instance, making your components truly reusable and your tests truly isolated.
-
-## Why Scoped State?
-
-Global state is convenient, but it comes with hidden costs:
-
-- **Testing nightmares** — State leaks between tests, requiring complex cleanup
-- **Component coupling** — Reusing components means sharing their global state
-- **Implicit dependencies** — Components magically depend on global singletons
-
-`context-scoped-state` solves this by leveraging React's Context API the right way. Same API simplicity, but with proper encapsulation.
-
-## Installation
-
-```bash
-npm install context-scoped-state
-```
-
-```bash
-yarn add context-scoped-state
-```
-
-```bash
-pnpm add context-scoped-state
-```
-
-> **Peer Dependencies:** React 18+
-
-## Try it Online
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/HarshRohila/context-scoped-state/tree/master/examples/playground)
-
-## Quick Start
-
-### 1. Create Your Store (one file, one export)
-
-```tsx
-// counterStore.ts
-import { Store, createStoreHook } from 'context-scoped-state';
-
-class CounterStore extends Store<{ count: number }> {
-  protected getInitialState() {
-    return { count: 0 };
-  }
-
-  increment() {
-    // Callback-based: receives current state, returns new state
-    this.setState(state => ({ count: state.count + 1 }));
-  }
-
-  decrement() {
-    // Direct value: pass the new state directly
-    this.setState({ count: this.getState().count - 1 });
-  }
-}
-
-// This single export is all you need
-export const useCounterStore = createStoreHook(CounterStore);
-```
-
-### 2. Use in Your App
-
-```tsx
-import { useCounterStore } from './counterStore';
-
-function Counter() {
-  const counterStore = useCounterStore();
-
-  return (
-    <div>
-      <span>{counterStore.state.count}</span>
-      <button onClick={() => counterStore.increment()}>+</button>
-      <button onClick={() => counterStore.decrement()}>-</button>
-    </div>
-  );
-}
-
-function App() {
-  return (
-    <useCounterStore.Context>
-      <Counter />
-    </useCounterStore.Context>
-  );
-}
-```
-
-That's it. One hook export gives you the hook and its `.Context` provider. No extra setup needed.
-
-### Partial State Updates with patchState
-
-For stores with multiple properties, use `patchState` to update only specific fields:
-
-```tsx
-class UserStore extends Store<{ name: string; age: number; email: string }> {
-  protected getInitialState() {
-    return { name: '', age: 0, email: '' };
-  }
-
-  updateName(name: string) {
-    // Only updates name, preserves age and email
-    this.patchState({ name });
-  }
-
-  incrementAge() {
-    // Callback-based: receives current state, returns partial update
-    this.patchState(state => ({ age: state.age + 1 }));
-  }
-}
-```
-
-- `setState` — Replaces the entire state
-- `patchState` — Merges partial updates into existing state
-
-## Examples
-
-### Independent Nested Stores
-
-Each `Context` creates a completely independent store instance. Perfect for reusable widget patterns:
-
-```tsx
-function PlayerScore() {
-  const store = useScoreStore();
-  return <span>Score: {store.state.score}</span>;
-}
-
-function Game() {
-  return (
-    <div>
-      {/* Player 1 has their own score */}
-      <useScoreStore.Context>
-        <h2>Player 1</h2>
-        <PlayerScore />
-      </useScoreStore.Context>
-
-      {/* Player 2 has their own score */}
-      <useScoreStore.Context>
-        <h2>Player 2</h2>
-        <PlayerScore />
-      </useScoreStore.Context>
-    </div>
-  );
-}
-```
-
-Both players have completely independent state — no configuration needed.
-
-### Testing with MockContext
-
-Test components in any state without complex setup:
-
-```tsx
-import { render, screen } from '@testing-library/react';
-
-test('shows warning when balance is low', () => {
-  render(
-    <useAccountStore.MockContext state={{ balance: 5, currency: 'USD' }}>
-      <AccountStatus />
-    </useAccountStore.MockContext>,
-  );
-
-  expect(screen.getByText('Low balance warning')).toBeInTheDocument();
-});
-
-test('shows normal status when balance is healthy', () => {
-  render(
-    <useAccountStore.MockContext state={{ balance: 1000, currency: 'USD' }}>
-      <AccountStatus />
-    </useAccountStore.MockContext>,
-  );
-
-  expect(screen.queryByText('Low balance warning')).not.toBeInTheDocument();
-});
-```
-
-No mocking libraries. No global state cleanup. Just render with the state you need.
-
-## Why context-scoped-state Over Other Libraries?
-
-| Feature                | context-scoped-state | Redux                        | Zustand        |
-| ---------------------- | -------------------- | ---------------------------- | -------------- |
-| **Scoped by default**  | Yes                  | No                           | No             |
-| **Multiple instances** | Automatic            | Manual wiring                | Manual wiring  |
-| **Test isolation**     | Built-in MockContext | Requires setup               | Requires reset |
-| **Boilerplate**        | Low                  | High                         | Low            |
-| **Type safety**        | Full                 | Requires setup               | Good           |
-| **Learning curve**     | Just classes         | Actions, reducers, selectors | Simple         |
-
-### The Core Difference
-
-**Global state libraries** make you fight against React's component model. You end up with:
-
-- Selector functions to prevent re-renders
-- Complex test fixtures to reset global state
-- Workarounds for component reusability
-
-**context-scoped-state** works _with_ React:
-
-- State lives in the component tree, just like React intended
-- Each provider = new instance, automatically
-- Testing is just rendering with different props
-
-### When to Use What
-
-**Use context-scoped-state when:**
-
-- Building reusable components with internal state
-- You want test isolation without extra setup
-- State naturally belongs to a subtree, not the whole app
-
-**Need global state?** Just place the Context at your app root — same API, app-wide access.
-
-### Why Not Just Use useState or useReducer?
-
-**vs useState:**
-
-- `useState` binds state directly to the component — poor separation of concerns and hard to test since you can't easily set a component to a specific state
-- Lifting state up with `useState` requires refactoring components and passing props; with `context-scoped-state`, just move the Context wrapper up the tree
-
-**vs useReducer:**
-
-- No action types, switch statements, or dispatch boilerplate
-- Just call methods directly: `store.increment()` instead of `dispatch({ type: 'INCREMENT' })`
-- Full TypeScript autocomplete for your actions
-
----
-
-**context-scoped-state** — Because not all state needs to be global.