Switch to Webiew API

Author: octref

jsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "target": "es2015",
+    "module": "commonjs"
+  }
+}

package.json

@@ -39,6 +39,7 @@
     ]
   },
   "devDependencies": {
+    "@types/node": "^11.12.0",
     "@types/vscode": "^1.32.0"
   }
 }

src/extension.js

@@ -1,4 +1,5 @@
 const vscode = require('vscode')
+const fs = require('fs')
 const path = require('path')
 const { writeFileSync } = require('fs')
 const { homedir } = require('os')
@@ -8,8 +9,13 @@ const writeSerializedBlobToFile = (serializeBlob, fileName) => {
   writeFileSync(fileName, new Buffer(bytes))
 }
 
+const P_TITLE = 'Polacode 📸'
+
+/**
+ * @param {vscode.ExtensionContext} context 
+ */
 function activate(context) {
-  const htmlPath = path.resolve(context.extensionPath, 'src/webview/index.html')
+  const htmlPath = path.resolve(context.extensionPath, 'webview/index.html')
   const indexUri = vscode.Uri.file(htmlPath)
 
   let lastUsedImageUri = vscode.Uri.file(path.resolve(homedir(), 'Desktop/code.png'))
@@ -30,19 +36,28 @@ function activate(context) {
   })
 
   vscode.commands.registerCommand('polacode.activate', () => {
-    vscode.commands
-      .executeCommand('vscode.previewHtml', indexUri, 2, 'Polacode 📸', {
-        allowScripts: true
-      })
-      .then(() => {
-        const fontFamily = vscode.workspace.getConfiguration('editor').fontFamily
-        const bgColor = context.globalState.get('polacode.bgColor', '#2e3440')
-        vscode.commands.executeCommand('_workbench.htmlPreview.postMessage', indexUri, {
-          type: 'init',
-          fontFamily,
-          bgColor
-        })
-      })
+    const panel = vscode.window.createWebviewPanel('polacode', P_TITLE, 2, {
+      enableScripts: true,
+      localResourceRoots: [
+        vscode.Uri.file(path.join(context.extensionPath, 'webview'))
+      ]
+    });
+    
+    panel.webview.html = fs.readFileSync(htmlPath, 'utf-8')
+
+    // vscode.commands
+    //   .executeCommand('vscode.previewHtml', indexUri, 2, 'Polacode 📸', {
+    //     allowScripts: true,
+    //   })
+    //   .then(() => {
+    //     const fontFamily = vscode.workspace.getConfiguration('editor').fontFamily
+    //     const bgColor = context.globalState.get('polacode.bgColor', '#2e3440')
+    //     vscode.commands.executeCommand('_workbench.htmlPreview.postMessage', indexUri, {
+    //       type: 'init',
+    //       fontFamily,
+    //       bgColor
+    //     })
+    //   })
   })
 
   vscode.window.onDidChangeTextEditorSelection(e => {

tsconfig.json

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@types/node@^11.12.0":
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-11.12.0.tgz#ec5594728811dc2797e42396cfcdf786f2052c12"
+  integrity sha512-Lg00egj78gM+4aE0Erw05cuDbvX9sLJbaaPwwRtdCdAMnIudqrQZ0oZX98Ek0yiSK/A2nubHgJfvII/rTT2Dwg==
+
 "@types/vscode@^1.32.0":
   version "1.32.0"
   resolved "https://registry.yarnpkg.com/@types/vscode/-/vscode-1.32.0.tgz#e0a57de5fc8690a8a3a473996a6b6dfbccc28fbd"