[@xstate/inspect]: Old (and buggy) versions in the CodeSandbox projects

[sbaechler]

Description The CodeSandbox projects linked in the docs still have old versions of xstate and @xstate/inspect.

https://github.com/statelyai/xstate/tree/main/packages/xstate-inspect#xstateinspect

A few bugs like the double arrow on invoke have been fixed since.

Maybe use minimum versions instead of fixed versions.

Expected Result The template for the CodeSandbox project contains the most recent version of xstate and @xstate/inspect.

Actual Result Current versions:

"dependencies": {
    "@xstate/inspect": "0.0.11",
    "xstate": "4.11.0"
  },

Reproduction Click on one of the linked templates in the docs: https://github.com/statelyai/xstate/tree/main/packages/xstate-inspect#xstateinspect

[annaghi]

It seems that maintaining the templates and examples both on GitHub and CodeSandbox doubles the efforts.

A longer term solution might be to maintain the templates and examples only on one place (here on GitHub), and replace the direct CodeSandbox links with the embedded variants everywhere in the docs.

The TodoMVC with Vue is a good example:

• Source of the example on GitHub: https://github.com/statelyai/xstate/tree/main/examples/todo-mvc-vue
• Source of the docs with CodeSandbox link: https://github.com/statelyai/xstate/blob/main/docs/examples/todomvc.md#todomvc-with-vue
• How it looks: https://xstate.js.org/docs/examples/todomvc.html#todomvc-with-vue

Updating the examples is still effort, but only once.

What do you think?

[davidkpiano]

A longer term solution might be to maintain the templates and examples only on one place (here on GitHub), and replace the direct CodeSandbox links with the embedded variants everywhere in the docs.

I completely agree with this; let's do this moving forward.

We can also find a way to automate the documentation for the examples; I'll investigate this.

[annaghi]

I will check the examples, if they can be used as CodeSandbox project.

[sbaechler]

As a quick fix you can use the "latest" tag instead of a fixed version. This way the templates are always going to load the most recent versions.

"dependencies": {
    "@xstate/inspect": "latest",
    "xstate": "latest"
  },