"Open Inspector" never shows

[parker-codes]

After installing the extension and visiting machine files, no "Open Inspector" link shows. I restarted VSCode for good measure. I even attempted different machines (I have quite a few).

I'm on MacOS Big Sur on an M1 architecture.

Here's an obfuscated version of the machine:

import { assign, createMachine } from "xstate";

export const dashboardMachine = createMachine(
  {
    id: "dashboard",
    initial: "inactive",

    context: {
      list1: [],
      list2: [],
    },

    states: {
      inactive: {
        on: {
          ENTER: "active",
        },
      },

      active: {
        type: "parallel",

        on: {
          EXIT: "inactive",
        },

        states: {
          list1: {
            initial: "loading",

            states: {
              loading: {
                invoke: {
                  src: "fetchList1",
                  onDone: {
                    target: "idle",
                    actions: ["assignList1"],
                  },
                  onError: "errorLoading",
                },
              },
              errorLoading: {},
              idle: {},
            },
          },

          list2: {
            initial: "loading",

            states: {
              loading: {
                invoke: {
                  src: "fetchList2",
                  onDone: {
                    target: "idle",
                    actions: ["assignList2"],
                  },
                  onError: "errorLoading",
                },
              },
              errorLoading: {},
              idle: {},
            },
          },
        },
      },
    },
  },

  /*
   * Options
   */
  {
    actions: {
      assignList1: assign((context, event) => ({
        // @ts-expect-error
        list1: event.data,
      })),
      assignList2: assign((context, event) => ({
        // @ts-expect-error
        list2: event.data,
      })),
    },

    services: {
      fetchList1: async (context, event) => {
        return ['first', 'list'];
      },
      fetchList2: async (context, event) => {
        return ['second', 'list'];
      },
    },
  }
);

[mattpocock]

Strange, it's showing it for me! Copied and pasted into a new file and it's working.

[mattpocock]

[damiensedgwick]

is it to do with file name, e.g does the file have to follow a pattern such as filename.machine.ts or will it pick up a machine in filenameMachine.ts? Might not be the issue just throwing up ideas.

[mattpocock]

Nope, no filename restriction!

[damiensedgwick]

That's me all out of ideas on that one then 😅

[parker-codes]

It was figured out in Discord (yesterday, I think). You have to enable Code Lens for the prompt to appear over the machine definition.

I just tested it and it works! The problem is, I don't like the clutter of Code Lens so this means I have to toggle it in settings before/after using the extension visualizer.

[damiensedgwick]

it would be good to have a command to open the visualiser also I think @mattpocock for those who aren't a fan of the code lense?

[mattpocock]

@damiensedgwick 100%! Could you add an issue?

[damiensedgwick]

@damiensedgwick 100%! Could you add an issue?

Certainly!

[mattpocock]

It looks like we can close this issue - looks like a code lens thing.