Improved test app UX

packages/test-app/src/App.tsx

@@ -50,10 +50,9 @@ self.MonacoEnvironment = {
 loader.config({ monaco });
 
 function App() {
-  const [spec, setSpec] = useState<string | null>(null);
   const [captureChanges, setCaptureChanges] = useState(true);
   const [output, setOutput] = useState("");
-  const { showDebugger, showXStateInspector } = useAppContext();
+  const { showDebugger, showXStateInspector, spec, setSpec } = useAppContext();
   const { inspect, start, stop } = createBrowserInspector({
     autoStart: false,
   });
@@ -92,10 +91,16 @@ function App() {
       // or, you could do
       // editorRef.current.updateDocument(...newSpec...);
     }
-  }, []);
+  }, [setSpec]);
 
-  if (spec === null) {
-    return <SpecUploader onSpec={setSpec} />;
+  if (spec === undefined) {
+    return (
+      <SpecUploader
+        onSpec={(spec) => {
+          setSpec(spec);
+        }}
+      />
+    );
   }
   return (
     <>

packages/test-app/src/AppContext.tsx

@@ -1,29 +1,39 @@
-import {createContext, ReactNode, useContext, useState} from "react";
+import { createContext, ReactNode, useContext, useState } from "react";
 
-const AppContext = createContext<{
-  showDebugger: boolean,
-  showXStateInspector: boolean,
-  setDebugger: (value: boolean) => void,
-  setXStateInspector: (value: boolean) => void,
-} | undefined>(undefined)
+const AppContext = createContext<
+  | {
+      spec?: string;
+      showDebugger: boolean;
+      showXStateInspector: boolean;
+      setSpec: (value?: string) => void;
+      setDebugger: (value: boolean) => void;
+      setXStateInspector: (value: boolean) => void;
+    }
+  | undefined
+>(undefined);
 
 export function AppProvider({ children }: { children: ReactNode }) {
+  const [spec, setSpec] = useState<string | undefined>(undefined);
   const [showDebugger, setDebugger] = useState(false);
   const [showXStateInspector, setXStateInspector] = useState(false);
   return (
-    <AppContext.Provider value={{
-      showDebugger,
-      showXStateInspector,
-      setDebugger,
-      setXStateInspector
-    }}>
+    <AppContext.Provider
+      value={{
+        spec,
+        showDebugger,
+        showXStateInspector,
+        setSpec,
+        setDebugger,
+        setXStateInspector,
+      }}
+    >
       {children}
     </AppContext.Provider>
-  )
+  );
 }
 
 export function useAppContext() {
   const ctx = useContext(AppContext);
-  if (!ctx) throw new Error('useAppContext must be used within AppProvider');
+  if (!ctx) throw new Error("useAppContext must be used within AppProvider");
   return ctx;
-}
+}