Merge pull request #669 from mjbvz/dev/mjbvz/notebook-renderer-update

Update notebook renderer sample

notebook-renderer-sample/.vscode/launch.json

@@ -1,51 +1,19 @@
 // A launch configuration that compiles the extension and then opens it inside a new window
-// Use IntelliSense to learn about possible attributes.
-// Hover to view descriptions of existing attributes.
-// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 {
   "version": "0.2.0",
   "configurations": [
-    {
-      "name": "Run Extension",
-      "type": "pwa-extensionHost",
-      "request": "launch",
-      "args": [
-        "--extensionDevelopmentPath=${workspaceFolder}"
-      ],
-      "outFiles": [
-        "${workspaceFolder}/out/**/*.js"
-      ],
-      "debugWebviews": {
-        "urlFilter": "*notebookRenderer*"
-      },
-      "trace": true,
-      "preLaunchTask": "npm: dev"
-    },
-    {
-      "name": "Run Extension (no server)",
-      "type": "extensionHost",
-      "request": "launch",
-      "args": [
-        "--extensionDevelopmentPath=${workspaceFolder}"
-      ],
-      "outFiles": [
-        "${workspaceFolder}/out/**/*.js"
-      ],
-      "debugWebviews": true,
-      "preLaunchTask": "npm: watch"
-    },
-    {
-      "name": "Extension Tests",
-      "type": "extensionHost",
-      "request": "launch",
-      "args": [
-        "--extensionDevelopmentPath=${workspaceFolder}",
-        "--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
-      ],
-      "outFiles": [
-        "${workspaceFolder}/out/test/**/*.js"
-      ],
-      "preLaunchTask": "${defaultBuildTask}"
-    }
+      {
+          "name": "Launch Extension",
+          "type": "extensionHost",
+          "request": "launch",
+          "runtimeExecutable": "${execPath}",
+          "args": [
+              "--extensionDevelopmentPath=${workspaceFolder}"
+          ],
+          "outFiles": [
+              "${workspaceFolder}/dist/**/*.js"
+          ],
+          "preLaunchTask": "npm: webpack"
+      }
   ]
 }

notebook-renderer-sample/.vscode/tasks.json

@@ -1,36 +0,0 @@
-// See https://go.microsoft.com/fwlink/?LinkId=733558
-// for the documentation about the tasks.json format
-{
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "type": "npm",
-      "script": "dev",
-      "problemMatcher": ["$tsc-watch", "$ts-checker-webpack-watch"],
-      "isBackground": true,
-      "presentation": {
-        "reveal": "never"
-      },
-      "group": {
-        "kind": "build",
-        "isDefault": true
-      }
-    },
-    {
-      "type": "npm",
-      "script": "watch",
-      "problemMatcher": ["$tsc-watch", "$ts-checker-webpack-watch"],
-      "isBackground": true,
-      "presentation": {
-        "reveal": "never"
-      },
-      "group": "build"
-    },
-    {
-      "type": "npm",
-      "script": "compile",
-      "problemMatcher": ["$tsc", "$ts-checker-webpack"],
-      "group": "build"
-    }
-  ]
-}

notebook-renderer-sample/README.md

@@ -1,12 +1,11 @@
 # notebook-renderer-sample
 
-⚠️ Work-in-progress starter code for custom notebook renderers in VS Code. Expect this to change as notebooks matures. ⚠️
+Demonstrates a custom [notebook renderer](https://code.visualstudio.com/api/extension-guides/notebook#notebook-renderer) in VS Code. This creates a custom renderer called `GitHub Issues Plain Renderer` that renders output in a [GitHub Issues Notebook](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-github-issue-notebooks).
 
 This starter includes:
 
  - 🖥️ TypeScript code to create a simple `NotebookOutputRenderer`
- - 📦 A Webpack build for renderer client code
- - ⚡ Support for hot module reloading and safe boilerplate
+ - 📦 A Webpack build for the renderer
  - 🎨 CSS modules support
 
 ### Running this Sample
@@ -14,15 +13,3 @@ This starter includes:
  1. `cd notebook-renderer-sample`
  1. `code-insiders .`: Open the folder in VS Code Insiders
  1. Hit `F5` to build+debug
-
-### Structure
-
-A Notebook Renderer consists of code that runs in the VS Code Extension Host (Node.js), which registers the renderer and passes data into the UI code running inside a WebView (Browser/DOM).
-
-This uses TypeScript project references. There are three projects in the `src` directory:
-
- - `extension` contains the code running in Node.js extension host. It's compiled with `tsc`.
- - `client` is the UI code, built by Webpack, with access to the DOM.
- - `common` contains code shared between the extension and client.
-
-When you run `watch`, `compile`, or `dev`, we invoke both `tsc` and `webpack` to compile the extension and the client portion of the code.

notebook-renderer-sample/package.json

@@ -15,7 +15,7 @@
     "notebookRenderer": [
       {
         "id": "notebook-renderer-github-issues",
-        "entrypoint": "./out/client/index.js",
+        "entrypoint": "./out/index.js",
         "displayName": "GitHub Issues Plain Renderer",
         "mimeTypes": [
           "x-application/github-issues"
@@ -24,39 +24,24 @@
     ]
   },
   "scripts": {
-    "vscode:prepublish": "npm run compile && node out/test/checkNoTestProvider.js",
-    "compile": "npm run compile:extension && npm run compile:client",
-    "compile:extension": "tsc -b",
-    "compile:client": "webpack --mode production",
-    "lint": "eslint src --ext ts",
-    "watch": "concurrently -r \"npm:watch:*\"",
-    "watch:extension": "tsc -b --watch",
-    "watch:client": "webpack --mode development --watch",
-    "dev": "concurrently -r npm:watch:extension npm:watch:client",
-    "pretest": "npm run compile && npm run lint",
-    "test": "node ./out/test/runTest.js"
+    "vscode:prepublish": "webpack --mode production",
+    "webpack": "webpack --mode development",
+    "webpack-dev": "webpack --mode development --watch",
+    "test-compile": "tsc -p ./",
+    "lint": "eslint src --ext .ts,.tsx"
   },
   "devDependencies": {
-    "@types/glob": "^7.1.3",
-    "@types/mocha": "^8.2.2",
-    "@types/node": "^16.11.7",
-    "@types/vscode": "^1.58.0",
     "@types/vscode-notebook-renderer": "^1.57.8",
-    "@types/webpack-env": "^1.16.0",
+    "@types/webpack-env": "^1.17.0",
     "@typescript-eslint/eslint-plugin": "^5.19.0",
     "@typescript-eslint/parser": "^5.19.0",
-    "concurrently": "^5.3.0",
     "css-loader": "^4.2.0",
     "eslint": "^8.13.0",
-    "fork-ts-checker-webpack-plugin": "^5.0.14",
-    "glob": "^7.1.7",
-    "mocha": "^8.4.0",
     "style-loader": "^1.2.1",
     "ts-loader": "^9.2.2",
     "typescript": "^4.7.2",
     "vscode-notebook-error-overlay": "^1.0.1",
-    "vscode-test": "^1.5.2",
     "webpack": "^5.38.1",
     "webpack-cli": "^4.7.0"
   }
-}
+}

notebook-renderer-sample/src/client/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "../tsconfig-base.json",
-  "compilerOptions": {
-    // noEmit prevents the default tsc from building this--we use webpack instead
-    "noEmit": true,
-    "rootDir": ".",
-    "module": "esnext",
-    "lib": ["es2020", "dom"],
-    "types": ["webpack-env", "vscode-notebook-renderer"],
-  }
-}

notebook-renderer-sample/src/index.ts

@@ -3,6 +3,7 @@ import errorOverlay from 'vscode-notebook-error-overlay';
 import type { ActivationFunction } from 'vscode-notebook-renderer';
 
 // Fix the public path so that any async import()'s work as expected.
+// eslint-disable-next-line @typescript-eslint/naming-convention
 declare const __webpack_relative_entrypoint_to_root__: string;
 declare const scriptUrl: string;
 

notebook-renderer-sample/src/render.ts

@@ -58,9 +58,3 @@ export function render({ container, mime, value }: IRenderInfo) {
   container.appendChild(pre);
 }
 
-if (module.hot) {
-  module.hot.addDisposeHandler(() => {
-    // In development, this will be called before the renderer is reloaded. You
-    // can use this to clean up or stash any state.
-  });
-}

notebook-renderer-sample/src/tsconfig-base.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "commonjs",
-    "target": "ES2019",
-    "lib": [
-      "ES2019"
-    ],
-    "types": ["node"],
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "strict": true   /* enable all strict type-checking options */
-    /* Additional Checks */
-    // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
-    // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
-    // "noUnusedParameters": true,  /* Report errors on unused parameters. */
-  }
-}

notebook-renderer-sample/tsconfig.json

@@ -1,8 +1,12 @@
 {
-  "files": [],
-  "references": [
-    {
-      "path": "./src/client"
-    }
-  ]
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "out",
+    "module": "esnext",
+    "target": "es2020",
+    "lib": ["es2020", "dom"],
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "strict": true   /* enable all strict type-checking options */
+  }
 }

notebook-renderer-sample/webpack.config.js

@@ -1,4 +1,3 @@
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const { DefinePlugin } = require('webpack');
 const path = require('path');
 
@@ -8,9 +7,9 @@ const devServerPort = 8111;
 module.exports = (env, argv) => ({
   mode: argv.mode,
   devtool: argv.mode === 'production' ? false : 'inline-source-map',
-  entry: './src/client/index.ts',
+  entry: './src/index.ts',
   output: {
-    path: path.join(__dirname, 'out', 'client'),
+    path: path.join(__dirname, 'out'),
     filename: outputFilename,
     publicPath: '',
     libraryTarget: 'module',
@@ -28,7 +27,7 @@ module.exports = (env, argv) => ({
         test: /\.tsx?$/,
         loader: 'ts-loader',
         options: {
-          configFile: 'src/client/tsconfig.json',
+          configFile: path.join(__dirname, 'tsconfig.json'),
           // transpileOnly enables hot-module-replacement
           transpileOnly: true,
           compilerOptions: {
@@ -53,21 +52,7 @@ module.exports = (env, argv) => ({
       },
     ],
   },
-  devServer: {
-    port: devServerPort,
-    hot: true,
-    // Disable the host check, otherwise the bundle running in VS Code won't be
-    // able to connect to the dev server
-    disableHostCheck: true,
-    writeToDisk: true,
-    headers: { 'Access-Control-Allow-Origin': '*' },
-  },
   plugins: [
-    new ForkTsCheckerWebpackPlugin({
-      typescript: {
-        tsconfig: 'src/client/tsconfig.json',
-      },
-    }),
     new DefinePlugin({
       // Path from the output filename to the output directory
       __webpack_relative_entrypoint_to_root__: JSON.stringify(

webpack-sample/.vscode/launch.json

@@ -14,20 +14,6 @@
                 "${workspaceFolder}/dist/**/*.js"
             ],
             "preLaunchTask": "npm: webpack"
-        },
-        {
-            "name": "Extension Tests",
-            "type": "extensionHost",
-            "request": "launch",
-            "runtimeExecutable": "${execPath}",
-            "args": [
-                "--extensionDevelopmentPath=${workspaceFolder}",
-                "--extensionTestsPath=${workspaceFolder}/out/test"
-            ],
-            "outFiles": [
-                "${workspaceFolder}/out/test/**/*.js"
-            ],
-            "preLaunchTask": "npm: test-compile"
         }
     ]
 }