context-scoped-state 0.0.12 → 0.0.14

package/README.md

@@ -0,0 +1,438 @@
+<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)
+
+> Wondering why classes? See [API Design Choices](#api-design-choices).
+
+```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.
+
+### Dynamic Initial State with Context Value
+
+Pass a `value` prop to Context to provide data for `getInitialState()`. This is useful when you need to initialize store state from React props:
+
+```tsx
+type CounterState = { count: number };
+
+class CounterStore extends Store<CounterState> {
+  protected getInitialState(contextValue?: Partial<CounterState>) {
+    return { count: contextValue?.count ?? 0 };
+  }
+
+  increment() {
+    this.setState((s) => ({ count: s.count + 1 }));
+  }
+}
+
+const useCounterStore = createStoreHook(CounterStore);
+
+// Initialize store state from a React prop
+function CounterWidget({ initialCount }: { initialCount: number }) {
+  return (
+    <useCounterStore.Context value={{ count: initialCount }}>
+      <Counter />
+    </useCounterStore.Context>
+  );
+}
+
+// Now you can render multiple widgets with different starting values
+function App() {
+  return (
+    <>
+      <CounterWidget initialCount={0} />
+      <CounterWidget initialCount={100} />
+    </>
+  );
+}
+```
+
+### Optional Store Access
+
+Sometimes a component needs to work both inside and outside a store provider. Instead of throwing an error, `useStore.optional()` returns `undefined` when no provider is found:
+
+```tsx
+function UserName({ userId }: { userId: string }) {
+  const store = useUserStore.optional();
+
+  if (!store) {
+    return <span>{userId}</span>;
+  }
+
+  return <span>{store.state.users.get(userId) ?? userId}</span>;
+}
+
+// Works inside a provider — shows resolved user name
+function Dashboard() {
+  return (
+    <useUserStore.Context>
+      <UserName userId="42" />
+    </useUserStore.Context>
+  );
+}
+
+// Also works without a provider — falls back to showing the raw ID
+function SimpleList() {
+  return <UserName userId="42" />;
+}
+```
+
+This is useful for shared components that are rendered in different parts of your app, where a provider may or may not be present.
+
+## 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
+
+---
+
+## API Design Choices
+
+These design decisions are intentional trade-offs that optimize for debuggability, clarity, and simplicity.
+
+### Why Classes for Stores?
+
+Classes let us use `protected` on state-setting methods (`setState`, `patchState`). This means all state updates must go through the store class — components cannot directly modify state.
+
+**Why this matters:** When debugging, you can set a single breakpoint in your store's action methods to see exactly who is changing state and when. No more hunting through components to find where state got mutated.
+
+```tsx
+class CounterStore extends Store<{ count: number }> {
+  increment() {
+    // Set a breakpoint here to catch ALL count changes
+    this.setState((state) => ({ count: state.count + 1 }));
+  }
+}
+```
+
+### Why Can't I Destructure Actions?
+
+This won't work:
+
+```tsx
+const { increment } = useCounterStore(); // ❌ Breaks 'this' binding
+increment(); // Error: cannot read setState of undefined
+```
+
+You must use:
+
+```tsx
+const store = useCounterStore(); // ✅
+store.increment();
+```
+
+**This is a feature, not a bug.** The store is an external dependency — it should look like one. When you see `store.increment()`, it's clear you're calling a method on an external object. If you just saw `increment()`, it would look like a local function, hiding the fact that it's modifying external state.
+
+### Why `useStore.Context` Instead of Separate Exports?
+
+Instead of:
+
+```tsx
+// Two exports to manage
+export const useCounterStore = createStoreHook(CounterStore);
+export const CounterStoreContext = useCounterStore.Context;
+```
+
+We have:
+
+```tsx
+// One export does it all
+export const useCounterStore = createStoreHook(CounterStore);
+
+// Usage
+<useCounterStore.Context>
+  <App />
+</useCounterStore.Context>;
+```
+
+**Simplicity:** One export per store file. The hook and its context travel together — you can't accidentally import one without having access to the other.
+
+### Context `value` vs MockContext `state`
+
+Both `Context` and `MockContext` accept props, but they work differently:
+
+```tsx
+// Context: value is passed TO getInitialState() for computation
+<useCounterStore.Context value={{ count: 10 }}>
+
+// MockContext: state REPLACES getInitialState() entirely
+<useCounterStore.MockContext state={{ count: 10 }}>
+```
+
+**Why the distinction?**
+
+- `Context.value` — Provides input data for `getInitialState()` to use. Your `getInitialState()` method is still the single source of truth for how state is computed.
+- `MockContext.state` — Bypasses `getInitialState()` completely and sets the state directly. This is only for tests where you need to put the store in a specific state.
+
+**Debuggability:** In production code, `getInitialState()` is always called. You can set a breakpoint there to see exactly how initial state is computed. With `MockContext`, the state is set directly for test convenience.
+
+### `useStore()` vs `useStore.optional()`
+
+By default, calling the hook outside a provider throws an error:
+
+```tsx
+const store = useCounterStore(); // Throws if no <useCounterStore.Context> above
+```
+
+This is intentional — it catches missing providers early during development. Most components _require_ the store to function, so a loud failure is better than a silent `undefined`.
+
+For components that genuinely need to work with or without a provider, use `.optional()`:
+
+```tsx
+const store = useCounterStore.optional(); // Returns undefined if no provider
+```
+
+**Why two variants instead of a config flag?** Type safety. `useStore()` returns `TWithState` — you can use the store directly without null checks. `useStore.optional()` returns `TWithState | undefined` — TypeScript forces you to handle the `undefined` case. This keeps the common path clean while making the optional path explicitly safe.
+
+### Why `getInitialState()` Method Instead of a Property?
+
+Instead of:
+
+```tsx
+class CounterStore extends Store<{ count: number }> {
+  initialState = { count: 0 }; // Static value
+}
+```
+
+We use:
+
+```tsx
+class CounterStore extends Store<{ count: number }> {
+  protected getInitialState() {
+    // Can include logic!
+    return { count: 0 };
+  }
+}
+```
+
+**Flexibility:** A method lets you compute initial state dynamically:
+
+```tsx
+protected getInitialState() {
+  return {
+    count: parseInt(localStorage.getItem('count') ?? '0'),
+    timestamp: Date.now(),
+  };
+}
+```
+
+---
+
+**context-scoped-state** — Because not all state needs to be global.

package/dist/index.js

@@ -1,22 +1,22 @@
 import { jsx as C } from "react/jsx-runtime";
-import h, { useSyncExternalStore as H } from "react";
-var m = function(e, r) {
-  return m = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(t, n) {
+import f, { useSyncExternalStore as $ } from "react";
+var w = function(e, r) {
+  return w = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(t, n) {
     t.__proto__ = n;
   } || function(t, n) {
     for (var o in n) Object.prototype.hasOwnProperty.call(n, o) && (t[o] = n[o]);
-  }, m(e, r);
+  }, w(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);
+  w(e, r);
   function t() {
     this.constructor = e;
   }
   e.prototype = r === null ? Object.create(r) : (t.prototype = r.prototype, new t());
 }
-function w(e) {
+function E(e) {
   var r = typeof Symbol == "function" && Symbol.iterator, t = r && e[r], n = 0;
   if (t) return t.call(e);
   if (e && typeof e.length == "number") return {
@@ -26,7 +26,7 @@ function w(e) {
   };
   throw new TypeError(r ? "Object is not iterable." : "Symbol.iterator is not defined.");
 }
-function x(e, r) {
+function g(e, r) {
   var t = typeof Symbol == "function" && e[Symbol.iterator];
   if (!t) return e;
   var n = t.call(e), o, i = [], s;
@@ -43,7 +43,7 @@ function x(e, r) {
   }
   return i;
 }
-function E(e, r, t) {
+function x(e, r, t) {
   if (t || arguments.length === 2) for (var n = 0, o = r.length, i; n < o; n++)
     (i || !(n in r)) && (i || (i = Array.prototype.slice.call(r, 0, n)), i[n] = r[n]);
   return e.concat(i || Array.prototype.slice.call(r));
@@ -57,7 +57,7 @@ function M(e) {
   }, t = e(r);
   return t.prototype = Object.create(Error.prototype), t.prototype.constructor = t, t;
 }
-var _ = M(function(e) {
+var m = M(function(e) {
   return function(t) {
     e(this), this.message = t ? t.length + ` errors occurred during unsubscription:
 ` + t.map(function(n, o) {
@@ -66,13 +66,13 @@ var _ = M(function(e) {
   `) : "", this.name = "UnsubscriptionError", this.errors = t;
   };
 });
-function g(e, r) {
+function O(e, r) {
   if (e) {
     var t = e.indexOf(r);
     0 <= t && e.splice(t, 1);
   }
 }
-var S = (function() {
+var _ = (function() {
   function e(r) {
     this.initialTeardown = r, this.closed = !1, this._parentage = null, this._finalizers = null;
   }
@@ -84,9 +84,9 @@ var S = (function() {
       if (s)
         if (this._parentage = null, Array.isArray(s))
           try {
-            for (var u = w(s), c = u.next(); !c.done; c = u.next()) {
-              var f = c.value;
-              f.remove(this);
+            for (var u = E(s), c = u.next(); !c.done; c = u.next()) {
+              var p = c.value;
+              p.remove(this);
             }
           } catch (a) {
             r = { error: a };
@@ -99,37 +99,37 @@ var S = (function() {
           }
         else
           s.remove(this);
-      var j = this.initialTeardown;
-      if (l(j))
+      var b = this.initialTeardown;
+      if (l(b))
         try {
-          j();
+          b();
         } catch (a) {
-          i = a instanceof _ ? a.errors : [a];
+          i = a instanceof m ? a.errors : [a];
         }
       var P = this._finalizers;
       if (P) {
         this._finalizers = null;
         try {
-          for (var b = w(P), p = b.next(); !p.done; p = b.next()) {
-            var V = p.value;
+          for (var d = E(P), h = d.next(); !h.done; h = d.next()) {
+            var H = h.value;
             try {
-              A(V);
+              A(H);
             } catch (a) {
-              i = i ?? [], a instanceof _ ? i = E(E([], x(i)), x(a.errors)) : i.push(a);
+              i = i ?? [], a instanceof m ? i = x(x([], g(i)), g(a.errors)) : i.push(a);
             }
           }
         } catch (a) {
           n = { error: a };
         } finally {
           try {
-            p && !p.done && (o = b.return) && o.call(b);
+            h && !h.done && (o = d.return) && o.call(d);
           } finally {
             if (n) throw n.error;
           }
         }
       }
       if (i)
-        throw new _(i);
+        throw new m(i);
     }
   }, e.prototype.add = function(r) {
     var t;
@@ -152,52 +152,52 @@ var S = (function() {
     this._parentage = Array.isArray(t) ? (t.push(r), t) : t ? [t, r] : r;
   }, e.prototype._removeParent = function(r) {
     var t = this._parentage;
-    t === r ? this._parentage = null : Array.isArray(t) && g(t, r);
+    t === r ? this._parentage = null : Array.isArray(t) && O(t, r);
   }, e.prototype.remove = function(r) {
     var t = this._finalizers;
-    t && g(t, r), r instanceof e && r._removeParent(this);
+    t && O(t, r), r instanceof e && r._removeParent(this);
   }, e.EMPTY = (function() {
     var r = new e();
     return r.closed = !0, r;
   })(), e;
-})(), Y = S.EMPTY;
+})(), Y = _.EMPTY;
 function R(e) {
-  return e instanceof S || e && "closed" in e && l(e.remove) && l(e.add) && l(e.unsubscribe);
+  return e instanceof _ || e && "closed" in e && l(e.remove) && l(e.add) && l(e.unsubscribe);
 }
 function A(e) {
   l(e) ? e() : e.unsubscribe();
 }
-var $ = {
+var W = {
   Promise: void 0
-}, W = {
+}, q = {
   setTimeout: function(e, r) {
     for (var t = [], n = 2; n < arguments.length; n++)
       t[n - 2] = arguments[n];
-    return setTimeout.apply(void 0, E([e, r], x(t)));
+    return setTimeout.apply(void 0, x([e, r], g(t)));
   },
   clearTimeout: function(e) {
     return clearTimeout(e);
   },
   delegate: void 0
 };
-function q(e) {
-  W.setTimeout(function() {
+function D(e) {
+  q.setTimeout(function() {
     throw e;
   });
 }
 function T() {
 }
-function y(e) {
+function S(e) {
   e();
 }
 var F = (function(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 = J, n;
+    return n.isStopped = !1, t ? (n.destination = t, R(t) && t.add(n)) : n.destination = K, n;
   }
   return r.create = function(t, n, o) {
-    return new O(t, n, o);
+    return new j(t, n, o);
   }, r.prototype.next = function(t) {
     this.isStopped || this._next(t);
   }, r.prototype.error = function(t) {
@@ -221,7 +221,7 @@ var F = (function(e) {
       this.unsubscribe();
     }
   }, r;
-})(S), D = (function() {
+})(_), G = (function() {
   function e(r) {
     this.partialObserver = r;
   }
@@ -231,7 +231,7 @@ var F = (function(e) {
       try {
         t.next(r);
       } catch (n) {
-        d(n);
+        y(n);
       }
   }, e.prototype.error = function(r) {
     var t = this.partialObserver;
@@ -239,20 +239,20 @@ var F = (function(e) {
       try {
         t.error(r);
       } catch (n) {
-        d(n);
+        y(n);
       }
     else
-      d(r);
+      y(r);
   }, e.prototype.complete = function() {
     var r = this.partialObserver;
     if (r.complete)
       try {
         r.complete();
       } catch (t) {
-        d(t);
+        y(t);
       }
   }, e;
-})(), O = (function(e) {
+})(), j = (function(e) {
   v(r, e);
   function r(t, n, o) {
     var i = e.call(this) || this, s;
@@ -260,29 +260,29 @@ var F = (function(e) {
       next: t ?? void 0,
       error: n ?? void 0,
       complete: o ?? void 0
-    } : s = t, i.destination = new D(s), i;
+    } : s = t, i.destination = new G(s), i;
   }
   return r;
 })(F);
-function d(e) {
-  q(e);
+function y(e) {
+  D(e);
 }
-function G(e) {
+function J(e) {
   throw e;
 }
-var J = {
+var K = {
   closed: !0,
   next: T,
-  error: G,
+  error: J,
   complete: T
-}, K = (function() {
+}, L = (function() {
   return typeof Symbol == "function" && Symbol.observable || "@@observable";
 })();
-function L(e) {
+function Q(e) {
   return e;
 }
-function Q(e) {
-  return e.length === 0 ? L : e.length === 1 ? e[0] : function(t) {
+function X(e) {
+  return e.length === 0 ? Q : e.length === 1 ? e[0] : function(t) {
     return e.reduce(function(n, o) {
       return o(n);
     }, t);
@@ -296,8 +296,8 @@ var I = (function() {
     var t = new e();
     return t.source = this, t.operator = r, t;
   }, e.prototype.subscribe = function(r, t, n) {
-    var o = this, i = Z(r) ? r : new O(r, t, n);
-    return y(function() {
+    var o = this, i = z(r) ? r : new j(r, t, n);
+    return S(function() {
       var s = o, u = s.operator, c = s.source;
       i.add(u ? u.call(i, c) : c ? o._subscribe(i) : o._trySubscribe(i));
     }), i;
@@ -310,7 +310,7 @@ var I = (function() {
   }, e.prototype.forEach = function(r, t) {
     var n = this;
     return t = k(t), new t(function(o, i) {
-      var s = new O({
+      var s = new j({
         next: function(u) {
           try {
             r(u);
@@ -326,12 +326,12 @@ var I = (function() {
   }, e.prototype._subscribe = function(r) {
     var t;
     return (t = this.source) === null || t === void 0 ? void 0 : t.subscribe(r);
-  }, e.prototype[K] = function() {
+  }, e.prototype[L] = function() {
     return this;
   }, e.prototype.pipe = function() {
     for (var r = [], t = 0; t < arguments.length; t++)
       r[t] = arguments[t];
-    return Q(r)(this);
+    return X(r)(this);
   }, e.prototype.toPromise = function(r) {
     var t = this;
     return r = k(r), new r(function(n, o) {
@@ -350,15 +350,15 @@ var I = (function() {
 })();
 function k(e) {
   var r;
-  return (r = e ?? $.Promise) !== null && r !== void 0 ? r : Promise;
+  return (r = e ?? W.Promise) !== null && r !== void 0 ? r : Promise;
 }
-function X(e) {
+function Z(e) {
   return e && l(e.next) && l(e.error) && l(e.complete);
 }
-function Z(e) {
-  return e && e instanceof F || X(e) && R(e);
+function z(e) {
+  return e && e instanceof F || Z(e) && R(e);
 }
-var z = M(function(e) {
+var V = M(function(e) {
   return function() {
     e(this), this.name = "ObjectUnsubscribedError", this.message = "object unsubscribed";
   };
@@ -373,20 +373,20 @@ var z = M(function(e) {
     return n.operator = t, n;
   }, r.prototype._throwIfClosed = function() {
     if (this.closed)
-      throw new z();
+      throw new V();
   }, r.prototype.next = function(t) {
     var n = this;
-    y(function() {
+    S(function() {
       var o, i;
       if (n._throwIfClosed(), !n.isStopped) {
         n.currentObservers || (n.currentObservers = Array.from(n.observers));
         try {
-          for (var s = w(n.currentObservers), u = s.next(); !u.done; u = s.next()) {
+          for (var s = E(n.currentObservers), u = s.next(); !u.done; u = s.next()) {
             var c = u.value;
             c.next(t);
           }
-        } catch (f) {
-          o = { error: f };
+        } catch (p) {
+          o = { error: p };
         } finally {
           try {
             u && !u.done && (i = s.return) && i.call(s);
@@ -398,7 +398,7 @@ var z = M(function(e) {
     });
   }, r.prototype.error = function(t) {
     var n = this;
-    y(function() {
+    S(function() {
       if (n._throwIfClosed(), !n.isStopped) {
         n.hasError = n.isStopped = !0, n.thrownError = t;
         for (var o = n.observers; o.length; )
@@ -407,7 +407,7 @@ var z = M(function(e) {
     });
   }, r.prototype.complete = function() {
     var t = this;
-    y(function() {
+    S(function() {
       if (t._throwIfClosed(), !t.isStopped) {
         t.isStopped = !0;
         for (var n = t.observers; n.length; )
@@ -429,8 +429,8 @@ var z = M(function(e) {
     return this._throwIfClosed(), this._checkFinalizedStatuses(t), this._innerSubscribe(t);
   }, r.prototype._innerSubscribe = function(t) {
     var n = this, o = this, i = o.hasError, s = o.isStopped, u = o.observers;
-    return i || s ? Y : (this.currentObservers = null, u.push(t), new S(function() {
-      n.currentObservers = null, g(u, t);
+    return i || s ? Y : (this.currentObservers = null, u.push(t), new _(function() {
+      n.currentObservers = null, O(u, t);
     }));
   }, r.prototype._checkFinalizedStatuses = function(t) {
     var n = this, o = n.hasError, i = n.thrownError, s = n.isStopped;
@@ -509,12 +509,29 @@ class et {
 function nt(e) {
   const r = class extends e {
     state;
-  }, t = h.createContext(
+  }, t = f.createContext(
     void 0
   );
-  function n() {
-    const o = h.useContext(t);
-    if (!o)
+  function n(i) {
+    const s = f.useCallback(
+      (u) => {
+        if (!i) return () => {
+        };
+        const c = i.state$().subscribe(u);
+        return () => c.unsubscribe();
+      },
+      [i]
+    );
+    if ($(
+      s,
+      () => i?.getState(),
+      () => i?.getState()
+    ), !!i)
+      return i.state = i.getState(), i;
+  }
+  function o() {
+    const i = f.useContext(t), s = n(i);
+    if (!s)
       throw new Error(
         `Store hook used outside of its Context provider.
 
@@ -526,42 +543,33 @@ Then wrap your component with:
     <YourComponent />
   </useYourStore.Context>`
       );
-    const i = h.useCallback(
-      (u) => {
-        const c = o.state$().subscribe(u);
-        return () => c.unsubscribe();
-      },
-      [o]
-    ), s = H(
-      i,
-      () => o.getState(),
-      () => o.getState()
-      // getServerSnapshot for SSR
-    );
-    return o.state = s, o;
+    return s;
   }
-  return n.Context = function({
-    children: i,
-    value: s
+  return o.optional = function() {
+    const s = f.useContext(t);
+    return n(s);
+  }, o.Context = function({
+    children: s,
+    value: u
   }) {
-    const [u] = h.useState(() => new r(s));
-    return /* @__PURE__ */ C(t.Provider, { value: u, children: i });
-  }, n.MockContext = function({
-    children: i,
-    state: s
+    const [c] = f.useState(() => new r(u));
+    return /* @__PURE__ */ C(t.Provider, { value: c, children: s });
+  }, o.MockContext = function({
+    children: s,
+    state: u
   }) {
-    const u = () => {
-      if (s === void 0)
+    const c = () => {
+      if (u === void 0)
         return new r();
-      const f = class extends r {
+      const b = class extends r {
         getInitialState() {
-          return s;
+          return u;
         }
       };
-      return new f();
-    }, c = h.useRef(u());
-    return /* @__PURE__ */ C(t.Provider, { value: c.current, children: i });
-  }, n;
+      return new b();
+    }, p = f.useRef(c());
+    return /* @__PURE__ */ C(t.Provider, { value: p.current, children: s });
+  }, o;
 }
 export {
   et as Store,

package/dist/lib/createStore.d.ts

@@ -4,6 +4,9 @@ declare function createStoreHook<T extends Store<any, any>>(storeClass: new (con
     (): T & {
         readonly state: ReturnType<T["getState"]>;
     };
+    optional(): (T & {
+        readonly state: ReturnType<T["getState"]>;
+    }) | undefined;
     Context({ children, value, }: {
         children: React.ReactNode;
         value?: T extends Store<any, infer C> ? C : never;

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,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"}
+{"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;;;;gBAgEQ;;SAAa,SAAS;kCAQpE;QACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,KAAK,CAAC,6BAtE2C,CAAC,cAsEzB;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.12",
+  "version": "0.0.14",
   "license": "MIT",
   "type": "module",
   "repository": {