(fix) #641 unsubscribe Not Triggered with syncObservable

src/onChange.ts

@@ -1,18 +1,20 @@
 import { getNodeValue } from './globals';
 import { deconstructObjectWithPath } from './helpers';
 import { dispatchMiddlewareEvent } from './middleware';
-import type {
-    LinkedOptions,
-    ListenerFn,
-    ListenerParams,
-    NodeInfo,
-    NodeListener,
-    TrackingType,
-} from './observableInterfaces';
+import type { ListenerFn, ListenerParams, NodeInfo, NodeListener, TrackingType } from './observableInterfaces';
+
+type ActivationState = NodeInfo['activationState'] & { synced?: true };
 
 export function isSyncedObservable(node: NodeInfo): boolean {
-    // type patched, should we add it to the LinkedOptions?
-    return (node.activationState as LinkedOptions & { synced?: true })?.synced || false;
+    return (node.activationState as ActivationState)?.synced || false;
+}
+
+export function markNodeAsSynced(node: NodeInfo): void {
+    if (!node.activationState) {
+        node.activationState = { synced: true } as ActivationState;
+    } else if (!(node.activationState as ActivationState).synced) {
+        (node.activationState as ActivationState).synced = true;
+    }
 }
 
 function shouldDispatchParentMiddlewareEvent(node: NodeInfo): boolean {

src/sync/syncObservable.ts

@@ -57,6 +57,7 @@ import type {
 } from './syncTypes';
 import { waitForSet } from './waitForSet';
 import { createRevertChanges } from './revertChanges';
+import { markNodeAsSynced } from '../onChange';
 
 const {
     clone,
@@ -1095,6 +1096,9 @@ export function syncObservable<T>(
     if ((process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') && (!obs$ || !node)) {
         throw new Error('[legend-state] syncObservable called with undefined observable');
     }
+
+    markNodeAsSynced(node);
+
     // Merge remote sync options with global options
     syncOptions = deepMerge(
         {

tests/react.test.tsx

@@ -24,6 +24,7 @@ import { synced } from '../src/sync/synced';
 import { useTraceListeners } from '../src/trace/useTraceListeners';
 import { useTraceUpdates } from '../src/trace/useTraceUpdates';
 import { $React } from '@legendapp/state/react-web';
+import { syncObservable } from '../sync';
 
 type TestObject = { id: string; label: string };
 
@@ -2063,6 +2064,38 @@ describe('useObservable', () => {
         expect(numSubscribes).toBe(1);
         expect(numUnsubscribes).toBe(1);
     });
+
+    test('observables with syncObservable should unsubscribe when unmounted', async () => {
+        let numSubscribes = 0;
+        let numUnsubscribes = 0;
+
+        const store$ = observable<any>({});
+
+        syncObservable(store$, {
+            subscribe: ({ update }) => {
+                numSubscribes++;
+                update({ value: { value: 1 }, mode: 'set' });
+                return () => {
+                    numUnsubscribes++;
+                };
+            },
+        });
+
+        const Test = observer(function Test() {
+            return createElement('div', undefined, store$.value.get());
+        });
+
+        const { unmount } = render(<Test />);
+
+        act(() => {
+            unmount();
+        });
+
+        await waitFor(() => promiseTimeout(0));
+
+        expect(numSubscribes).toBe(1);
+        expect(numUnsubscribes).toBe(1);
+    });
 });
 describe('useObservableState', () => {
     test('useObservableState does not select if value not accessed', () => {