delay execute till after stream ready (#143)

src/App.tsx

@@ -29,14 +29,11 @@ export function App() {
     setEditorView,
     setSelectionRanges,
     selectionRanges,
-    guiMode,
-    lastGuiMode,
     addLog,
     code,
     setCode,
     setAst,
     setError,
-    errorState,
     setProgramMemory,
     resetLogs,
     selectionRangeTypeMap,
@@ -47,20 +44,19 @@ export function App() {
     setCursor2,
     sourceRangeMap,
     setMediaStream,
+    setIsStreamReady,
+    isStreamReady,
   } = useStore((s) => ({
     editorView: s.editorView,
     setEditorView: s.setEditorView,
     setSelectionRanges: s.setSelectionRanges,
     selectionRanges: s.selectionRanges,
-    guiMode: s.guiMode,
     setGuiMode: s.setGuiMode,
     addLog: s.addLog,
     code: s.code,
     setCode: s.setCode,
     setAst: s.setAst,
-    lastGuiMode: s.lastGuiMode,
     setError: s.setError,
-    errorState: s.errorState,
     setProgramMemory: s.setProgramMemory,
     resetLogs: s.resetLogs,
     selectionRangeTypeMap: s.selectionRangeTypeMap,
@@ -72,7 +68,9 @@ export function App() {
     setCursor: s.setCursor,
     setCursor2: s.setCursor2,
     sourceRangeMap: s.sourceRangeMap,
-    setMediaStream: s.setMediaStream
+    setMediaStream: s.setMediaStream,
+    isStreamReady: s.isStreamReady,
+    setIsStreamReady: s.setIsStreamReady,
   }))
   // const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
   const onChange = (value: string, viewUpdate: ViewUpdate) => {
@@ -137,7 +135,10 @@ export function App() {
       codeBasedSelections,
     })
   }
-  const engineCommandManager = useMemo(() => new EngineCommandManager(setMediaStream), [])
+  const engineCommandManager = useMemo(() => new EngineCommandManager({
+    setMediaStream,
+    setIsStreamReady,
+  }), [])
   useEffect(() => {
     return () => {
       engineCommandManager.tearDown()
@@ -145,6 +146,7 @@ export function App() {
   }, [])
 
   useEffect(() => {
+    if (!isStreamReady) return
     const asyncWrap = async () => {
       try {
         if (!code) {
@@ -242,7 +244,7 @@ export function App() {
       }
     }
     asyncWrap()
-  }, [code])
+  }, [code, isStreamReady])
   return (
     <div className="h-screen">
       <ModalContainer />

src/lang/std/engineConnection.ts

@@ -90,7 +90,13 @@ export class EngineCommandManager {
   onClickCallback: (selection: SelectionsArgs) => void = () => {}
   onCursorsSelectedCallback: (selections: CursorSelectionsArgs) => void =
     () => {}
-  constructor(setMediaStream: (stream: MediaStream) => void) {
+  constructor({
+    setMediaStream,
+    setIsStreamReady,
+  }: {
+    setMediaStream: (stream: MediaStream) => void
+    setIsStreamReady: (isStreamReady: boolean) => void
+  }) {
     const url = 'wss://api.dev.kittycad.io/ws/modeling/commands'
     this.socket = new WebSocket(url)
     this.pc = new RTCPeerConnection()
@@ -178,6 +184,7 @@ export class EngineCommandManager {
             this.lossyDataChannel = event.channel
             console.log('accepted lossy data channel', event.channel.label)
             this.lossyDataChannel.addEventListener('open', (event) => {
+              setIsStreamReady(true)
               console.log('lossy data channel opened', event)
             })
             this.lossyDataChannel.addEventListener('close', (event) => {

src/lang/std/extrude.ts

@@ -47,7 +47,7 @@ export const extrude: InternalFn = (
           target: sketch.id,
           distance: length,
           cap: true,
-        }
+        },
       },
       cmd_id: id,
       file_id: uuidv4(),

src/lang/std/sketch.ts

@@ -293,7 +293,7 @@ export const line: SketchLineHelper = {
         },
         cmd_id: id,
         file_id: uuidv4(),
-      }
+      },
     })
     const currentPath: Path = {
       type: 'toPoint',
@@ -1603,7 +1603,7 @@ export const close: InternalFn = (
       },
       cmd_id: id,
       file_id: uuidv4(),
-    }
+    },
   })
 
   const currentPath: Path = {

src/lib/testHelpers.ts

@@ -6,7 +6,10 @@ export async function executor(
   ast: Program,
   pm: ProgramMemory = { root: {}, pendingMemory: {} }
 ): Promise<ProgramMemory> {
-  const engineCommandManager = new EngineCommandManager(() => {})
+  const engineCommandManager = new EngineCommandManager({
+    setIsStreamReady: () => {},
+    setMediaStream: () => {},
+  })
   engineCommandManager.startNewSession()
   const programMemory = await _executor(ast, pm, engineCommandManager)
   await engineCommandManager.waitForAllCommands()

src/useStore.ts

@@ -148,6 +148,8 @@ export interface StoreState {
   setEngineCommandManager: (engineCommandManager: EngineCommandManager) => void
   mediaStream?: MediaStream
   setMediaStream: (mediaStream: MediaStream) => void
+  isStreamReady: boolean
+  setIsStreamReady: (isStreamReady: boolean) => void
 
   // tauri specific app settings
   defaultDir: DefaultDir
@@ -300,6 +302,8 @@ export const useStore = create<StoreState>()(
       setEngineCommandManager: (engineCommandManager) =>
         set({ engineCommandManager }),
       setMediaStream: (mediaStream) => set({ mediaStream }),
+      isStreamReady: false,
+      setIsStreamReady: (isStreamReady) => set({ isStreamReady }),
   
       // tauri specific app settings
       defaultDir: {