diff --git a/extensions/notebook-renderers/README.md b/extensions/notebook-renderers/README.md
new file mode 100644
index 00000000000..d87648c3ede
--- /dev/null
+++ b/extensions/notebook-renderers/README.md
@@ -0,0 +1,2 @@
+# Notebook Renderers
+
diff --git a/extensions/notebook-renderers/extension.webpack.config.js b/extensions/notebook-renderers/extension.webpack.config.js
new file mode 100644
index 00000000000..3e54b29f466
--- /dev/null
+++ b/extensions/notebook-renderers/extension.webpack.config.js
@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+//@ts-check
+
+'use strict';
+
+const withDefaults = require('../shared.webpack.config');
+
+module.exports = [
+ withDefaults({
+ context: __dirname,
+ resolve: {
+ mainFields: ['module', 'main']
+ },
+ entry: {
+ extension: './src/extension.ts',
+ }
+ })
+]
diff --git a/extensions/notebook-renderers/icon.png b/extensions/notebook-renderers/icon.png
new file mode 100644
index 00000000000..64dcf7d463c
Binary files /dev/null and b/extensions/notebook-renderers/icon.png differ
diff --git a/extensions/notebook-renderers/icon.svg b/extensions/notebook-renderers/icon.svg
new file mode 100644
index 00000000000..0eb0f4c103b
--- /dev/null
+++ b/extensions/notebook-renderers/icon.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
diff --git a/extensions/notebook-test/nteract/nteract.js b/extensions/notebook-renderers/nteract/nteract.js
similarity index 100%
rename from extensions/notebook-test/nteract/nteract.js
rename to extensions/notebook-renderers/nteract/nteract.js
diff --git a/extensions/notebook-renderers/nteract/readme.md b/extensions/notebook-renderers/nteract/readme.md
new file mode 100644
index 00000000000..db87544f01f
--- /dev/null
+++ b/extensions/notebook-renderers/nteract/readme.md
@@ -0,0 +1,144 @@
+# external renderers
+
+## Proposal
+
+Current proposal for how an extension contributes custom output rendering, the workflow is like
+
+* User open a notebook file, a notebook document provider parses the file and resovle it as `vscode.NotebookDocument`
+* Notebook document is opened in VS Code core renderer process
+* When the core renderer sees an output in a code cell, and there is a matched custom output renderer, we will ask the extension to provide the customed rendering result
+* The matched custom renderer extension converts `vscode.CellOutput` to a form which the core can understand and render. For example, an HTML fragment with scripts.
+* The HTML fragment is rendered in the webview and its inner scripts are evaluated.
+
+The key is how would the custom renderer converts `vscode.CellOutput` to a self explanatory HTML fragment, which can be rendered properly.
+
+## nteract
+
+Say we have a document which contains a plot output, which is usually stored in a notebook document as below
+
+```json
+{
+ "cells": [
+ {
+ "cell_type": "code",
+ "outputs": [
+ {
+ "data": {
+ "application/vnd.plotly.v1+json": {
+ "data": [
+ { "x": [1999, 2000, 2001, 2002], "y": [10, 15, 13, 17], "type": "scatter" },
+ { "x": [1999, 2000, 2001, 2002], "y": [16, 5, 11, 9], "type": "scatter" }
+ ],
+ "layout": {
+ "title": "Super Stuff",
+ "xaxis": { "title": "Year", "showgrid": false, "zeroline": false },
+ "yaxis": { "title": "Percent", "showline": false },
+ "height": "100px"
+ }
+ }
+ },
+ "metadata": {},
+ "output_type": "display_data"
+ }
+ ],
+ "source": [
+ "# render application/vnd.plotly.v1+json \n"
+ ]
+ }
+ ]
+}
+```
+
+After the document is loaded from Notebook Document providers, we will ask Notebook Output renderers to convert the output to outputs which the core understands.
+
+For example, an nteract output renderer extension can convert above output cell to
+
+```json
+{
+ "data": {
+ "text/html": [
+ "\n",
+ "\n",
+ "\n",
+ "
\n"
+ ]
+ },
+ "output_type": "display_data"
+}
+```
+
+The output after convertion contains
+
+* Output raw data, stored in a custom script tag `` (inspired by ipywidgets)
+* A javascript script tag which attempts to use `window.nteract` to render the output
+
+`window.nteract` is a global object initialized by a preloaded javascript file, contributed by the nteract renderer extension too. The nteract extension can archive this by inserting one additional plain HTML output
+
+```json
+outputs": [
+ {
+ "data": {
+ "text/html": [
+ ""
+ ]
+ },
+ "output_type": "display_data"
+ }
+]
+```
+
+Once loaded/evaluated, `nteract.js` will expose a global object `nteract`, with which we can render outputs in different mimetypes. `nteract.js` is a React application based on nteract transformers.
+
+After the `window.nteract` is initialized, the following outputs can call `window.nteract.renderTags()` to render newly inserted outputs.
+
+## ?
+
+* how does the output renderer/extension inject js dependencies? If it's through `text/html` output, how does it know if it's loaded or not?
+ * after a file is opened, it injects the js dependencies the first time an output will be rendered.
+* active/passive output rendering transform
+ * we can transform the outputs in the exthost in advance when a file is loaed from the notebook provider
+ * how will mimetype switcher work?
+ * we can do that only when we need to render an output which a mimetype registered by a notebook output rendering extension.
+ * perf?
+* how to decide what mimetype to render
+ * say an output contains three mimetypes, A, B and plaintext
+ * Extension C and handle A
+ * Extension D can handle A & B
+ * The core can render plaintext
+ - does kernel care?
+* perf. initial loading is usually slow as it needs to load/evaluate/build the dependencies
+ * for example, a small notebook file with a markdown output and a plot output.
+ * 165ms compiling script
+ * 45ms initialization
+ * 160ms load/evaluate plot.js
+ * 100ms render the plot
+ * It's not noticeable slower than running the scripts in a normal browser
+ * It's fast on ADS as there is no penalty for compiling scripts, evaluating plot scripts
+ * Howev
+
+
+next
+
+- update feature list ...
+
+
+- initialization scripts registration
+ - low running script loading
+- priority list from notebook provider
+- renderer switcher ?
+
+
+- mimetype switcher
diff --git a/extensions/notebook-renderers/package.json b/extensions/notebook-renderers/package.json
new file mode 100644
index 00000000000..5e74c86648d
--- /dev/null
+++ b/extensions/notebook-renderers/package.json
@@ -0,0 +1,42 @@
+{
+ "name": "notebook-renderers",
+ "displayName": "Notebook Test",
+ "description": "Notebook test for execution and outputs",
+ "extensionKind": [
+ "ui",
+ "workspace"
+ ],
+ "version": "1.0.0",
+ "publisher": "vscode",
+ "icon": "icon.png",
+ "enableProposedApi": true,
+ "license": "MIT",
+ "engines": {
+ "vscode": "^1.40.0"
+ },
+ "main": "./dist/extension",
+ "categories": [
+ "Other"
+ ],
+ "activationEvents": [
+ "*"
+ ],
+ "contributes": {
+ },
+ "scripts": {
+ "compile": "tsc -p ./",
+ "watch": "npm run build-lib && gulp watch-extension:notebook-renderers",
+ "build": "webpack-cli --config extension.webpack.config.js",
+ "build-lib": "webpack --mode production"
+ },
+ "dependencies": {
+ "typescript": "^3.6.4",
+ "vscode-extension-telemetry": "0.1.1",
+ "vscode-nls": "^4.0.0"
+ },
+ "devDependencies": {
+ "webpack-cli": "^3.3.10",
+ "css-loader": "^3.4.1",
+ "style-loader": "^1.1.2"
+ }
+}
diff --git a/extensions/notebook-renderers/src/extension.ts b/extensions/notebook-renderers/src/extension.ts
new file mode 100644
index 00000000000..008d3ac930c
--- /dev/null
+++ b/extensions/notebook-renderers/src/extension.ts
@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as vscode from 'vscode';
+import { NteractRenderer } from './nteractRenderer';
+
+export function activate(context: vscode.ExtensionContext) {
+ console.log(context.extensionPath);
+
+ context.subscriptions.push(vscode.window.registerNotebookOutputRenderer(
+ {
+ type: 'display_data',
+ subTypes: [
+ 'text/latex',
+ 'text/markdown',
+ 'application/json',
+ 'application/vnd.plotly.v1+json',
+ 'application/vnd.vega.v5+json'
+ ]
+ },
+ new NteractRenderer(context.extensionPath))
+ );
+}
+
diff --git a/extensions/notebook-test/src/nteractRenderer.ts b/extensions/notebook-renderers/src/nteractRenderer.ts
similarity index 100%
rename from extensions/notebook-test/src/nteractRenderer.ts
rename to extensions/notebook-renderers/src/nteractRenderer.ts
diff --git a/extensions/notebook-renderers/src/typings/ref.d.ts b/extensions/notebook-renderers/src/typings/ref.d.ts
new file mode 100644
index 00000000000..954bab971e3
--- /dev/null
+++ b/extensions/notebook-renderers/src/typings/ref.d.ts
@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/// ;
}
- export interface NotebookOutputFilter {
+ export interface NotebookOutputSelector {
type: string;
subTypes?: string[];
}
export interface NotebookOutputRenderer {
+ /**
+ *
+ * @returns HTML fragment. We can probably return `CellOutput` instead of string ?
+ */
render(document: NotebookDocument, cell: NotebookCell, output: CellOutput): string;
+ dependencies?: Uri[];
}
namespace window {
@@ -1487,7 +1492,7 @@ declare module 'vscode' {
provider: NotebookProvider
): Disposable;
- export function registerNotebookOutputRenderer(outputFilter: NotebookOutputFilter, renderer: NotebookOutputRenderer): Disposable;
+ export function registerNotebookOutputRenderer(outputSelector: NotebookOutputSelector, renderer: NotebookOutputRenderer): Disposable;
export let activeNotebookDocument: NotebookDocument | undefined;
}
diff --git a/src/vs/workbench/api/common/extHost.api.impl.ts b/src/vs/workbench/api/common/extHost.api.impl.ts
index 000e1ebe766..362a52c8ba8 100644
--- a/src/vs/workbench/api/common/extHost.api.impl.ts
+++ b/src/vs/workbench/api/common/extHost.api.impl.ts
@@ -580,7 +580,7 @@ export function createApiFactoryAndRegisterActors(accessor: ServicesAccessor): I
registerNotebookProvider: (viewType: string, provider: vscode.NotebookProvider) => {
return extHostNotebook.registerNotebookProvider(extension, viewType, provider);
},
- registerNotebookOutputRenderer: (outputFilter: vscode.NotebookOutputFilter, renderer: vscode.NotebookOutputRenderer) => {
+ registerNotebookOutputRenderer: (outputFilter: vscode.NotebookOutputSelector, renderer: vscode.NotebookOutputRenderer) => {
return extHostNotebook.registerNotebookOutputRenderer(extension, outputFilter, renderer);
},
get activeNotebookDocument(): vscode.NotebookDocument | undefined {
diff --git a/src/vs/workbench/api/common/extHostNotebook.ts b/src/vs/workbench/api/common/extHostNotebook.ts
index a72189748a7..6f0f56c45f7 100644
--- a/src/vs/workbench/api/common/extHostNotebook.ts
+++ b/src/vs/workbench/api/common/extHostNotebook.ts
@@ -91,12 +91,25 @@ export class ExtHostNotebookDocument implements vscode.NotebookDocument {
let store = this._cellDisposableMapping.get(cell.handle)!;
store.add(cell.onDidChangeOutputs(() => {
+ let outputs = cell.outputs;
+ if (outputs && outputs.length) {
+ outputs = outputs.map(output => {
+ let handler = this.renderingHandler.findBestMatchedRenderer(output);
+
+ if (handler) {
+ return handler.render(this, cell, output);
+ } else {
+ return output;
+ }
+ })
+ }
+
this._proxy.$updateNotebookCell(this.viewType, this.uri, {
handle: cell.handle,
source: cell.source,
language: cell.language,
cell_type: cell.cell_type,
- outputs: cell.outputs,
+ outputs: outputs,
isDirty: false
});
}));
@@ -290,7 +303,7 @@ export class ExtHostNotebookEditor implements vscode.NotebookEditor {
export class ExtHostNotebookOutputRenderer {
constructor(
- private filter: vscode.NotebookOutputFilter,
+ private filter: vscode.NotebookOutputSelector,
private renderer: vscode.NotebookOutputRenderer
) {
@@ -361,10 +374,13 @@ export class ExtHostNotebookController implements ExtHostNotebookShape, ExtHostN
public registerNotebookOutputRenderer(
extension: IExtensionDescription,
- filter: vscode.NotebookOutputFilter,
+ filter: vscode.NotebookOutputSelector,
renderer: vscode.NotebookOutputRenderer
- ) {
+ ): vscode.Disposable {
this._notebookOutputRenderers.push(new ExtHostNotebookOutputRenderer(filter, renderer));
+ return new VSCodeDisposable(() => {
+
+ })
}
findBestMatchedRenderer(output: vscode.CellOutput): ExtHostNotebookOutputRenderer | undefined {
@@ -400,7 +416,7 @@ export class ExtHostNotebookController implements ExtHostNotebookShape, ExtHostN
if (provider) {
if (!this._documents.has(URI.revive(uri).toString())) {
- let document = new ExtHostNotebookDocument(this._proxy, viewType, uri, this);
+ let document = new ExtHostNotebookDocument(this._proxy, viewType, URI.revive(uri), this);
await this._proxy.$createNotebookDocument(
document.handle,
viewType,
diff --git a/src/vs/workbench/contrib/notebook/browser/renderers/outputRenderer.ts b/src/vs/workbench/contrib/notebook/browser/renderers/outputRenderer.ts
index 2a156f44cca..914c7e44fb9 100644
--- a/src/vs/workbench/contrib/notebook/browser/renderers/outputRenderer.ts
+++ b/src/vs/workbench/contrib/notebook/browser/renderers/outputRenderer.ts
@@ -45,8 +45,18 @@ export class MimeTypeRenderer {
return this._renderers.get(type);
}
- static render(output: IOutput, container: HTMLElement, themeService: IThemeService, instantiationService: IInstantiationService, modelService: IModelService, modeService: IModeService, notebookHandler: NotebookHandler): IRenderOutput | null {
- return MimeTypeRenderer.instance.getRenderer(output.output_type)?.render(output, container, themeService, instantiationService, modelService, modeService, notebookHandler) ?? null;
+ static renderNoop(output: IOutput, container: HTMLElement): IRenderOutput {
+ const contentNode = document.createElement('p');
+
+ contentNode.innerText = `No renderer could be found for output. It has the following output type: ${output.output_type}`;
+ container.appendChild(contentNode);
+ return {
+ hasDynamicHeight: false
+ };
+ }
+
+ static render(output: IOutput, container: HTMLElement, themeService: IThemeService, instantiationService: IInstantiationService, modelService: IModelService, modeService: IModeService, notebookHandler: NotebookHandler): IRenderOutput {
+ return MimeTypeRenderer.instance.getRenderer(output.output_type)?.render(output, container, themeService, instantiationService, modelService, modeService, notebookHandler) ?? MimeTypeRenderer.renderNoop(output, container);
}
}
@@ -200,7 +210,22 @@ class RichDisplayRenderer implements IMimeRenderer {
const contentNode = document.createElement('p');
contentNode.innerText = str;
container.appendChild(contentNode);
+ } else {
+ const contentNode = document.createElement('p');
+ let mimeTypes = [];
+ for (const property in output.data) {
+ mimeTypes.push(property);
+ }
+
+ let mimeTypesMessage = mimeTypes.join(', ');
+
+ contentNode.innerText = `No renderer could be found for output. It has the following MIME types: ${mimeTypesMessage}`;
+ container.appendChild(contentNode);
}
+ } else {
+ const contentNode = document.createElement('p');
+ contentNode.innerText = `No data could be found for output.`;
+ container.appendChild(contentNode);
}
return {