Merge pull request #403 from coderoad/fix/webview-multi-open

Fix/webview multi open

Author: ShMcK

src/commands.ts

@@ -8,7 +8,6 @@ import logger from './services/logger'
 
 export const COMMANDS = {
   START: 'coderoad.start',
-  OPEN_WEBVIEW: 'coderoad.open_webview',
   CONFIG_TEST_RUNNER: 'coderoad.config_test_runner',
   RUN_TEST: 'coderoad.run_test',
   SET_CURRENT_POSITION: 'coderoad.set_current_position',
@@ -29,27 +28,16 @@ export const createCommands = ({ extensionPath, workspaceState }: CreateCommandP
   return {
     // initialize
     [COMMANDS.START]: async () => {
-      let webviewState: 'INITIALIZING' | 'RESTARTING'
-      if (!webview) {
-        webviewState = 'INITIALIZING'
-      } else if (webview.loaded) {
-        // already loaded
-        vscode.window.showInformationMessage('CodeRoad already open')
-        return
+      console.log('start')
+      if (webview && webview.state.loaded) {
+        webview.createOrShow()
       } else {
-        webviewState = 'RESTARTING'
+        // activate machine
+        webview = createWebView({
+          extensionPath,
+          workspaceState,
+        })
       }
-
-      // activate machine
-      webview = createWebView({
-        extensionPath,
-        workspaceState,
-      })
-    },
-    // open React webview
-    [COMMANDS.OPEN_WEBVIEW]: () => {
-      // setup 1x1 horizontal layout
-      webview.createOrShow()
     },
     [COMMANDS.CONFIG_TEST_RUNNER]: async (data: TT.Tutorial) => {
       const testRunnerConfig = data.config.testRunner

src/services/webview/index.ts

@@ -9,8 +9,9 @@ interface ReactWebViewProps {
   workspaceState: vscode.Memento
 }
 
+let state = { loaded: false }
+
 const createReactWebView = ({ extensionPath, workspaceState }: ReactWebViewProps) => {
-  let loaded = false
   // TODO add disposables
   const disposables: vscode.Disposable[] = []
 
@@ -27,15 +28,23 @@ const createReactWebView = ({ extensionPath, workspaceState }: ReactWebViewProps
       // allows scripts to load external resources (eg. markdown images, fonts)
       enableCommandUris: true,
     }
-    loaded = true
+    state.loaded = true
     return vscode.window.createWebviewPanel(viewType, title, vscode.ViewColumn.Two, config)
   }
 
   let panel: vscode.WebviewPanel = createWebViewPanel()
 
   // Listen for when the panel is disposed
   // This happens when the user closes the panel or when the panel is closed programmatically
-  panel.onDidDispose(panel.dispose, null, disposables)
+  panel.onDidDispose(
+    () => {
+      console.log('dispose panel')
+      panel.dispose()
+      state.loaded = false
+    },
+    null,
+    disposables,
+  )
 
   const channel = new Channel({
     workspaceState,
@@ -49,16 +58,18 @@ const createReactWebView = ({ extensionPath, workspaceState }: ReactWebViewProps
 
   panel.webview.onDidReceiveMessage(receive, null, disposables)
 
+  // panel.onDidDispose(() => {
+  //   // Clean up our resources
+  //   loaded = false
+  //   panel.dispose()
+  //   Promise.all(disposables.map((x) => x.dispose()))
+  // })
+
   const rootPath = path.join(extensionPath, 'build')
   render(panel, rootPath)
 
   return {
-    dispose() {
-      // Clean up our resources
-      loaded = false
-      panel.dispose()
-      Promise.all(disposables.map((x) => x.dispose()))
-    },
+    state,
     createOrShow() {
       vscode.commands.executeCommand('vscode.setEditorLayout', {
         orientation: 0,
@@ -68,10 +79,8 @@ const createReactWebView = ({ extensionPath, workspaceState }: ReactWebViewProps
       // Otherwise, create a new panel.
 
       if (panel && panel.webview) {
-        if (!loaded) {
-          panel.reveal(vscode.ViewColumn.Two)
-          loaded = true
-        }
+        vscode.window.showInformationMessage('CodeRoad already open')
+        panel.reveal(vscode.ViewColumn.Two)
       } else {
         panel = createWebViewPanel()
       }