feat: experimental interoperability implementation

Author: divdavem

src/index.spec.ts

@@ -3,7 +3,7 @@ import { Component, Injectable, inject } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { BehaviorSubject, from } from 'rxjs';
 import { writable as svelteWritable } from 'svelte/store';
-import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+import { afterAll, afterEach, beforeAll, describe, expect, it, test, vi } from 'vitest';
 import type {
   OnUseArgument,
   Readable,
@@ -30,10 +30,10 @@ import {
   untrack,
   writable,
 } from './index';
-import { rawStoreSymbol } from './internal/exposeRawStores';
-import { RawStoreFlags } from './internal/store';
+import { RawStoreFlags, rawStoreSymbol } from './internal/store';
 import { flushUnused } from './internal/storeTrackingUsage';
 import type { RawStoreWritable } from './internal/storeWritable';
+import { runWithConsumer, type Signal, watchSignal, type Watcher } from './interop';
 
 const expectCorrectlyCleanedUp = <T>(store: StoreInput<T>) => {
   const rawStore = (store as any)[rawStoreSymbol] as RawStoreWritable<T>;
@@ -3565,4 +3565,257 @@ describe('stores', () => {
       expectCorrectlyCleanedUp(doubleDoubleDoubleStore);
     });
   });
+
+  describe('watch', () => {
+    it('should work', () => {
+      const onUseCalls: { onUnused: number }[] = [];
+      const store = writable(0, {
+        onUse: () => {
+          const call = { onUnused: 0 };
+          onUseCalls.push(call);
+          return () => {
+            call.onUnused++;
+          };
+        },
+      });
+      const notify = vi.fn();
+      const watcher = store[watchSignal](notify);
+      expect(watcher.isUpToDate()).toBe(false);
+      expect(onUseCalls.length).toBe(0);
+      expect(watcher.update()).toBe(true);
+      expect(onUseCalls.length).toBe(1);
+      expect(onUseCalls[0].onUnused).toBe(0);
+      expect(watcher.isUpToDate()).toBe(true);
+      expect(watcher.get()).toBe(0);
+      expect(notify).not.toHaveBeenCalled();
+      store.set(1);
+      expect(notify).toHaveBeenCalledOnce();
+      notify.mockClear();
+      expect(watcher.isUpToDate()).toBe(false);
+      store.set(2);
+      expect(notify).not.toHaveBeenCalled();
+      expect(watcher.update()).toBe(true);
+      expect(watcher.isUpToDate()).toBe(true);
+      expect(watcher.get()).toBe(2);
+      expect(notify).not.toHaveBeenCalled();
+      store.set(3);
+      expect(notify).toHaveBeenCalledOnce();
+      expect(watcher.isUpToDate()).toBe(false);
+      notify.mockClear();
+      store.set(4);
+      store.set(2);
+      expect(notify).not.toHaveBeenCalled();
+      expect(watcher.update()).toBe(false);
+      expect(watcher.isUpToDate()).toBe(true);
+      expect(watcher.update()).toBe(false);
+      expect(watcher.get()).toBe(2);
+      watcher.destroy();
+      expect(() => watcher.get()).toThrowError('invalid watcher state');
+    });
+  });
+
+  describe('fromWatch', () => {
+    it('should work', () => {
+      let notify: () => void;
+      let isUpdated = true;
+      let value = 0;
+      const watcher = {
+        isUpToDate: vi.fn(() => {
+          throw new Error('unexpected call to isUpToDate');
+        }),
+        update: vi.fn(() => isUpdated),
+        get: vi.fn(() => value),
+        destroy: vi.fn(),
+      } satisfies Watcher<number>;
+      const watchFn = vi.fn((notifyFn: () => void) => {
+        notify = notifyFn;
+        return watcher;
+      }) satisfies (notify: () => void) => Watcher<number>;
+      const clearMocks = () => {
+        watchFn.mockClear();
+        watcher.update.mockClear();
+        watcher.get.mockClear();
+        watcher.destroy.mockClear();
+      };
+      const store = asReadable({ [watchSignal]: watchFn });
+      expect(watchFn).not.toHaveBeenCalled();
+      expect(store.get()).toBe(0);
+      expect(watchFn).toHaveBeenCalledOnce();
+      expect(watcher.update).toHaveBeenCalledOnce();
+      expect(watcher.get).toHaveBeenCalledOnce();
+      expect(watcher.destroy).toHaveBeenCalledOnce();
+      clearMocks();
+      const values: number[] = [];
+      const unsubscribe = store.subscribe((value) => {
+        values.push(value);
+      });
+      expect(values).toEqual([0]);
+      expect(watchFn).toHaveBeenCalledOnce();
+      expect(watcher.update).toHaveBeenCalledOnce();
+      expect(watcher.get).toHaveBeenCalledOnce();
+      expect(watcher.destroy).not.toHaveBeenCalled();
+      clearMocks();
+      isUpdated = false;
+      batch(() => {
+        notify!();
+      });
+      expect(watcher.update).toHaveBeenCalledOnce();
+      expect(watchFn).not.toHaveBeenCalled();
+      expect(watcher.get).not.toHaveBeenCalled();
+      expect(watcher.destroy).not.toHaveBeenCalled();
+      clearMocks();
+      expect(values).toEqual([0]);
+      isUpdated = true;
+      value = 2;
+      batch(() => {
+        notify!();
+      });
+      expect(watcher.update).toHaveBeenCalledOnce();
+      expect(watcher.get).toHaveBeenCalledOnce();
+      expect(watcher.destroy).not.toHaveBeenCalled();
+      expect(watchFn).not.toHaveBeenCalled();
+      clearMocks();
+      expect(values).toEqual([0, 2]);
+      isUpdated = true;
+      watcher.get.mockImplementation(() => {
+        throw new Error('myerror');
+      });
+      expect(() => {
+        batch(() => {
+          notify!();
+        });
+      }).toThrowError('myerror');
+      expect(watcher.update).toHaveBeenCalledOnce();
+      expect(watcher.get).toHaveBeenCalledOnce();
+      expect(watcher.destroy).not.toHaveBeenCalled();
+      expect(watchFn).not.toHaveBeenCalled();
+      clearMocks();
+      expect(() => {
+        store.get();
+      }).toThrowError('myerror');
+      expect(values).toEqual([0, 2]);
+      expect(watcher.update).not.toHaveBeenCalled();
+      expect(watcher.get).not.toHaveBeenCalled();
+      expect(watcher.destroy).not.toHaveBeenCalled();
+      expect(watchFn).not.toHaveBeenCalled();
+      unsubscribe();
+      expect(watcher.destroy).toHaveBeenCalledOnce();
+      expect(watcher.update).not.toHaveBeenCalled();
+      expect(watcher.get).not.toHaveBeenCalled();
+      expect(watchFn).not.toHaveBeenCalled();
+      expect(watcher.isUpToDate).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('watch / fromWatch', () => {
+    it('should work to convert back and forth a basic writable', () => {
+      const store = writable(0);
+      const otherStore = asReadable({ [watchSignal]: (notify) => store[watchSignal](notify) });
+      expect(otherStore()).toBe(0);
+      store.set(1);
+      expect(otherStore()).toBe(1);
+      store.set(2);
+      expect(otherStore()).toBe(2);
+
+      const values: number[] = [];
+      const unsubscribe = otherStore.subscribe((value) => {
+        values.push(value);
+      });
+      expect(values).toEqual([2]);
+      store.set(3);
+      expect(values).toEqual([2, 3]);
+      expect(otherStore()).toBe(3);
+      batch(() => {
+        store.set(4);
+        expect(otherStore()).toBe(4);
+        store.set(5);
+        store.set(3);
+      });
+      expect(values).toEqual([2, 3]);
+      unsubscribe();
+    });
+
+    it('should work to convert back and forth a basic Store', () => {
+      class MyStore extends Store<number> {
+        increase() {
+          this.update((value) => value + 1);
+        }
+      }
+      const store = new MyStore(0);
+
+      const otherStore = asReadable({ [watchSignal]: (notify) => store[watchSignal](notify) });
+      expect(otherStore()).toBe(0);
+      store.increase();
+      expect(otherStore()).toBe(1);
+      store.increase();
+      expect(otherStore()).toBe(2);
+
+      const values: number[] = [];
+      const unsubscribe = otherStore.subscribe((value) => {
+        values.push(value);
+      });
+      expect(values).toEqual([2]);
+      store.increase();
+      expect(values).toEqual([2, 3]);
+      expect(otherStore()).toBe(3);
+      batch(() => {
+        store.increase();
+        expect(otherStore()).toBe(4);
+        store.increase();
+        store.increase();
+      });
+      expect(values).toEqual([2, 3, 6]);
+      unsubscribe();
+    });
+
+    it('should work to convert back and forth a computed', () => {
+      const store = writable(0);
+      const doubleStore = computed(() => store() * 2);
+      const otherStore = asReadable({
+        [watchSignal]: (notify) => doubleStore[watchSignal](notify),
+      });
+      expect(otherStore()).toBe(0);
+      store.set(1);
+      expect(otherStore()).toBe(2);
+      store.set(2);
+      expect(otherStore()).toBe(4);
+
+      const values: number[] = [];
+      const unsubscribe = otherStore.subscribe((value) => {
+        values.push(value);
+      });
+      expect(values).toEqual([4]);
+      store.set(3);
+      expect(values).toEqual([4, 6]);
+      expect(otherStore()).toBe(6);
+      batch(() => {
+        store.set(4);
+        expect(otherStore()).toBe(8);
+        store.set(5);
+        store.set(3);
+      });
+      expect(values).toEqual([4, 6]);
+      unsubscribe();
+    });
+  });
+
+  describe('interop computed', () => {
+    test('should work with a computed from another library', () => {
+      const a = writable(0);
+      const notify = vi.fn();
+      const watchers: Watcher<any>[] = [];
+      const consumer = vi.fn(<T>(signal: Signal<T>) => {
+        const watcher = signal[watchSignal](notify);
+        watchers.push(watcher);
+        watcher.update();
+      });
+      const computeValue = () => runWithConsumer(() => 2 * a(), consumer);
+      expect(computeValue()).toBe(0);
+      expect(consumer).toHaveBeenCalledOnce();
+      expect(notify).not.toHaveBeenCalled();
+      a.set(1);
+      expect(notify).toHaveBeenCalledOnce();
+      expect(watchers).toHaveLength(1);
+    });
+  });
 });

src/index.ts

@@ -6,12 +6,7 @@
  */
 
 import { equal } from './internal/equal';
-import {
-  exposeRawStore,
-  getRawStore,
-  rawStoreSymbol,
-  symbolObservable,
-} from './internal/exposeRawStores';
+import { exposeRawStore, getRawStore, symbolObservable } from './internal/exposeRawStores';
 import { RawStoreComputed } from './internal/storeComputed';
 import { RawStoreConst } from './internal/storeConst';
 import {
@@ -24,6 +19,7 @@ import { RawStoreWithOnUse } from './internal/storeWithOnUse';
 import { RawStoreWritable } from './internal/storeWritable';
 import { noop } from './internal/subscribeConsumer';
 import { untrack } from './internal/untrack';
+import { watchRawStore } from './internal/watch';
 import type {
   AsyncDeriveFn,
   AsyncDeriveOptions,
@@ -45,11 +41,15 @@ import type {
   WritableSignal,
 } from './types';
 
-export { batch } from './internal/batch';
+import { rawStoreSymbol } from './internal/store';
+import { watchSignal, type Watcher } from './interop';
+
 export { equal } from './internal/equal';
 export { symbolObservable } from './internal/exposeRawStores';
 export { untrack } from './internal/untrack';
+export * as SignalInterop from './interop';
 export type * from './types';
+export { batch } from './interop';
 
 /**
  * Returns a wrapper (for the given store) which only exposes the {@link ReadableSignal} interface.
@@ -303,6 +303,10 @@ export abstract class Store<T> implements Readable<T> {
   [symbolObservable](): this {
     return this;
   }
+
+  [watchSignal](notify: () => void): Watcher<T> {
+    return watchRawStore(this[rawStoreSymbol], notify);
+  }
 }
 
 const createStoreWithOnUse = <T>(initValue: T, onUse: OnUseFn<T>) => {