Merge pull request #65 from XVincentX/XVincentX/preview-api

Preview an API document on Apiary command closes #63
XVincentX · Nov 12, 2016 · 9fef7fb · 9fef7fb
2 parents 56dbcc5 + c4f57bc
commit 9fef7fb
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 3 deletions.
diff --git a/client/CHANGELOG.md b/client/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 This changelog tracks changes starting from first public release.
 
+## v0.5.1
+
+- It is now possible to preview the documentation you're working now currently in Apiary using the appropriate feature. Just look for Apiary: Preview command.
+
 ## v0.5.0
 
 - It is now possible to configure what you think it's a Symbol to report and not. All of them are extension parameters and are enabled by default.

diff --git a/client/package.json b/client/package.json
@@ -17,7 +17,7 @@
   },
   "publisher": "vncz",
   "engines": {
-    "vscode": "^1.5.0"
+    "vscode": "^1.7.0"
   },
   "categories": [
     "Languages",
@@ -173,6 +173,12 @@
         "title": "Browses the current API on Apiary documentation",
         "category": "API Elements - Apiary",
         "icon": "./resources/apiary.ico"
+      },
+      {
+        "command": "apiElements.apiary.preview",
+        "title": "Previews the current API on Apiary documentation",
+        "category": "API Elements - Apiary",
+        "icon": "./resources/apiary.ico"
       }
     ]
   },
@@ -188,6 +194,7 @@
   },
   "dependencies": {
     "axios": "^0.14.0",
+    "lodash.escape": "^4.0.1",
     "vscode-languageclient": "^2.4.2"
   }
 }
diff --git a/client/src/commands.ts b/client/src/commands.ts
@@ -4,11 +4,14 @@ import * as path from 'path';
 import {killCurrentApiaryClient, requestApiaryClient} from './requestApiaryClient';
 import {showMessage} from './showMessage';
 import {showUntitledWindow} from './showUntitledWindow';
-import {ExtensionContext, Position, QuickPickItem, Range, TextEditor, Uri, commands, window} from 'vscode';
+import {ExtensionContext, Position, QuickPickItem, Range, TextEditor, Uri,
+  ViewColumn, commands, window, workspace} from 'vscode';
 import {LanguageClient} from 'vscode-languageclient';
 
 import axios from 'axios';
 
+const escape = require('lodash.escape');
+
 function selectApi(context: ExtensionContext) {
   return requestApiaryClient(context)
     .then(client => Promise.all([client.getApiList(), client]))
@@ -82,6 +85,32 @@ export function publishApi(context: ExtensionContext, textEditor: TextEditor) {
   );
 }
 
+export function previewApi(context: ExtensionContext, textEditor: TextEditor) {
+  const code = escape(textEditor.document.getText());
+  const preview =
+    `<!DOCTYPE html>
+    <html lang="en">
+    <head>
+    <meta charset="UTF-8">
+    <title>API Preview</title>
+    </head>
+    <body>
+    <script src="https://api.apiary.io/seeds/embed.js"></script>
+    <script>
+    var embed = new Apiary.Embed({
+    apiBlueprint: \`${code}\`,
+    });
+    </script>
+    </body>
+    </html>`;
+
+  const filePath = path.join(workspace.rootPath || context.extensionPath, 'preview.html');
+  fs.writeFileSync(filePath, preview, 'utf8');
+
+  return commands.executeCommand('vscode.previewHtml', Uri.parse(`file:${filePath}`), getViewColumn())
+    .then(() => fs.unlinkSync(filePath));
+}
+
 export function logout(context: ExtensionContext) {
   const tokenFilePath = path.join(context.extensionPath, '.apiaryToken');
   if (fs.existsSync(path.join(context.extensionPath, '.apiaryToken'))) {
@@ -107,3 +136,23 @@ export function browse(context: ExtensionContext, textEditor: TextEditor) {
     })
     .then(uri => commands.executeCommand('vscode.open', uri), <any>showMessage);
 }
+
+function getViewColumn(sideBySide = true): ViewColumn {
+  const active = window.activeTextEditor;
+  if (!active) {
+    return ViewColumn.One;
+  }
+
+  if (!sideBySide) {
+    return active.viewColumn;
+  }
+
+  switch (active.viewColumn) {
+    case ViewColumn.One:
+      return ViewColumn.Two;
+    case ViewColumn.Two:
+      return ViewColumn.Three;
+    default:
+      return active.viewColumn;
+  }
+}
diff --git a/client/src/extension.ts b/client/src/extension.ts
@@ -15,7 +15,8 @@ function registerCommands(client: LanguageClient, context: ExtensionContext) {
     commands.registerCommand('apiElements.apiary.fetchApi', Commands.fetchApi.bind(this, context)),
     commands.registerCommand('apiElements.apiary.logout', Commands.logout.bind(this, context)),
     commands.registerTextEditorCommand('apiElements.apiary.publishApi', Commands.publishApi.bind(this, context)),
-    commands.registerTextEditorCommand('apiElements.apiary.browse', Commands.browse.bind(this, context))
+    commands.registerTextEditorCommand('apiElements.apiary.browse', Commands.browse.bind(this, context)),
+    commands.registerTextEditorCommand('apiElements.apiary.preview', Commands.previewApi.bind(this, context))
   );
 }