@dvashim/store 1.3.0 → 1.4.0

package/README.md

@@ -103,6 +103,52 @@ const unsubscribe = count$.subscribe((state, prevState) => {
 unsubscribe()
 ```
 
+### `ComputedStore`
+
+A read-only reactive store that derives its value from a source store using a selector. Automatically updates when the source changes. Accepts any `SourceStore<T>` (including `Store` or another `ComputedStore`) as its source.
+
+> **Note:** `ComputedStore` is not yet re-exported from the barrel. Import it directly:
+>
+> ```ts
+> import { ComputedStore } from '@dvashim/store/ComputedStore'
+> ```
+
+```ts
+const todos$ = createStore([
+  { text: 'Buy milk', done: true },
+  { text: 'Walk dog', done: false },
+])
+
+const remaining$ = new ComputedStore(todos$, (todos) =>
+  todos.filter((t) => !t.done).length
+)
+
+remaining$.get() // 1
+remaining$.subscribe((count, prev) => console.log(`${prev} → ${count}`))
+```
+
+#### Chaining
+
+`ComputedStore` implements `SourceStore<U>`, so it can be used as the source for another `ComputedStore`.
+
+```ts
+const count$ = new ComputedStore(todos$, (todos) => todos.length)
+const label$ = new ComputedStore(count$, (n) => `${n} items`)
+label$.get() // "2 items"
+```
+
+#### `computed.connect()` / `computed.disconnect()`
+
+Control the subscription to the source store. After `disconnect()`, the derived value stops updating and `get()` returns the last known value. Call `connect()` to resume.
+
+```ts
+remaining$.disconnect()
+remaining$.isConnected // false
+
+remaining$.connect()
+remaining$.isConnected // true
+```
+
 ### `useStore(store, selector?)`
 
 React hook that subscribes a component to a store.
@@ -127,6 +173,21 @@ function UserName() {
 }
 ```
 
+### Types
+
+The following types are exported from the package:
+
+```ts
+import type { Selector, Subscriber, UpdateOptions, SourceStore } from '@dvashim/store'
+```
+
+| Type | Definition |
+| ---- | ---------- |
+| `Selector<T, U>` | `(state: T) => U` |
+| `Subscriber<T>` | `(state: T, prevState: T) => void` |
+| `UpdateOptions` | `{ force?: boolean }` |
+| `SourceStore<T>` | `{ get(): T; subscribe(fn: Subscriber<T>): () => void }` — shared interface implemented by both `Store` and `ComputedStore` |
+
 ## Patterns
 
 ### Shared stores across components

package/dist/ComputedStore.d.ts

@@ -0,0 +1,13 @@
+import type { Selector, SourceStore, Subscriber } from './types';
+export declare class ComputedStore<T, U> implements SourceStore<U> {
+    #private;
+    constructor(source: SourceStore<T>, selector: Selector<T, U>);
+    connect(): void;
+    disconnect(): void;
+    get isConnected(): boolean;
+    protected get source(): SourceStore<T>;
+    protected get selector(): Selector<T, U>;
+    get(): U;
+    subscribe(fn: Subscriber<U>): () => void;
+}
+//# sourceMappingURL=ComputedStore.d.ts.map

package/dist/ComputedStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComputedStore.d.ts","sourceRoot":"","sources":["../src/ComputedStore.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEhE,qBAAa,aAAa,CAAC,CAAC,EAAE,CAAC,CAAE,YAAW,WAAW,CAAC,CAAC,CAAC;;gBAM5C,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;IAO5D,OAAO;IAOP,UAAU;IAKV,IAAI,WAAW,YAEd;IAED,SAAS,KAAK,MAAM,mBAEnB;IAED,SAAS,KAAK,QAAQ,mBAErB;IAED,GAAG;IAIH,SAAS,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC;CAG5B"}

package/dist/ComputedStore.js

@@ -0,0 +1,52 @@
+import { Store } from './Store';
+export class ComputedStore {
+    #source;
+    #derived;
+    #selector;
+    #unsubscribe;
+    constructor(source, selector) {
+        this.#source = source;
+        this.#derived = new Store(selector(source.get()));
+        this.#selector = selector;
+        this.connect();
+    }
+    connect() {
+        this.disconnect();
+        this.#unsubscribe = this.#source.subscribe((state) => {
+            this.#derived.set(this.#selector(state));
+        });
+    }
+    disconnect() {
+        this.#unsubscribe?.();
+        this.#unsubscribe = undefined;
+    }
+    get isConnected() {
+        return !!this.#unsubscribe;
+    }
+    get source() {
+        return this.#source;
+    }
+    get selector() {
+        return this.#selector;
+    }
+    get() {
+        return this.#derived.get();
+    }
+    subscribe(fn) {
+        return this.#derived.subscribe(fn);
+    }
+}
+// const s = new Store([1, 2])
+// const len = new ComputedStore(s, (state) => state.length)
+// const lenString = new ComputedStore(len, (state) => `length: ${state}`)
+// const sum = new ComputedStore(s, (state) => state.reduce((a, b) => a + b, 0))
+// console.log(len.get()) // 2
+// console.log(sum.get()) // 3
+// console.log(lenString.get()) // length: 2
+// const len1 = new SubStore(s, (state) => state.length)
+// const lenString1 = new SubStore(len1, (state) => `length: ${state}`)
+// const sum1 = new SubStore(s, (state) => state.reduce((a, b) => a + b, 0))
+// console.log(len1.get()) // 2
+// console.log(sum1.get()) // 3
+// console.log(lenString1.get()) // length: 2
+//# sourceMappingURL=ComputedStore.js.map

package/dist/ComputedStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComputedStore.js","sourceRoot":"","sources":["../src/ComputedStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAG/B,MAAM,OAAO,aAAa;IACf,OAAO,CAAgB;IACvB,QAAQ,CAAU;IAClB,SAAS,CAAgB;IAClC,YAAY,CAA2B;IAEvC,YAAY,MAAsB,EAAE,QAAwB;QAC1D,IAAI,CAAC,OAAO,GAAG,MAAM,CAAA;QACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;QACjD,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAA;QACzB,IAAI,CAAC,OAAO,EAAE,CAAA;IAChB,CAAC;IAED,OAAO;QACL,IAAI,CAAC,UAAU,EAAE,CAAA;QACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;YACnD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAA;QAC1C,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,UAAU;QACR,IAAI,CAAC,YAAY,EAAE,EAAE,CAAA;QACrB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAA;IAC/B,CAAC;IAED,IAAI,WAAW;QACb,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,CAAA;IAC5B,CAAC;IAED,IAAc,MAAM;QAClB,OAAO,IAAI,CAAC,OAAO,CAAA;IACrB,CAAC;IAED,IAAc,QAAQ;QACpB,OAAO,IAAI,CAAC,SAAS,CAAA;IACvB,CAAC;IAED,GAAG;QACD,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAA;IAC5B,CAAC;IAED,SAAS,CAAC,EAAiB;QACzB,OAAO,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;IACpC,CAAC;CACF;AAED,8BAA8B;AAC9B,4DAA4D;AAC5D,0EAA0E;AAC1E,gFAAgF;AAChF,8BAA8B;AAC9B,8BAA8B;AAC9B,4CAA4C;AAE5C,wDAAwD;AACxD,uEAAuE;AACvE,4EAA4E;AAC5E,+BAA+B;AAC/B,+BAA+B;AAC/B,6CAA6C"}

package/dist/Store.d.ts

@@ -1,13 +1,10 @@
-type Subscriber<T> = (state: T, prevState: T) => void;
+import type { SourceStore, Subscriber, UpdateOptions } from './types';
 type Updater<T> = (prevValue: T) => T;
-type UpdateOptions = {
-    force?: boolean;
-};
 /**
  * Reactive state container with subscription-based change notification.
  * @typeParam T - The type of the stored state.
  */
-export declare class Store<T> {
+export declare class Store<T> implements SourceStore<T> {
     #private;
     constructor(initialState: T);
     /**

package/dist/Store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Store.d.ts","sourceRoot":"","sources":["../src/Store.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,KAAK,IAAI,CAAA;AACrD,KAAK,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,CAAA;AACrC,KAAK,aAAa,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AASxC;;;GAGG;AACH,qBAAa,KAAK,CAAC,CAAC;;gBAMN,YAAY,EAAE,CAAC;IAI3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI;IAKxC,iCAAiC;IACjC,GAAG,IAAI,CAAC;IAIR;;;;;OAKG;IACH,GAAG,CAAC,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;IAKrC;;;;;OAKG;IACH,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CA8DpD"}
+{"version":3,"file":"Store.d.ts","sourceRoot":"","sources":["../src/Store.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAErE,KAAK,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,CAAA;AASrC;;;GAGG;AACH,qBAAa,KAAK,CAAC,CAAC,CAAE,YAAW,WAAW,CAAC,CAAC,CAAC;;gBAMjC,YAAY,EAAE,CAAC;IAI3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI;IAKxC,iCAAiC;IACjC,GAAG,IAAI,CAAC;IAIR;;;;;OAKG;IACH,GAAG,CAAC,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;IAKrC;;;;;OAKG;IACH,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CA8DpD"}

package/dist/types.d.ts

@@ -1,2 +1,10 @@
 export type Selector<T, U> = (state: T) => U;
+export type Subscriber<T> = (state: T, prevState: T) => void;
+export type UpdateOptions = {
+    force?: boolean;
+};
+export type SourceStore<T> = {
+    get: () => T;
+    subscribe: (fn: Subscriber<T>) => () => void;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAA;AAC5C,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,KAAK,IAAI,CAAA;AAC5D,MAAM,MAAM,aAAa,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAC/C,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;IAC3B,GAAG,EAAE,MAAM,CAAC,CAAA;IACZ,SAAS,EAAE,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,MAAM,IAAI,CAAA;CAC7C,CAAA"}

package/package.json

@@ -4,7 +4,7 @@
   "name": "@dvashim/store",
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "author": {
     "email": "aleksei@dvashim.dev",
     "name": "Aleksei Reznichenko"