[Bug] VScode extension does not work if the machine is a property in a class

[ShravanSunder]

Please see the example below for reproduction. VScode extension does not work if the machine is a property in a class with extra imports. Sometimes it works flakily. The pictures are below

The reason its in the class is because it will have access to class functions for actions and invocations. I've tried to remove the extra code to remove errors in reproduciton

import { type Actor, type AnyActorLogic, createActor, createMachine, fromObservable, ActorStatus, fromPromise } from 'xstate';

import { type ChatWorkflowStatusType } from './ChatWorkflowStatusType';
import { chatWorkflowStatusEnum } from './ChatWorkflowStatusType';

import { lunaCoreErrorList } from '~~/helpers/core-errors/coreErrorList';
import { LunaCoreError } from '~~/helpers/core-errors/LunaCoreError';
import { ChatSessionMemory } from '~~/services/ai-workflow/ChatSessionMemory';
import { type AnyChatWorkflowConfig } from '~~/services/ai-workflow/models/ChatWorkflowConfig';
import { type WorkflowContext } from '~~/services/ai-workflow/models/WorkflowContext';
import { type WorkflowControlEvents } from '~~/services/ai-workflow/models/WorkflowControlEvents';

export class ChatWorkflow {
  /**
   * The state machine that controls the workflow.
   */
  protected workflowMachine_ = createMachine(
    {
      /** @xstate-layout N4IgpgJg5mDOIC5QGMAWBDALgdQPYCcBrAMwBtcB3AOgEsA7GzG9UgLzAGIKCTzrZM6fEzpQA2gAYAuolAAHXLEY1cdWSAAeiAIwA2AOxU9ATgBMugMwAOXZdPHt+gDQgAnolMBWbVVN-92p4BxpaephYAvhEuaFh4RGSUtAxMLOxcPInU+GDoEK6SMkggCkpMqupaCHqGJubWthb2ji7uCAAs2sZUxp7G+hIWXeG6g+1RMRg4mXxU6MhMAG6c3AmzArhycvTi0uqlyhXFVZ663QZB-eb6+u1Wzm4e3r7+gcGh4RMgsdNrSRtbSAZP7UCA0WAHUSFfaKQ5qY6IKxWHwSU4SCT6EK6KynVpPKxUdoDYztU5EjF9TxfH7xXhJMEQxRA1Z06j0RgsGisHbQ4oHcrw0BVJE+HESUy3Jr2KztUx4hDIwk4gbeUak0JRaIgOi4CBwdQ0maUGFlFSCzSIAC0unl1qo6Idjqd+mpU1pWWSyjSYBNcMqiFl8uMEioFk8VgkvXajvuVldcSN1HmSx9fNhAv9CDDhnaFl0pjexijnhL8tM4t8FlRGIxZysXjjWsNIKoALkkF9GYRCH0BntEl0nnaw6J2mRFjL4Z6xPV5P0lPjv1ZVAZpQ7adNRyFOgkMp6JPn+isFgssv6QZDA-0TW0XXFBl0moiQA */
      id: "chatWorkflow",
      initial: "initialize",
      context: {
        chatSession: {},
      },
      states: {
        initialize: {
          on: {
            "workflow.starting": {
              target: "active",
            },
            "workflow.error": {
              target: "disposed",
            },
          },
        },
        active: {
          on: {
            "workflow.stopping": {
              target: "stopped",
            },
          },
          entry: ["onEnterActive"],
          exit: ["onExitActive"],
        },
        stopped: {
          on: {
            "workflow.disposing": {
              target: "disposed",
            },
          },
        },
        disposed: {
          on: {
            "workflow.initalizing": {
              target: "initialize",
            },
          },
        },
      },
    },
    {
      actions: {
        onEnterActive: () => {},
        onExitActive: () => {},
      },
    }
  );
}

[ShravanSunder]

Here is a visual

Sometimes it works if i remove the other imports 🤷🏽

... After which i can add back the imports and it stays. But is super janky

[ShravanSunder]

@Andarist I wanted to raise that if a statemachine is in a class function (such as a constructor) in a large class, the vscode editor doesn't show either.

After some testing, it maybe that this problem exista in any large file with > 250 lines

The open visual editor command does not work on a create machine in large files, but does in new files with the same machine.

[ShravanSunder]

hmm, actually it seems to be certain types of invoke that depends on a class member. It looks liek this is the culprit that could sometimes cause the "open visual editor" from showing

	invoke: {
		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
		src: this.workflowActor.logic,
	},

For anyone who's having the same issue, assign invoke src to a local variable and then use it in the statemachine definition

[matevzsenlab]

I have the same issue, but I couldn't make Open visual editor appear even once inside the class. It worked properly only when I created using it like this:
export const myMachine = createMachine();

[prestopasto]

For me it doesn't show 'Open Visual Editor' when creating a machine in an Angular Service. If I remove the @Injectable() decorator before the Angular service class it will show 'Open visual Editor'. It isn't always above the line where the machine is defined and is sometimes shown a few lines into the machine.