fix: fixing asymmetric diamond dependency problem

Author: divdavem

src/index.spec.ts

@@ -664,6 +664,22 @@ describe('stores', () => {
       unsubscribe();
     });
 
+    it('should prevent the asymmetric diamond dependency problem', () => {
+      const a = writable(0);
+      const b = derived(a, (a) => `b${a}`);
+      const c = derived([a, b], ([a, b]) => `${a}${b}`);
+
+      const values: string[] = [];
+
+      const unsubscribe = c.subscribe((value) => {
+        values.push(value);
+      });
+      expect(values).toEqual(['0b0']);
+      a.set(1);
+      expect(values).toEqual(['0b0', '1b1']);
+      unsubscribe();
+    });
+
     it('should be able to use destructuring', () => {
       const store = writable(0);
       const derivedStore = derived(store, (value) => {

src/index.ts

@@ -11,6 +11,7 @@ export type SubscriberFunction<T> = (value: T) => void;
 export interface SubscriberObject<T> {
   next: SubscriberFunction<T>;
   invalidate: () => void;
+  invalidated: boolean;
 }
 
 /**
@@ -100,8 +101,12 @@ const bind = <T>(object: T | null | undefined, fnName: keyof T) => {
 
 const toSubscriberObject = <T>(subscriber: Subscriber<T>): SubscriberObject<T> =>
   typeof subscriber === 'function'
-    ? { next: subscriber.bind(null), invalidate: noop }
-    : { next: bind(subscriber, 'next'), invalidate: bind(subscriber, 'invalidate') };
+    ? { next: subscriber.bind(null), invalidate: noop, invalidated: false }
+    : {
+        next: bind(subscriber, 'next'),
+        invalidate: bind(subscriber, 'invalidate'),
+        invalidated: false,
+      };
 
 const returnThis = function <T>(this: T): T {
   return this;
@@ -164,6 +169,7 @@ export const batch = <T>(fn: () => T): T => {
     if (needsProcessQueue) {
       for (const [subscriberObject, value] of queue) {
         queue.delete(subscriberObject);
+        subscriberObject.invalidated = false;
         subscriberObject.next(value);
       }
       willProcessQueue = false;
@@ -223,6 +229,7 @@ export function get<T>(store: SubscribableStore<T>): T {
 export abstract class Store<T> implements Readable<T> {
   private _subscribers = new Set<SubscriberObject<T>>();
   private _cleanupFn: null | Unsubscriber = null;
+  private _invalidated = false;
 
   /**
    *
@@ -242,26 +249,43 @@ export abstract class Store<T> implements Readable<T> {
     }
   }
 
+  /**
+   * Notifies the store that it will receive a new value very soon.
+   * The notification will be propagated to all derived stores
+   * (if not done already).
+   * Note that after calling invalidate, it is required to
+   * call set to put the store back into a normal state.
+   */
+  protected invalidate(): void {
+    if (!this._invalidated) {
+      this._invalidated = true;
+      for (const subscriber of this._subscribers) {
+        if (!subscriber.invalidated) {
+          subscriber.invalidated = true;
+          subscriber.invalidate();
+        }
+      }
+    }
+  }
+
   /**
    * Replaces store's state with the provided value.
    * Equivalent of {@link Writable.set}, but internal to the store.
    *
    * @param value - value to be used as the new state of a store.
    */
   protected set(value: T): void {
-    if (notEqual(this._value, value)) {
+    if (this._invalidated || notEqual(this._value, value)) {
       this._value = value;
       if (!this._cleanupFn) {
         // subscriber not yet initialized
         return;
       }
       batch(() => {
+        this.invalidate();
+        this._invalidated = false;
         for (const subscriber of this._subscribers) {
-          const needInvalidate = !queue.has(subscriber);
           queue.set(subscriber, value);
-          if (needInvalidate) {
-            subscriber.invalidate();
-          }
         }
       });
     }
@@ -314,6 +338,10 @@ export abstract class Store<T> implements Readable<T> {
       this._start();
     }
     subscriberObject.next(this._value);
+    if (this._invalidated) {
+      subscriberObject.invalidated = true;
+      subscriberObject.invalidate();
+    }
 
     const unsubscribe = () => {
       const removed = this._subscribers.delete(subscriberObject);
@@ -515,6 +543,7 @@ export abstract class DerivedStore<
         },
         invalidate: () => {
           pending |= 1 << idx;
+          this.invalidate();
         },
       })
     );