Wants a way to use it Trying to write to react

[mineclover]

Wants a way to use it Trying to write to react

Action, I thought the philosophy of predefining and injecting states was good, and I'm trying to use it because it's more focused and lighter on the web than xstate

I don't know why a function goes into a value like prop that goes into the machine

Is there a document regarding where the value is being delivered?

Need an explanation for createAnatomy, createProps

I also want to get information about the guards, effects ,

I've seen a document about the guards on xstate, but I don't know what effect means
Can I understand a unique concept

// https://github.com/chakra-ui/zag/blob/main/packages/machines/checkbox/src/checkbox.machine.ts
props({ props }) {
    return {
      value: "on",
      ...props,
      defaultChecked: !!props.defaultChecked,
    }
  },

  initialState() {
    return "ready"
  },

  context({ prop, bindable }) {
    return {
      checked: bindable(() => ({
        defaultValue: prop("defaultChecked"),
        value: prop("checked"),
        onChange(checked) {
          prop("onCheckedChange")?.({ checked })
        },
      })),
      fieldsetDisabled: bindable(() => ({ defaultValue: false })),
      focusVisible: bindable(() => ({ defaultValue: false })),
      active: bindable(() => ({ defaultValue: false })),
      focused: bindable(() => ({ defaultValue: false })),
      hovered: bindable(() => ({ defaultValue: false })),
    }
  },

It is configured as below, but it can be inferred that the values come as parameters in the machine declaration by handling it like props({props}) , context({ prop, bindable })

There is no event, track, or prop in the internal configuration, but I am using it

Ref:

• https://github.com/chakra-ui/zag/tree/main/packages/machines/
• https://egghead.io/lessons/zag-trigger-side-effects-in-a-zag-js-state-machine-with-the-watch-property