Make sure useSelector.ts doesn’t create stale values

packages/xstate-svelte/src/useSelector.ts

@@ -15,13 +15,18 @@ export const useSelector = <TActor extends ActorRef<any, any>, T>(
   let prevSelected = selector(actor.getSnapshot());
 
   const selected = readable(prevSelected, (set) => {
-    sub = actor.subscribe((state) => {
+    const onNext = (state: SnapshotFrom<TActor>) => {
       const nextSelected = selector(state);
       if (!compare(prevSelected, nextSelected)) {
         prevSelected = nextSelected;
         set(nextSelected);
       }
-    });
+    };
+
+    // Make sure the store gets updated when it's subscribed to.
+    onNext(actor.getSnapshot());
+
+    sub = actor.subscribe(onNext);
 
     return () => {
       sub.unsubscribe();

packages/xstate-svelte/test/UseSelectorDeferredSubscription.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { interpret, createMachine, assign } from 'xstate';
+  import { get } from 'svelte/store';
+  import { useSelector } from '../src/index.ts';
+
+  const machine = createMachine({
+    initial: 'idle',
+    types: {
+      context: {} as {
+        count: number;
+      }
+    },
+    context: {
+      count: 0
+    },
+    states: {
+      idle: {
+        on: {
+          INCREMENT: {
+            actions: assign({ count: ({ context: { count } }) => count + 1 })
+          }
+        }
+      }
+    }
+  });
+
+  const service = interpret(machine).start();
+
+  const state = useSelector(service, (state) => state);
+  const count = useSelector(service, (state) => state.context.count);
+
+  let readCount = 0;
+
+  $: if ($state.context.count === 2) {
+    // Using `get` instead of `$count`, since using the $ syntax creates a
+    // subscription immediately, even if the code is not reached yet.
+    readCount = get(count);
+  }
+</script>
+
+<button data-testid="count" on:click={() => service.send({ type: 'INCREMENT' })}
+  >Increment count</button
+>
+
+<div data-testid="selectorOutput">{readCount}</div>

packages/xstate-svelte/test/useSelector.test.ts

@@ -1,6 +1,7 @@
 import { render, fireEvent } from '@testing-library/svelte';
 import UseSelector from './UseSelector.svelte';
 import UseSelectorCustomFn from './UseSelectorCustomFn.svelte';
+import UseSelectorDeferredSubscription from './UseSelectorDeferredSubscription.svelte';
 
 describe('useSelector', () => {
   it('only reassigns when selected values change', async () => {
@@ -44,4 +45,21 @@ describe('useSelector', () => {
 
     expect(nameEl.textContent).toEqual('DAVID');
   });
+
+  // This test makes sure, that the Svelte store returned by `useSelector` will
+  // provide an up to date value, when the state has changed between creating
+  // the store (with `useSelector`) and subscribing to it.
+  it('should have an updated value when the store is subscribed to after the state changed', async () => {
+    const { getByTestId } = render(UseSelectorDeferredSubscription);
+
+    const countBtn = getByTestId('count');
+    const selectorOutput = getByTestId('selectorOutput');
+
+    expect(selectorOutput.textContent).toEqual('0');
+
+    await fireEvent.click(countBtn);
+    await fireEvent.click(countBtn);
+
+    expect(selectorOutput.textContent).toEqual('2');
+  });
 });