Stately
All blog posts

Nesting XState typegen files

By Anders Bech Mellson on June 13, 2022Edit this page on GitHub

  • #stately
  • #extension
  • #open source
  • #xstate
  • #vscode

Our latest update to the XState VS Code extension has made it easy to enable file nesting for typegen files. But what is file nesting?

Explorer file nesting

VS Code introduced file nesting in version 1.67 back in April of 2022. This feature is elegant as it allows you to group related files in the explorer view of VS Code.

Our friend Erik Rasmussen quickly found this feature works well with the generated type files for XState. Thanks to Erik for his great idea!

Show me

The image below shows the explorer in VS Code without file nesting enabled; you have a machine source file alongside a generated type file for that machine.

The source file in the VS Code explorer called coolMachine.ts is listed above the typegen file called coolMachine.typegen.ts.

After enabling file nesting for typegen files, VS Code explorer allows you to nest and collapse the generated file under the source file.

Pressing the arrow icon toggle alongside the source file toggles the nesting of the generated type file.

Enable nesting

If you’re using our VS Code extension and haven’t manually enabled file nesting for typegen files, you will see a helper prompt allowing you to enable file nesting with a click. The prompt will show when you open a file with a machine. If you miss the prompt, you can enable or disable file nesting as described in the next section.

Disable nesting

You can disable, or enable, the file nesting by using the Xstate: Nest Typegen Files toggle in your VS Code settings. The Extensions settings view in VS Code has XState settings including the option to enable nesting the generated typegen files.

PS: If you’re unsure what typegen is in XState, read this post where we introduced TypeScript typegen for XState.

Copyright © Stately, 2022