Global machine in SvelteKit

[revnelson]

Perhaps I'm daft, but I can't quite find any documentation or figure out how to instantiate a global (auth) machine where I can check the current auth state in some component and send state changes to trigger services from different components. My machine config script:

import {
	KQL_GetCurrentUser,
	KQL_LoginUserWithCookies,
	KQL_LogoutUser,
} from "$lib/api/graphql/stores"
import type { LoginWithCookiesInput, UserFragment } from "$lib/api/graphql/types"
import { assign, createMachine, interpret } from "xstate"

interface AuthContext {
	auth: boolean
	user: UserFragment | null
	error: string | null
}

const authMachine = createMachine(
  {
	  context: { auth: false, user: null, error: null } as AuthContext,
	  id: "auth",
	  initial: "authenticating",
	  states: {
		  authenticating: {
			  invoke: {
				  src: "authChecker",
				  id: "authChecker",
				  onDone: [
					  {
						  actions: "setUser",
						  target: "signedIn",
					  },
				  ],
				  onError: [
					  {
						  actions: ["clearAuth", "setError"],
						  target: "signedOut",
					  },
				  ],
			  },
		  },
		  signedIn: {
			  on: {
				  SIGNOUT: {
					  target: "signingOut",
				  },
			  },
		  },
		  signedOut: {
			  on: {
				  SIGNIN: {
					  target: "signingIn",
				  },
			  },
		  },
		  signingIn: {
			  invoke: {
				  src: "signIn",
				  id: "signIn",
				  onDone: [
					  {
						  actions: "clearError",
						  target: "authenticating",
					  },
				  ],
				  onError: [
					  {
						  actions: "setError",
						  target: "signedOut",
					  },
				  ],
			  },
		  },
		  signingOut: {
			  invoke: {
				  src: "signOut",
				  id: "signOut",
				  onDone: [
					  {
						  actions: ["clearAuth", "clearError"],
						  target: "signedOut",
					  },
				  ],
				  onError: [
					  {
						  actions: ["clearAuth", "setError"],
						  target: "signedOut",
					  },
				  ],
			  },
		  },
	  },
  },
  {
	  actions: {
		  clearAuth: assign((_) => ({ user: null, auth: false })),
		  clearError: assign((_) => ({ error: null })),
		  setUser: assign((_, event) => {
			  const user = event.data as UserFragment
  
			  return { auth: true, user }
		  }),
		  setError: assign({ error: (_, event) => event.data as string }),
	  },
	  services: {
		  authChecker: async (ctx, event) => {
			  console.log("authChecker Event", event)
			  const { data, errors } = await KQL_GetCurrentUser.query()
			  event.data && KQL_GetCurrentUser.resetCache()
  
			  if (!!data?.viewer) return data.viewer
			  throw new Error("No user found")
		  },
		  signIn: async (_, event: { input: LoginWithCookiesInput }) => {
			  const cookiesInput = event.input
  
			  console.log("SIGNING IN")
  
			  const { data, errors } = await KQL_LoginUserWithCookies.mutate({
				  variables: { cookiesInput },
			  })
  
			  if (data?.loginWithCookies?.status === "SUCCESS") {
				  KQL_GetCurrentUser.resetCache()
				  return data.loginWithCookies.status
			  }
			  return false
		  },
		  signOut: async () => {
			  const { data, errors } = await KQL_LogoutUser.mutate({ variables: { input: {} } })
  
			  KQL_GetCurrentUser.resetCache()
  
			  if (data?.logout?.status === "SUCCESS") return data.logout.status
			  throw new Error("Error signing out")
		  },
	  },
  },
	)

const authService = interpret(authMachine).start()

export default authService

and in my SignInForm component I am importing the default-exported service and calling await authService.send("SIGNIN", { input: { login: email, password, rememberMe } }) but the console.log in the service never gets printed.

In a UserMenu component, I'm importing the same authService and using const authState = useSelector(authService, (state) => state.context) to check the user with $authState.user which of course return null.

I'm sure I'm just overlooking something fundamental as I'm new to Xstate, but I'm definitely keen to get FSMs into my project. Any help or pointers in the right direction would be greatly appreciated.

[fcrozatier]

Did you manage to get it to work in the end?

I have a similar issue where I'm trying to reuse a state machine in different pages but I get 'Function called outside component initialization error'.
minimal repro

[fcrozatier]

Actually I got it working now, in my case I had to use the context API. Hope this helps!

[joelhickok]

This is helpful, thanks.

I have to admit this Svelte programming pattern is slightly frustrating sometimes, as anytime I want to integrate 3rd-party libraries it seems I am forced to use the Context API to pass around a singleton. This seems to be necessary for xstate, but I also do this with mapping libraries such as Leaflet. For all the power that Svelte holds, it still seems clunky to me that anytime I want a globally available object I have to use the Context API.

[phcoliveira]

Yeah, this is an Svelte issue. Regardless of the design of your machine, you can have it easily available to children components via the context API.
If you are using Svelte 4, then you can use @xstate/svelte for having reactive snapshots as a store.
If you are using Svelte 5, maybe this can help you.

// foo-machine.ts
export fooMachine = setup({/*...*/}).createMachine({/*...*/});

// actor-subscription.ts
// I will transform this interface into a class, to be inherited by other classes.
import type { ActorRefFrom, AnyActorLogic, SnapshotFrom } from 'xstate';

export interface ActorSubscription<TActorLogic extends AnyActorLogic> {
  readonly actorRef: ActorRefFrom<TActorLogic>;
  readonly send: ActorRefFrom<TActorLogic>['send'];
  readonly snapshot: SnapshotFrom<TActorLogic>;
}

// foo-context.svelte.ts => "svelte.ts" makes it reactive
import type { ActorSubscription } from './actor-subscription';
import { onDestroy } from 'svelte';
import { createActor } from 'xstate';

import type { fooMachine } from './foo-machine';

type FooSubscription = ActorSubscription<typeof fooMachine>;

export class FooContext implements FooSubscription {
  readonly actorRef: FooSubscription['actorRef'];
  readonly send: FooSubscription['send'];

  #snapshot = $state() as FooSubscription['snapshot'];
  get snapshot() {
    return this.#snapshot;
  }

  constructor(actorLogic: typeof fooMachine) {
    this.actorRef = createActor(actorLogic);
    this.send = this.actorRef.send;
    this.#snapshot = this.actorRef.getSnapshot();

    const subscription = this.actorRef.subscribe((snapshot) => {
      this.#snapshot = snapshot;
    });

    onDestroy(subscription.unsubscribe);
    this.actorRef.start();
  }
}

export const fooContextId = Symbol();

// get-foo-contex.ts
import { getContext } from 'svelte';
import type { FooContext } from './foo-context.svelte';
import { fooContextId } from './foo-context.svelte';

export function getFooContext() {
  return getContext<FooContext>(fooContextId);
}

<script lang="ts">
// <FooProvider>
import {setContext} from 'svelte';
import type {Snippet} from 'svelte';

import {FooContext, fooContextId, fooMachine} from './'

type Props = {
  children?: Snippet;
}

let {children}: Props = $props();

const fooContext = new FooContext(fooMachine);
setContext(fooContextId, fooContext);
</script>

{@render children?.()}

Then, everywhere inside the FooProvider subtree, you do this:

<script lang="ts">
import {getFooContext} from '../get-foo-context';

const foo = getFooContext();
foo.actorRef // properly typed
foo.send     // properly typed

const bar = $derived.by(() => foo.snapshot.matches('bar'));

$effect(() => {
  if (bar) {
    doSomething();
  } else {
    doSomethingElse();
});
<script>