Requests and Responses updated

Author: stricklandrbls

src/dataEditor/dataEditorClient.ts

@@ -133,7 +133,7 @@ export class DataEditorClient implements vscode.Disposable {
     fileToEdit: string = '',
     private panel: DataEditorUI
   ) {
-    this.panel.onDidReceiveMessage(this.msgReceiver, this)
+    this.panel.onDidReceiveMessage(this.msgReceiver)
 
     this.disposables = [
       this.panel,
@@ -173,20 +173,26 @@ export class DataEditorClient implements vscode.Disposable {
     fileToEdit: string = ''
   ): Promise<DataEditorClient | undefined> {
     startSvelteWebviewInitializer(context)
-    const title = !fileToEdit ? 'Data Editor' : path.basename(fileToEdit)
+    const title = !fileToEdit
+      ? 'Data Editor' + (OPEN_EDITORS.size + 1).toString()
+      : path.basename(fileToEdit)
 
     const column =
       fileToEdit === '' ? vscode.ViewColumn.Two : vscode.ViewColumn.Active
+    const uiMsgId = getSvelteWebviewInitializer().formatMsgId(title)
 
     const ui = getSvelteWebviewInitializer().createSveltePanel({
       title,
       column,
+      uiMsgId,
     })
 
     const editor = new DataEditorClient(context, configVars, fileToEdit, ui)
 
     await editor.initialize()
 
+    ui.reveal()
+
     ui.onDidDispose(async () => {
       const pathKey = path.resolve(editor.fileToEdit).toLowerCase()
       OPEN_EDITORS.delete(pathKey)
@@ -372,8 +378,12 @@ export class DataEditorClient implements vscode.Disposable {
       })
       vscode.window.showErrorMessage(msg)
     }
-
-    this.panel.postMessage
+    this.panel.postMessage('fileInfo', {
+      bom: data.byteOrderMark,
+      contentType: data.type,
+      filename: this.fileToEdit,
+      language: data.language,
+    })
     // send the initial file info to the webview
     // await this.panel.postMessage({
     //   command: MessageCommand.fileInfo,

src/dataEditor/ui/svelteWebviewInitializer.ts

@@ -19,63 +19,77 @@ import * as vscode from 'vscode'
 import * as fs from 'fs'
 import {
   DataEditorMessageResponses,
-  ExtensionMessageResponses,
-  MessageCommandMap,
+  MessageRequestMap,
+  MessageResponseMap,
   PostMessageArgs,
 } from 'ext_types'
 import { DisplayState } from './displayState'
+import { randomUUID } from 'crypto'
 
 export interface DataEditorUI extends vscode.Disposable {
   readonly displayState: DisplayState
   dispose(): void
   setTitle(title: string): void
-  postMessage<K extends keyof MessageCommandMap>(
-    ...payload: PostMessageArgs<MessageCommandMap, K>
+  getMsgId(): string
+  postMessage<K extends keyof MessageResponseMap>(
+    ...payload: PostMessageArgs<MessageResponseMap, K>
   ): void
   reveal: vscode.WebviewPanel['reveal']
-  onDidReceiveMessage: vscode.Webview['onDidReceiveMessage']
-  onDidDispose: vscode.WebviewPanel['onDidDispose']
+  onDidReceiveMessage(listener: (e: any) => void): void
+  onDidDispose(listener: (e: any) => void): void
 }
 class SvelteUIWebviewPanel implements DataEditorUI {
   static readonly uiViewId: string = 'dataEditor'
   readonly displayState: DisplayState = new DisplayState()
 
-  constructor(private vscodePanel: vscode.WebviewPanel) {}
+  constructor(
+    private vscodePanel: vscode.WebviewPanel,
+    private messengerId: string = ''
+  ) {}
   dispose() {
     this.vscodePanel.dispose()
   }
+  getMsgId() {
+    return this.messengerId
+  }
+  setMsgId(id: string) {
+    if (this.messengerId !== '')
+      throw 'Cannot reassign messenger id after initialization.'
 
+    this.messengerId = id
+  }
   setTitle(title: string) {
     this.vscodePanel.title = title
   }
 
-  postMessage<K extends keyof MessageCommandMap>(
-    ...payload: PostMessageArgs<MessageCommandMap, K>
-  ) {}
-  postEditorResponse<K extends keyof DataEditorMessageResponses>(
-    type: K,
-    message: DataEditorMessageResponses[K]
+  postMessage<K extends keyof MessageResponseMap>(
+    ...msg: PostMessageArgs<MessageResponseMap, K>
   ) {
-    this.vscodePanel.webview.postMessage({ command: type, data: message })
-  }
-  postExtensionResponse<K extends keyof ExtensionMessageResponses>(
-    type: K,
-    message: ExtensionMessageResponses[K]
-  ) {
-    this.vscodePanel.webview.postMessage({ command: type, data: message })
+    const [type, payload] = msg as [K, MessageResponseMap[K]]
+    this.vscodePanel.webview.postMessage({
+      command: type,
+      id: this.messengerId,
+      data: { ...payload },
+    })
   }
 
-  public readonly onDidReceiveMessage =
-    this.vscodePanel.webview.onDidReceiveMessage
+  public onDidReceiveMessage(listener: (e: any) => void) {
+    this.vscodePanel.webview.onDidReceiveMessage(listener)
+  }
 
-  public readonly reveal = this.vscodePanel.reveal
+  public readonly reveal = () => {
+    this.vscodePanel.reveal()
+  }
 
-  public readonly onDidDispose = this.vscodePanel.onDidDispose
+  public onDidDispose(listener: (e: any) => void) {
+    this.vscodePanel.onDidDispose(listener)
+  }
 }
 
 export type SveltePanelArgs = {
   title: string
   column: vscode.ViewColumn
+  uiMsgId: string
 }
 
 interface SvelteInitializerState {
@@ -102,25 +116,31 @@ const ValidInitializerState: SvelteInitializerState = {
     return ExtensionContextRef
   },
 }
+
+const UI_MSG_ID_MAX_LEN = 32
+
 class SvelteWebviewInitializer {
   static state: SvelteInitializerState = InvalidInitializerState
-
   constructor() {}
-
+  formatMsgId(id: string) {
+    let idStr = id.substring(0, UI_MSG_ID_MAX_LEN)
+    idStr.replaceAll(' ', '_')
+    return idStr
+  }
   createSveltePanel(args: SveltePanelArgs): SvelteUIWebviewPanel {
     const ret = vscode.window.createWebviewPanel(
       SvelteUIWebviewPanel.uiViewId,
       args.title,
       args.column
     )
     this.setWebviewOptions(ret)
-    this.setHtmlContent(ret)
+    this.setHtmlContent(ret, args.uiMsgId)
 
-    return new SvelteUIWebviewPanel(ret)
+    return new SvelteUIWebviewPanel(ret, args.uiMsgId)
   }
 
   // get the HTML content for the webview
-  private setHtmlContent(vsPanel: vscode.WebviewPanel): string {
+  private setHtmlContent(vsPanel: vscode.WebviewPanel, msgId: string) {
     let vsWebview = vsPanel.webview
     const nonce = this.getNonce()
 
@@ -142,7 +162,9 @@ class SvelteWebviewInitializer {
       .replace(/src="\.\/index.js"/, `src="${scriptUri.toString()}"`)
       .replace(/href="\.\/style.css"/, `href="${stylesUri.toString()}"`)
       .replaceAll(/nonce="__nonce__"/g, `nonce="${nonce}""`)
-    return indexHTML
+      .replace('__extension_msg_id__', msgId)
+
+    vsWebview.html = indexHTML
   }
   private injectNonce(
     html: string,

src/ext_types/messageContent.ts

@@ -1,3 +1,4 @@
+import { IServerHeartbeat } from '@omega-edit/client'
 import {
   EditorMessageId,
   EditorMessageIds,
@@ -50,7 +51,10 @@ type MessageCommands =
   | 'undoChange'
   | 'viewportRefresh'
 
-export interface MessageCommandMap {
+type CommandMap = {
+  [K in MessageCommands]: any
+}
+export interface MessageRequestMap extends CommandMap {
   counts: never
   clearChanges: never
   applyChanges: ApplyChangesRequest
@@ -73,19 +77,46 @@ export interface MessageCommandMap {
   setUITheme: SetUIThemeRequest
 }
 
+export interface MessageResponseMap extends CommandMap {
+  clearChanges: void
+  applyChanges: ChangesInfoResponse
+  editorOnChange: EditorOnChangeResponse
+  fileInfo: FileInfoResponse
+  counts: CountResponse
+  profile: ProfileResponse
+  redoChange: void
+  replaceResults: ReplaceResponse
+  requestEditedData: EditedDataResponse
+  save: void
+  saveAs: SaveAsResponse
+  saveSegment: void
+  scrollViewport: void
+  search: SearchResponse
+  replace: ReplaceResponse
+  undoChange: void
+  viewportRefresh: ViewportRefreshResponse
+  showMessage: undefined
+  setUITheme: void
+  heartbeat: IServerHeartbeat & { port: number }
+}
+
 export type ExtensionMessageKeys =
   | 'showMessage'
   | 'setUITheme'
   | 'editorOnChange'
+
 export type DataEditorMessageKeys = Exclude<
   MessageCommands,
   ExtensionMessageKeys
 >
 export type DataEditorMessageRequests = Pick<
-  MessageCommandMap,
+  MessageRequestMap,
+  DataEditorMessageKeys
+>
+export type DataEditorMessageResponses = Pick<
+  MessageResponseMap,
   DataEditorMessageKeys
 >
-
 /**
  * Key indexable interface to templated type inference of available messages sent between
  * the components of the DFDL VSCode extension.
@@ -112,36 +143,33 @@ export type DataEditorMessageRequests = Pick<
 //   viewportRefresh: never
 // }
 export type ExtensionMessageRequests = Pick<
-  MessageCommandMap,
+  MessageRequestMap,
   ExtensionMessageKeys
 >
 
-export interface ExtensionMessageResponses {
-  showMessage: undefined
-  setUITheme: void
-}
+// export type ExtensionMessageResponses = Pick<
 
-export interface DataEditorMessageResponses
-  extends Record<keyof DataEditorMessageRequests, unknown> {
-  clearChanges: void
-  applyChanges: ChangesInfoResponse
-  editorOnChange: EditorOnChangeResponse
-  fileInfo: FileInfoResponse
-  counts: CountResponse
-  // heartbeat: IServerHeartbeat & { port: number } // service
-  profile: ProfileResponse
-  redoChange: void
-  replaceResults: ReplaceResponse
-  requestEditedData: EditedDataResponse
-  save: void
-  saveAs: SaveAsResponse
-  saveSegment: void
-  scrollViewport: void
-  search: SearchResponse
-  replace: ReplaceResponse
-  undoChange: void
-  viewportRefresh: ViewportRefreshResponse
-}
+// export interface DataEditorMessageResponses
+//   extends Record<keyof DataEditorMessageRequests, unknown> {
+//   clearChanges: void
+//   applyChanges: ChangesInfoResponse
+//   editorOnChange: EditorOnChangeResponse
+//   fileInfo: FileInfoResponse
+//   counts: CountResponse
+//   // heartbeat: IServerHeartbeat & { port: number } // service
+//   profile: ProfileResponse
+//   redoChange: void
+//   replaceResults: ReplaceResponse
+//   requestEditedData: EditedDataResponse
+//   save: void
+//   saveAs: SaveAsResponse
+//   saveSegment: void
+//   scrollViewport: void
+//   search: SearchResponse
+//   replace: ReplaceResponse
+//   undoChange: void
+//   viewportRefresh: ViewportRefreshResponse
+// }
 
 export type VSEditorMessagePackage<K extends keyof DataEditorMessageRequests> =
   {

src/ext_types/messages.ts

@@ -15,10 +15,6 @@
  * limitations under the License.
  */
 
-import {
-  DataEditorMessageResponses,
-  ExtensionMessageResponses,
-} from 'ext_types'
 import { EditByteModes } from './formattypes'
 
 /**

src/svelte/index.html

@@ -23,7 +23,7 @@
     <title>Vite + Svelte + TS</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app" extension_msg_id="__extension_msg_id__"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>