Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/connor4312/az-notebook-hello-renderers
https://github.com/connor4312/az-notebook-hello-renderers
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/connor4312/az-notebook-hello-renderers
- Owner: connor4312
- Created: 2020-08-27T22:12:23.000Z (over 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 (about 2 months 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.