Updates to MergedStateStore

Author: arnautov-anton

src/store.ts

@@ -2,33 +2,41 @@ export type Patch<T> = (value: T) => T;
 export type ValueOrPatch<T> = T | Patch<T>;
 export type Handler<T> = (nextValue: T, previousValue: T | undefined) => void;
 export type Unsubscribe = () => void;
+
 export type Unregister = Unsubscribe;
-export type Modifier<T> = (nextValue: T, previousValue: T | undefined) => void;
+export type Modifier<T> = Handler<T>;
 
 export const isPatch = <T>(value: ValueOrPatch<T>): value is Patch<T> =>
   typeof value === 'function';
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
 export class StateStore<T extends Record<string, unknown>> {
   protected handlers = new Set<Handler<T>>();
   protected modifiers = new Set<Handler<T>>();
 
-  constructor(private value: T) {}
+  constructor(protected value: T) {}
 
   /**
    * Allows merging two stores only if their keys differ otherwise there's no way to ensure the data type stability.
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public merge<Q extends StateStore<any>>(
-    stateStore: Q extends StateStore<infer L> ? (Extract<keyof T, keyof L> extends never ? Q : never) : never,
+    stateStore: Q extends StateStore<infer L>
+      ? Extract<keyof T, keyof L> extends never
+        ? Q
+        : never
+      : never,
   ) {
     return new MergedStateStore<T, Q extends StateStore<infer L> ? L : never>({
-      parentStore: this,
-      mergedStore: stateStore,
+      original: this,
+      merged: stateStore,
     });
   }
 
-  public next = (newValueOrPatch: ValueOrPatch<T>): void => {
-    // newValue (or patch output) should never be mutated previous value
+  public next(newValueOrPatch: ValueOrPatch<T>): void {
+    // newValue (or patch output) should never be a mutated previous value
     const newValue = isPatch(newValueOrPatch)
       ? newValueOrPatch(this.value)
       : newValueOrPatch;
@@ -42,12 +50,15 @@ export class StateStore<T extends Record<string, unknown>> {
     this.value = newValue;
 
     this.handlers.forEach((handler) => handler(this.value, oldValue));
-  };
+  }
 
   public partialNext = (partial: Partial<T>): void =>
     this.next((current) => ({ ...current, ...partial }));
 
-  public getLatestValue = (): T => this.value;
+  public getLatestValue(): T {
+    return this.value;
+  }
+  
   public subscribe(handler: Handler<T>): Unsubscribe {
     handler(this.value, undefined);
     this.handlers.add(handler);
@@ -96,74 +107,131 @@ export class StateStore<T extends Record<string, unknown>> {
   }
 }
 
-class MergedStateStore<T extends Record<string, unknown>, L extends Record<string, unknown>> extends StateStore<T & L> {
-  private readonly parentStore: StateStore<T>;
-  private readonly mergedStore: StateStore<L>;
+class MergedStateStore<
+  O extends Record<string, unknown>,
+  M extends Record<string, unknown>,
+> extends StateStore<O & M> {
+  public readonly original: StateStore<O>;
+  public readonly merged: StateStore<M>;
+  private cachedOriginalValue: O;
+  private cachedMergedValue: M;
+
+  constructor({ original, merged }: { original: StateStore<O>; merged: StateStore<M> }) {
+    const originalValue = original.getLatestValue();
+    const mergedValue = merged.getLatestValue();
 
-  constructor({ parentStore, mergedStore }: { mergedStore: StateStore<L>; parentStore: StateStore<T> }) {
     super({
-      ...parentStore.getLatestValue(),
-      ...mergedStore.getLatestValue(),
+      ...originalValue,
+      ...mergedValue,
     });
 
-    this.parentStore = parentStore;
-    this.mergedStore = mergedStore;
+    this.cachedOriginalValue = originalValue;
+    this.cachedMergedValue = mergedValue;
+
+    this.original = original;
+    this.merged = merged;
   }
 
-  public subscribe(handler: Handler<T & L>) {
+  public subscribe(handler: Handler<O & M>) {
     const unsubscribeFunctions: Unsubscribe[] = [];
 
+    // first subscriber will also register helpers which listen to changes of the
+    // "original" and "merged" stores, combined outputs will be emitted through super.next
+    // whenever cached values do not equal (always apart from the initial subscription)
+    // since the actual handler subscription is registered after helpers, the actual
+    // handler will run only once
     if (!this.handlers.size) {
-      // FIXME: should we subscribe to the changes of the parent store or should we let it die
-      // and make MergedStateStore the next "parent"?
-      for (const store of [this.parentStore, this.mergedStore]) {
-        // TODO: maybe allow "resolver" (how the two states should be merged)
-        const unsubscribe = store.subscribe((nv) => {
-          this.next((cv) => ({
-            ...cv,
-            ...nv,
-          }));
-        });
-
-        unsubscribeFunctions.push(unsubscribe);
-      }
+      const base = (nextValue: O | M) => {
+        super.next((currentValue) => ({
+          ...currentValue,
+          ...nextValue,
+        }));
+      };
+
+      unsubscribeFunctions.push(
+        this.original.subscribe((nextValue) => {
+          if (nextValue === this.cachedOriginalValue) return;
+          this.cachedOriginalValue = nextValue;
+          base(nextValue);
+        }),
+        this.merged.subscribe((nextValue) => {
+          if (nextValue === this.cachedMergedValue) return;
+          this.cachedMergedValue = nextValue;
+          base(nextValue);
+        }),
+      );
     }
 
     unsubscribeFunctions.push(super.subscribe(handler));
 
     return () => {
-      unsubscribeFunctions.forEach((f) => f());
+      unsubscribeFunctions.forEach((unsubscribe) => unsubscribe());
     };
   }
 
-  // TODO: getLatestValue should remain the same unless either of the source values changed (cached)
-
-  // TODO: make `next` support only T type (maybe?) (only if we go with subscribing only to mergedStore)
-}
-
-// const a = new StateStore<{ a: string }>({ a: 'yooo' });
-// const b = new StateStore<{ a: number, q: string; }>({ q: 'yooo', a: 2 });
-// const c = new StateStore<{ q: string }>({ q: 'yooo' });
-
-// const d = a.merge(b); // error
-// const e = a.merge(c); // no error (keys differ)
+  public getLatestValue() {
+    // if there are no handlers registered to MergedStore then the local value might be out-of-sync
+    // pull latest and compare against cached - if they differ, cache latest and produce new combined
+    if (!this.handlers.size) {
+      const originalValue = this.original.getLatestValue();
+      const mergedValue = this.merged.getLatestValue();
+
+      if (
+        originalValue !== this.cachedOriginalValue ||
+        mergedValue !== this.cachedMergedValue
+      ) {
+        this.value = {
+          ...originalValue,
+          ...mergedValue,
+        };
+        this.cachedMergedValue = mergedValue;
+        this.cachedOriginalValue = originalValue;
+      }
+    }
 
-// TODO: decide
-// const d = a.merge(b); // state/type of `a` gets copied to the new merged state and gets garbage collected, `d` becomes new `a`
+    return super.getLatestValue();
+  }
 
-// l.subscribe(console.info);
+  // override original methods and "disable" them
+  public next = () => {
+    console.warn(
+      `${MergedStateStore.name}.next is disabled, call original.next or merged.next instead`,
+    );
+  };
+  public partialNext = () => {
+    console.warn(
+      `${MergedStateStore.name}.partialNext is disabled, call original.partialNext or merged.partialNext instead`,
+    );
+  };
+  public registerModifier() {
+    console.warn(
+      `${MergedStateStore.name}.registerModifier is disabled, call original.registerModifier or merged.registerModifier instead`,
+    );
+    return noop;
+  }
+}
 
-// t.next({ a: 'poof' });
-// b.next({ q: 'nah' });
+// EXAMPLE:
 
 const Uninitialized = Symbol('uninitialized');
 
-const a = new StateStore<{ hasNext: boolean | typeof Uninitialized, next: string | null | typeof Uninitialized; }>({
+const b = new StateStore<{
+  previous: string | null | symbol;
+  hasPrevious: boolean | symbol;
+}>({
+  previous: Uninitialized,
+  hasPrevious: Uninitialized,
+});
+
+const a = new StateStore<{
+  hasNext: boolean | symbol;
+  next: string | null | symbol;
+}>({
   next: Uninitialized,
   hasNext: Uninitialized,
-});
+}).merge(b);
 
-a.registerModifier((nextValue) => {
+a.original.registerModifier((nextValue) => {
   if (typeof nextValue.next === 'string') {
     nextValue.hasNext = true;
   } else if (nextValue.next === Uninitialized) {
@@ -175,6 +243,6 @@ a.registerModifier((nextValue) => {
 
 a.subscribe((ns) => console.log(ns));
 
-a.partialNext({ next: 'sss' });
-a.partialNext({ next: null });
-a.partialNext({ next: Uninitialized });
+a.original.partialNext({ next: 'next' });
+a.original.partialNext({ next: null });
+a.original.partialNext({ next: Uninitialized });