Type markdown preview webview message (#176444)

Simply types messages. Will clean up types in next pass

extensions/markdown-language-features/preview-src/index.ts

@@ -10,6 +10,7 @@ import { getEditorLineNumberForPageOffset, scrollToRevealSourceLine, getLineElem
 import { SettingsManager, getData } from './settings';
 import throttle = require('lodash.throttle');
 import morphdom from 'morphdom';
+import type { ToWebviewMessage } from '../types/previewMessaging';
 
 let scrollDisabledCount = 0;
 
@@ -118,16 +119,17 @@ window.addEventListener('resize', () => {
 }, true);
 
 window.addEventListener('message', async event => {
-	switch (event.data.type) {
+	const data = event.data as ToWebviewMessage.Type;
+	switch (data.type) {
 		case 'onDidChangeTextEditorSelection':
-			if (event.data.source === documentResource) {
+			if (data.source === documentResource) {
-				marker.onDidChangeTextEditorSelection(event.data.line, documentVersion);
+				marker.onDidChangeTextEditorSelection(data.line, documentVersion);
 			}
 			return;
 
 		case 'updateView':
-			if (event.data.source === documentResource) {
+			if (data.source === documentResource) {
-				onUpdateView(event.data.line);
+				onUpdateView(data.line);
 			}
 			return;
 
@@ -135,7 +137,7 @@ window.addEventListener('message', async event => {
 			const root = document.querySelector('.markdown-body')!;
 
 			const parser = new DOMParser();
-			const newContent = parser.parseFromString(event.data.content, 'text/html');
+			const newContent = parser.parseFromString(data.content, 'text/html');
 
 			// Strip out meta http-equiv tags
 			for (const metaElement of Array.from(newContent.querySelectorAll('meta'))) {
@@ -144,9 +146,9 @@ window.addEventListener('message', async event => {
 				}
 			}
 
-			if (event.data.source !== documentResource) {
+			if (data.source !== documentResource) {
 				root.replaceWith(newContent.querySelector('.markdown-body')!);
-				documentResource = event.data.source;
+				documentResource = data.source;
 			} else {
 				const skippedAttrs = [
 					'open', // for details

extensions/markdown-language-features/preview-src/messaging.ts

@@ -4,17 +4,24 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { SettingsManager } from './settings';
+import type { FromWebviewMessage } from '../types/previewMessaging';
 
 export interface MessagePoster {
 	/**
 	 * Post a message to the markdown extension
 	 */
-	postMessage(type: string, body: object): void;
+	postMessage<T extends FromWebviewMessage.Type>(
+		type: T['type'],
+		body: Omit<T, 'source' | 'type'>
+	): void;
 }
 
-export const createPosterForVsCode = (vscode: any, settingsManager: SettingsManager) => {
+export const createPosterForVsCode = (vscode: any, settingsManager: SettingsManager): MessagePoster => {
-	return new class implements MessagePoster {
+	return {
-		postMessage(type: string, body: object): void {
+		postMessage<T extends FromWebviewMessage.Type>(
+			type: T['type'],
+			body: Omit<T, 'source' | 'type'>
+		): void {
 			vscode.postMessage({
 				type,
 				source: settingsManager.settings!.source,

extensions/markdown-language-features/src/preview/preview.ts

@@ -16,48 +16,7 @@ import { MdDocumentRenderer } from './documentRenderer';
 import { MarkdownPreviewConfigurationManager } from './previewConfig';
 import { scrollEditorToLine, StartingScrollFragment, StartingScrollLine, StartingScrollLocation } from './scrolling';
 import { getVisibleLine, LastScrollLocation, TopmostLineMonitor } from './topmostLineMonitor';
-
+import type { FromWebviewMessage, ToWebviewMessage } from '../../types/previewMessaging';
-
-interface WebviewMessage {
-	readonly source: string;
-}
-
-interface CacheImageSizesMessage extends WebviewMessage {
-	readonly type: 'cacheImageSizes';
-	readonly body: { id: string; width: number; height: number }[];
-}
-
-interface RevealLineMessage extends WebviewMessage {
-	readonly type: 'revealLine';
-	readonly body: {
-		readonly line: number;
-	};
-}
-
-interface DidClickMessage extends WebviewMessage {
-	readonly type: 'didClick';
-	readonly body: {
-		readonly line: number;
-	};
-}
-
-interface ClickLinkMessage extends WebviewMessage {
-	readonly type: 'openLink';
-	readonly body: {
-		readonly href: string;
-	};
-}
-
-interface ShowPreviewSecuritySelectorMessage extends WebviewMessage {
-	readonly type: 'showPreviewSecuritySelector';
-}
-
-interface PreviewStyleLoadErrorMessage extends WebviewMessage {
-	readonly type: 'previewStyleLoadError';
-	readonly body: {
-		readonly unloadedStyles: string[];
-	};
-}
 
 export class PreviewDocumentVersion {
 
@@ -162,7 +121,7 @@ class MarkdownPreview extends Disposable implements WebviewResourceProvider {
 			}
 		}));
 
-		this._register(this._webviewPanel.webview.onDidReceiveMessage((e: CacheImageSizesMessage | RevealLineMessage | DidClickMessage | ClickLinkMessage | ShowPreviewSecuritySelectorMessage | PreviewStyleLoadErrorMessage) => {
+		this._register(this._webviewPanel.webview.onDidReceiveMessage((e: FromWebviewMessage.Type) => {
 			if (e.source !== this._resource.toString()) {
 				return;
 			}
@@ -248,7 +207,7 @@ class MarkdownPreview extends Disposable implements WebviewResourceProvider {
 		return this._resource.fsPath === resource.fsPath;
 	}
 
-	public postMessage(msg: any) {
+	public postMessage(msg: ToWebviewMessage.Type) {
 		if (!this._disposed) {
 			this._webviewPanel.webview.postMessage(msg);
 		}
@@ -389,7 +348,7 @@ class MarkdownPreview extends Disposable implements WebviewResourceProvider {
 		if (reloadPage) {
 			this._webviewPanel.webview.html = html;
 		} else {
-			this._webviewPanel.webview.postMessage({
+			this.postMessage({
 				type: 'updateContent',
 				content: html,
 				source: this._resource.toString(),

extensions/markdown-language-features/types/previewMessaging.d.ts

@@ -0,0 +1,81 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+interface BaseMessage {
+	readonly source: string;
+}
+
+export namespace FromWebviewMessage {
+
+	export interface CacheImageSizes extends BaseMessage {
+		readonly type: 'cacheImageSizes';
+		readonly body: { id: string; width: number; height: number }[];
+	}
+
+	export interface RevealLine extends BaseMessage {
+		readonly type: 'revealLine';
+		readonly body: {
+			readonly line: number;
+		};
+	}
+
+	export interface DidClick extends BaseMessage {
+		readonly type: 'didClick';
+		readonly body: {
+			readonly line: number;
+		};
+	}
+
+	export interface ClickLink extends BaseMessage {
+		readonly type: 'openLink';
+		readonly body: {
+			readonly href: string;
+		};
+	}
+
+	export interface ShowPreviewSecuritySelector extends BaseMessage {
+		readonly type: 'showPreviewSecuritySelector';
+	}
+
+	export interface PreviewStyleLoadError extends BaseMessage {
+		readonly type: 'previewStyleLoadError';
+		readonly body: {
+			readonly unloadedStyles: string[];
+		};
+	}
+
+	export type Type =
+		| CacheImageSizes
+		| RevealLine
+		| DidClick
+		| ClickLink
+		| ShowPreviewSecuritySelector
+		| PreviewStyleLoadError
+		;
+}
+
+export namespace ToWebviewMessage {
+	export interface OnDidChangeTextEditorSelection extends BaseMessage {
+		readonly type: 'onDidChangeTextEditorSelection';
+		readonly line: number;
+	}
+
+	export interface UpdateView extends BaseMessage {
+		readonly type: 'updateView';
+		readonly line: number;
+		readonly source: string;
+	}
+
+	export interface UpdateContent extends BaseMessage {
+		readonly type: 'updateContent';
+		readonly content: string;
+	}
+
+	export type Type =
+		| OnDidChangeTextEditorSelection
+		| UpdateView
+		| UpdateContent
+		;
+}