Test: notebook renderer starter

[connor4312]

Refs: #95989

• anyOS @RMacfarlane
• anyOS @rebornix

Complexity: 4

---

Project: create a new render for the Github issue notebooks.

1. Install the [Github issue notebooks](https://github.com/microsoft/vscode-github-issue-notebooks extension

2. Clone the notebook-renderer-starter

3. Change it from rendering the application/json mime type to x-application/github-issues mime type. (find-and-replace works; yo code will do this for the user automatically, once released)

4. Develop the extension. Create or open a github issue notebook, render a code cell, and use the </> to select your renderer for the output.

   

5. Out of the box you'll get one big blob of text. Iterate and develop to make it beautiful!

The goal of this test item is to discover points of friction or ambiguity in the development of renderers. Please open issues if you run into problems, questions, or have ideas to make life easier for renderer development.

[rebornix]

fsevents node-gyp rebuild failed after nom install. I removed package-lock.json and added following to package.json to enforce fsevents to be built successfully.

  "resolutions": {
    "**/fsevents": "^1.2.9"
  }

[rebornix]

Considering this is still under development and the shape is not finalized yet, I'm going to use this comment for issues I ran into and my thoughts around it. We can create tracking issues for them later on.

• We may need some starters with web frameworks (react/vue)

Bugs

• hot reload doesn't take effect immediately always
  • if the source code is partially broken then the output is removed immediately, which makes sense.
  • after the source code is fixed, the output doesn't show up any more. Switching mime types can fix the problem. I guess it's because the output raw data is lost after hot reload.
• Debug: wish I can directly debug the output renderer code

[connor4312]

Debug: wish I can directly debug the output renderer code

Do you mean debug it from within VS Code?

[rebornix]

@connor4312 right, setting breakpoints in VS Code directly.

In overall the starter kit is really helpful. I built a xterm renderer with ease. Good work!

[DonJayamanne]

We may need some starters with web frameworks (react/vue)

@rebornix
As our Python extension uses react in our current notebook implementation I'd like to review possibility of re-using that in the VS Code notebooks.
Please could you share your thoughts on how you envisioned extension authors to use react in a renderer?
At the moment react portals is what I was planning on exploring (alternatives include ReactDOM.render and ReactDOMServer).
FYI - We haven't started looking into this yet (hopefully soon).

[connor4312]

@DonJayamanne I'm not super familiar with your existing setup, but as far as using React -- I actually use Preact in my experimental profiler notebooks, which I idealized into the renderer starter 🙂

The starter has a "render" function here: https://github.com/microsoft/vscode-notebook-renderer-starter/blob/a318bba5d08b91e33ceafbe593b1f1953a890ae6/src/client/render.ts#L11

To render my Preact component, I call Preact's render fuction inside of that. For React, you coulddo the same thing in ReactDOM: https://github.com/microsoft/vscode-js-profile-visualizer/blob/5dbf535d57ebc4538590a5cfae782abe8495e66d/packages/vscode-js-profile-notebook/src/client/render.tsx#L21

• Note that it's safe to re-render multiple times in the same DOM node in React, so there's nothing special I have to do to make React's hot module reloading work during development.
• I chose Preact for my notebook since it's very lightweight and sufficient for my needs. It keeps the distributed extension size at a mere ~50 KB.