Skip to content

Commit d4e26ff

Browse files
authored
chore(site): Add XState inspector (#872)
* Use XState inspector in dev mode * Add new env var * Lint
1 parent f02b8fd commit d4e26ff

File tree

5 files changed

+28
-3
lines changed

5 files changed

+28
-3
lines changed

develop.sh

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@ cd "${PROJECT_ROOT}"
1313
# https://stackoverflow.com/questions/3004811/how-do-you-run-multiple-programs-in-parallel-from-a-bash-script
1414
(
1515
trap 'kill 0' SIGINT
16-
CODERV2_HOST=http://127.0.0.1:3000 yarn --cwd=./site dev &
16+
CODERV2_HOST=http://127.0.0.1:3000 INSPECT_XSTATE=true yarn --cwd=./site dev &
1717
go run cmd/coder/main.go start --dev --tunnel=false
1818
)

site/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"@material-ui/core": "4.9.4",
2929
"@material-ui/icons": "4.5.1",
3030
"@material-ui/lab": "4.0.0-alpha.42",
31+
"@xstate/inspect": "^0.6.4",
3132
"@xstate/react": "2.0.1",
3233
"axios": "0.26.1",
3334
"formik": "2.2.9",

site/src/Main.tsx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
11
import React from "react"
22
import ReactDOM from "react-dom"
3-
3+
import { inspect } from "@xstate/inspect"
4+
import { Interpreter } from "xstate"
45
import { App } from "./app"
56

7+
// if this is a development build and the developer wants to inspect
8+
if (process.env.NODE_ENV === "development" && process.env.INSPECT_XSTATE === "true") {
9+
// configure the XState inspector to open in a new tab
10+
inspect({
11+
url: "https://stately.ai/viz?inspect",
12+
iframe: false,
13+
})
14+
// configure all XServices to use the inspector
15+
Interpreter.defaultOptions.devTools = true
16+
}
17+
618
// This is the entry point for the app - where everything start.
719
// In the future, we'll likely bring in more bootstrapping logic -
820
// like: https://github.com/coder/m/blob/50898bd4803df7639bd181e484c74ac5d84da474/product/coder/site/pages/_app.tsx#L32

site/src/xServices/StateContext.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ interface XServiceContextType {
1818
export const XServiceContext = createContext({} as XServiceContextType)
1919

2020
export const XServiceProvider: React.FC = ({ children }) => {
21-
const userXService = useInterpret(userMachine, { devTools: true })
21+
const userXService = useInterpret(userMachine)
2222

2323
return <XServiceContext.Provider value={{ userXService }}>{children}</XServiceContext.Provider>
2424
}

site/yarn.lock

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4201,6 +4201,13 @@
42014201
commander "^8.0.0"
42024202
xstate "^4.29.0"
42034203

4204+
"@xstate/inspect@^0.6.4":
4205+
version "0.6.4"
4206+
resolved "https://registry.yarnpkg.com/@xstate/inspect/-/inspect-0.6.4.tgz#dd12abb30375dcb0471b81e8db3b81377cd00be6"
4207+
integrity sha512-2Gz5wu/RdpeLEpQ93qWQe/lDybJHQq8NzgWyB/EmDUBhOggCeZu4JqJCT7/RsQ7FNSEenZILFbNTftOY00Kg4A==
4208+
dependencies:
4209+
fast-safe-stringify "^2.0.7"
4210+
42044211
"@xstate/machine-extractor@0.6.2":
42054212
version "0.6.2"
42064213
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:
73657372
resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
73667373
integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
73677374

7375+
fast-safe-stringify@^2.0.7:
7376+
version "2.1.1"
7377+
resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz#c406a83b6e70d9e35ce3b30a81141df30aeba884"
7378+
integrity sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==
7379+
73687380
fastest-levenshtein@^1.0.12:
73697381
version "1.0.12"
73707382
resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2"

0 commit comments

Comments
 (0)