feat: use development mode, add error overlay

Fixes microsoft/vscode#95908

.vscode/launch.json

@@ -14,12 +14,12 @@
 				"--extensionDevelopmentPath=${workspaceFolder}"
 			],
 			"env": {
-				"RENDERER_USE_WEBPACK_SERVER": "1",
+				// "RENDERER_USE_WDS_PORT": "8111",
 			},
 			"outFiles": [
 				"${workspaceFolder}/out/**/*.js"
 			],
-			"preLaunchTask": "${defaultBuildTask}"
+			// "preLaunchTask": "${defaultBuildTask}"
 		},
 		{
 			"name": "Extension Tests",

package.json

@@ -43,12 +43,13 @@
     "compile:client": "webpack --info-verbosity verbose --mode production",
     "lint": "eslint src --ext ts",
     "watch": "concurrently -r \"npm:watch:*\"",
-    "watch:extension": "webpack --info-verbosity verbose --mode development --watch",
-    "watch:client": "tsc -b --watch",
-    "dev": "concurrently -r npm:watch:client webpack-dev-server",
+    "watch:extension": "tsc -b --watch",
+    "watch:client": "webpack --info-verbosity verbose --mode development --watch",
+    "dev": "concurrently -r npm:watch:client npm:dev:client",
+    "dev:client": "webpack-dev-server",
     "pretest": "npm run compile && npm run lint",
     "test": "node ./out/test/runTest.js",
-    "updatetypes": "cd src/types && vscode-dts dev && vscode-dts master"
+    "updatetypes": "cd src/extension/types && vscode-dts dev && vscode-dts master"
   },
   "devDependencies": {
     "@types/glob": "^7.1.1",
@@ -66,6 +67,7 @@
     "style-loader": "^1.1.4",
     "ts-loader": "^7.0.1",
     "typescript": "^3.7.5",
+    "vscode-notebook-error-overlay": "^1.0.1",
     "vscode-test": "^1.3.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",

src/client/index.ts

@@ -4,22 +4,26 @@
 
 import { viewType, renderCallback } from '../common/constants';
 import { render } from './render';
+import errorOverlay from 'vscode-notebook-error-overlay';
 
-const renderTag = (tag: HTMLScriptElement) => {
-  let container: HTMLElement;
+// Fucntion to render your contents in a single tag, calls the `render()`
+// function from render.ts. Also catches and displays any thrown errors.
+const renderTag = (tag: HTMLScriptElement) =>
+  errorOverlay.wrap(tag.parentElement, () => {
+    let container: HTMLElement;
 
-  // Create an element to render in, or reuse a previous element.
-  if (tag.nextElementSibling instanceof HTMLElement) {
-    container = tag.nextElementSibling;
-    container.innerHTML = '';
-  } else {
-    container = document.createElement('div');
-    tag.parentNode?.insertBefore(container, tag.nextSibling);
-  }
+    // Create an element to render in, or reuse a previous element.
+    if (tag.nextElementSibling instanceof HTMLElement) {
+      container = tag.nextElementSibling;
+      container.innerHTML = '';
+    } else {
+      container = document.createElement('div');
+      tag.parentNode?.insertBefore(container, tag.nextSibling);
+    }
 
-  const mimeType = tag.dataset.mimeType as string;
-  render(container, mimeType, JSON.parse(tag.innerHTML));
-};
+    const mimeType = tag.dataset.mimeType as string;
+    render(container, mimeType, JSON.parse(tag.innerHTML));
+  });
 
 const renderAllTags = () => {
   const nodeList = document.querySelectorAll(`script[type="renderer/${viewType}"]`);

src/client/render.ts

@@ -9,7 +9,7 @@ import * as style from './style.css';
 
 // This function is called to render your contents.
 export function render(container: HTMLElement, mimeType: string, data: any) {
-  // Format the JSON and insert it as <pre><code>{ ... }</code></pre
+  // Format the JSON and insert it as <pre><code>{ ... }</code></pre>
   const pre = document.createElement('pre');
   pre.classList.add(style.json);
   const code = document.createElement('code');

src/extension/sampleRenderer.ts

@@ -1,36 +1,52 @@
 import * as vscode from 'vscode';
+import * as path from 'path';
 import { viewType, renderCallback } from '../common/constants';
 
-const onLoad = `window['${renderCallback}'] && window['${renderCallback}'](document.currentScript)`;
+const onLoad = `(() => { debugger; window['${renderCallback}'] && window['${renderCallback}'](document.currentScript) })()`;
 
 export class SampleRenderer implements vscode.NotebookOutputRenderer {
+  private hasOpenedDevTools = new WeakSet<vscode.NotebookDocument>();
+
   public readonly preloads: vscode.Uri[] = [];
 
-  constructor(context: vscode.ExtensionContext) {
+  constructor(private readonly context: vscode.ExtensionContext) {
     // Set preloads to a list of scripts you want VS Code to load before your
     // renderer is ready. Here, we load the compiled Webpack bundle in 'release'
     // mode and load from the webpack-dev-server in development.
 
-    // todo(connor4312): https://github.com/microsoft/vscode/issues/95988
-    // if (process.env.RENDERER_USE_WEBPACK_SERVER && context.inDevelopment) {
-    //   this.preloads.push(vscode.Uri.parse('http://localhost:8111/index.js'));
-    // } else {
-    //   this.preloads.push(vscode.Uri.file(path.join(context.extensionPath, 'out/client/index.js')));
-    // }
+    const webpackDevServerPort = process.env.RENDERER_USE_WDS_PORT;
+    if (webpackDevServerPort && context.extensionMode !== vscode.ExtensionMode.Release) {
+      this.preloads.push(vscode.Uri.parse(`http://localhost:${webpackDevServerPort}/index.js`));
+    } else {
+      this.preloads.push(vscode.Uri.file(path.join(context.extensionPath, 'out/client/index.js')));
+    }
   }
 
   /**
    * Called to render a cell.
    */
   public render(document: vscode.NotebookDocument, output: vscode.CellDisplayOutput, mimeType: string): string {
+    const renderData = output.data[mimeType];
+    this.ensureDevTools(document);
+
     // Here we output a script tag that calls a function we exposed in the
-    // renderer client after it loads. Its contents are are output data as JSON.
+    // renderer client in its `online`. Its contents are are output data as JSON.
     // You could also preprocess your data before passing it to the client.
     return `
-      <script src="http://localhost:8111/index.js"></script>
       <script type="renderer/${viewType}" data-mime-type="${mimeType}" onload="${onLoad}">
-        ${JSON.stringify(output.data[mimeType])}
+        ${JSON.stringify(renderData)}
       </script>
     `;
   }
+
+  /**
+   * Little utility to open the webview dev tools on first render.
+   * Todo: unnecessary once https://github.com/microsoft/vscode/issues/96626
+   */
+  private async ensureDevTools(document: vscode.NotebookDocument) {
+    if (this.context.extensionMode === vscode.ExtensionMode.Development && !this.hasOpenedDevTools.has(document)) {
+      await vscode.commands.executeCommand('workbench.action.webview.openDeveloperTools');
+      this.hasOpenedDevTools.add(document);
+    }
+  }
 }