PRQL · RandomFractals · Feb 19, 2023 · Feb 17, 2023 · Feb 17, 2023 · Feb 17, 2023
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
   "main": "out/extension.js",
   "activationEvents": [
     "onLanguage:prql",
+    "onWebviewPanel:prql.sqlPreviewPanel",
     "onCommand:prql.openSqlPreview",
     "onCommand:prql.generateSqlFile",
     "onCommand:prql.copySqlToClipboard",

diff --git a/resources/sql_output.css → resources/sql-preview.css b/resources/sql_output.css → resources/sql-preview.css
@@ -32,15 +32,31 @@ code {
   font-weight: var(--vscode-editor-font-weight) !important;
 }
 
+body {
+  margin: 0px;
+  padding: 10px;
+}
+
 h3 {
   margin: 10px 0 0 10px;
   color: var(--vscode-editorError-foreground);
 }
 
+.error {
+  padding: 0px;
+  margin: 0px;
+}
+
+#result {
+  margin: 0px;
+  padding: 0px;
+}
+
 #last-html {
   overflow-y: scroll;
   max-height: 80vh;
-  margin-top: 0px;
+  margin: 0px;
+  padding: 0px;
 }
 
 #error-container {
@@ -50,13 +66,13 @@ h3 {
 }
 
 .error-container-fixed {
-  left: 20px;
-  right: 20px;
+  left: 10px;
+  right: 10px;
   bottom: 0;
   position: fixed;
   border-top: 2px solid var(--vscode-editorError-foreground);
 }
 
 #error-message {
-  padding-left: 10px;
+  padding: 0px;
 }
diff --git a/resources/sql-preview.html b/resources/sql-preview.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Security-Policy"
+      content="default-src 'none';
+        style-src ##CSP_SOURCE##;
+        style-src-attr 'unsafe-inline';
+        script-src ##CSP_SOURCE##;"
+    />
+    <link href="##CSS_URI##" rel="stylesheet" />
+    <script src="##JS_URI##" type="application/javascript"></script>
+    <title>PRQL SQL Preview</title>
+  </head>
+  <body>
+    <div id="result">Waiting for a PRQL file...</div>
+    <div class="error">
+      <pre id="last-html"></pre>
+      <div id="error-container">
+        <pre id="error-message"></pre>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/resources/sqlPreview.js b/resources/sqlPreview.js
@@ -0,0 +1,90 @@
+// initialize vscode api
+const vscode = acquireVsCodeApi();
+
+// prql document vars and view state
+let documentUrl = '';
+let viewState = {documentUrl: documentUrl};
+
+// add page load handler
+window.addEventListener('load', initializeView);
+
+/**
+ * Initializes sql preview webview.
+ */
+function initializeView() {
+  // restore previous view state
+  viewState = vscode.getState();
+  if (viewState && viewState.documentUrl) {
+    // get last previewed prql document url
+    documentUrl = viewState.documentUrl;
+  }
+  else {
+    // create new empty view config
+    viewState = {};
+    viewState.documentUrl = documentUrl;
+    vscode.setState(viewState);
+  }
+
+  // request initial sql preview load
+  vscode.postMessage({command: 'refresh'});
+}
+
+// add view update handler
+window.addEventListener('message', (event) => {
+  switch (event.data.command) {
+    case 'update':
+      // show updated sql preview content
+      update(event.data.result)
+      break;
+    case 'changeTheme':
+      // do nothing: this webview html is UI theme neutral,
+      // and will update sql html content on the next edit
+      break;
+    case 'refresh':
+      updateViewState(event.data);
+      break;
+    default:
+      throw new Error('unknown message');
+  }
+});
+
+/**
+ * Updates Sql Preview view state on initial view load and refresh.
+ *
+ * @param {*} prqlInfo Prql document info from webview.
+ */
+function updateViewState(prqlInfo) {
+  // get and save prql document url in view state
+  documentUrl = prqlInfo.documentUrl;
+  viewState.documentUrl = documentUrl;
+  vscode.setState(viewState);
+}
+
+
+/**
+ * Displays updated sql html from compiled PRQL result.
+ *
+ * @param {*} compilationResult PRQL compilation result.
+ */
+function update(compilationResult) {
+  // show updated sql preview content
+  const result = compilationResult;
+  const errorContainer = document.getElementById('error-container');
+  if (result.status === 'ok') {
+    document.getElementById('result').innerHTML = result.sqlHtml;
+  }
+  else if (result.lastSqlHtml) {
+    document.getElementById('last-html').innerHTML = result.lastSqlHtml;
+    document.getElementById('error-container').classList.add('error-container-fixed');
+  }
+
+  if (result.status === 'error' && result.error.message.length > 0) {
+    // show errors
+    document.getElementById('error-message').innerHTML = result.error.message;
+    errorContainer.style.display = 'block';
+  }
+  else {
+    // hide error container
+    errorContainer.style.display = 'none';
+  }
+}
diff --git a/resources/sql_output.html b/resources/sql_output.html
diff --git a/resources/sql_output.js b/resources/sql_output.js
diff --git a/src/commands.ts b/src/commands.ts
@@ -13,6 +13,7 @@ import * as constants from './constants';
 
 import { compile } from './compiler';
 import { TextEncoder } from 'util';
+import { SqlPreview } from './views/sqlPreview';
 
 /**
  * Registers PRQL extension commands.
@@ -23,12 +24,32 @@ export function registerCommands(context: ExtensionContext) {
   registerCommand(context, constants.GenerateSqlFile, generateSqlFile);
   registerCommand(context, constants.ViewSettings, viewPrqlSettings);
 
+  registerCommand(context, constants.OpenSqlPreview, (documentUri: Uri) => {
+    if (!documentUri && window.activeTextEditor) {
+      // use active text editor document Uri
+      documentUri = window.activeTextEditor.document.uri;
+    }
+
+    // render Sql Preview for the requested PRQL document
+    SqlPreview.render(context, documentUri);
+  });
+
   registerCommand(context, constants.CopySqlToClipboard, () => {
-    const sql: string | undefined = context.workspaceState.get('prql.sql');
-    if (sql) {
-      // write the last generated sql code to vscode clipboard
+
+    // get last generated prql sql content from workspace state
+    let sql: string | undefined = context.workspaceState.get('prql.sql');
+
+    let sqlFileName = 'SQL';
+    if (SqlPreview.currentView) {
+      // get sql filename and content fromn sql preview
+      sqlFileName = `prql://${path.basename(SqlPreview.currentView.documentUri.path, '.prql')}.sql`;
+      sql = SqlPreview.currentView.lastCompilationResult?.sql;
+    }
+
+    if (sql !== undefined) {
+      // write the last active sql preview sql code to vscode clipboard
       env.clipboard.writeText(sql);
-      window.showInformationMessage('PRQL: SQL copied to Clipboard.');
+      window.showInformationMessage(`Copied ${sqlFileName} to Clipboard.`);
     }
   });
 }
@@ -45,32 +66,29 @@ function registerCommand(
   context: ExtensionContext,
   commandId: string,
   callback: (...args: any[]) => any,
-  thisArg?: any
-): void {
+  thisArg?: any): void {
+
   const command: Disposable = commands.registerCommand(
     commandId,
     async (...args) => {
       try {
         await callback(...args);
-      } catch (e: unknown) {
+      }
+      catch (e: unknown) {
         window.showErrorMessage(String(e));
         console.error(e);
       }
     },
     thisArg
   );
-
   context.subscriptions.push(command);
 }
 
 /**
  * Opens vscode Settings panel with PRQL settings.
  */
 async function viewPrqlSettings() {
-  await commands.executeCommand(
-    constants.WorkbenchActionOpenSettings,
-    constants.ExtensionId
-  );
+  await commands.executeCommand(constants.WorkbenchActionOpenSettings, constants.ExtensionId);
 }
 
 /**
@@ -93,29 +111,22 @@ async function generateSqlFile() {
     if (Array.isArray(result)) {
       window.showErrorMessage(`PRQL Compile \
         ${result[0].display ?? result[0].reason}`);
-    } else {
+    }
+    else {
       const prqlDocumentUri: Uri = editor.document.uri;
       const prqlFilePath = path.parse(prqlDocumentUri.fsPath);
       const prqlSettings = workspace.getConfiguration('prql');
       const target = <string>prqlSettings.get('target');
-      const addTargetDialectToSqlFilenames = <boolean>(
-        prqlSettings.get(constants.AddTargetDialectToSqlFilenames)
-      );
+      const addTargetDialectToSqlFilenames =
+        <boolean>prqlSettings.get(constants.AddTargetDialectToSqlFilenames);
 
       let sqlFilenameSuffix = '';
-      if (
-        addTargetDialectToSqlFilenames &&
-        target !== 'Generic' &&
-        target !== 'None'
-      ) {
+      if (addTargetDialectToSqlFilenames && target !== 'Generic' && target !== 'None') {
         sqlFilenameSuffix = `.${target.toLowerCase()}`;
       }
 
       // create sql filename based on prql file path, name, and current settings
-      const sqlFilePath = path.join(
-        prqlFilePath.dir,
-        `${prqlFilePath.name}${sqlFilenameSuffix}.sql`
-      );
+      const sqlFilePath = path.join(prqlFilePath.dir, `${prqlFilePath.name}${sqlFilenameSuffix}.sql`);
 
       // create sql file
       const sqlFileUri: Uri = Uri.file(sqlFilePath);