Skip to content

Commit e5ba28a

Browse files
segunadebayosegunadebayo
authored
fix(*): implement machine status check (#2377)
* fix(*): status check * fix: typecheck * refactor: mv check into microtask * chore: update preact
1 parent 07033e3 commit e5ba28a

File tree

11 files changed

+198
-150
lines changed

11 files changed

+198
-150
lines changed

‎.changeset/violet-comics-enjoy.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@zag-js/preact": patch
3+
"@zag-js/svelte": patch
4+
"@zag-js/react": patch
5+
"@zag-js/solid": patch
6+
"@zag-js/vue": patch
7+
---
8+
9+
Ensure machine has started before processing events.

‎examples/vanilla-ts/src/lib/machine.ts

+15-5
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import type {
1414
Scope,
1515
Service,
1616
} from "@zag-js/core"
17-
import { createScope } from "@zag-js/core"
17+
import { createScope, INIT_STATE, MachineStatus } from "@zag-js/core"
1818
import { subscribe } from "@zag-js/store"
1919
import { compact, identity, isEqual, isFunction, isString, toArray, warn } from "@zag-js/utils"
2020
import { bindable } from "./bindable"
@@ -161,10 +161,10 @@ export class VanillaMachine<T extends MachineSchema> {
161161
if (cleanup) this.effects.set(nextState as string, cleanup)
162162

163163
// root entry actions
164-
if (prevState === "__init__") {
164+
if (prevState === INIT_STATE) {
165165
this.action(machine.entry)
166166
const cleanup = this.effect(machine.effects)
167-
if (cleanup) this.effects.set("__init__", cleanup)
167+
if (cleanup) this.effects.set(INIT_STATE, cleanup)
168168
}
169169

170170
// enter actions
@@ -177,6 +177,8 @@ export class VanillaMachine<T extends MachineSchema> {
177177
}
178178

179179
send = (event: any) => {
180+
if (this.status !== MachineStatus.Started) return
181+
180182
queueMicrotask(() => {
181183
this.previousEvent = this.event
182184
this.event = event
@@ -206,7 +208,7 @@ export class VanillaMachine<T extends MachineSchema> {
206208
this.state.set(target)
207209
} else {
208210
// call transition actions
209-
this.action(transition.actions ?? [])
211+
this.action(transition.actions)
210212
}
211213
})
212214
}
@@ -255,7 +257,9 @@ export class VanillaMachine<T extends MachineSchema> {
255257
}
256258

257259
start() {
258-
this.state.invoke(this.state.initial!, "__init__")
260+
this.status = MachineStatus.Started
261+
this.debug("initializing...")
262+
this.state.invoke(this.state.initial!, INIT_STATE)
259263
this.setupTrackers()
260264
}
261265

@@ -269,12 +273,17 @@ export class VanillaMachine<T extends MachineSchema> {
269273
// unsubscribe from all subscriptions
270274
this.cleanups.forEach((unsub) => unsub())
271275
this.cleanups = []
276+
277+
this.status = MachineStatus.Stopped
278+
this.debug("unmounting...")
272279
}
273280

274281
subscribe = (fn: (service: Service<T>) => void) => {
275282
this.subscriptions.push(fn)
276283
}
277284

285+
private status = MachineStatus.NotStarted
286+
278287
get service(): Service<T> {
279288
return {
280289
state: this.getState(),
@@ -285,6 +294,7 @@ export class VanillaMachine<T extends MachineSchema> {
285294
refs: this.refs,
286295
computed: this.computed,
287296
event: this.getEvent(),
297+
getStatus: () => this.status,
288298
}
289299
}
290300

‎packages/core/src/types.ts

+9
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,7 @@ type State<T extends MachineSchema> = Bindable<T["state"]> & {
205205
}
206206

207207
export type Service<T extends MachineSchema> = {
208+
getStatus: () => MachineStatus
208209
state: State<T> & {
209210
matches: (...values: T["state"][]) => boolean
210211
hasTag: (tag: T["tag"]) => boolean
@@ -220,3 +221,11 @@ export type Service<T extends MachineSchema> = {
220221
previous: () => EventType<T["event"]>
221222
}
222223
}
224+
225+
export enum MachineStatus {
226+
NotStarted = "Not Started",
227+
Started = "Started",
228+
Stopped = "Stopped",
229+
}
230+
231+
export const INIT_STATE = "__init__"

‎packages/frameworks/preact/src/machine.ts

+28-4
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import type {
1212
Params,
1313
Service,
1414
} from "@zag-js/core"
15-
import { createScope } from "@zag-js/core"
15+
import { createScope, INIT_STATE, MachineStatus } from "@zag-js/core"
1616
import { ensure, isFunction, isString, toArray, warn } from "@zag-js/utils"
1717
import { useLayoutEffect, useMemo, useRef } from "preact/hooks"
1818
import { flushSync } from "react-dom"
@@ -29,6 +29,10 @@ export function useMachine<T extends MachineSchema>(
2929
return createScope({ id, ids, getRootNode })
3030
}, [userProps])
3131

32+
const debug = (...args: any[]) => {
33+
if (machine.debug) console.log(...args)
34+
}
35+
3236
const props: any = machine.props?.({ props: userProps, scope }) ?? userProps
3337
const prop = useProp(props)
3438

@@ -194,10 +198,10 @@ export function useMachine<T extends MachineSchema>(
194198
if (cleanup) effects.current.set(nextState as string, cleanup)
195199

196200
// root entry actions
197-
if (prevState === "__init__") {
201+
if (prevState === INIT_STATE) {
198202
action(machine.entry)
199203
const cleanup = effect(machine.effects)
200-
if (cleanup) effects.current.set("__init__", cleanup)
204+
if (cleanup) effects.current.set(INIT_STATE, cleanup)
201205
}
202206

203207
// enter actions
@@ -206,13 +210,30 @@ export function useMachine<T extends MachineSchema>(
206210
},
207211
}))
208212

213+
// improve HMR (to restart effects)
214+
const hydratedStateRef = useRef<string | undefined>(undefined)
215+
const statusRef = useRef(MachineStatus.NotStarted)
216+
209217
useLayoutEffect(() => {
210-
state.invoke(state.initial!, "__init__")
218+
const started = statusRef.current === MachineStatus.Started
219+
statusRef.current = MachineStatus.Started
220+
debug(started ? "rehydrating..." : "initializing...")
221+
222+
// start the transition
223+
const initialState = hydratedStateRef.current ?? state.initial!
224+
state.invoke(initialState, started ? state.get() : INIT_STATE)
225+
211226
const fns = effects.current
227+
const currentState = state.ref.current
212228
return () => {
229+
debug("unmounting...")
230+
hydratedStateRef.current = currentState
231+
statusRef.current = MachineStatus.Stopped
232+
213233
fns.forEach((fn) => fn?.())
214234
effects.current = new Map()
215235
transitionRef.current = null
236+
216237
action(machine.exit)
217238
}
218239
}, [])
@@ -224,6 +245,8 @@ export function useMachine<T extends MachineSchema>(
224245

225246
const send = (event: any) => {
226247
queueMicrotask(() => {
248+
if (statusRef.current !== MachineStatus.Started) return
249+
227250
previousEventRef.current = eventRef.current
228251
eventRef.current = event
229252

@@ -264,6 +287,7 @@ export function useMachine<T extends MachineSchema>(
264287
refs,
265288
computed,
266289
event: getEvent(),
290+
getStatus: () => statusRef.current,
267291
} as Service<T>
268292
}
269293

‎packages/frameworks/react/src/machine.ts

+21-9
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ import type {
1212
Params,
1313
Service,
1414
} from "@zag-js/core"
15-
import { createScope } from "@zag-js/core"
16-
import { compact, isFunction, isString, toArray, warn, ensure } from "@zag-js/utils"
15+
import { createScope, INIT_STATE, MachineStatus } from "@zag-js/core"
16+
import { compact, ensure, isFunction, isString, toArray, warn } from "@zag-js/utils"
1717
import { useMemo, useRef } from "react"
1818
import { flushSync } from "react-dom"
1919
import { useBindable } from "./bindable"
@@ -184,45 +184,54 @@ export function useMachine<T extends MachineSchema>(
184184

185185
// exit actions
186186
if (prevState) {
187-
// @ts-ignore
188187
action(machine.states[prevState]?.exit)
189188
}
190189

191190
// transition actions
192191
action(transitionRef.current?.actions)
193192

194193
// enter effect
195-
// @ts-ignore
196194
const cleanup = effect(machine.states[nextState]?.effects)
197195
if (cleanup) effects.current.set(nextState as string, cleanup)
198196

199197
// root entry actions
200-
if (prevState === "__init__") {
198+
if (prevState === INIT_STATE) {
201199
action(machine.entry)
202200
const cleanup = effect(machine.effects)
203-
if (cleanup) effects.current.set("__init__", cleanup)
201+
if (cleanup) effects.current.set(INIT_STATE, cleanup)
204202
}
205203

206204
// enter actions
207-
// @ts-ignore
208205
action(machine.states[nextState]?.entry)
209206
},
210207
}))
211208

212209
// improve HMR (to restart effects)
213210
const hydratedStateRef = useRef<string | undefined>(undefined)
211+
const statusRef = useRef(MachineStatus.NotStarted)
214212

215213
useSafeLayoutEffect(() => {
216214
queueMicrotask(() => {
215+
const started = statusRef.current === MachineStatus.Started
216+
statusRef.current = MachineStatus.Started
217+
debug(started ? "rehydrating..." : "initializing...")
218+
219+
// start the transition
217220
const initialState = hydratedStateRef.current ?? state.initial!
218-
state.invoke(initialState, "__init__")
221+
state.invoke(initialState, started ? state.get() : INIT_STATE)
219222
})
223+
220224
const fns = effects.current
225+
const currentState = state.ref.current
221226
return () => {
222-
hydratedStateRef.current = state.ref.current
227+
debug("unmounting...")
228+
hydratedStateRef.current = currentState
229+
statusRef.current = MachineStatus.Stopped
230+
223231
fns.forEach((fn) => fn?.())
224232
effects.current = new Map()
225233
transitionRef.current = null
234+
226235
queueMicrotask(() => {
227236
action(machine.exit)
228237
})
@@ -236,6 +245,8 @@ export function useMachine<T extends MachineSchema>(
236245

237246
const send = (event: any) => {
238247
queueMicrotask(() => {
248+
if (statusRef.current !== MachineStatus.Started) return
249+
239250
previousEventRef.current = eventRef.current
240251
eventRef.current = event
241252

@@ -283,6 +294,7 @@ export function useMachine<T extends MachineSchema>(
283294
refs,
284295
computed,
285296
event: getEvent(),
297+
getStatus: () => statusRef.current,
286298
} as Service<T>
287299
}
288300

‎packages/frameworks/react/tests/machine.test.ts

+6
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ describe("basic", () => {
109109
})
110110

111111
const { send } = renderMachine(machine)
112+
await Promise.resolve()
112113

113114
await send({ type: "CHANGE" })
114115
expect(done).toHaveBeenCalledOnce()
@@ -143,6 +144,7 @@ describe("basic", () => {
143144
})
144145

145146
const { result, send } = renderMachine(machine)
147+
await Promise.resolve()
146148

147149
expect(result.current.state.hasTag("go")).toBeTruthy()
148150

@@ -183,6 +185,7 @@ describe("basic", () => {
183185
})
184186

185187
const { send } = renderMachine(machine)
188+
await Promise.resolve()
186189

187190
await send({ type: "NEXT" })
188191
expect([...order]).toEqual(["exit1", "transition", "entry2"])
@@ -216,6 +219,8 @@ describe("basic", () => {
216219
})
217220

218221
const { result, send } = renderMachine(machine)
222+
await Promise.resolve()
223+
219224
expect(result.current.computed("length")).toEqual(3)
220225

221226
await send({ type: "UPDATE" })
@@ -296,6 +301,7 @@ describe("basic", () => {
296301
})
297302

298303
const { result, send } = renderMachine(machine)
304+
await Promise.resolve()
299305

300306
await send({ type: "INCREMENT" })
301307
expect(result.current.context.get("count")).toEqual(1)

0 commit comments

Comments
 (0)