add plugin

package.json

@@ -10,7 +10,7 @@
     "build:plugin": "pnpm -F plugin run build",
     "build:main": "pnpm -F main run build",
     "build:renderer": "pnpm -F renderer run build",
-    "build:server": "cd internal && go build -o ../packages/main/bin/win32/server.exe",
+    "build:server": "cd internal && cross-env GIN_MODE=release go build -o ../packages/main/bin/win32/server.exe",
     "pack": "pnpm -F media-downloader run pack",
     "release": "pnpm run build && pnpm -F main run release",
     "docs:dev": "vitepress dev docs",
@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "@waline/client": "^2.15.5",
+    "cross-env": "^7.0.3",
     "vitepress": "1.0.0-beta.3",
     "vue": "^3.3.4",
     "zx": "^7.2.3"

packages/main/package.json

@@ -5,11 +5,11 @@
   "main": "main/index.js",
   "scripts": {
     "postinstall": "electron-rebuild -f -w better-sqlite3",
-    "dev": "cross-env NODE_ENV=development ts-node script/dev.ts",
-    "build": "cross-env NODE_ENV=production ts-node script/build.ts",
-    "pack": "cross-env NODE_ENV=development ts-node script/release.ts",
+    "dev": "cross-env NODE_ENV=development VITE_CJS_IGNORE_WARNING=true ts-node scripts/dev.ts",
+    "build": "cross-env NODE_ENV=production ts-node scripts/build.ts",
+    "pack": "cross-env NODE_ENV=development ts-node scripts/release.ts",
     "types": "tsc --emitDeclarationOnly",
-    "release": "cross-env NODE_ENV=production ts-node script/release.ts"
+    "release": "cross-env NODE_ENV=production ts-node scripts/release.ts"
   },
   "author": "",
   "license": "MIT",
@@ -38,7 +38,8 @@
     "prebuild-install": "^7.1.1",
     "prettier": "2.8.8",
     "semver": "^7.5.2",
-    "typescript": "^5.1.3"
+    "typescript": "^5.1.3",
+    "vite": "^5.0.11"
   },
   "dependencies": {
     "@cliqz/adblocker-electron": "^1.26.6",

packages/main/plugin/package.json

@@ -4,7 +4,6 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
@@ -15,6 +14,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@types/node": "^20.3.1",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",

packages/main/plugin/src/App.tsx

@@ -3,6 +3,7 @@ import { FloatButton, Button, Dropdown, Space } from "antd";
 import "./App.scss";
 import logo from "./assets/logo.png";
 import { WebSource } from "./types";
+import { ipcRenderer } from "electron/renderer";
 
 function App() {
   const [items, setItems] = useState<WebSource[]>([]);
@@ -14,13 +15,10 @@ function App() {
   };
 
   useEffect(() => {
-    window?.ipcRenderer.on("webview-link-message", receiveMessage);
+    ipcRenderer.on("webview-link-message", receiveMessage);
 
     return () => {
-      window?.ipcRenderer.removeListener(
-        "webview-link-message",
-        receiveMessage
-      );
+      ipcRenderer.removeListener("webview-link-message", receiveMessage);
     };
   }, []);
 
@@ -38,7 +36,7 @@ function App() {
             label: (
               <Space
                 onClick={() => {
-                  window?.ipcRenderer.invoke("add-download-item", {
+                  ipcRenderer.invoke("add-download-item", {
                     name: item.name,
                     url: item.url,
                     type: item.type,

packages/main/plugin/src/main.tsx

@@ -3,12 +3,6 @@ import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.scss";
 
-declare global {
-  interface Window {
-    ipcRenderer: import("electron").IpcRenderer;
-  }
-}
-
 export function mount() {
   const root = document.createElement("div");
   root.id = "MediagoRoot";
@@ -21,9 +15,5 @@ export function mount() {
 }
 
 document.addEventListener("DOMContentLoaded", async () => {
-  if (import.meta.env.NODE_ENV === "production") {
-    const { ipcRenderer } = await import("electron/renderer");
-    window.ipcRenderer = ipcRenderer;
-  }
   mount();
 });

packages/main/plugin/vite.config.ts

@@ -9,10 +9,10 @@ export default defineConfig({
     lib: {
       entry: path.resolve(__dirname, "./src/main.tsx"),
       name: "plugin",
-      fileName: () => "plugin.js",
+      fileName: () => "index.js",
       formats: ["cjs"],
     },
-    outDir: path.resolve(__dirname, "../main/app/plugin"),
+    outDir: path.resolve(__dirname, "../../main/app/plugin"),
     emptyOutDir: true,
     rollupOptions: {
       external: ["electron/renderer"],

packages/main/scripts/dev.ts

@@ -4,6 +4,8 @@ import * as esbuild from "esbuild";
 import chokidar from "chokidar";
 import { loadDotEnvRuntime, mainResolve, log, copyResource } from "./utils";
 import { external } from "./config";
+import { build } from "vite";
+import path from "path";
 
 let electronProcess: ChildProcessWithoutNullStreams | null = null;
 
@@ -54,6 +56,18 @@ function startElectron() {
   });
 }
 
+function restartElectron() {
+  if (electronProcess && electronProcess.pid) {
+    if (process.platform === "darwin") {
+      spawn("kill", ["-9", String(electronProcess.pid)]);
+    } else {
+      process.kill(electronProcess.pid);
+    }
+    electronProcess = null;
+    startElectron();
+  }
+}
+
 async function start() {
   const mainContext = await esbuild.context({
     ...buildConfig,
@@ -62,28 +76,24 @@ async function start() {
 
   const preloadContext = await esbuild.context({
     ...buildConfig,
-    entryPoints: [
-      mainResolve("src/preload.ts"),
-      mainResolve("src/devReload.ts"),
-    ],
+    entryPoints: [mainResolve("src/preload.ts")],
     platform: "browser",
   });
 
   const watcher = chokidar.watch("./src");
-
   watcher.on("change", async () => {
     await mainContext.rebuild();
     await preloadContext.rebuild();
     log("watch build succeed.");
-    if (electronProcess && electronProcess.pid) {
-      if (process.platform === "darwin") {
-        spawn("kill", ["-9", String(electronProcess.pid)]);
-      } else {
-        process.kill(electronProcess.pid);
-      }
-      electronProcess = null;
-      startElectron();
-    }
+    restartElectron();
+  });
+
+  const pluginRoot = path.resolve(__dirname, "../plugin");
+  const watcher2 = chokidar.watch(pluginRoot);
+  watcher2.on("change", async () => {
+    console.log("plugin changed");
+    await build({ root: pluginRoot });
+    restartElectron();
   });
 
   try {

packages/main/src/devReload.ts

@@ -1,37 +0,0 @@
-/* eslint-env browser */
-interface ScriptProps {
-  src?: string;
-  textContent?: string;
-}
-function insertModuleScript({ src, textContent }: ScriptProps) {
-  const script = document.createElement("script");
-  script.type = "module";
-  if (src) {
-    script.src = src;
-  }
-  if (textContent) {
-    script.textContent = textContent;
-  }
-  document.body.appendChild(script);
-}
-
-document.addEventListener("DOMContentLoaded", () => {
-  // refresh
-  insertModuleScript({
-    textContent: `import RefreshRuntime from "http://localhost:5173/@react-refresh"
-RefreshRuntime.injectIntoGlobalHook(window)
-window.$RefreshReg$ = () => {}
-window.$RefreshSig$ = () => (type) => type
-window.__vite_plugin_react_preamble_installed__ = true
-`,
-  });
-  // vite client
-  insertModuleScript({
-    src: "http://localhost:5173/@vite/client",
-  });
-  // components
-  insertModuleScript({
-    textContent: `import { mount } from "http://localhost:5173/src/main.tsx"
-mount()`,
-  });
-});

packages/main/src/services/WebviewService.ts

@@ -106,9 +106,7 @@ export default class WebviewService {
     this.view = new BrowserView({
       webPreferences: {
         partition: PERSIST_WEBVIEW,
-        preload: isDev
-          ? path.resolve(__dirname, "./devReload.js")
-          : path.resolve(__dirname, "../../plugin/plugin.js"),
+        preload: path.resolve(__dirname, "../../plugin/index.js"),
       },
     });
     this.view.setBackgroundColor("#fff");

packages/mobile/index.html

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>media download</title>
   </head>
   <body>
     <div id="app"></div>

pnpm-lock.yaml

@@ -16,6 +16,9 @@ importers:
       '@waline/client':
         specifier: ^2.15.5
         version: 2.15.8
+      cross-env:
+        specifier: ^7.0.3
+        version: 7.0.3
       vitepress:
         specifier: 1.0.0-beta.3
         version: 1.0.0-beta.3(@algolia/client-search@4.22.1)(search-insights@2.13.0)
@@ -164,6 +167,9 @@ importers:
       typescript:
         specifier: ^5.1.3
         version: 5.1.6
+      vite:
+        specifier: ^5.0.11
+        version: 5.0.11(@types/node@20.11.0)
 
   packages/main/app:
     dependencies:
@@ -178,6 +184,55 @@ importers:
         specifier: ^25.2.0
         version: 25.9.8
 
+  packages/main/plugin:
+    dependencies:
+      antd:
+        specifier: ^5.12.8
+        version: 5.12.8(react-dom@18.2.0)(react@18.2.0)
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
+    devDependencies:
+      '@types/node':
+        specifier: ^20.3.1
+        version: 20.11.0
+      '@types/react':
+        specifier: ^18.2.43
+        version: 18.2.47
+      '@types/react-dom':
+        specifier: ^18.2.17
+        version: 18.2.18
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^6.14.0
+        version: 6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@5.1.6)
+      '@typescript-eslint/parser':
+        specifier: ^6.14.0
+        version: 6.18.1(eslint@8.56.0)(typescript@5.1.6)
+      '@vitejs/plugin-react':
+        specifier: ^4.2.1
+        version: 4.2.1(vite@5.0.11)
+      electron:
+        specifier: 25.9.8
+        version: 25.9.8
+      eslint:
+        specifier: ^8.55.0
+        version: 8.56.0
+      eslint-plugin-react-hooks:
+        specifier: ^4.6.0
+        version: 4.6.0(eslint@8.56.0)
+      eslint-plugin-react-refresh:
+        specifier: ^0.4.5
+        version: 0.4.5(eslint@8.56.0)
+      typescript:
+        specifier: ^5.1.3
+        version: 5.1.6
+      vite:
+        specifier: ^5.0.8
+        version: 5.0.11(@types/node@20.11.0)
+
   packages/mobile:
     dependencies:
       axios:
@@ -275,6 +330,9 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
     devDependencies:
+      '@types/node':
+        specifier: ^20.3.1
+        version: 20.11.0
       '@types/react':
         specifier: ^18.2.43
         version: 18.2.47
@@ -307,7 +365,7 @@ importers:
         version: 5.1.6
       vite:
         specifier: ^5.0.8
-        version: 5.0.11
+        version: 5.0.11(@types/node@20.11.0)
 
   packages/renderer:
     dependencies:
@@ -3054,7 +3112,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.7)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.0
-      vite: 5.0.11
+      vite: 5.0.11(@types/node@20.11.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -9602,7 +9660,7 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vite@5.0.11:
+  /vite@5.0.11(@types/node@20.11.0):
     resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -9630,6 +9688,7 @@ packages:
       terser:
         optional: true
     dependencies:
+      '@types/node': 20.11.0
       esbuild: 0.19.11
       postcss: 8.4.33
       rollup: 4.9.5