refactor: react bindings

Author: segunadebayo

packages/frameworks/react/src/bindable.ts

@@ -1,6 +1,9 @@
 import { isFunction } from "@zag-js/utils"
 import type { Bindable, BindableParams } from "@zag-js/core"
 import { useLayoutEffect, useRef, useState } from "react"
+import { flushSync } from "react-dom"
+
+const identity = (v: VoidFunction) => v()
 
 export function useBindable<T>(props: () => BindableParams<T>): Bindable<T> {
   const initial = props().value ?? props().defaultValue
@@ -24,7 +27,7 @@ export function useBindable<T>(props: () => BindableParams<T>): Bindable<T> {
     prevValue.current = valueRef.current
   }, [value, props().value])
 
-  const set = (value: T | ((prev: T) => T)) => {
+  const setFn = (value: T | ((prev: T) => T)) => {
     const prev = prevValue.current
     const next = isFunction(value) ? value(prev as T) : value
 
@@ -46,7 +49,10 @@ export function useBindable<T>(props: () => BindableParams<T>): Bindable<T> {
     initial,
     ref: valueRef,
     get,
-    set,
+    set(value: T | ((prev: T) => T)) {
+      const exec = props().sync ? flushSync : identity
+      exec(() => setFn(value))
+    },
     invoke(nextValue: T, prevValue: T) {
       props().onChange?.(nextValue, prevValue)
     },

packages/frameworks/react/src/machine.ts

@@ -51,9 +51,7 @@ export function useMachine<T extends BaseSchema>(
       return contextRef.current?.[key].get()
     },
     set(key, value) {
-      flushSync(() => {
-        contextRef.current?.[key].set(value)
-      })
+      contextRef.current?.[key].set(value)
     },
     initial(key) {
       return contextRef.current?.[key].initial

packages/machines/date-picker/src/date-picker.machine.ts

@@ -136,6 +136,7 @@ export const machine = createMachine<DatePickerSchema>({
       })),
       activeIndex: bindable(() => ({
         defaultValue: 0,
+        sync: true,
         onChange(value) {
           console.log("activeIndex", value)
         },

packages/machines/tour/src/tour.machine.ts

@@ -47,6 +47,7 @@ export const machine = createMachine<TourSchema>({
       })),
       stepId: bindable<string | null>(() => ({
         defaultValue: prop("stepId"),
+        sync: true,
         onChange(value) {
           const computed = getComputed()
           const context = getContext()
@@ -97,7 +98,7 @@ export const machine = createMachine<TourSchema>({
 
   effects: ["trackBoundarySize"],
 
-  exit: ["clearStep", "cleanupRefs"],
+  exit: ["cleanupRefs"],
 
   on: {
     "STEPS.SET": {
@@ -524,7 +525,7 @@ function syncZIndex(scope: Scope) {
 }
 
 function setStep(params: Params<TourSchema>, idx: number) {
-  const { context, refs, send } = params
+  const { context, refs, computed, prop } = params
   const steps = context.get("steps")
   const step = steps[idx]
 
@@ -540,19 +541,23 @@ function setStep(params: Params<TourSchema>, idx: number) {
   }
 
   const next = () => {
-    send({ type: "STEP.NEXT" })
+    const idx = nextIndex(steps, computed("stepIndex"))
+    context.set("stepId", steps[idx].id)
   }
 
   const goto = (id: string) => {
-    send({ type: "STEP.SET", id })
+    const step = findStep(steps, id)
+    if (!step) return
+    context.set("stepId", step.id)
   }
 
   const dismiss = () => {
-    send({ type: "DISMISS" })
+    context.set("stepId", null)
+    prop("onStatusChange")?.({ status: "dismissed", stepId: null, stepIndex: -1 })
   }
 
   const show = () => {
-    send({ type: "STEP.SET", id: step.id })
+    context.set("stepId", step.id)
   }
 
   if (!step.effect) {