@theia/plugin-ext 1.45.1 → 1.46.0-next.106

package/src/main/browser/notebooks/notebook-kernels-main.ts

@@ -23,7 +23,10 @@ import { UriComponents } from '@theia/core/lib/common/uri';
 import { LanguageService } from '@theia/core/lib/browser/language-service';
 import { CellExecuteUpdateDto, CellExecutionCompleteDto, MAIN_RPC_CONTEXT, NotebookKernelDto, NotebookKernelsExt, NotebookKernelsMain } from '../../../common';
 import { RPCProtocol } from '../../../common/rpc-protocol';
-import { CellExecution, NotebookExecutionStateService, NotebookKernelChangeEvent, NotebookKernelService, NotebookService } from '@theia/notebook/lib/browser';
+import {
+    CellExecution, NotebookEditorWidgetService, NotebookExecutionStateService,
+    NotebookKernelChangeEvent, NotebookKernelService, NotebookService
+} from '@theia/notebook/lib/browser';
 import { combinedDisposable } from '@theia/monaco-editor-core/esm/vs/base/common/lifecycle';
 import { interfaces } from '@theia/core/shared/inversify';
 import { NotebookKernelSourceAction } from '@theia/notebook/lib/common';
@@ -54,7 +57,7 @@ abstract class NotebookKernel {
         return this.preloads.map(p => p.provides).flat();
     }
 
-    constructor(data: NotebookKernelDto, private languageService: LanguageService) {
+    constructor(public readonly handle: number, data: NotebookKernelDto, private languageService: LanguageService) {
         this.id = data.id;
         this.viewType = data.notebookType;
         this.extensionId = data.extensionId;
@@ -65,6 +68,7 @@ abstract class NotebookKernel {
         this.detail = data.detail;
         this.supportedLanguages = (data.supportedLanguages && data.supportedLanguages.length > 0) ? data.supportedLanguages : languageService.languages.map(lang => lang.id);
         this.implementsExecutionOrder = data.supportsExecutionOrder ?? false;
+        this.localResourceRoot = URI.fromComponents(data.extensionLocation);
         this.preloads = data.preloads?.map(u => ({ uri: URI.fromComponents(u.uri), provides: u.provides })) ?? [];
     }
 
@@ -125,6 +129,7 @@ export class NotebookKernelsMainImpl implements NotebookKernelsMain {
     private notebookService: NotebookService;
     private languageService: LanguageService;
     private notebookExecutionStateService: NotebookExecutionStateService;
+    private notebookEditorWidgetService: NotebookEditorWidgetService;
 
     private readonly executions = new Map<number, CellExecution>();
 
@@ -138,10 +143,46 @@ export class NotebookKernelsMainImpl implements NotebookKernelsMain {
         this.notebookExecutionStateService = container.get(NotebookExecutionStateService);
         this.notebookService = container.get(NotebookService);
         this.languageService = container.get(LanguageService);
+        this.notebookEditorWidgetService = container.get(NotebookEditorWidgetService);
+
+        this.notebookEditorWidgetService.onDidAddNotebookEditor(editor => {
+            editor.onDidRecieveKernelMessage(async message => {
+                const kernel = this.notebookKernelService.getSelectedOrSuggestedKernel(editor.model!);
+                if (kernel) {
+                    this.proxy.$acceptKernelMessageFromRenderer(kernel.handle, editor.id, message);
+                }
+            });
+        });
     }
 
-    $postMessage(handle: number, editorId: string | undefined, message: unknown): Promise<boolean> {
-        throw new Error('Method not implemented.');
+    async $postMessage(handle: number, editorId: string | undefined, message: unknown): Promise<boolean> {
+        const tuple = this.kernels.get(handle);
+        if (!tuple) {
+            throw new Error('kernel already disposed');
+        }
+        const [kernel] = tuple;
+        let didSend = false;
+        for (const editor of this.notebookEditorWidgetService.getNotebookEditors()) {
+            if (!editor.model) {
+                continue;
+            }
+            if (this.notebookKernelService.getMatchingKernel(editor.model).selected !== kernel) {
+                // different kernel
+                continue;
+            }
+            if (editorId === undefined) {
+                // all editors
+                editor.postKernelMessage(message);
+                didSend = true;
+            } else if (editor.id === editorId) {
+                // selected editors
+                editor.postKernelMessage(message);
+                didSend = true;
+                break;
+            }
+        }
+        return didSend;
+
     }
 
     async $addKernel(handle: number, data: NotebookKernelDto): Promise<void> {
@@ -153,7 +194,7 @@ export class NotebookKernelsMainImpl implements NotebookKernelsMain {
             async cancelNotebookCellExecution(uri: URI, handles: number[]): Promise<void> {
                 await that.proxy.$cancelCells(handle, uri.toComponents(), handles);
             }
-        }(data, this.languageService);
+        }(handle, data, this.languageService);
 
         const listener = this.notebookKernelService.onDidChangeSelectedKernel(e => {
             if (e.oldKernel === kernel.id) {

package/src/main/browser/notebooks/notebooks-main.ts

@@ -19,11 +19,13 @@ import { BinaryBuffer } from '@theia/core/lib/common/buffer';
 import { NotebookCellStatusBarItem, NotebookData, TransientOptions } from '@theia/notebook/lib/common';
 import { NotebookService } from '@theia/notebook/lib/browser';
 import { Disposable } from '@theia/plugin';
-import { MAIN_RPC_CONTEXT, NotebooksExt, NotebooksMain } from '../../../common';
+import { CommandRegistryMain, MAIN_RPC_CONTEXT, NotebooksExt, NotebooksMain } from '../../../common';
 import { RPCProtocol } from '../../../common/rpc-protocol';
 import { NotebookDto } from './notebook-dto';
 import { UriComponents } from '@theia/core/lib/common/uri';
 import { HostedPluginSupport } from '../../../hosted/browser/hosted-plugin';
+import { NotebookModel } from '@theia/notebook/lib/browser/view-model/notebook-model';
+import { interfaces } from '@theia/core/shared/inversify';
 
 export interface NotebookCellStatusBarItemList {
     items: NotebookCellStatusBarItem[];
@@ -38,20 +40,33 @@ export interface NotebookCellStatusBarItemProvider {
 
 export class NotebooksMainImpl implements NotebooksMain {
 
-    private readonly disposables = new DisposableCollection();
+    protected readonly disposables = new DisposableCollection();
 
-    private readonly proxy: NotebooksExt;
-    private readonly notebookSerializer = new Map<number, Disposable>();
-    private readonly notebookCellStatusBarRegistrations = new Map<number, Disposable>();
+    protected notebookService: NotebookService;
+
+    protected readonly proxy: NotebooksExt;
+    protected readonly notebookSerializer = new Map<number, Disposable>();
+    protected readonly notebookCellStatusBarRegistrations = new Map<number, Disposable>();
 
     constructor(
         rpc: RPCProtocol,
-        private notebookService: NotebookService,
-        plugins: HostedPluginSupport
+        container: interfaces.Container,
+        commands: CommandRegistryMain
     ) {
+        this.notebookService = container.get(NotebookService);
+        const plugins = container.get(HostedPluginSupport);
+
         this.proxy = rpc.getProxy(MAIN_RPC_CONTEXT.NOTEBOOKS_EXT);
-        notebookService.onWillUseNotebookSerializer(async event => plugins.activateByNotebookSerializer(event));
-        notebookService.markReady();
+        this.notebookService.onWillUseNotebookSerializer(async event => plugins.activateByNotebookSerializer(event));
+        this.notebookService.markReady();
+        commands.registerArgumentProcessor({
+            processArgument: arg => {
+                if (arg instanceof NotebookModel) {
+                    return arg.uri;
+                }
+                return arg;
+            }
+        });
     }
 
     dispose(): void {

package/src/main/browser/notebooks/renderers/cell-output-webview.tsx

@@ -20,8 +20,11 @@
 
 import * as React from '@theia/core/shared/react';
 import { inject, injectable, interfaces, postConstruct } from '@theia/core/shared/inversify';
-import { NotebookRendererMessagingService, CellOutputWebview, NotebookRendererRegistry, NotebookEditorWidgetService, NotebookCellOutputsSplice } from '@theia/notebook/lib/browser';
-import { v4 } from 'uuid';
+import { generateUuid } from '@theia/core/lib/common/uuid';
+import {
+    NotebookRendererMessagingService, CellOutputWebview, NotebookRendererRegistry,
+    NotebookEditorWidgetService, NotebookCellOutputsSplice, NOTEBOOK_EDITOR_ID_PREFIX, NotebookKernelService, NotebookEditorWidget
+} from '@theia/notebook/lib/browser';
 import { NotebookCellModel } from '@theia/notebook/lib/browser/view-model/notebook-cell-model';
 import { WebviewWidget } from '../../webview/webview';
 import { Message, WidgetManager } from '@theia/core/lib/browser';
@@ -31,12 +34,15 @@ import { ChangePreferredMimetypeMessage, FromWebviewMessage, OutputChangedMessag
 import { CellUri } from '@theia/notebook/lib/common';
 import { Disposable, DisposableCollection, nls, QuickPickService } from '@theia/core';
 import { NotebookCellOutputModel } from '@theia/notebook/lib/browser/view-model/notebook-cell-output-model';
+import { NotebookModel } from '@theia/notebook/lib/browser/view-model/notebook-model';
 
 const CellModel = Symbol('CellModel');
+const Notebook = Symbol('NotebookModel');
 
-export function createCellOutputWebviewContainer(ctx: interfaces.Container, cell: NotebookCellModel): interfaces.Container {
+export function createCellOutputWebviewContainer(ctx: interfaces.Container, cell: NotebookCellModel, notebook: NotebookModel): interfaces.Container {
     const child = ctx.createChild();
     child.bind(CellModel).toConstantValue(cell);
+    child.bind(Notebook).toConstantValue(notebook);
     child.bind(CellOutputWebviewImpl).toSelf().inSingletonScope();
     return child;
 }
@@ -50,6 +56,9 @@ export class CellOutputWebviewImpl implements CellOutputWebview, Disposable {
     @inject(CellModel)
     protected readonly cell: NotebookCellModel;
 
+    @inject(Notebook)
+    protected readonly notebook: NotebookModel;
+
     @inject(WidgetManager)
     protected readonly widgetManager: WidgetManager;
 
@@ -62,22 +71,48 @@ export class CellOutputWebviewImpl implements CellOutputWebview, Disposable {
     @inject(NotebookEditorWidgetService)
     protected readonly notebookEditorWidgetService: NotebookEditorWidgetService;
 
+    @inject(NotebookKernelService)
+    protected readonly notebookKernelService: NotebookKernelService;
+
     @inject(QuickPickService)
     protected readonly quickPickService: QuickPickService;
 
-    readonly id = v4();
+    readonly id = generateUuid();
+
+    protected editor: NotebookEditorWidget | undefined;
 
     protected readonly elementRef = React.createRef<HTMLDivElement>();
     protected outputPresentationListeners: DisposableCollection = new DisposableCollection();
 
     protected webviewWidget: WebviewWidget;
 
+    protected toDispose = new DisposableCollection();
+
     @postConstruct()
     protected async init(): Promise<void> {
-        this.cell.onDidChangeOutputs(outputChange => this.updateOutput(outputChange));
-        this.cell.onDidChangeOutputItems(output => {
-            this.updateOutput({start: this.cell.outputs.findIndex(o => o.outputId === output.outputId), deleteCount: 1, newOutputs: [output]});
-        });
+        this.editor = this.notebookEditorWidgetService.getNotebookEditor(NOTEBOOK_EDITOR_ID_PREFIX + CellUri.parse(this.cell.uri)?.notebook);
+
+        this.toDispose.push(this.cell.onDidChangeOutputs(outputChange => this.updateOutput(outputChange)));
+        this.toDispose.push(this.cell.onDidChangeOutputItems(output => {
+            this.updateOutput({ start: this.cell.outputs.findIndex(o => o.outputId === output.outputId), deleteCount: 1, newOutputs: [output] });
+        }));
+
+        if (this.editor) {
+            this.toDispose.push(this.editor.onDidPostKernelMessage(message => {
+                this.webviewWidget.sendMessage({
+                    type: 'customKernelMessage',
+                    message
+                });
+            }));
+
+            this.toDispose.push(this.editor.onPostRendererMessage(messageObj => {
+                this.webviewWidget.sendMessage({
+                    type: 'customRendererMessage',
+                    ...messageObj
+                });
+            }));
+
+        }
 
         this.webviewWidget = await this.widgetManager.getOrCreateWidget(WebviewWidget.FACTORY_ID, { id: this.id });
         this.webviewWidget.setContentOptions({ allowScripts: true });
@@ -106,35 +141,34 @@ export class CellOutputWebviewImpl implements CellOutputWebview, Disposable {
     }
 
     updateOutput(update: NotebookCellOutputsSplice): void {
-        if (this.cell.outputs.length > 0) {
-            if (this.webviewWidget.isHidden) {
-                this.webviewWidget.show();
-            }
-
-            this.outputPresentationListeners.dispose();
-            this.outputPresentationListeners = new DisposableCollection();
-            for (const output of this.cell.outputs) {
-                this.outputPresentationListeners.push(output.onRequestOutputPresentationChange(() => this.requestOutputPresentationUpdate(output)));
-            }
-
-            const updateOutputMessage: OutputChangedMessage = {
-                type: 'outputChanged',
-                newOutputs: update.newOutputs.map(output => ({
-                    id: output.outputId,
-                    items: output.outputs.map(item => ({ mime: item.mime, data: item.data.buffer })),
-                    metadata: output.metadata
-                })),
-                deletedOutputIds: this.cell.outputs.slice(update.start, update.start + update.deleteCount).map(output => output.outputId)
-            };
-
-            this.webviewWidget.sendMessage(updateOutputMessage);
+        if (this.webviewWidget.isHidden) {
+            this.webviewWidget.show();
+        }
+
+        this.outputPresentationListeners.dispose();
+        this.outputPresentationListeners = new DisposableCollection();
+        for (const output of this.cell.outputs) {
+            this.outputPresentationListeners.push(output.onRequestOutputPresentationChange(() => this.requestOutputPresentationUpdate(output)));
         }
+
+        const updateOutputMessage: OutputChangedMessage = {
+            type: 'outputChanged',
+            newOutputs: update.newOutputs.map(output => ({
+                id: output.outputId,
+                items: output.outputs.map(item => ({ mime: item.mime, data: item.data.buffer })),
+                metadata: output.metadata
+            })),
+            deleteStart: update.start,
+            deleteCount: update.deleteCount
+        };
+
+        this.webviewWidget.sendMessage(updateOutputMessage);
     }
 
     private async requestOutputPresentationUpdate(output: NotebookCellOutputModel): Promise<void> {
         const selectedMime = await this.quickPickService.show(
-            output.outputs.map(item => ({label: item.mime})),
-            {description: nls.localizeByDefault('Select mimetype to render for current output' )});
+            output.outputs.map(item => ({ label: item.mime })),
+            { description: nls.localizeByDefault('Select mimetype to render for current output') });
         if (selectedMime) {
             this.webviewWidget.sendMessage({
                 type: 'changePreferredMimetype',
@@ -145,35 +179,52 @@ export class CellOutputWebviewImpl implements CellOutputWebview, Disposable {
     }
 
     private handleWebviewMessage(message: FromWebviewMessage): void {
+        if (!this.editor) {
+            throw new Error('No editor found for cell output webview');
+        }
+
         switch (message.type) {
             case 'initialized':
-                this.updateOutput({newOutputs: this.cell.outputs, start: 0, deleteCount: 0});
+                this.updateOutput({ newOutputs: this.cell.outputs, start: 0, deleteCount: 0 });
                 break;
             case 'customRendererMessage':
-                this.messagingService.getScoped('').postMessage(message.rendererId, message.message);
+                this.messagingService.getScoped(this.editor.id).postMessage(message.rendererId, message.message);
                 break;
             case 'didRenderOutput':
                 this.webviewWidget.setIframeHeight(message.contentHeight + 5);
                 break;
             case 'did-scroll-wheel':
-                this.notebookEditorWidgetService.getNotebookEditor(`notebook:${CellUri.parse(this.cell.uri)?.notebook}`)?.node.scrollBy(message.deltaX, message.deltaY);
+                this.editor.node.getElementsByClassName('theia-notebook-viewport')[0].children[0].scrollBy(message.deltaX, message.deltaY);
+                break;
+            case 'customKernelMessage':
+                this.editor.recieveKernelMessage(message.message);
                 break;
         }
     }
 
+    getPreloads(): string[] {
+        const kernel = this.notebookKernelService.getSelectedOrSuggestedKernel(this.notebook);
+        const kernelPreloads = kernel?.preloadUris.map(uri => uri.toString()) ?? [];
+
+        const staticPreloads = this.notebookRendererRegistry.staticNotebookPreloads
+            .filter(preload => preload.type === this.notebook.viewType)
+            .map(preload => preload.entrypoint);
+        return kernelPreloads.concat(staticPreloads);
+    }
+
     private async createWebviewContent(): Promise<string> {
         const isWorkspaceTrusted = await this.workspaceTrustService.getWorkspaceTrust();
         const preloads = this.preloadsScriptString(isWorkspaceTrusted);
         const content = `
-            <html>
-                <head>
-                    <meta charset="UTF-8">
-                </head>
-                <body>
-                    <script type="module">${preloads}</script>
-                </body>
-            </html>
-        `;
+                <html>
+                    <head>
+                        <meta charset="UTF-8">
+                    </head>
+                    <body>
+                        <script type="module">${preloads}</script>
+                    </body>
+                </html>
+                `;
         return content;
     }
 
@@ -185,16 +236,18 @@ export class CellOutputWebviewImpl implements CellOutputWebview, Disposable {
                 lineLimit: 30,
                 outputScrolling: false,
                 outputWordWrap: false,
-            }
+            },
+            staticPreloadsData: this.getPreloads()
         };
         // TS will try compiling `import()` in webviewPreloads, so use a helper function instead
         // of using `import(...)` directly
         return `
             const __import = (x) => import(x);
-            (${outputWebviewPreload})(JSON.parse(decodeURIComponent("${encodeURIComponent(JSON.stringify(ctx))}")))`;
+                (${outputWebviewPreload})(JSON.parse(decodeURIComponent("${encodeURIComponent(JSON.stringify(ctx))}")))`;
     }
 
     dispose(): void {
+        this.toDispose.dispose();
         this.outputPresentationListeners.dispose();
         this.webviewWidget.dispose();
     }

package/src/main/browser/notebooks/renderers/output-webview-internal.ts

@@ -58,6 +58,16 @@ export interface PreloadContext {
     readonly isWorkspaceTrusted: boolean;
     readonly rendererData: readonly webviewCommunication.RendererMetadata[];
     readonly renderOptions: RenderOptions;
+    readonly staticPreloadsData: readonly string[];
+}
+
+interface KernelPreloadContext {
+    readonly onDidReceiveKernelMessage: Event<unknown>;
+    postKernelMessage(data: unknown): void;
+}
+
+interface KernelPreloadModule {
+    activate(ctx: KernelPreloadContext): Promise<void> | void;
 }
 
 export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
@@ -98,6 +108,36 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
 
     const settingChange: EmitterLike<RenderOptions> = createEmitter<RenderOptions>();
 
+    const onDidReceiveKernelMessage = createEmitter<unknown>();
+
+    function createKernelContext(): KernelPreloadContext {
+        return Object.freeze({
+            onDidReceiveKernelMessage: onDidReceiveKernelMessage.event,
+            postKernelMessage: (data: unknown) => {
+                theia.postMessage({ type: 'customKernelMessage', message: data });
+            }
+        });
+    }
+
+    async function runKernelPreload(url: string): Promise<void> {
+        try {
+            return activateModuleKernelPreload(url);
+        } catch (e) {
+            console.error(e);
+            throw e;
+        }
+    }
+
+    async function activateModuleKernelPreload(url: string): Promise<void> {
+        const baseUri = window.location.href.replace(/\/webview\/index\.html.*/, '');
+        const module: KernelPreloadModule = (await __import(`${baseUri}/${url}`)) as KernelPreloadModule;
+        if (!module.activate) {
+            console.error(`Notebook preload '${url}' was expected to be a module but it does not export an 'activate' function`);
+            return;
+        }
+        return module.activate(createKernelContext());
+    }
+
     class Output {
         readonly outputId: string;
         renderedItem?: rendererApi.OutputItem;
@@ -114,7 +154,7 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
             this.element.style.paddingRight = '10px';
             this.element.id = output.id;
             document.body.appendChild(this.element);
-
+            this.outputId = output.id;
             this.allItems = items;
         }
 
@@ -134,7 +174,7 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
         }
     }
 
-    const outputs = new Map</* outputId */string, Output>();
+    const outputs: Output[] = [];
 
     class Renderer {
 
@@ -160,6 +200,10 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
             if (this.rendererApi) {
                 return this.rendererApi;
             }
+
+            // Preloads need to be loaded before loading renderers.
+            await kernelPreloads.waitForAllCurrent();
+
             const baseUri = window.location.href.replace(/\/webview\/index\.html.*/, '');
             const rendererModule = await __import(`${baseUri}/${this.data.entrypoint.uri}`) as { activate: rendererApi.ActivationFunction };
             this.rendererApi = await rendererModule.activate(this.createRendererContext());
@@ -196,7 +240,9 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
 
             if (this.data.requiresMessaging) {
                 context.onDidReceiveMessage = this.onMessageEvent.event;
-                context.postMessage = message => theia.postMessage({ type: 'customRendererMessage', rendererId: this.data.id, message });
+                context.postMessage = message => {
+                    theia.postMessage({ type: 'customRendererMessage', rendererId: this.data.id, message });
+                };
             }
 
             return Object.freeze(context);
@@ -314,10 +360,17 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
             // we need to check for all images are loaded. Otherwise we can't determine the correct height of the output
             const images = Array.from(document.images);
             if (images.length > 0) {
-                Promise.all(images.filter(img => !img.complete).map(img => new Promise(resolve => { img.onload = img.onerror = resolve; }))).then(() =>
-                    theia.postMessage(<webviewCommunication.OnDidRenderOutput>{ type: 'didRenderOutput', contentHeight: document.body.clientHeight }));
+                Promise.all(images.filter(img => !img.complete).map(img => new Promise(resolve => { img.onload = img.onerror = resolve; }))).then(() => {
+                    theia.postMessage(<webviewCommunication.OnDidRenderOutput>{ type: 'didRenderOutput', contentHeight: document.body.clientHeight });
+                    new ResizeObserver(() =>
+                        theia.postMessage(<webviewCommunication.OnDidRenderOutput>{ type: 'didRenderOutput', contentHeight: document.body.clientHeight }))
+                        .observe(document.body);
+                });
             } else {
                 theia.postMessage(<webviewCommunication.OnDidRenderOutput>{ type: 'didRenderOutput', contentHeight: document.body.clientHeight });
+                new ResizeObserver(() =>
+                    theia.postMessage(<webviewCommunication.OnDidRenderOutput>{ type: 'didRenderOutput', contentHeight: document.body.clientHeight }))
+                    .observe(document.body);
             }
 
         }
@@ -378,15 +431,50 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
         }
     }();
 
-    function clearOutput(outputId: string): void {
-        outputs.get(outputId)?.clear();
-        outputs.delete(outputId);
-        document.getElementById(outputId)?.remove();
+    const kernelPreloads = new class {
+        private readonly preloads = new Map<string /* uri */, Promise<unknown>>();
+
+        /**
+         * Returns a promise that resolves when the given preload is activated.
+         */
+        public waitFor(uri: string): Promise<unknown> {
+            return this.preloads.get(uri) || Promise.resolve(new Error(`Preload not ready: ${uri}`));
+        }
+
+        /**
+         * Loads a preload.
+         * @param uri URI to load from
+         * @param originalUri URI to show in an error message if the preload is invalid.
+         */
+        public load(uri: string): Promise<unknown> {
+            const promise = Promise.all([
+                runKernelPreload(uri),
+                this.waitForAllCurrent(),
+            ]);
+
+            this.preloads.set(uri, promise);
+            return promise;
+        }
+
+        /**
+         * Returns a promise that waits for all currently-registered preloads to
+         * activate before resolving.
+         */
+        public waitForAllCurrent(): Promise<unknown[]> {
+            return Promise.all([...this.preloads.values()].map(p => p.catch(err => err)));
+        }
+    };
+
+    await Promise.all(ctx.staticPreloadsData.map(preload => kernelPreloads.load(preload)));
+
+    function clearOutput(output: Output): void {
+        output.clear();
+        output.element.remove();
     }
 
     function outputsChanged(changedEvent: webviewCommunication.OutputChangedMessage): void {
-        for (const outputId of changedEvent.deletedOutputIds ?? []) {
-            clearOutput(outputId);
+        for (const output of outputs.splice(changedEvent.deleteStart ?? 0, changedEvent.deleteCount ?? 0)) {
+            clearOutput(output);
         }
 
         for (const outputData of changedEvent.newOutputs ?? []) {
@@ -410,7 +498,7 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
             }));
 
             const output = new Output(outputData, apiItems);
-            outputs.set(outputData.id, output);
+            outputs.push(output);
 
             renderers.render(output, undefined, undefined, new AbortController().signal);
         }
@@ -454,7 +542,6 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
 
     window.addEventListener('message', async rawEvent => {
         const event = rawEvent as ({ data: webviewCommunication.ToWebviewMessage });
-
         switch (event.data.type) {
             case 'updateRenderers':
                 renderers.updateRendererData(event.data.rendererData);
@@ -466,9 +553,22 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
                 renderers.getRenderer(event.data.rendererId)?.receiveMessage(event.data.message);
                 break;
             case 'changePreferredMimetype':
-                clearOutput(event.data.outputId);
-                renderers.render(outputs.get(event.data.outputId)!, event.data.mimeType, undefined, new AbortController().signal);
+                const outputId = event.data.outputId;
+                const index = outputs.findIndex(output => output.outputId === outputId);
+                outputs.splice(index, 1);
+                clearOutput(outputs.splice(index, 1)[0]);
+                renderers.render(outputs[index], event.data.mimeType, undefined, new AbortController().signal);
                 break;
+            case 'customKernelMessage':
+                onDidReceiveKernelMessage.fire(event.data.message);
+                break;
+            case 'preload': {
+                const resources = event.data.resources;
+                for (const uri of resources) {
+                    kernelPreloads.load(uri);
+                }
+                break;
+            }
         }
     });
     window.addEventListener('wheel', handleWheel);

package/src/main/browser/notebooks/renderers/webview-communication.ts

@@ -39,7 +39,8 @@ export interface UpdateRenderersMessage {
 export interface OutputChangedMessage {
     readonly type: 'outputChanged';
     readonly newOutputs?: Output[];
-    readonly deletedOutputIds?: string[];
+    readonly deleteStart?: number;
+    readonly deleteCount?: number;
 }
 
 export interface ChangePreferredMimetypeMessage {
@@ -48,7 +49,17 @@ export interface ChangePreferredMimetypeMessage {
     readonly mimeType: string;
 }
 
-export type ToWebviewMessage = UpdateRenderersMessage | OutputChangedMessage | ChangePreferredMimetypeMessage | CustomRendererMessage;
+export interface KernelMessage {
+    readonly type: 'customKernelMessage';
+    readonly message: unknown;
+}
+
+export interface PreloadMessage {
+    readonly type: 'preload';
+    readonly resources: string[];
+}
+
+export type ToWebviewMessage = UpdateRenderersMessage | OutputChangedMessage | ChangePreferredMimetypeMessage | CustomRendererMessage | KernelMessage | PreloadMessage;
 
 export interface WebviewInitialized {
     readonly type: 'initialized';
@@ -65,7 +76,7 @@ export interface WheelMessage {
     readonly deltaX: number;
 }
 
-export type FromWebviewMessage = WebviewInitialized | OnDidRenderOutput | WheelMessage | CustomRendererMessage;
+export type FromWebviewMessage = WebviewInitialized | OnDidRenderOutput | WheelMessage | CustomRendererMessage | KernelMessage;
 
 export interface Output {
     id: string