webviewBase.ts

'use strict';
import {
	commands,
	Disposable,
	Uri,
	ViewColumn,
	Webview,
	WebviewPanel,
	WebviewPanelOnDidChangeViewStateEvent,
	window,
} from 'vscode';
import { Command } from '../theia/command';

const emptyCommands: Disposable[] = [
	{
		dispose: function () {
			/* noop */
		},
	},
];

export function getUri(webview: Webview, extensionUri: Uri, pathList: string[]) {
	return webview.asWebviewUri(Uri.joinPath(extensionUri, ...pathList));
}

export abstract class WebviewBase implements Disposable {
	protected disposable: Disposable;
	private _disposablePanel: Disposable | undefined;
	protected _panel: WebviewPanel | undefined;

	constructor(private id: string, private title: string, command: Command, private readonly _column?: ViewColumn) {
		this.disposable = Disposable.from(commands.registerCommand(command.cmd, this.onShowCommand, this));
		this.load();
	}

	getExternalRessourcePath(extensionUri: Uri, pathList: string[]) {
		return getUri(this._panel!.webview, extensionUri, pathList);
	}

	registerCommands(): Disposable[] {
		return emptyCommands;
	}

	renderHead?(): string | Promise<string>;
	renderBody?(): string | Promise<string>;
	renderEndOfBody?(): string | Promise<string>;

	dispose() {
		this.disposable.dispose();
		this._disposablePanel?.dispose();
	}

	protected onShowCommand() {
		void this.show(this._column);
	}

	private onPanelDisposed() {
		this._disposablePanel?.dispose();
		this._panel = undefined;
	}

	private onViewStateChanged(e: WebviewPanelOnDidChangeViewStateEvent) {
		console.log(
			`Webview(${this.id}).onViewStateChanged`,
			`active=${e.webviewPanel.active}, visible=${e.webviewPanel.visible}`,
		);
	}

	get visible() {
		return this._panel?.visible ?? false;