Use webpack and react in resultview subproject (#128)

* Use webpack in result view, rewrite components using react

* Rename buttons, change styling, improve other things

* Create new components, add support for new webview

* Fix explorer icons, fix resultview rows reloading

* Improve resultview graphics, add statement, add record offset input

* Improve logging, improve ui and ux

* Change Pager to display page number instead of row offset

* Remove html subproject test command

Author: AlexCovizzi

.gitignore

@@ -1,4 +1,8 @@
+.vscode/extensions.json
+.vscode/settings.json
 dist/
+out/
 node_modules/
+.data/
 *.vsix
 *.db

.vscode/extensions.json

@@ -1,4 +1,5 @@
 .vscode/
+.data/
 tests/
 dist/**/*.map
 src/

.vscode/settings.json

@@ -414,9 +414,10 @@
         "compile": "webpack --mode development",
         "watch": "webpack --mode development --watch",
         "test": "jest --silent --config jest.config.js",
-        "install-html": "cd ./src/resultview/htmlcontent && npm install",
-        "build-html": "cd ./src/resultview/htmlcontent && npm run build",
-        "test-html": "cd ./src/resultview/htmlcontent && npm run test",
+        "install-html": "cd ./src/resultview/html && npm install",
+        "build-html": "cd ./src/resultview/html && npm run build",
+        "test-html": "cd ./src/resultview/html && npm run test",
+        "watch-html": "cd ./src/resultview/html && npm run watch",
         "package": "vsce package"
     },
     "devDependencies": {
@@ -435,8 +436,8 @@
         "webpack-cli": "^3.3.11"
     },
     "dependencies": {
+        "clipboardy": "~2.3.0",
         "csv-parser": "~2.3.0",
-        "csv-stringify": "~5.3.0",
-        "clipboardy": "~2.3.0"
+        "csv-stringify": "~5.3.0"
     }
 }

.vscodeignore

@@ -1,4 +1,4 @@
-import { TreeDataProvider, Event, TreeItem, EventEmitter, ProviderResult } from "vscode";
+import { TreeDataProvider, Event, TreeItem, EventEmitter, ProviderResult, ExtensionContext } from "vscode";
 import { DBItem, TableItem, ColumnItem } from "./treeItem";
 import { Schema } from "../common";
 
@@ -8,9 +8,11 @@ export class ExplorerTreeProvider implements TreeDataProvider<Schema.Item> {
     private _onDidChangeTreeData: EventEmitter<Schema.Item | undefined> = new EventEmitter<Schema.Item | undefined>();
     readonly onDidChangeTreeData: Event<Schema.Item | undefined> = this._onDidChangeTreeData.event;
 
+    private context: ExtensionContext;
     private databaseList: Schema.Database[];
 
-    constructor() {
+    constructor(context: ExtensionContext) {
+        this.context = context;
         this.databaseList = [];
     }
 
@@ -42,13 +44,13 @@ export class ExplorerTreeProvider implements TreeDataProvider<Schema.Item> {
     getTreeItem(item: Schema.Item): TreeItem {
         if ('tables' in item) {
             // Database
-            return new DBItem(item.path);
+            return new DBItem(this.context, item.path);
         } else if ('columns' in item) {
             // Table
-            return new TableItem(item.name, item.type);
+            return new TableItem(this.context, item.name, item.type);
         } else {
             // Column
-            return new ColumnItem(item.name, item.type, item.notnull, item.pk, item.defVal);
+            return new ColumnItem(this.context, item.name, item.type, item.notnull, item.pk, item.defVal);
         }
     }
 

package-lock.json

@@ -1,4 +1,4 @@
-import { Disposable, commands, window } from "vscode";
+import { Disposable, commands, window, ExtensionContext } from "vscode";
 import { ExplorerTreeProvider } from "./explorerTreeProvider";
 import * as treeItem from "./treeItem";
 import { Constants } from "../constants/constants";
@@ -10,10 +10,10 @@ class Explorer implements Disposable {
 
     private explorerTreeProvider: ExplorerTreeProvider;
 
-    constructor() {
+    constructor(context: ExtensionContext) {
         let subscriptions = [];
 
-        this.explorerTreeProvider = new ExplorerTreeProvider();
+        this.explorerTreeProvider = new ExplorerTreeProvider(context);
         subscriptions.push(window.createTreeView(Constants.sqliteExplorerViewId, { treeDataProvider: this.explorerTreeProvider }));
 
         this.disposable = Disposable.from(...subscriptions);

package.json

@@ -1,4 +1,4 @@
-import { TreeItem, TreeItemCollapsibleState, Command } from "vscode";
+import { TreeItem, TreeItemCollapsibleState, Command, ExtensionContext } from "vscode";
 import { join, basename } from "path";
 
 export interface SQLTree {
@@ -19,17 +19,19 @@ export class SQLItem extends TreeItem {
 
 export class DBItem extends SQLItem {
 
-    constructor(public dbPath: string, command?: Command) {
+    constructor(context: ExtensionContext, public dbPath: string, command?: Command) {
         super(
             dbPath,
             basename(dbPath),
             TreeItemCollapsibleState.Collapsed,
             command
         );
 
+        console.log(__filename);
+
         this.iconPath = {
-            light: join(__filename, '..', '..', '..', 'resources', 'light', 'database.svg'),
-            dark: join(__filename, '..', '..', '..', 'resources', 'dark', 'database.svg')
+            light: context.asAbsolutePath(join('resources', 'light', 'database.svg')),
+            dark: context.asAbsolutePath(join('resources', 'dark', 'database.svg'))
         };
 
         this.contextValue = 'sqlite.databaseItem';
@@ -42,7 +44,7 @@ export class DBItem extends SQLItem {
 
 export class TableItem extends SQLItem {
 
-    constructor(name: string, private type: string, command?: Command) {
+    constructor(context: ExtensionContext, name: string, private type: string, command?: Command) {
         super(
             name,
             name,
@@ -56,8 +58,8 @@ export class TableItem extends SQLItem {
             icon_name = "table_view.svg";
         }
         this.iconPath = {
-            light: join(__filename, '..', '..', '..', 'resources', 'light', icon_name),
-            dark: join(__filename, '..', '..', '..', 'resources', 'dark', icon_name)
+            light: context.asAbsolutePath(join('resources', 'light', icon_name)),
+            dark: context.asAbsolutePath(join('resources', 'dark', icon_name))
         };
     }
 
@@ -70,7 +72,7 @@ export class TableItem extends SQLItem {
 
 export class ColumnItem extends SQLItem {
 
-    constructor(name:string, private type: string,
+    constructor(context: ExtensionContext, name:string, private type: string,
             private notnull: boolean, private pk: number, private defVal: string, command?: Command) {
         super(
             name,
@@ -85,8 +87,8 @@ export class ColumnItem extends SQLItem {
         iconName = pk > 0? 'col_pk.svg' : iconName;
 
         this.iconPath = {
-            light: join(__filename, '..', '..', '..', 'resources', 'light', iconName),
-            dark: join(__filename, '..', '..', '..', 'resources', 'dark', iconName)
+            light: context.asAbsolutePath(join('resources', 'light', iconName)),
+            dark: context.asAbsolutePath(join('resources', 'dark', iconName))
         };
     }
 

src/explorer/explorerTreeProvider.ts

@@ -61,7 +61,7 @@ export function activate(context: ExtensionContext): Promise<boolean> {
     languageserver = new LanguageServer();
     sqlWorkspace = new SqlWorkspace();
     sqlite = new SQLite(context.extensionPath);
-    explorer = new Explorer();
+    explorer = new Explorer(context);
     resultView = new ResultView(context.extensionPath);
 
     languageserver.setSchemaHandler(doc => {

src/explorer/index.ts

@@ -1,13 +1,10 @@
 import { WebviewPanel, window, ViewColumn, Disposable, Uri } from "vscode";
-import { dirname } from "path";
-import { readFile } from "fs";
-import { randomString } from "../utils/utils";
 import { EventEmitter } from "events";
+import { join } from "path";
 
 export interface Message {
-    command: string;
-    data: Object;
-    id?: string;
+    type: string;
+    payload: any;
 }
 
 export class CustomView extends EventEmitter implements Disposable {
@@ -17,28 +14,32 @@ export class CustomView extends EventEmitter implements Disposable {
 
     private resourcesPath: string;
     private panel: WebviewPanel | undefined;
-    private htmlCache: {[path: string]: string};
 
     constructor(private type: string, private title: string) {
         super();
         this.resourcesPath = "";
-        this.htmlCache = {};
     }
 
-    show(htmlPath: string) {
-        this.resourcesPath = dirname(htmlPath);
+    show(basePath: string, recordsPerPage: number) {
+        this.resourcesPath = join(basePath, "dist");
 
         if (!this.panel) {
             this.init();
         }
-
-        this.readWithCache(htmlPath, (html: string) => {
-            if (this.panel) {
-                // little hack to make the html unique so that the webview is reloaded
-                html = html.replace(/\<\/body\>/, `<div id="${randomString(8)}"></div></body>`);
-                this.panel.webview.html = html;
-            }
-        });
+        
+        const jsPath = join(this.resourcesPath, "resultview.js");
+        this.panel!.webview.html = `
+            <html>
+                <head>
+                    <title>ResultView</title>
+                </head>
+                <body>
+                    <div id="root"></div>
+                    <script>const RECORDS_PER_PAGE=${recordsPerPage || 20}</script>
+                    <script src="${(this.panel!.webview as any).asWebviewUri(Uri.file(jsPath)).toString()}"></script>
+                </body>
+            </html>
+        `;
     }
 
     send(message: Message) {
@@ -73,39 +74,9 @@ export class CustomView extends EventEmitter implements Disposable {
         subscriptions.push(this.panel.onDidDispose(() => this.dispose()));
 
         subscriptions.push(this.panel.webview.onDidReceiveMessage((message: Message) => {
-            //console.log("Received message from webview: "+JSON.stringify(message));
             this.handleMessage(message);
         }));
 
         this.disposable = Disposable.from(...subscriptions);
     }
-
-    private readWithCache(path: string, callback: (html: string) => void) {
-        let html: string = '';
-        if (path in this.htmlCache) {
-            html = this.htmlCache[path];
-            callback(html);
-        } else {
-            readFile(path, 'utf8', (err, content) => {
-                html = content || "";
-                html = this.replaceUris(html, path);
-                this.htmlCache[path] = html;
-                callback(html);
-            });
-        }
-    }
-
-    private replaceUris(html: string, htmlPath: string) {
-        if (!this.panel) return html;
-
-        let basePath = Uri.file(dirname(htmlPath)).with({scheme: this.resourceScheme}).toString();
-        try {
-            basePath = (this.panel.webview as any).asWebviewUri(Uri.file(dirname(htmlPath))).toString();
-        } catch(err) {
-            // Note: This is a relly bad way to assign base path but for now it will do
-        }
-        let regex = /(href|src)\=\"(.+?)\"/g;
-        html = html.replace(regex, `$1="${basePath+'$2'}"`);
-        return html;
-    }
 }