chore(site): Add XState inspector (#872)

* Use XState inspector in dev mode

* Add new env var

* Lint
This commit is contained in:
Presley Pizzo
2022-04-04 19:54:41 -04:00
committed by GitHub
parent f02b8fda9e
commit d4e26ff8c2
5 changed files with 28 additions and 3 deletions

View File

@ -13,6 +13,6 @@ cd "${PROJECT_ROOT}"
# https://stackoverflow.com/questions/3004811/how-do-you-run-multiple-programs-in-parallel-from-a-bash-script # https://stackoverflow.com/questions/3004811/how-do-you-run-multiple-programs-in-parallel-from-a-bash-script
( (
trap 'kill 0' SIGINT trap 'kill 0' SIGINT
CODERV2_HOST=http://127.0.0.1:3000 yarn --cwd=./site dev & CODERV2_HOST=http://127.0.0.1:3000 INSPECT_XSTATE=true yarn --cwd=./site dev &
go run cmd/coder/main.go start --dev --tunnel=false go run cmd/coder/main.go start --dev --tunnel=false
) )

View File

@ -28,6 +28,7 @@
"@material-ui/core": "4.9.4", "@material-ui/core": "4.9.4",
"@material-ui/icons": "4.5.1", "@material-ui/icons": "4.5.1",
"@material-ui/lab": "4.0.0-alpha.42", "@material-ui/lab": "4.0.0-alpha.42",
"@xstate/inspect": "^0.6.4",
"@xstate/react": "2.0.1", "@xstate/react": "2.0.1",
"axios": "0.26.1", "axios": "0.26.1",
"formik": "2.2.9", "formik": "2.2.9",

View File

@ -1,8 +1,20 @@
import React from "react" import React from "react"
import ReactDOM from "react-dom" import ReactDOM from "react-dom"
import { inspect } from "@xstate/inspect"
import { Interpreter } from "xstate"
import { App } from "./app" import { App } from "./app"
// if this is a development build and the developer wants to inspect
if (process.env.NODE_ENV === "development" && process.env.INSPECT_XSTATE === "true") {
// configure the XState inspector to open in a new tab
inspect({
url: "https://stately.ai/viz?inspect",
iframe: false,
})
// configure all XServices to use the inspector
Interpreter.defaultOptions.devTools = true
}
// This is the entry point for the app - where everything start. // This is the entry point for the app - where everything start.
// In the future, we'll likely bring in more bootstrapping logic - // In the future, we'll likely bring in more bootstrapping logic -
// like: https://github.com/coder/m/blob/50898bd4803df7639bd181e484c74ac5d84da474/product/coder/site/pages/_app.tsx#L32 // like: https://github.com/coder/m/blob/50898bd4803df7639bd181e484c74ac5d84da474/product/coder/site/pages/_app.tsx#L32

View File

@ -18,7 +18,7 @@ interface XServiceContextType {
export const XServiceContext = createContext({} as XServiceContextType) export const XServiceContext = createContext({} as XServiceContextType)
export const XServiceProvider: React.FC = ({ children }) => { export const XServiceProvider: React.FC = ({ children }) => {
const userXService = useInterpret(userMachine, { devTools: true }) const userXService = useInterpret(userMachine)
return <XServiceContext.Provider value={{ userXService }}>{children}</XServiceContext.Provider> return <XServiceContext.Provider value={{ userXService }}>{children}</XServiceContext.Provider>
} }

View File

@ -4201,6 +4201,13 @@
commander "^8.0.0" commander "^8.0.0"
xstate "^4.29.0" xstate "^4.29.0"
"@xstate/inspect@^0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@xstate/inspect/-/inspect-0.6.4.tgz#dd12abb30375dcb0471b81e8db3b81377cd00be6"
integrity sha512-2Gz5wu/RdpeLEpQ93qWQe/lDybJHQq8NzgWyB/EmDUBhOggCeZu4JqJCT7/RsQ7FNSEenZILFbNTftOY00Kg4A==
dependencies:
fast-safe-stringify "^2.0.7"
"@xstate/machine-extractor@0.6.2": "@xstate/machine-extractor@0.6.2":
version "0.6.2" version "0.6.2"
resolved "https://registry.yarnpkg.com/@xstate/machine-extractor/-/machine-extractor-0.6.2.tgz#2fe5edb6b965fd1f45fa68644a4ef69f125c4fc0" resolved "https://registry.yarnpkg.com/@xstate/machine-extractor/-/machine-extractor-0.6.2.tgz#2fe5edb6b965fd1f45fa68644a4ef69f125c4fc0"
@ -7365,6 +7372,11 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc= integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
fast-safe-stringify@^2.0.7:
version "2.1.1"
resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz#c406a83b6e70d9e35ce3b30a81141df30aeba884"
integrity sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==
fastest-levenshtein@^1.0.12: fastest-levenshtein@^1.0.12:
version "1.0.12" version "1.0.12"
resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2" resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2"