feat: add web container feature

Author: TrumanDu

package.json

@@ -88,6 +88,8 @@
     "electron-log": "^4.4.8",
     "electron-store": "^8.1.0",
     "electron-updater": "^6.1.4",
+    "express": "^4.19.2",
+    "portfinder": "^1.0.32",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0"

src/main/plugin.ts

@@ -9,9 +9,10 @@ import * as fs from 'fs';
 import { BrowserWindow, shell, session, app } from 'electron';
 import log from 'electron-log';
 import Store from 'electron-store';
+import axios from 'axios';
+import WebContainer from './webContainer';
 
 // import DB from './db';
-import axios from 'axios';
 import {
   deleteFolder,
   getAppDir,
@@ -33,10 +34,14 @@ class PluginManager {
 
   private configDir: string = path.join(getAppDir(), 'config');
 
+  private container: WebContainer = new WebContainer();
+
   private sortSettingId = 'sortSettingId';
 
   public allPlugins: any[] = [];
 
+  private webContainers: Map<string, string> = new Map();
+
   // 创建一个新的存储实例
   public store = new Store();
 
@@ -93,8 +98,8 @@ class PluginManager {
       const packageJsonPath = path.join(pluginPath, 'package.json');
       const packagePath = path.join(pluginPath, 'plugin.json');
       if (fs.existsSync(packagePath)) {
-        const packageObj = readJsonObjFromFile(packageJsonPath);
-        const pluginObj = readJsonObjFromFile(packagePath);
+        const packageObj: any = readJsonObjFromFile(packageJsonPath);
+        const pluginObj: any = readJsonObjFromFile(packagePath);
         if (packageObj) {
           pluginObj.name = packageObj.name;
           pluginObj.version = packageObj.version;
@@ -116,7 +121,7 @@ class PluginManager {
 
     const { sort } = this.setting.getSetting();
     if (sort) {
-      let sortData = this.store.get(this.sortSettingId, {});
+      let sortData: any = this.store.get(this.sortSettingId, {});
       sortData = new Map(Object.entries(sortData));
       if (sortData.size > 0) {
         pluginList.sort((a, b) => {
@@ -153,7 +158,10 @@ class PluginManager {
     return this.allPlugins.find((plugin) => name === plugin.name);
   }
 
-  public openPlugin(name: string, pluginViewPool: Map<string, BrowserWindow>) {
+  public async openPlugin(
+    name: string,
+    pluginViewPool: Map<string, BrowserWindow>,
+  ) {
     const pluginObj = this.getPlugin(name);
     const storeId = `${name}-windowSize`;
     const savedSize = this.store.get(storeId, {
@@ -169,7 +177,7 @@ class PluginManager {
     const { sort } = this.setting.getSetting();
 
     if (sort) {
-      let sortData = this.store.get(this.sortSettingId, {});
+      let sortData: any = this.store.get(this.sortSettingId, {});
       sortData = new Map(Object.entries(sortData));
       if (sortData.has(name)) {
         const click = sortData.get(name);
@@ -201,10 +209,6 @@ class PluginManager {
         spellcheck: false,
       },
     });
-    // pluginWin.setPosition(
-    //   pluginWin.getPosition()[0],
-    //   pluginWin.getPosition()[1],
-    // );
     pluginWin.on('resize', () => {
       const [width, height] = pluginWin?.getSize() || [
         DEFAULT_WINDOW_WIDTH,
@@ -213,7 +217,21 @@ class PluginManager {
 
       this.store.set(storeId, { width, height });
     });
-    if (pluginObj.entry && pluginObj.entry.startsWith('http')) {
+    if (pluginObj.webContainer) {
+      let url: string;
+      if (!this.webContainers.has(name)) {
+        const port = await this.container.listenPlugin(
+          name,
+          pluginObj.pluginPath,
+        );
+        url = path.join(`http://127.0.0.1:${port}`, pluginObj.entry);
+      } else {
+        url = this.webContainers.get(name) as string;
+      }
+
+      pluginWin.loadURL(url);
+      this.webContainers.set(name, url);
+    } else if (pluginObj.entry && pluginObj.entry.startsWith('http')) {
       pluginWin.loadURL(pluginObj.entry);
     } else {
       // pluginWin.loadURL(resolveHtmlPath('plugin.html'));
@@ -242,6 +260,10 @@ class PluginManager {
       pluginWin.show();
     });
     pluginWin.on('closed', async () => {
+      if (pluginObj.webContainer) {
+        this.webContainers.delete(name);
+        this.container.closePlugin(name);
+      }
       if (pluginViewPool) {
         pluginViewPool.delete(name);
       }

src/main/setting.ts

@@ -8,7 +8,7 @@ class Setting {
 
   private settingPath: string = path.join(this.configDir, 'setting.json');
 
-  private setting: object = { sort: true, language: 'china' };
+  private setting: any = { sort: true, language: 'china' };
 
   constructor() {
     this.init();
@@ -34,7 +34,7 @@ class Setting {
     return this.setting[key];
   }
 
-  public getSetting(): object {
+  public getSetting(): any {
     try {
       this.setting = readJsonObjFromFile(this.settingPath);
     } catch (error) {

src/main/webContainer.ts

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const express = require('express');
+const portFinder = require('portfinder');
+
+class WebContainer {
+  private pluginMap = new Map();
+
+  public async listenPlugin(pluginId: string, staticPath: string) {
+    portFinder.setBasePort(10000);
+    portFinder.setHighestPort(65535);
+    const app = express();
+    const port = await portFinder.getPortPromise();
+    app.use(express.static(staticPath));
+
+    const server = app.listen(port, () => {
+      console.log(`${pluginId} Server is listening on port ${port}`);
+    });
+    this.pluginMap.set(pluginId, server);
+
+    return port;
+  }
+
+  public closePlugin(pluginId: string) {
+    const server = this.pluginMap.get(pluginId);
+    if (server) {
+      server.close(() => {
+        console.log(`${pluginId} Server is closed`);
+      });
+    }
+  }
+}
+
+export default WebContainer;