feat: react vscode tree element

Author: Yukaii

package-lock.json

@@ -73,7 +73,7 @@
       "mdTree": [
         {
           "id": "mdTreeItems",
-          "name": "History"
+          "name": "Browser Notes"
         }
       ]
     },
@@ -246,6 +246,8 @@
     "mathjax-full": "^3.0.1",
     "mobx": "^5.15.4",
     "node-fetch": "^2.6.7",
+    "react": "^17.0.2",
+    "react-vsc-treeview": "^0.2.3",
     "string": "git+ssh://git@github.com/hackmdio/string.js.git#a68176b3d"
   }
 }

package.json

@@ -1,21 +1,40 @@
 import * as vscode from 'vscode';
 
-import APIClient, { ExportType } from '@hackmd/api';
-const config = {
-  serverUrl: vscode.workspace.getConfiguration('Hackmd').get('serverURL') as string,
-  enterprise: vscode.workspace.getConfiguration('Hackmd').get('enterprise') as boolean,
-};
-const API = new APIClient(config);
+import ApiClient from '@hackmd/api';
+
+import { ACCESS_TOKEN_KEY } from './constants';
+
+let API: ApiClient;
+
+export async function initializeAPIClient(context: vscode.ExtensionContext) {
+  let accessToken = await context.secrets.get(ACCESS_TOKEN_KEY);
+  const apiEndPoint = vscode.workspace.getConfiguration('Hackmd').get('apiEndPoint') as string;
+
+  if (!accessToken) {
+    const input = await vscode.window.showInputBox({
+      prompt: 'Please input your HackMD access token',
+      password: true,
+      ignoreFocusOut: true,
+      placeHolder: 'Access Token',
+      title: 'HackMD Access Token',
+    });
+
+    if (!input) {
+      return;
+    }
+
+    await context.secrets.store(ACCESS_TOKEN_KEY, input);
+    accessToken = input;
+  }
+
+  API = new ApiClient(accessToken, apiEndPoint);
+}
+
 vscode.workspace.onDidChangeConfiguration(async (e) => {
   if (e.affectsConfiguration('Hackmd')) {
-    const clicked = await vscode.window.showInformationMessage(
-      'Setting updated. Restart to apply this change.',
-      ...['Restart']
-    );
-    if (clicked === 'Restart') {
-      vscode.commands.executeCommand('workbench.action.reloadWindow');
-    }
+    const extension = vscode.extensions.getExtension<{ context: vscode.ExtensionContext }>('hackmd.hackmd-vscode');
+    await initializeAPIClient(extension.exports.context);
   }
 });
 
-export { API, ExportType };
+export { API };

src/api.ts

@@ -0,0 +1 @@
+export const ACCESS_TOKEN_KEY = 'hackmd_access_token';

src/constants.ts

@@ -2,14 +2,17 @@
 // Import the module and reference it with the alias vscode in your code below
 import * as vscode from 'vscode';
 
-import axios from 'axios';
 import * as hljs from 'highlight.js/lib/highlight';
 import * as markdownitContainer from 'markdown-it-container';
 import * as Prism from 'prismjs';
+import React from 'react';
+import ReactTreeView from 'react-vsc-treeview';
 import * as S from 'string';
 
-import { registerCommands } from './commands/index';
-import { initializeStorage } from './store/storage';
+// import { registerCommands } from './commands/index';
+// import { initializeStorage } from './store/storage';
+import { initializeAPIClient } from './api';
+import { TreeApp } from './tree/TreeApp';
 
 require('prismjs/components/prism-wiki');
 require('prismjs/components/prism-haskell');
@@ -203,13 +206,14 @@ function highlightRender(code, lang) {
 }
 
 let highlight;
-// this method is called when your extension is activated
-// your extension is activated the very first time the command is executed
-axios.defaults.withCredentials = true;
 
 export async function activate(context: vscode.ExtensionContext) {
-  initializeStorage();
-  registerCommands(context);
+  await initializeAPIClient(context);
+
+  // initializeStorage();
+  // registerCommands(context);
+
+  ReactTreeView.render(React.createElement(TreeApp), 'mdTreeItems');
 
   return {
     extendMarkdownIt(md: any) {
@@ -263,6 +267,7 @@ export async function activate(context: vscode.ExtensionContext) {
 
       return md;
     },
+    context,
   };
 }
 

src/extension.ts

@@ -5,6 +5,6 @@ import { API } from './../api';
 import { store } from '.';
 
 export async function initializeStorage() {
-  store.history = store.history = (await API.getHistory()).history.reverse();
-  store.isLogin = await checkLogin();
+  // store.history = store.history = (await API.getHistory()).history.reverse();
+  // store.isLogin = await checkLogin();
 }

src/store/storage.ts

@@ -0,0 +1,5 @@
+import { TreeItem } from 'react-vsc-treeview';
+
+export const TreeApp = () => {
+  return <TreeItem label="Hello World"></TreeItem>;
+};

src/tree/TreeApp.tsx

@@ -1,16 +1,23 @@
 {
-  "compilerOptions": {
-    "module": "commonjs",
-    "target": "es6",
-    "outDir": "out",
-    "lib": ["es6", "dom"],
-    "sourceMap": true,
-    "rootDir": "src",
-    "strict": false /* enable all strict type-checking options */
-    /* Additional Checks */
-    // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
-    // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
-    // "noUnusedParameters": true,  /* Report errors on unused parameters. */
-  },
-  "exclude": ["node_modules", ".vscode-test"]
-}
+	"compilerOptions": {
+		"module": "commonjs",
+		"target": "es6",
+		"outDir": "out",
+		"lib": [
+			"es6",
+			"dom"
+		],
+		"sourceMap": true,
+		"rootDir": "src",
+		"jsx": "preserve",
+		"strict": false /* enable all strict type-checking options */
+		/* Additional Checks */
+		// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
+		// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
+		// "noUnusedParameters": true,  /* Report errors on unused parameters. */
+	},
+	"exclude": [
+		"node_modules",
+		".vscode-test"
+	]
+}

tsconfig.json

@@ -23,12 +23,12 @@ const extensionConfig = {
     vscode: 'commonjs vscode',
   },
   resolve: {
-    extensions: ['.ts', '.js'],
+    extensions: ['.ts', '.js', '.tsx'],
   },
   module: {
     rules: [
       {
-        test: /\.ts$/,
+        test: /\.tsx?$/,
         exclude: /node_modules/,
         use: [
           {
@@ -38,6 +38,11 @@ const extensionConfig = {
       },
     ],
   },
+  plugins: [
+    new webpack.ProvidePlugin({
+      React: 'react',
+    }),
+  ],
 };
 
 /**@type {import('webpack').Configuration}*/