support VSCode Web environment

package.json

@@ -34,7 +34,7 @@
   "activationEvents": [
     "onLanguage:markdown"
   ],
-  "main": "./out/extension.js",
+  "main": "./src/extension.js",
   "contributes": {
     "configuration": {
       "title": "docsify Preview",

src/extension.js

@@ -4,9 +4,9 @@ const vscode = require("vscode");
 const preview = require("./preview.js");
 const extensionConfig = require("./extensionConfig.js");
 
-function activate(context) {
-  logger.init("Docsify Preview", "markdown");
-  extensionConfig.init(context);
+async function activate(context) {
+  logger.init("Docsify Preview");
+  await extensionConfig.init(context);
   preview.init();
   const registerCommand = (menu, fn) =>
     context.subscriptions.push(vscode.commands.registerCommand(menu, fn));

src/extensionConfig.js

@@ -1,13 +1,13 @@
 /* jslint esversion:11 */
 const path = require("path");
-const fs = require("fs");
 const vscode = require("vscode");
+const fs = require("./utils/vsFile.js");
 const webViewHtmlRelativePath = "src/server/webView.html";
 const injectedRelativePath = "src/server/listener/injected.html";
 const webViewAssetsRelativePath = "src/server";
 
 function ExtensionConfig() {
-  this.init = (context) => {
+  this.init = async (context) => {
     this.extensionPath = context.extensionPath;
     this.webViewHtmlPath = path.join(
       this.extensionPath,
@@ -21,7 +21,7 @@ function ExtensionConfig() {
     this.panelIconPath = vscode.Uri.file(
       path.join(this.extensionPath, "assets/icon.svg")
     );
-    this.injectCode = fs.readFileSync(this.injectedPath, "utf8");
+    this.injectCode = await fs.readFile(this.injectedPath);
   };
   return;
 }

src/server/httpServer.js

@@ -1,6 +1,7 @@
 /* jslint esversion:11 */
 const http = require("http");
 const fs = require("fs");
+const vscode = require("vscode");
 const logger = require("../utils/logger.js");
 const workspaceConfig = require("../workspaceConfig.js");
 const listener = require("./listener/listener.js");
@@ -9,8 +10,8 @@ const app = express();
 const path = require("path");
 
 let httpServer = {
-  create(host, port, resolve, reject) {
-    let docsifyHtml = getDocsifyIndexHtml();
+  async create(host, port, resolve, reject) {
+    let docsifyHtml = await getDocsifyIndexHtml();
     let html = listener.injectHtml(docsifyHtml);
     this.server = createServer(html);
     listener.attach(this.server);
@@ -19,12 +20,16 @@ let httpServer = {
       resolve(true);
     });
     return;
-    function getDocsifyIndexHtml() {
+    async function getDocsifyIndexHtml() {
       let docsifyIndexHtmlPath = parseFilePath(workspaceConfig.indexFileName);
       if (fs.existsSync(docsifyIndexHtmlPath) == false) {
         reject("IndexNotFound");
       }
-      return fs.readFileSync(docsifyIndexHtmlPath, "utf8");
+      return (
+        await vscode.workspace.fs.readFile(
+          vscode.Uri.file(docsifyIndexHtmlPath)
+        )
+      ).toString();
     }
     function createServer(html) {
       let expressApp = createApp(html);

src/server/server.js

@@ -6,7 +6,7 @@ let server = {
   async create(host, port, viewColumn) {
     let res = await createHttpServer(host, port);
     if (res) {
-      webViewServer.create(viewColumn);
+      await webViewServer.create(viewColumn);
     }
     return res;
     function createHttpServer(host, port) {

src/server/webViewServer.js

@@ -1,13 +1,13 @@
 /* jslint esversion:11 */
 const vscode = require("vscode");
-const fs = require("fs");
+const fs = require("../utils/vsFile.js");
 const extensionConfig = require("../extensionConfig.js");
 const path = require("path");
 const logger = require("../utils/logger.js");
 
 // 最好能使用单例模式就好了
 const webViewServer = {
-  create(viewColumn) {
+  async create(viewColumn) {
     this.panel = vscode.window.createWebviewPanel(
       "docsifyPreviewer", // Webview id
       "docsify Preview",
@@ -20,13 +20,15 @@ const webViewServer = {
     let innerPanel = this.panel;
     this.panel.iconPath = extensionConfig.panelIconPath;
     try {
-      this.panel.webview.html = getHtmlContent(extensionConfig.webViewHtmlPath);
+      this.panel.webview.html = await getHtmlContent(
+        extensionConfig.webViewHtmlPath
+      );
     } catch (err) {
       logger.error(err);
     }
     return;
-    function getHtmlContent(filePath) {
-      let html = fs.readFileSync(filePath, "utf8");
+    async function getHtmlContent(filePath) {
+      let html = await fs.readFile(filePath);
       return replaceVarialbe(html);
       function replaceVarialbe(html) {
         return html.replace(/\$\{([^\}]+)\}/g, (match, src) => {

src/utils/logger.js

@@ -4,8 +4,8 @@ const vscode = require("vscode");
 function Logger() {
   let channel;
 
-  this.init = (name, langID) => {
-    channel = vscode.window.createOutputChannel(name, langID);
+  this.init = (name) => {
+    channel = vscode.window.createOutputChannel(name);
   };
 
   const logCurry = (level) => (message) => log(level, message);
@@ -17,7 +17,7 @@ function Logger() {
   return;
   function log(level, message) {
     const curTime = new Date().toLocaleTimeString();
-    channel.appendLine(`["${level}" - ${curTime}] ${message}`);
+    channel.appendLine(`[${level} - ${curTime}] ${message}`);
   }
 }
 

src/utils/vsFile.js

@@ -0,0 +1,11 @@
+const vscode = require("vscode");
+
+async function readFile(filePath) {
+  return (
+    await vscode.workspace.fs.readFile(vscode.Uri.file(filePath))
+  ).toString();
+}
+
+module.exports = {
+  readFile,
+};