Skip to content

feat(vue): experimental scope dispose #5382

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

Draft
Hebilicious wants to merge 2 commits into
base: main
Choose a base branch
from
+70 −43
Draft

feat(vue): experimental scope dispose #5382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6a51a05
test: enable vue test
Hebilicious Oct 2, 2025
6d6c6ba
feat: dispose scopes
Hebilicious Oct 2, 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
39 changes: 27 additions & 12 deletions packages/xstate-vue/src/useActor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import isDevelopment from '#is-development';
import { Ref } from 'vue';
import {
effectScope,
getCurrentScope,
onScopeDispose,
Ref,
shallowRef
} from 'vue';
import {
Actor,
ActorOptions,
Expand All @@ -11,7 +17,6 @@ import {
type RequiredActorOptionsKeys
} from 'xstate';
import { useActorRef } from './useActorRef.ts';
import { useSelector } from './useSelector.ts';

export function useActor<TLogic extends AnyActorLogic>(
actorLogic: TLogic,
Expand Down Expand Up @@ -42,16 +47,26 @@ export function useActor(
);
}

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

const result = scope.run(() => {
const snapshot = shallowRef();

const actorRef = useActorRef(actorLogic, options, listener);
const snapshot = useSelector(actorRef, (s) => s);
function listener(nextSnapshot: Snapshot<unknown>) {
snapshot.value = nextSnapshot;
}

const actorRef = useActorRef(actorLogic, options, listener);
snapshot.value = actorRef.getSnapshot();
return { snapshot, actorRef, send: actorRef.send };
});

if (getCurrentScope()) {
onScopeDispose(() => {
scope.stop();
});
}

return {
snapshot,
send: actorRef.send,
actorRef: actorRef
};
if (!result) throw new Error('useActor: effectScope did not run correctly');
return result;
}
24 changes: 12 additions & 12 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 { getCurrentScope, onScopeDispose } from 'vue';
import {
Actor,
ActorOptions,
Expand Down Expand Up @@ -34,18 +34,18 @@ export function useActorRef<TLogic extends AnyActorLogic>(
): Actor<TLogic> {
const actorRef = createActor(actorLogic, options);

let sub: Subscription;
onMounted(() => {
if (observerOrListener) {
sub = actorRef.subscribe(toObserver(observerOrListener));
}
actorRef.start();
});
let sub: Subscription | undefined;
if (observerOrListener) {
sub = actorRef.subscribe(toObserver(observerOrListener));
}
actorRef.start();
Comment on lines +37 to +41
Copy link
Collaborator

@Andarist Andarist Oct 28, 2025

Choose a reason for hiding this comment

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

how this is meant to work with SSR? when the sub would get disposed (and when the actor would get stopped!) in that environment?

Copy link
Author

@Hebilicious Hebilicious Oct 30, 2025

Choose a reason for hiding this comment

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

You're right, onMounted and onUnmounted do not get called in SSR. This should work and respect current behaviour.

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

What do you think ?


onBeforeUnmount(() => {
actorRef.stop();
sub?.unsubscribe();
});
if (getCurrentScope()) {
Copy link
Collaborator

@Andarist Andarist Oct 28, 2025

Choose a reason for hiding this comment

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

shouldnt we require a scope to be there? if it's going to be missing then cleanup code wouldnt ever run but setup would and its obtained resources would live indefinitely

Copy link
Author

@Hebilicious Hebilicious Oct 30, 2025

Choose a reason for hiding this comment

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

Might as well wrap everything in if(getCurrentScope()) since this should not run on SSR.

onScopeDispose(() => {
actorRef.stop();
sub?.unsubscribe();
});
}

return actorRef;
}
42 changes: 26 additions & 16 deletions packages/xstate-vue/src/useSelector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
import { Ref, isRef, shallowRef, watch } from 'vue';
import {
Ref,
getCurrentScope,
isRef,
onScopeDispose,
shallowRef,
watch
} from 'vue';
import { AnyActorRef } from 'xstate';

function defaultCompare<T>(a: T, b: T) {
Expand Down Expand Up @@ -30,26 +37,29 @@ export function useSelector<
}
};

const sub = actorRefRef.value?.subscribe({
next: (emitted) => {
updateSelectedIfChanged(selector(emitted));
},
error: noop,
complete: noop
});

watch(
actorRefRef,
(newActor, _, onCleanup) => {
selected.value = selector(newActor?.getSnapshot());
if (!newActor) {
return;
(nextActor) => {
if (nextActor) {
selected.value = selector(nextActor.getSnapshot());
}
const sub = newActor.subscribe({
next: (emitted) => {
updateSelectedIfChanged(selector(emitted));
},
error: noop,
complete: noop
});
onCleanup(() => sub.unsubscribe());
},
{
immediate: true
}
{ immediate: true }
);

if (getCurrentScope()) {
onScopeDispose(() => {
sub?.unsubscribe();
});
}

return selected;
}
6 changes: 4 additions & 2 deletions packages/xstate-vue/test/UseActorRefWithObserver.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import { useActorRef } from '../src/index.ts';
import { createMachine } from 'xstate';

import { defineComponent, ref } from 'vue';
import { defineComponent, nextTick, ref } from 'vue';
const machine = createMachine({
initial: 'inactive',
states: {
Expand All @@ -28,7 +28,9 @@ const machine = createMachine({
export default defineComponent({
setup() {
const actor = useActorRef(machine, {}, (nextState) => {
state.value = nextState.value;
nextTick(() => {
Copy link
Collaborator

@Andarist Andarist Oct 28, 2025

Choose a reason for hiding this comment

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

I'm not familiar with Vue at all so bear with me. I don't understand why this is using nextTick. Shouldn't the update be batched with whatever changes are in flight instead of waiting for the current DOM updates to flush and then scheduling a new update by updating state.value here?

Copy link
Collaborator

@Andarist Andarist Oct 28, 2025

Choose a reason for hiding this comment

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

ah, I guess u have touched on it in the PR's description. So a different question - wouldnt it be better to skip the write to a =n uninitialized state instead of wrapping this update with nextTick?

Copy link
Author

@Hebilicious Hebilicious Oct 30, 2025

Choose a reason for hiding this comment

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

I would never write vue code like that in the first place with nextTick either, but it kinda works, even though it is hacky... I don't think we should encourage this pattern tbh, imo lifecycle hooks are the right pattern to initalize a value, as documented in the PR description.
But I wanted to hear your opinion instead of straight-up replacing the text.

state.value = nextState.value;
});
});
const state = ref(actor.getSnapshot().value);

Expand Down
2 changes: 1 addition & 1 deletion packages/xstate-vue/vitest.config.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import vue from '@vitejs/plugin-vue';
import { defineProject } from 'vitest/config';

export const include = ['test/vue.test.ts'];
export const include = ['test/*.test.ts'];

export default defineProject({
plugins: [vue()],
Expand Down