refactor: use webview

Author: uniquemo

.eslintrc.js

@@ -16,5 +16,7 @@ module.exports = {
     '@typescript-eslint/no-explicit-any': 0,
     '@typescript-eslint/explicit-module-boundary-types': 0,
     '@typescript-eslint/no-non-null-assertion': 0,
+    '@typescript-eslint/no-empty-function': 0,
+    'no-case-declarations': 0
   }
 };

package.json

@@ -97,7 +97,6 @@
           "type": "string",
           "description": "请勿修改"
         }
-
       }
     }
   },
@@ -128,13 +127,15 @@
     "isomorphic-git": "^1.8.0",
     "querystring": "^0.2.0",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "react-select": "^3.1.1"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.11",
     "@types/node": "^14.14.7",
     "@types/react": "^16.9.56",
     "@types/react-dom": "^16.9.9",
+    "@types/react-select": "^3.0.26",
     "@typescript-eslint/eslint-plugin": "^4.7.0",
     "@typescript-eslint/parser": "^4.7.0",
     "css-loader": "^5.0.1",

src/extension.ts

@@ -1,13 +1,11 @@
 import initialize from './initialize';
 import CodingServer from './services/codingServer';
-import WebviewProvider from './webviews';
 import ACTIONS, { dispatch } from './utils/actions';
 import { proxyCtx } from './utils/proxy';
 import toast from './utils/toast';
 import { readConfig } from './services/dcloud';
 
 async function activate(context: IContext) {
-  const webviewProvider = new WebviewProvider(context);
   const codingServer = new CodingServer(context);
   const repoInfo = await CodingServer.getRepoParams();
   console.warn('repoInfo: ', repoInfo);
@@ -16,7 +14,7 @@ async function activate(context: IContext) {
   dispatch(ACTIONS.SET_CTX, {
     context,
     value: {
-      webviewProvider,
+      webviewProvider: null,
       codingServer,
       depots: [],
       selectedDepot: null,

src/init/createWebview.ts

@@ -0,0 +1,12 @@
+import WebviewProvider from '../webviews/depot';
+import ACTIONS, { dispatch } from '../utils/actions';
+
+function createWebview(context: IContext) {
+  const webviewProvider = new WebviewProvider(context);
+  dispatch(ACTIONS.SET_WEBVIEW, {
+    context,
+    value: webviewProvider,
+  });
+}
+
+export default createWebview;

src/init/initCredentials.ts

@@ -2,6 +2,7 @@ import hx from 'hbuilderx';
 import * as DCloudService from '../services/dcloud';
 import toast from '../utils/toast';
 import { refreshTree } from './registerCommands';
+import ACTIONS, { dispatch } from '../utils/actions';
 
 const { executeCommand } = hx.commands;
 
@@ -29,12 +30,18 @@ export async function initCredentials(context: IContext) {
     if (accessToken) {
       const userData = await codingServer.getUserInfo(accessToken);
       toast.info(`logged in as CODING user: ${userData.name} @ ${userData.team}`);
+
+      dispatch(ACTIONS.SET_USER_INFO, {
+        context: context,
+        value: userData,
+      });
     }
   } catch (err) {
     if (Number(err) === 1) {
       toast.warn(`请先登录 DCloud`);
     }
   } finally {
     refreshTree();
+    context.webviewProvider.refresh();
   }
 }

src/init/initLoginLogout.ts

@@ -7,6 +7,7 @@ export default function initLoginLogout(context: IContext) {
   onUserLogin(() => {
     console.warn('login');
     refreshTree();
+    context.webviewProvider.refresh();
   });
 
   onUserLogout(() => {

src/init/registerCommands.ts

@@ -72,7 +72,7 @@ export default function registerCommands(context: IContext) {
   );
 
   context.subscriptions.push(
-    registerCommand('codingPlugin.createDepot', async function (param: any) {
+    registerCommand('codingPlugin.createDepot', async function (callback: any) {
       const depot = await showInputBox({
         prompt: '请输入仓库名',
       });
@@ -84,13 +84,22 @@ export default function registerCommands(context: IContext) {
 
       const team = context.userInfo.team;
       const result = await codingServer.createDepot(team, depot, depot);
+      const webview = context.webviewProvider?.panel.webView;
       if (result) {
+        webview.postMessage({
+          command: 'create.depot.success',
+          data: result,
+        });
         const res = await toast.info('仓库创建成功，是否切换到该仓库？', ['是', '否']);
         if (res === '是') {
           dispatch(ACTIONS.SET_SELECTED_DEPOT, {
             context,
             value: result,
           });
+          webview.postMessage({
+            command: 'create.depot.switch',
+            data: result,
+          });
         }
         refreshTree();
       }
@@ -122,6 +131,7 @@ export default function registerCommands(context: IContext) {
             value: newToken,
           });
           refreshTree();
+          context.webviewProvider.refresh();
         }
       } catch {
         toast.error(`个人令牌无效`);
@@ -166,6 +176,7 @@ export default function registerCommands(context: IContext) {
             value: result.Token,
           });
           refreshTree();
+          context.webviewProvider.refresh();
         }
       } catch (err) {
         toast.error(`创建团队失败`);

src/initialize.ts

@@ -1,4 +1,5 @@
 import createTreeViews from './init/createTreeViews';
+import createWebview from './init/createWebview';
 import initWorkspace from './init/initWorkspace';
 import { initCredentials } from './init/initCredentials';
 import registerCommands from './init/registerCommands';
@@ -13,5 +14,6 @@ export default function initialize(context: IContext) {
   initCredentials(context);
   registerCommands(context);
   createTreeViews(context);
+  createWebview(context);
   initWorkspace(context);
 }

src/utils/actions.ts

@@ -9,6 +9,7 @@ const enum ACTIONS {
   SET_CTX = 'SET_CTX',
   SET_MR_CUSTOM_EDITOR = 'SET_MR_CUSTOM_EDITOR',
   SET_TOKEN = 'SET_TOKEN',
+  SET_WEBVIEW = 'SET_WEBVIEW',
 }
 
 interface IPayload {
@@ -43,6 +44,9 @@ export const dispatch = (type: ACTIONS, { context, value }: IPayload) => {
       context.token = value;
       setConfig(`token`, value);
       break;
+    case ACTIONS.SET_WEBVIEW:
+      context.webviewProvider = value;
+      break;
     default:
       return;
   }

src/webviews/depot.ts

@@ -0,0 +1,100 @@
+import hx from 'hbuilderx';
+import path from 'path';
+import toast from '../utils/toast';
+import ACTIONS, { dispatch } from '../utils/actions';
+
+interface IMessage {
+  command: string;
+  data?: any;
+  callback?: (...args: any[]) => void;
+}
+
+export default class WebviewProvider {
+  context: IContext;
+  panel: IWebviewPanel;
+
+  constructor(context: IContext) {
+    this.context = context;
+    this.panel = this.createPanel();
+    this.listen();
+    this.refresh();
+  }
+
+  refresh() {
+    this.update({
+      token: this.context.token,
+      userInfo: this.context.userInfo,
+    });
+  }
+
+  listen() {
+    this.panel.webView.onDidReceiveMessage(async (message: IMessage) => {
+      console.log('webview receive message => ', message);
+      const { command, data } = message;
+
+      switch (command) {
+        case 'webview.mrDetail':
+          hx.env.openExternal(data);
+          break;
+        case 'webview.toast':
+          toast.error(data);
+          break;
+        case 'webview.refresh':
+          this.refresh();
+          break;
+        default:
+          hx.commands.executeCommand(command);
+          return;
+      }
+    });
+  }
+
+  createPanel() {
+    const webviewPanel: IWebviewPanel = hx.window.createWebView('codingPlugin.webview', {
+      enableScripts: true,
+    });
+
+    return webviewPanel;
+  }
+
+  async update(data: any) {
+    const webview = this.panel.webView;
+    const fileInfo = hx.Uri.file(path.resolve(__dirname, '../../out/webviews/main.js'));
+
+    const config = hx.workspace.getConfiguration();
+    const colorScheme = config.get('editor.colorScheme');
+
+    const COLORS: Record<string, string> = {
+      Monokai: 'themeDark',
+      'Atom One Dark': 'themeDarkBlue',
+      Default: 'themeLight',
+    };
+
+    if (data.token && !data.userInfo) {
+      try {
+        const userInfo = await this.context.codingServer.getUserInfo(data.token);
+        data.userInfo = userInfo;
+        dispatch(ACTIONS.SET_USER_INFO, {
+          context: this.context,
+          value: userInfo,
+        });
+      } catch (err) {
+        console.warn('个人令牌出错了');
+      }
+    }
+
+    webview.html = `
+      <html>
+        <body class='${COLORS[colorScheme]}'>
+          <div>
+            <div id='root'></div>
+          </div>
+          <script>
+            window.__CODING__ = '${JSON.stringify(data)}'
+          </script>
+          <script src='${fileInfo}'></script>
+        </body>
+      </html>
+    `;
+  }
+}