Skip to content

[@xstate/vue] Run actor during setup, not mounted. #5311

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

[@xstate/vue] Run actor during setup, not mounted. #5311

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a901c2b
Run actor during setup, not mounted.
negezor Jun 26, 2025
b124c8d
Remove unnecessary import onMounted
negezor Jun 26, 2025
f868681
Don't use the listener function for snapshot
negezor Jun 26, 2025
3b222f8
Remove unnecessary import Snapshot
negezor Jun 26, 2025
0417055
Add flush sync to watch for working in SSR
negezor Jun 26, 2025
73ac8e9
Run actor only in client
negezor Jun 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions packages/xstate-vue/src/useActor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {
Actor,
ActorOptions,
AnyActorLogic,
Snapshot,
SnapshotFrom,
type ConditionalRequired,
type IsNotNever,
Expand Down Expand Up @@ -42,11 +41,7 @@ export function useActor(
);
}

function listener(nextSnapshot: Snapshot<unknown>) {
snapshot.value = nextSnapshot;
}

const actorRef = useActorRef(actorLogic, options, listener);
const actorRef = useActorRef(actorLogic, options);
const snapshot = useSelector(actorRef, (s) => s);

return {
Expand Down
14 changes: 8 additions & 6 deletions packages/xstate-vue/src/useActorRef.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { onBeforeUnmount, onMounted } from 'vue';
import { onBeforeUnmount } from 'vue';
import {
Actor,
ActorOptions,
Expand Down Expand Up @@ -35,12 +35,14 @@ export function useActorRef<TLogic extends AnyActorLogic>(
const actorRef = createActor(actorLogic, options);

let sub: Subscription;
onMounted(() => {
if (observerOrListener) {
sub = actorRef.subscribe(toObserver(observerOrListener));
}

if (observerOrListener) {
sub = actorRef.subscribe(toObserver(observerOrListener));
}

if (typeof window !== 'undefined' && typeof document !== 'undefined') {
actorRef.start();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now the code still won't quite work exactly the same bewteen client and the server. In the thread you have described that the current inner workings suffer from:

It makes the actor unusable during SSR;

And now... they will still work the same way on the server. So it seems one of the things you have wanted to address with this PR just can't be addressed.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At least it will definitely work now if you call actor.start() in SSR. Before this, watch had no sync. This problem cannot be solved until Vue officially adds some kind of hook for the component to finish working in SSR. Basically, all SSRs are somehow related to some specific life cycles of implementations. Nuxt has its own, my SSR has a slight mimicry of Nuxt.

I can say that I achieved the most important thing with this PR, it is the ability to run XState during setup, either on the client or on the server.

});
}

onBeforeUnmount(() => {
actorRef.stop();
Expand Down
3 changes: 2 additions & 1 deletion packages/xstate-vue/src/useSelector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@ export function useSelector<
onCleanup(() => sub.unsubscribe());
},
{
immediate: true
immediate: true,
flush: 'sync'
}
);

Expand Down