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

presleyp · web-flow · commit d4e26ff8c2ef · 2022-04-04T19:54:41.000-04:00
* Use XState inspector in dev mode

* Add new env var

* Lint
diff --git a/develop.sh b/develop.sh
@@ -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
 )
diff --git a/site/package.json b/site/package.json
@@ -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",
diff --git a/site/src/Main.tsx b/site/src/Main.tsx
@@ -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
+}
+
 // 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
diff --git a/site/src/xServices/StateContext.tsx b/site/src/xServices/StateContext.tsx
@@ -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>
 }
diff --git a/site/yarn.lock b/site/yarn.lock
@@ -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"
@@ -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"

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,6 @@ cd "${PROJECT_ROOT}"`
`13`	`13`	`# https://stackoverflow.com/questions/3004811/how-do-you-run-multiple-programs-in-parallel-from-a-bash-script`
`14`	`14`	`(`
`15`	`15`	`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 &`
`17`	`17`	`go run cmd/coder/main.go start --dev --tunnel=false`
`18`	`18`	`)`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ interface XServiceContextType {`
`18`	`18`	`export const XServiceContext = createContext({} as XServiceContextType)`
`19`	`19`
`20`	`20`	`export const XServiceProvider: React.FC = ({ children }) => {`
`21`		`- const userXService = useInterpret(userMachine, { devTools: true })`
	`21`	`+ const userXService = useInterpret(userMachine)`
`22`	`22`
`23`	`23`	`return <XServiceContext.Provider value={{ userXService }}>{children}</XServiceContext.Provider>`
`24`	`24`	`}`