https://github.com/connor4312/az-notebook-hello-renderers

https://github.com/connor4312/az-notebook-hello-renderers

Last synced: 1 day ago
JSON representation

• Host: GitHub
• URL: https://github.com/connor4312/az-notebook-hello-renderers
• Owner: connor4312
• Created: 2020-08-27T22:12:23.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-11-12T18:59:19.000Z (about 4 years ago)
• Last Synced: 2024-10-25T22:21:34.736Z (18 days ago)
• Language: TypeScript
• Size: 208 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# az-notebook-hello-renderers

⚠️ Work-in-progress starter code for custom notebook renderers in VS Code. Expect this to change as notebooks matures. ⚠️

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

 - 🎨 CSS modules support

### Running this Sample

 1. `cd az-notebook-hello-renderers`

 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.