diff --git a/build/filters.js b/build/filters.js index 06678d29697..d0aa87355c3 100644 --- a/build/filters.js +++ b/build/filters.js @@ -43,6 +43,7 @@ module.exports.unicodeFilter = [ '!build/win32/**', '!extensions/markdown-language-features/notebook-out/*.js', '!extensions/markdown-math/notebook-out/**', + '!extensions/notebook-renderers/renderer-out/**', '!extensions/php-language-features/src/features/phpGlobalFunctions.ts', '!extensions/typescript-language-features/test-workspace/**', '!extensions/vscode-api-tests/testWorkspace/**', diff --git a/build/lib/extensions.js b/build/lib/extensions.js index bee77deefcc..3707c802df7 100644 --- a/build/lib/extensions.js +++ b/build/lib/extensions.js @@ -359,6 +359,7 @@ const webpackMediaConfigFiles = [ const esbuildMediaScripts = [ 'markdown-language-features/esbuild.js', 'markdown-math/esbuild.js', + 'notebook-renderers/esbuild.js' ]; async function webpackExtensions(taskName, isWatch, webpackConfigLocations) { const webpack = require('webpack'); diff --git a/build/lib/extensions.ts b/build/lib/extensions.ts index b75215b4ef2..7303b3b151a 100644 --- a/build/lib/extensions.ts +++ b/build/lib/extensions.ts @@ -444,6 +444,7 @@ const webpackMediaConfigFiles = [ const esbuildMediaScripts = [ 'markdown-language-features/esbuild.js', 'markdown-math/esbuild.js', + 'notebook-renderers/esbuild.js' ]; export async function webpackExtensions(taskName: string, isWatch: boolean, webpackConfigLocations: { configPath: string; outputRoot?: string }[]) { diff --git a/build/npm/dirs.js b/build/npm/dirs.js index 0f7ab5ff54e..4011050e466 100644 --- a/build/npm/dirs.js +++ b/build/npm/dirs.js @@ -33,6 +33,7 @@ exports.dirs = [ 'extensions/markdown-math', 'extensions/merge-conflict', 'extensions/microsoft-authentication', + 'extensions/notebook-renderers', 'extensions/npm', 'extensions/php-language-features', 'extensions/search-result', diff --git a/extensions/notebook-renderers/.gitignore b/extensions/notebook-renderers/.gitignore new file mode 100644 index 00000000000..e81e8443dd2 --- /dev/null +++ b/extensions/notebook-renderers/.gitignore @@ -0,0 +1 @@ +renderer-out diff --git a/extensions/notebook-renderers/README.md b/extensions/notebook-renderers/README.md new file mode 100644 index 00000000000..3fe79076f63 --- /dev/null +++ b/extensions/notebook-renderers/README.md @@ -0,0 +1,9 @@ +# Builtin Notebook Output Renderers for Visual Studio Code + +**Notice:** This extension is bundled with Visual Studio Code. It can be disabled but not uninstalled. + +## Features + +This extension provides the following notebook renderers for VS Code: + +- Image renderer for png, jpeg and gif diff --git a/extensions/notebook-renderers/esbuild.js b/extensions/notebook-renderers/esbuild.js new file mode 100644 index 00000000000..7d4b4ca0935 --- /dev/null +++ b/extensions/notebook-renderers/esbuild.js @@ -0,0 +1,32 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +const path = require('path'); +const esbuild = require('esbuild'); + +const args = process.argv.slice(2); + +const isWatch = args.indexOf('--watch') >= 0; + +let outputRoot = __dirname; +const outputRootIndex = args.indexOf('--outputRoot'); +if (outputRootIndex >= 0) { + outputRoot = args[outputRootIndex + 1]; +} + +const outDir = path.join(outputRoot, 'renderer-out'); + +esbuild.build({ + entryPoints: [ + path.join(__dirname, 'src', 'index.ts'), + ], + bundle: true, + minify: true, + sourcemap: false, + format: 'esm', + outdir: outDir, + platform: 'browser', + target: ['es2020'], + incremental: isWatch, +}).catch(() => process.exit(1)); diff --git a/extensions/notebook-renderers/package.json b/extensions/notebook-renderers/package.json new file mode 100644 index 00000000000..b1f507d7adb --- /dev/null +++ b/extensions/notebook-renderers/package.json @@ -0,0 +1,46 @@ +{ + "name": "builtin-notebook-renderers", + "displayName": "%displayName%", + "description": "%description%", + "publisher": "vscode", + "version": "1.0.0", + "license": "MIT", + "engines": { + "vscode": "^1.57.0" + }, + "capabilities": { + "virtualWorkspaces": true, + "untrustedWorkspaces": { + "supported": true + } + }, + "contributes": { + "notebookRenderer": [ + { + "id": "vscode-builtin-notebook-renderer", + "entrypoint": "./renderer-out/index.js", + "displayName": "VS Code Builtin Notebook Output Renderer", + "requiresMessaging": "never", + "mimeTypes": [ + "image/gif", + "image/png", + "image/jpeg" + ] + } + ] + }, + "scripts": { + "compile": "npm run build-notebook", + "watch": "node ./esbuild --watch", + "build-notebook": "node ./esbuild" + }, + "dependencies": { + }, + "devDependencies": { + "@types/vscode-notebook-renderer": "^1.60.0" + }, + "repository": { + "type": "git", + "url": "https://github.com/microsoft/vscode.git" + } +} diff --git a/extensions/notebook-renderers/package.nls.json b/extensions/notebook-renderers/package.nls.json new file mode 100644 index 00000000000..70b82dbe8ca --- /dev/null +++ b/extensions/notebook-renderers/package.nls.json @@ -0,0 +1,4 @@ +{ + "displayName": "Builtin Notebook Output Renderers", + "description": "Provides basic output renderers for notebooks" +} diff --git a/extensions/notebook-renderers/src/index.ts b/extensions/notebook-renderers/src/index.ts new file mode 100644 index 00000000000..c1419dca780 --- /dev/null +++ b/extensions/notebook-renderers/src/index.ts @@ -0,0 +1,42 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import type { ActivationFunction } from 'vscode-notebook-renderer'; + +interface IDisposable { + dispose(): void; +} + +export const activate: ActivationFunction = (_ctx) => { + const disposables = new Map(); + + return { + renderOutputItem: (outputInfo, element) => { + const blob = new Blob([outputInfo.data()], { type: outputInfo.mime }); + const src = URL.createObjectURL(blob); + const disposable = { + dispose: () => { + URL.revokeObjectURL(src); + } + }; + + const image = document.createElement('img'); + image.src = src; + const display = document.createElement('div'); + display.classList.add('display'); + display.appendChild(image); + element.appendChild(display); + + disposables.set(outputInfo.id, disposable); + }, + disposeOutputItem: (id: string | undefined) => { + if (id) { + disposables.get(id)?.dispose(); + } else { + disposables.forEach(d => d.dispose()); + } + } + }; +}; diff --git a/extensions/notebook-renderers/tsconfig.json b/extensions/notebook-renderers/tsconfig.json new file mode 100644 index 00000000000..2032bf87b0d --- /dev/null +++ b/extensions/notebook-renderers/tsconfig.json @@ -0,0 +1,15 @@ +{ + "extends": "../tsconfig.base.json", + "compilerOptions": { + "outDir": "./out", + "lib": [ + "dom" + ] + }, + "include": [ + "src/**/*", + "../../src/vscode-dts/vscode.d.ts", + "../../src/vscode-dts/vscode.proposed.notebookEditor.d.ts", + "../../src/vscode-dts/vscode.proposed.notebookEditorEdit.d.ts", + ] +} diff --git a/extensions/notebook-renderers/yarn.lock b/extensions/notebook-renderers/yarn.lock new file mode 100644 index 00000000000..06ac4e135c3 --- /dev/null +++ b/extensions/notebook-renderers/yarn.lock @@ -0,0 +1,8 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +"@types/vscode-notebook-renderer@^1.60.0": + version "1.60.0" + resolved "https://registry.yarnpkg.com/@types/vscode-notebook-renderer/-/vscode-notebook-renderer-1.60.0.tgz#8a67d561f48ddf46a95dfa9f712a79c72c7b8f7a" + integrity sha512-u7TD2uuEZTVuitx0iijOJdKI0JLiQP6PsSBSRy2XmHXUOXcp5p1S56NrjOEDoF+PIHd3NL3eO6KTRSf5nukDqQ== diff --git a/src/vs/workbench/contrib/notebook/browser/view/output/transforms/richTransform.ts b/src/vs/workbench/contrib/notebook/browser/view/output/transforms/richTransform.ts index ee023ff676f..3958db4e7d8 100644 --- a/src/vs/workbench/contrib/notebook/browser/view/output/transforms/richTransform.ts +++ b/src/vs/workbench/contrib/notebook/browser/view/output/transforms/richTransform.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as DOM from 'vs/base/browser/dom'; -import { Disposable, DisposableStore, toDisposable } from 'vs/base/common/lifecycle'; +import { Disposable, DisposableStore } from 'vs/base/common/lifecycle'; import { Mimes } from 'vs/base/common/mime'; import { URI } from 'vs/base/common/uri'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; @@ -210,42 +210,8 @@ class HTMLRendererContrib extends Disposable implements IOutputTransformContribu } } -class ImgRendererContrib extends Disposable implements IOutputTransformContribution { - getType() { - return RenderOutputType.Mainframe; - } - - getMimetypes() { - return ['image/png', 'image/jpeg', 'image/gif']; - } - - constructor( - public notebookEditor: INotebookDelegateForOutput, - ) { - super(); - } - - render(output: ICellOutputViewModel, item: IOutputItemDto, container: HTMLElement, notebookUri: URI): IRenderOutput { - const disposable = new DisposableStore(); - - const blob = new Blob([item.data.buffer], { type: item.mime }); - const src = URL.createObjectURL(blob); - disposable.add(toDisposable(() => URL.revokeObjectURL(src))); - - const image = document.createElement('img'); - image.src = src; - const display = document.createElement('div'); - display.classList.add('display'); - display.appendChild(image); - container.appendChild(display); - - return { type: RenderOutputType.Mainframe, disposable }; - } -} - OutputRendererRegistry.registerOutputTransform(JavaScriptRendererContrib); OutputRendererRegistry.registerOutputTransform(HTMLRendererContrib); -OutputRendererRegistry.registerOutputTransform(ImgRendererContrib); OutputRendererRegistry.registerOutputTransform(PlainTextRendererContrib); OutputRendererRegistry.registerOutputTransform(JSErrorRendererContrib); OutputRendererRegistry.registerOutputTransform(StreamRendererContrib); diff --git a/src/vs/workbench/contrib/notebook/common/notebookCommon.ts b/src/vs/workbench/contrib/notebook/common/notebookCommon.ts index 995d12a7b28..2e9943d49af 100644 --- a/src/vs/workbench/contrib/notebook/common/notebookCommon.ts +++ b/src/vs/workbench/contrib/notebook/common/notebookCommon.ts @@ -598,8 +598,6 @@ type MimeTypeInfo = { const _mimeTypeInfo = new Map([ ['application/javascript', { supportedByCore: true }], - ['image/png', { alwaysSecure: true, supportedByCore: true }], - ['image/jpeg', { alwaysSecure: true, supportedByCore: true }], ['image/git', { alwaysSecure: true, supportedByCore: true }], ['image/svg+xml', { supportedByCore: true }], ['application/json', { alwaysSecure: true, supportedByCore: true }],