refactor: Create types for each direction of message transfer (#19)

* refactor: Create types for each direction of message transfer

* refactor: Redo build system a bit to allow shared typescript file

Author: DeflateAwning

esbuild.webview.js

@@ -0,0 +1,9 @@
+require('esbuild').build({
+  entryPoints: ['src/webview/webview.ts'],
+  bundle: true,
+  format: 'iife',
+  platform: 'browser',
+  outfile: 'out/webview.js',
+  sourcemap: true,
+  minify: true,
+}).catch(() => process.exit(1));

package.json

@@ -75,10 +75,12 @@
         ]
     },
     "scripts": {
-        "vscode:prepublish": "rm -rf ./out && mkdir -p ./out/binding/ && cp ./node_modules/duckdb/lib/binding/duckdb.node ./out/binding/ && tsc -p tsconfig.media.json && esbuild ./src/extension.ts --bundle --outfile=out/extension.js --external:vscode --external:nock --external:aws-sdk --external:mock-aws-s3 --format=cjs --platform=node --minify",
-        "compile": "tsc -p tsconfig.extension.json && tsc -p tsconfig.media.json",
-        "watch": "tsc -w -p ./",
-        "lint": "eslint \"src/**/*.ts\""
+        "build:webview": "node esbuild.webview.js",
+        "build:extension": "tsc -p .",
+        "compile": "npm run build:extension && npm run build:webview",
+        "watch:extension": "tsc -w -p ./",
+        "lint": "eslint \"src/**/*.ts\"",
+        "vscode:prepublish": "rm -rf ./out && mkdir -p ./out/binding/ && cp ./node_modules/duckdb/lib/binding/duckdb.node ./out/binding/ && npm run compile && esbuild ./src/extension.ts --bundle --outfile=out/extension.js --external:vscode --external:nock --external:aws-sdk --external:mock-aws-s3 --format=cjs --platform=node --minify"
     },
     "devDependencies": {
         "@types/node": "^16.18.34",

src/parquetDocument.ts

@@ -1,19 +1,13 @@
 import * as vscode from 'vscode';
 import { Disposable } from './dispose';
 import { getNonce } from './util';
+import { BackToFrontMessage, FrontToBackMessage, DescribeColumn } from './shared/messages';
 import { parse, extname } from "path"
 import * as duckdb from 'duckdb';
 
 const CSV_EXTENSIONS = [".csv"];
 const PARQUET_EXTENSIONS = [".pq", ".parq", ".parquet"];
 
-type IMessage = {
-    type: 'query' | 'more';
-    success: boolean;
-    message?: string;
-    results?: duckdb.TableData;
-    describe?: duckdb.TableData;
-} | { type: 'config', autoQuery: boolean } | { type: 'reloadBaseView' };
 
 /**
  * Define the document (the data model) used for table files.
@@ -106,7 +100,7 @@ class ParquetDocument extends Disposable implements vscode.CustomDocument {
         return results;
     }
 
-    runQuery(sql: string, limit: number, callback: (msg: IMessage) => void): void {
+    runQuery(sql: string, limit: number, callback: (msg: BackToFrontMessage) => void): void {
         // Fetch resulting column names and types
         this.db.all(
             `DESCRIBE (${sql.replace(';', '')});`,
@@ -124,14 +118,19 @@ class ParquetDocument extends Disposable implements vscode.CustomDocument {
                             callback({ type: 'query', success: false, message: err.message });
                             return;
                         }
-                        callback({ type: 'query', success: true, results: this.cleanResults(res), describe: descRes });
+                        callback({
+                            type: 'query',
+                            success: true,
+                            results: this.cleanResults(res),
+                            describe: translateDescribe(descRes)
+                        });
                     }
                 );
             }
         );
     }
 
-    fetchMore(sql: string, limit: number, offset: number, callback: (msg: IMessage) => void): void {
+    fetchMore(sql: string, limit: number, offset: number, callback: (msg: BackToFrontMessage) => void): void {
         this.db.all(
             this.formatSql(sql, limit, offset),
             (err, res) => {
@@ -149,6 +148,12 @@ class ParquetDocument extends Disposable implements vscode.CustomDocument {
     }
 }
 
+function translateDescribe(descRes: duckdb.TableData): DescribeColumn[] {
+    return descRes.map(row => ({
+        column_name: String(row.column_name),
+        column_type: String(row.column_type),
+    }));
+}
 
 export class ParquetDocumentProvider implements vscode.CustomReadonlyEditorProvider<ParquetDocument> {
 
@@ -219,9 +224,10 @@ export class ParquetDocumentProvider implements vscode.CustomReadonlyEditorProvi
      * Get the static HTML used for in our editor's webviews.
      */
     private getHtmlForWebview(webview: vscode.Webview, uri: vscode.Uri): string {
-        // Local path to script and css for the webview
+        // Local path to script and css for the webview.
         const jsUri = webview.asWebviewUri(vscode.Uri.joinPath(
-            this._context.extensionUri, 'out', 'media', 'flatFileExplorer.js'));
+            // Compiled from `src/webview/webview.ts`.
+            this._context.extensionUri, 'out', 'webview.js'));
 
         const cssUri = webview.asWebviewUri(vscode.Uri.joinPath(
             this._context.extensionUri, 'media', 'flatFileExplorer.css'));
@@ -335,18 +341,24 @@ export class ParquetDocumentProvider implements vscode.CustomReadonlyEditorProvi
     }
 
 
-    private postMessage(panel: vscode.WebviewPanel, message: IMessage): void {
+    private postMessage(panel: vscode.WebviewPanel, message: BackToFrontMessage): void {
         panel.webview.postMessage(message);
     }
 
     /** Handle incoming message. */
-    private onMessage(document: ParquetDocument, panel: vscode.WebviewPanel, message: any) {
+    private onMessage(document: ParquetDocument, panel: vscode.WebviewPanel, message: FrontToBackMessage) {
         switch (message.type) {
             case 'query':
-                document.runQuery(message.sql, message.limit, (msg: IMessage) => this.postMessage(panel, msg));
+                document.runQuery(
+                    message.sql, message.limit,
+                    (msg: BackToFrontMessage) => this.postMessage(panel, msg)
+                );
                 return;
             case 'more':
-                document.fetchMore(message.sql, message.limit, message.offset, (msg: IMessage) => this.postMessage(panel, msg));
+                document.fetchMore(
+                    message.sql, message.limit, message.offset,
+                    (msg: BackToFrontMessage) => this.postMessage(panel, msg)
+                );
                 return;
             case 'copy':
                 let fullQuery = `${document.createViewSql}\n\n${message.sql.trim()}`;

src/shared/messages.ts

@@ -0,0 +1,48 @@
+export interface DescribeColumn {
+    column_name: string;
+    column_type: string;
+}
+
+interface QueryMessage {
+    type: "query";
+    success: boolean;
+    results?: unknown[];
+    describe?: DescribeColumn[];
+    message?: string;
+}
+
+interface MoreMessage {
+    type: "more";
+    success: boolean;
+    results?: unknown[];
+    message?: string;
+}
+
+interface ConfigMessage {
+    type: "config";
+    autoQuery?: boolean;
+}
+
+interface ReloadBaseViewMessage {
+    type: "reloadBaseView";
+}
+
+/** Backend (extension) to Frontend (webview) message. */
+export type BackToFrontMessage = QueryMessage | MoreMessage | ConfigMessage | ReloadBaseViewMessage;
+
+
+
+/** Frontend (webview) to Backend (extension) message. */
+export type FrontToBackMessage = {
+    type: 'query';
+    sql: string;
+    limit: number;
+} | {
+    type: 'more';
+    sql: string;
+    limit: number;
+    offset: number;
+} | { type: 'config'; autoQuery: boolean; } | { type: 'reloadBaseView' } | {
+    type: 'copy';
+    sql: string;
+};

media/flatFileExplorer.ts src/webview/webview.tsmedia/flatFileExplorer.ts renamed to src/webview/webview.ts

@@ -1,10 +1,12 @@
+import { BackToFrontMessage, FrontToBackMessage, DescribeColumn } from '../shared/messages';
+
 // ---------- Utility Types ----------
 
 type Nullable<T> = T | null;
 
 // VS Code Webview API
 interface VSCodeApi<T = unknown> {
-    postMessage(message: unknown): void;
+    postMessage(message: FrontToBackMessage): void;
     getState(): T | undefined;
     setState(state: T): void;
 }
@@ -94,34 +96,6 @@ function getFormatter(columnType: string): Record<string, unknown> {
 
 // ---------- Message Types ----------
 
-interface DescribeColumn {
-    column_name: string;
-    column_type: string;
-}
-
-interface QueryMessage {
-    type: "query";
-    results?: unknown[];
-    describe?: DescribeColumn[];
-    message?: string;
-}
-
-interface MoreMessage {
-    type: "more";
-    results: unknown[];
-}
-
-interface ConfigMessage {
-    type: "config";
-    autoQuery?: boolean;
-}
-
-interface ReloadBaseViewMessage {
-    type: "reloadBaseView";
-}
-
-type IncomingMessage = QueryMessage | MoreMessage | ConfigMessage | ReloadBaseViewMessage;
-
 interface CodeInputElement extends HTMLElement {
     value: string;
 }
@@ -155,8 +129,8 @@ interface CodeInputElement extends HTMLElement {
     // Offset to use when fetching additional results
     let scrollOffset = 0;
 
-    // Handle messages sent from the extension to the webview
-    window.addEventListener("message", (event: MessageEvent<IncomingMessage>) => {
+    // Handle messages sent from the extension to the webview.
+    window.addEventListener("message", (event: MessageEvent<BackToFrontMessage>) => {
         const message = event.data;
 
         switch (message.type) {
@@ -247,11 +221,11 @@ interface CodeInputElement extends HTMLElement {
                 loadingIconElement!.style.display = "none";
                 textAreaElement!.disabled = false;
 
-                if (message.results.length < CHUNK_SIZE) {
+                if (message.results && (message.results.length < CHUNK_SIZE)) {
                     moreToLoad = false;
                 }
 
-                if (message.results.length > 0 && table) {
+                if (message.results && (message.results.length > 0) && table) {
                     table.addData(message.results);
                 }
                 break;

tsconfig.extension.json tsconfig.jsontsconfig.extension.json renamed to tsconfig.json

@@ -9,5 +9,5 @@
 
     "sourceMap": true
   },
-  "include": ["src/**/*.ts"]
+  "exclude": ["src/webview"]
 }

tsconfig.media.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["DOM", "ES2020"],
+    "strict": true
+  }
+}