Toggles for the dev tools

Apicurio · Nov 27, 2024 · 1e25ca0 · 1e25ca0
1 parent 2b0623b
commit 1e25ca0
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 204 deletions.
diff --git a/packages/test-app/package.json b/packages/test-app/package.json
@@ -15,13 +15,12 @@
     "@patternfly/react-code-editor": "^6.0.0",
     "@patternfly/react-core": "^6.0.0",
     "@patternfly/react-icons": "^6.0.0",
-    "@xstate/react": "^4.1.3",
+    "@statelyai/inspect": "^0.4.0",
     "comlink": "^4.4.1",
     "monaco-editor": "^0.52.0",
     "monaco-yaml": "^5.2.3",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "xstate": "^5.18.2"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

diff --git a/packages/test-app/src/App.tsx b/packages/test-app/src/App.tsx
@@ -15,7 +15,7 @@ import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
 import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
 import { worker } from "./rpc.ts";
 // import * as worker from "../../ui/src/OpenApiEditorWorker.ts";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
   Alert,
   Button,
@@ -26,6 +26,8 @@ import {
   TextArea,
   Title,
 } from "@patternfly/react-core";
+import { useAppContext } from "./AppContext.tsx";
+import { createBrowserInspector } from "@statelyai/inspect";
 
 // initialize Monaco's workers
 self.MonacoEnvironment = {
@@ -51,6 +53,18 @@ function App() {
   const [spec, setSpec] = useState<string | null>(null);
   const [captureChanges, setCaptureChanges] = useState(true);
   const [output, setOutput] = useState("");
+  const { showDebugger, showXStateInspector } = useAppContext();
+  const { inspect, start, stop } = createBrowserInspector({
+    autoStart: false,
+  });
+
+  useEffect(() => {
+    if (showXStateInspector) {
+      start();
+    } else {
+      stop();
+    }
+  }, [showXStateInspector, start, stop]);
 
   const editorRef = useRef<OpenApiEditorRef | null>(null);
 
@@ -111,35 +125,38 @@ function App() {
           undoChange={worker.undoChange}
           redoChange={worker.redoChange}
           onDocumentChange={onDocumentChange}
+          inspect={inspect}
         />
       </PageSection>
-      <PageSection variant={"secondary"}>
-        <Alert
-          title={"Integration debugger"}
-          variant={"warning"}
-          isInline={true}
-        >
-          <Flex>
-            <Title headingLevel={"h6"}>
-              <Switch
-                isChecked={captureChanges}
-                onChange={(_, v) => setCaptureChanges(v)}
-                label={"Listen to onDocumentChange events"}
+      {showDebugger && (
+        <PageSection variant={"secondary"}>
+          <Alert
+            title={"Integration debugger"}
+            variant={"warning"}
+            isInline={true}
+          >
+            <Flex>
+              <Title headingLevel={"h6"}>
+                <Switch
+                  isChecked={captureChanges}
+                  onChange={(_, v) => setCaptureChanges(v)}
+                  label={"Listen to onDocumentChange events"}
+                />
+              </Title>
+              <TextArea
+                aria-label="Output of the editor"
+                value={output}
+                rows={3}
               />
-            </Title>
-            <TextArea
-              aria-label="Output of the editor"
-              value={output}
-              rows={3}
-            />
-            <FlexItem>
-              <Button onClick={onSaveClick}>
-                Programmatically save and update with another document
-              </Button>
-            </FlexItem>
-          </Flex>
-        </Alert>
-      </PageSection>
+              <FlexItem>
+                <Button onClick={onSaveClick}>
+                  Programmatically save and update with another document
+                </Button>
+              </FlexItem>
+            </Flex>
+          </Alert>
+        </PageSection>
+      )}
     </>
   );
 }

diff --git a/packages/test-app/src/AppContext.tsx b/packages/test-app/src/AppContext.tsx
@@ -0,0 +1,29 @@
+import {createContext, ReactNode, useContext, useState} from "react";
+
+const AppContext = createContext<{
+  showDebugger: boolean,
+  showXStateInspector: boolean,
+  setDebugger: (value: boolean) => void,
+  setXStateInspector: (value: boolean) => void,
+} | undefined>(undefined)
+
+export function AppProvider({ children }: { children: ReactNode }) {
+  const [showDebugger, setDebugger] = useState(false);
+  const [showXStateInspector, setXStateInspector] = useState(false);
+  return (
+    <AppContext.Provider value={{
+      showDebugger,
+      showXStateInspector,
+      setDebugger,
+      setXStateInspector
+    }}>
+      {children}
+    </AppContext.Provider>
+  )
+}
+
+export function useAppContext() {
+  const ctx = useContext(AppContext);
+  if (!ctx) throw new Error('useAppContext must be used within AppProvider');
+  return ctx;
+}
diff --git a/packages/test-app/src/AppMachine.ts b/packages/test-app/src/AppMachine.ts
diff --git a/packages/test-app/src/components/Layout.tsx b/packages/test-app/src/components/Layout.tsx
@@ -6,6 +6,7 @@ import {
   MastheadToggle,
   Page,
   PageToggleButton,
+  Switch,
   ToggleGroup,
   ToggleGroupItem,
   Toolbar,
@@ -16,10 +17,13 @@ import BarsIcon from "@patternfly/react-icons/dist/esm/icons/bars-icon";
 import { ReactNode, useState } from "react";
 import { MoonIcon, SunIcon } from "@patternfly/react-icons";
 import viteImg from "/vite.svg";
+import { useAppContext } from "../AppContext.tsx";
 
 export function Layout({ children }: { children: ReactNode }) {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
   const [isLightMode, setIsLightMode] = useState(true);
+  const { showDebugger, setDebugger, showXStateInspector, setXStateInspector } =
+    useAppContext();
 
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);
@@ -55,6 +59,20 @@ export function Layout({ children }: { children: ReactNode }) {
             />
           </ToggleGroup>
         </ToolbarItem>
+        <ToolbarItem alignSelf={"center"}>
+          <Switch
+            checked={showDebugger}
+            label={"Show editor debugger"}
+            onChange={(_, v) => setDebugger(v)}
+          />
+        </ToolbarItem>
+        <ToolbarItem alignSelf={"center"}>
+          <Switch
+            checked={showXStateInspector}
+            label={"Show XState inspector"}
+            onChange={(_, v) => setXStateInspector(v)}
+          />
+        </ToolbarItem>
       </ToolbarContent>
     </Toolbar>
   );

diff --git a/packages/test-app/src/main.tsx b/packages/test-app/src/main.tsx
@@ -3,11 +3,14 @@ import { createRoot } from "react-dom/client";
 import App from "./App";
 import "./index.css";
 import { Layout } from "./components/Layout";
+import { AppProvider } from "./AppContext.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <Layout>
-      <App />
-    </Layout>
-  </StrictMode>
+    <AppProvider>
+      <Layout>
+        <App />
+      </Layout>
+    </AppProvider>
+  </StrictMode>,
 );