serve vuejs from within extension

arjunattam · Sep 14, 2018 · 5730d3f · 5730d3f
1 parent 6a07f46
commit 5730d3f
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "chat",
   "displayName": "Slack Chat",
   "description": "Send and receive Slack chat inside VSCode",
-  "version": "0.5.9",
+  "version": "0.5.10-pre-1",
   "homepage": "https://github.com/karigari/vscode-chat",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -141,14 +141,17 @@
   },
   "scripts": {
     "compile": "tsc -p ./",
-    "postcompile": "npm run webview:setup",
-    "watch": "tsc-watch -p ./ --onSuccess \"npm run webview:setup\"",
+    "postcompile": "npm run webview:all",
+    "watch": "tsc-watch -p ./ --onSuccess \"npm run webview:copy\"",
     "postinstall": "node ./node_modules/vscode/bin/install",
     "test": "npm run compile && node ./node_modules/vscode/bin/test",
-    "webview:setup": "rm -rf static && mkdir -p static && cp src/webview/static* static/.",
+    "webview:all": "npm run webiew:setup && npm run webview:copy",
+    "webview:setup": "rm -rf static && mkdir -p static && node scripts/vue.js",
+    "webview:copy": "cp -fr src/webview/static* static/.",
     "vscode:prepublish": "npm run compile"
   },
   "devDependencies": {
+    "@types/http-proxy-agent": "^2.0.0",
     "@types/keytar": "^4.0.1",
     "@types/mixpanel": "^2.14.0",
     "@types/mocha": "^2.2.42",

diff --git a/scripts/vue.js b/scripts/vue.js
@@ -0,0 +1,25 @@
+// Downloads vuejs into the static folder
+const staticPath = "static/";
+const filePath = "vue.js";
+const downloadUrl = "https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js";
+
+var http = require("https");
+var fs = require("fs");
+
+var download = function(url, dest, cb) {
+  var file = fs.createWriteStream(dest);
+  var request = http
+    .get(url, function(response) {
+      response.pipe(file);
+      file.on("finish", function() {
+        file.close(cb); // close() is async, call cb after close completes.
+      });
+    })
+    .on("error", function(err) {
+      // Handle errors
+      fs.unlink(dest); // Delete the file async. (But we don't check the result)
+      if (cb) cb(err.message);
+    });
+};
+
+download(downloadUrl, staticPath + filePath, console.log);
diff --git a/src/webview/index.ts b/src/webview/index.ts
@@ -178,6 +178,7 @@ function getWebviewContent(staticPath) {
     <script src="${staticPath}/static.js"></script>
     <link rel="stylesheet" type="text/css" href="${staticPath}/static.css"></link>
   `;
+  const vuePath = `${staticPath}/vue.js`;
   const { fontFamily, fontSize } = vscode.workspace.getConfiguration("editor");
 
   return `<!DOCTYPE html>
@@ -186,7 +187,7 @@ function getWebviewContent(staticPath) {
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Slack</title>
-      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+      <script src="${vuePath}"></script>
       <style>code { font-family: ${fontFamily} }</style>
       <style>body { font-size: ${fontSize}px; }</style>
       ${vueImports}

diff --git a/yarn.lock b/yarn.lock
@@ -53,6 +53,12 @@
   dependencies:
     "@types/node" "*"
 
+"@types/http-proxy-agent@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/http-proxy-agent/-/http-proxy-agent-2.0.0.tgz#17f37436e0dd89c77e5cf795ce27fffd0ce2b2bc"
+  dependencies:
+    "@types/node" "*"
+
 "@types/is-stream@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@types/is-stream/-/is-stream-1.1.0.tgz#b84d7bb207a210f2af9bed431dc0fbe9c4143be1"