From a901c2bee99a04e57beea1d9804e8cd1f6c4933f Mon Sep 17 00:00:00 2001 From: Vlad Date: Fri, 27 Jun 2025 02:21:30 +1100 Subject: [PATCH 1/6] Run actor during setup, not mounted. --- packages/xstate-vue/src/useActorRef.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/xstate-vue/src/useActorRef.ts b/packages/xstate-vue/src/useActorRef.ts index 261f6bb606..b2feaad0f6 100644 --- a/packages/xstate-vue/src/useActorRef.ts +++ b/packages/xstate-vue/src/useActorRef.ts @@ -35,12 +35,12 @@ export function useActorRef( const actorRef = createActor(actorLogic, options); let sub: Subscription; - onMounted(() => { - if (observerOrListener) { - sub = actorRef.subscribe(toObserver(observerOrListener)); - } - actorRef.start(); - }); + + if (observerOrListener) { + sub = actorRef.subscribe(toObserver(observerOrListener)); + } + + actorRef.start(); onBeforeUnmount(() => { actorRef.stop(); From b124c8df76a09d2d4eeaf7d43d7b07decabc4130 Mon Sep 17 00:00:00 2001 From: Vlad Date: Fri, 27 Jun 2025 02:54:51 +1100 Subject: [PATCH 2/6] Remove unnecessary import onMounted --- packages/xstate-vue/src/useActorRef.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/xstate-vue/src/useActorRef.ts b/packages/xstate-vue/src/useActorRef.ts index b2feaad0f6..281727f7fa 100644 --- a/packages/xstate-vue/src/useActorRef.ts +++ b/packages/xstate-vue/src/useActorRef.ts @@ -1,4 +1,4 @@ -import { onBeforeUnmount, onMounted } from 'vue'; +import { onBeforeUnmount } from 'vue'; import { Actor, ActorOptions, From f8686816604f49dcdaf770215fe84976e0294ae8 Mon Sep 17 00:00:00 2001 From: Vlad Date: Fri, 27 Jun 2025 03:49:12 +1100 Subject: [PATCH 3/6] Don't use the listener function for snapshot useSelector already gets a reactive value from actorRef --- packages/xstate-vue/src/useActor.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/xstate-vue/src/useActor.ts b/packages/xstate-vue/src/useActor.ts index df03b5a786..36ce41ddb0 100644 --- a/packages/xstate-vue/src/useActor.ts +++ b/packages/xstate-vue/src/useActor.ts @@ -42,11 +42,7 @@ export function useActor( ); } - function listener(nextSnapshot: Snapshot) { - snapshot.value = nextSnapshot; - } - - const actorRef = useActorRef(actorLogic, options, listener); + const actorRef = useActorRef(actorLogic, options); const snapshot = useSelector(actorRef, (s) => s); return { From 3b222f8be16066cd0cc7cd6e7d50a39e3baa8ac7 Mon Sep 17 00:00:00 2001 From: Vlad Date: Fri, 27 Jun 2025 03:51:19 +1100 Subject: [PATCH 4/6] Remove unnecessary import Snapshot --- packages/xstate-vue/src/useActor.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/xstate-vue/src/useActor.ts b/packages/xstate-vue/src/useActor.ts index 36ce41ddb0..659c63c063 100644 --- a/packages/xstate-vue/src/useActor.ts +++ b/packages/xstate-vue/src/useActor.ts @@ -4,7 +4,6 @@ import { Actor, ActorOptions, AnyActorLogic, - Snapshot, SnapshotFrom, type ConditionalRequired, type IsNotNever, From 041705532851521c295f38645961716ec41db6ba Mon Sep 17 00:00:00 2001 From: Vlad Date: Fri, 27 Jun 2025 04:06:49 +1100 Subject: [PATCH 5/6] Add flush sync to watch for working in SSR --- packages/xstate-vue/src/useSelector.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/xstate-vue/src/useSelector.ts b/packages/xstate-vue/src/useSelector.ts index 2e76b61b27..85f679913f 100644 --- a/packages/xstate-vue/src/useSelector.ts +++ b/packages/xstate-vue/src/useSelector.ts @@ -47,7 +47,8 @@ export function useSelector< onCleanup(() => sub.unsubscribe()); }, { - immediate: true + immediate: true, + flush: 'sync' } ); From 73ac8e965d9f6ffe21f2eba8cfdd6bdb0671090c Mon Sep 17 00:00:00 2001 From: Negezor Date: Mon, 30 Jun 2025 20:16:19 +1100 Subject: [PATCH 6/6] Run actor only in client --- packages/xstate-vue/src/useActorRef.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/xstate-vue/src/useActorRef.ts b/packages/xstate-vue/src/useActorRef.ts index 281727f7fa..e7daf8a6b5 100644 --- a/packages/xstate-vue/src/useActorRef.ts +++ b/packages/xstate-vue/src/useActorRef.ts @@ -40,7 +40,9 @@ export function useActorRef( sub = actorRef.subscribe(toObserver(observerOrListener)); } - actorRef.start(); + if (typeof window !== 'undefined' && typeof document !== 'undefined') { + actorRef.start(); + } onBeforeUnmount(() => { actorRef.stop();