Fix/disposable

src/editor/ReactWebView.ts

@@ -7,6 +7,7 @@ import * as path from 'path'
  */
 class ReactWebView {
   // @ts-ignore
+  public loaded: boolean
   private panel: vscode.WebviewPanel
   private extensionPath: string
   private disposables: vscode.Disposable[] = []
@@ -23,10 +24,17 @@ class ReactWebView {
 
     // Listen for when the panel is disposed
     // This happens when the user closes the panel or when the panel is closed programatically
-    // this.panel.onDidDispose(() => this.dispose(), null, this.disposables)
+    this.panel.onDidDispose(() => this.dispose(), null, this.disposables)
 
     // Handle messages from the webview
-    const onReceive = (action: string | CR.Action) => vscode.commands.executeCommand('coderoad.receive_action', action)
+    const onReceive = (action: string | CR.Action) => {
+      // await loading of webview in React before proceeding with loaded state
+      if (action === 'WEBVIEW_LOADED') {
+        this.loaded = true
+      } else {
+        vscode.commands.executeCommand('coderoad.receive_action', action)
+      }
+    }
     this.panel.webview.onDidReceiveMessage(onReceive, null, this.disposables)
 
     // update panel on changes
@@ -38,15 +46,6 @@ class ReactWebView {
       this.panel.reveal(vscode.ViewColumn.Two)
     }
 
-    this.panel.onDidDispose(() => {
-      updateWindows()
-    })
-
-    // this.panel.onDidChangeViewState(() => {
-    //     console.log('onDidChangeViewState')
-    //     updateWindows()
-    // })
-
     // prevents new panels from going ontop of coderoad panel
     vscode.window.onDidChangeActiveTextEditor(param => {
       if (!param || param.viewColumn !== vscode.ViewColumn.Two) {
@@ -61,14 +60,24 @@ class ReactWebView {
     // TODO: prevent window from moving to the left when no windows remain on rights
   }
 
-  public createOrShow(column: number): void {
+  public createOrShow(column: number, callback?: () => void): void {
     // If we already have a panel, show it.
     // Otherwise, create a new panel.
     if (this.panel && this.panel.webview) {
       this.panel.reveal(column)
     } else {
       this.panel = this.createWebviewPanel(column)
     }
+    if (callback) {
+      // listen for when webview is loaded
+      // unfortunately there is no easy way of doing this
+      let webPanelListener = setInterval(() => {
+        if (this.loaded) {
+          setTimeout(callback)
+          clearInterval(webPanelListener)
+        }
+      }, 200)
+    }
   }
 
   private createWebviewPanel(column: number): vscode.WebviewPanel {
@@ -145,8 +154,8 @@ class ReactWebView {
                     <link rel="stylesheet" type="text/css" href="${styleUri}">
                     <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${n1}' 'nonce-${n2}' 'nonce-${n3}'; style-src vscode-resource: 'unsafe-inline' http: https: data:;">
                     <base href="${vscode.Uri.file(path.join(this.extensionPath, 'build')).with({
-                      scheme: 'vscode-resource',
-                    })}/">
+      scheme: 'vscode-resource',
+    })}/">
                     <style></style>
                 </head>
 

src/editor/commands/index.ts

@@ -35,6 +35,10 @@ let webview: any
 export const createCommands = ({ context, machine, storage, git, position }: CreateCommandProps) => ({
   // initialize
   [COMMANDS.START]: () => {
+    if (webview) {
+      console.log('CodeRoad already loaded')
+      return
+    }
     // set local storage workspace
     setStorage(context.workspaceState)
 
@@ -50,12 +54,8 @@ export const createCommands = ({ context, machine, storage, git, position }: Cre
       orientation: 0,
       groups: [{ groups: [{}], size: 0.6 }, { groups: [{}], size: 0.4 }],
     })
-    webview.createOrShow(column)
-    // NOTE: createOrShow and layout command cannot be async
-    // this creates an async issue where the webview cannot detect when it has been initialized
-    setTimeout(() => {
-      machine.send('WEBVIEW_INITIALIZED')
-    }, 2000)
+    const callback = () => machine.send('WEBVIEW_INITIALIZED')
+    webview.createOrShow(column, callback)
   },
   // launch a new tutorial
   // NOTE: may be better to move into action as logic is primarily non-vscode

web-app/src/App.tsx

@@ -3,6 +3,7 @@ import * as CR from 'typings'
 
 import Debugger from './components/Debugger'
 import Routes from './Routes'
+import { send } from './utils/vscode'
 import DataContext, { initialState, initialData } from './utils/DataContext'
 
 interface ReceivedEvent {
@@ -13,6 +14,7 @@ const App = () => {
   const [state, setState] = React.useState(initialState)
   const [data, setData]: [CR.MachineContext, (data: CR.MachineContext) => void] = React.useState(initialData)
 
+  // update state based on response from editor
   const handleEvent = (event: ReceivedEvent): void => {
     const message = event.data
     console.log('RECEIVED')
@@ -35,6 +37,11 @@ const App = () => {
     }
   })
 
+  // trigger progress when webview loaded
+  React.useEffect(() => {
+    send('WEBVIEW_LOADED')
+  })
+
   const value = {
     state,
     position: data.position,
@@ -46,7 +53,7 @@ const App = () => {
   return (
     <DataContext.Provider value={value}>
       <div>
-        <Debugger value={value} />
+        {/* <Debugger value={value} /> */}
         <Routes state={state} />
       </div>
     </DataContext.Provider>