merry steppe
I have a component that is using an xstate machine to handle some state. At the top of the component I initialize the machine and set up a signal to handle the state, and then reference it in the JSX I return. The signal is initialized and works fine in the component body but is undefined in the JSX:
export const Authentication: Component = () => {
const fsm = createActor(machine);
const [getState, setState] = createSignal<State>(fsm.getSnapshot());
// Works fine here...
console.log("State", getState());
fsm.subscribe((state) => {setState(state);});
onMount(() => {fsm.start();});
onCleanup(() => {fsm.stop();});
// Fails in the Match component at runtime with the error:
// Uncaught ReferenceError: getState is not defined
return (
<Page>
<Switch>
<Match when={getState().matches("Checking local storage")}>
<Heading>Checking local storage...</Heading>
</Match>
</Switch>
</Page>
);
}
I'm new to Solid so I may be missing something about how components work, but the block at the top should execute before the return statement right? Is Solid doing some compiler magic that I'm not aware of? Dumb mistake elsewhere that I'm too undercaffeinated to see?
P.S. - This is being built with Vite and the Solid plugin.
P.P.S. - This seems to only happen with Match or Show. If I use one of my own components I can access getState just fine (e.g. <Heading>{getState().value}</Heading> works fine)
lament pebble
