Skip to content

chore(site): Add XState inspector #872

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 4, 2022
Merged

chore(site): Add XState inspector #872

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
55b3a41
Use XState inspector in dev mode
presleyp Mar 31, 2022
d7bfa8d
Add new env var
presleyp Apr 4, 2022
9dc7f2a
Lint
presleyp Apr 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion develop.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,6 @@ cd "${PROJECT_ROOT}"
# https://stackoverflow.com/questions/3004811/how-do-you-run-multiple-programs-in-parallel-from-a-bash-script
(
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
)
1 change: 1 addition & 0 deletions site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"@material-ui/core": "4.9.4",
"@material-ui/icons": "4.5.1",
"@material-ui/lab": "4.0.0-alpha.42",
"@xstate/inspect": "^0.6.4",
"@xstate/react": "2.0.1",
"axios": "0.26.1",
"formik": "2.2.9",
Expand Down
14 changes: 13 additions & 1 deletion site/src/Main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,20 @@
import React from "react"
import ReactDOM from "react-dom"

import { inspect } from "@xstate/inspect"
import { Interpreter } from "xstate"
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
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Heads up, this will eventually move to another function or file (parity with v1), but we don't have enough "stuff" to justify moving it just yet. Looks great!

V1 looks like:

initSync()
main()

Where initSync contains all the configuration like this that happen before we mount.

// This is the entry point for the app - where everything start.
// 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
Expand Down
2 changes: 1 addition & 1 deletion site/src/xServices/StateContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ interface XServiceContextType {
export const XServiceContext = createContext({} as XServiceContextType)

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

return <XServiceContext.Provider value={{ userXService }}>{children}</XServiceContext.Provider>
}
12 changes: 12 additions & 0 deletions site/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4201,6 +4201,13 @@
commander "^8.0.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":
version "0.6.2"
resolved "https://registry.yarnpkg.com/@xstate/machine-extractor/-/machine-extractor-0.6.2.tgz#2fe5edb6b965fd1f45fa68644a4ef69f125c4fc0"
Expand Down Expand Up @@ -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"
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:
version "1.0.12"
resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2"
Expand Down