Machine configuration and api usage

[martinpengellyphillips]

I've just started playing around more with Zag. When configuring a machine, is it valid to use the generated api from within the machine handlers or should I be using send / something else? If send how best to find out what is appropriate?

A practical example; I want the menu machine to set a specific entry as highlighted when opened so I did this (solidjs):

  const [state, send] = useMachine(
    menu.machine({
      id: createUniqueId(),
      onOpen() {
        api().setHighlightedId("2");
      },
    })
  );

  const api = createMemo(() => menu.connect(state, send, normalizeProps));

This feels slightly awkward with the use of api so is there a better way to do this?

[anubra266]

@martinpengellyphillips you can use highlightedId to set the default highlited item

  const [state, send] = useMachine(
    menu.machine({
      id: createUniqueId(),
      highlightedId: '2'
    })
  );

[martinpengellyphillips]

@anubra266 - I tried that as well, but it doesn't seem to have any effect for me. Also, would it react to updates?

[martinpengellyphillips]

Using highlightedId in the initial context was not working for me because there was a delay setting the initial options ahead of the machine being ready (and highlightedId only applies on first pass).

In my case, using the api in onOpen seems fine, or I can call the underlying instead of api:

send({ type: "SET_HIGHLIGHTED_ID", id: "2" });