chore: electron integrate with react (for basic setting)

lcomplete · Mar 28, 2023 · 0f24c63 · 0f24c63
1 parent 19db040
commit 0f24c63
Show file tree

Hide file tree

Showing 16 changed files with 6,955 additions and 101 deletions.
diff --git a/app/electron/package.json b/app/electron/package.json
@@ -1,36 +1,51 @@
 {
   "private": true,
-  "main": "main/index.js",
+  "main": "dist/index.js",
   "productName": "huntly",
   "scripts": {
-    "clean": "rimraf dist main",
-    "dev": "npm run build-electron && electron .",
-    "build-electron": "tsc -p src",
+    "clean": "rimraf dist",
+    "start:renderer": "webpack --config webpack/webpack.dev.js --watch",
+    "dev": "webpack --config webpack/webpack.dev.js && npm run build-electron && electron .",
+    "build-electron": "tsc -p src/main",
     "build": "npm run build-electron",
     "pack-app": "npm run build && electron-builder --dir",
     "dist": "npm run build && electron-builder",
-    "type-check": "tsc -p src/tsconfig.json",
+    "type-check": "tsc -p src/main/tsconfig.json",
     "lint": "eslint ."
   },
   "dependencies": {
     "app-root-path": "^3.1.0",
     "electron-is-dev": "^1.2.0",
-    "electron-window-state": "^5.0.3"
+    "electron-window-state": "^5.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@electron-forge/cli": "^6.0.5",
+    "@electron-forge/plugin-webpack": "^6.0.5",
     "@types/node": "^17.0.40",
+    "@types/react": "^18.0.30",
+    "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.27.1",
     "@typescript-eslint/parser": "^5.27.1",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.3",
     "electron": "^19.0.3",
     "electron-builder": "^23.0.3",
+    "electron-forge": "^5.2.4",
     "eslint": "^8.17.0",
     "rimraf": "^3.0.0",
-    "typescript": "^4.7.3"
+    "style-loader": "^3.3.2",
+    "ts-loader": "^9.4.2",
+    "typescript": "^4.7.3",
+    "webpack": "^5.76.3",
+    "webpack-cli": "^5.0.1",
+    "webpack-merge": "^5.8.0"
   },
   "build": {
     "asar": true,
     "files": [
-      "main"
+      "dist"
     ]
   }
 }
diff --git a/app/electron/public/renderer/index.html b/app/electron/public/renderer/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Huntly Extension Options</title>
+    <script src="vendor.js"></script>
+</head>
+
+<body>
+<div id="root"></div>
+<script src="app.js"></script>
+</body>
+</html>
diff --git a/app/electron/src/eventHandler.ts → app/electron/src/main/eventHandler.ts b/app/electron/src/eventHandler.ts → app/electron/src/main/eventHandler.ts
diff --git a/app/electron/src/index.ts → app/electron/src/main/index.ts b/app/electron/src/index.ts → app/electron/src/main/index.ts
@@ -31,7 +31,7 @@ app.on("ready", async () => {
   const url = isDev
     ? 'http://localhost:3000/'
     : format({
-      pathname: join(__dirname, '../renderer/out/index.html'),
+      pathname: join(__dirname, './renderer/index.html'),
       protocol: 'file:',
       slashes: true,
     })

diff --git a/app/electron/src/preload.ts → app/electron/src/main/preload.ts b/app/electron/src/preload.ts → app/electron/src/main/preload.ts
diff --git a/app/electron/src/tsconfig.json → app/electron/src/main/tsconfig.json b/app/electron/src/tsconfig.json → app/electron/src/main/tsconfig.json
@@ -21,7 +21,7 @@
     "skipLibCheck": true,
     "strict": true,
     "target": "esnext",
-    "outDir": "../main"
+    "outDir": "../../dist/"
   },
   "exclude": ["node_modules"],
   "include": ["**/*.ts", "**/*.tsx", "**/*.js"]

diff --git a/app/electron/src/types.ts → app/electron/src/main/types.ts b/app/electron/src/types.ts → app/electron/src/main/types.ts
diff --git a/app/electron/src/utilsBridge.ts → app/electron/src/main/utilsBridge.ts b/app/electron/src/utilsBridge.ts → app/electron/src/main/utilsBridge.ts
diff --git a/app/electron/src/window.ts → app/electron/src/main/window.ts b/app/electron/src/window.ts → app/electron/src/main/window.ts
diff --git a/app/electron/src/renderer/App.tsx b/app/electron/src/renderer/App.tsx
@@ -0,0 +1,14 @@
+import {createRoot} from "react-dom/client";
+
+export default function App() {
+  //todo add basic setting modal
+  return <div>hello</div>
+}
+
+const root = createRoot(
+  document.getElementById("root") as HTMLElement
+);
+
+root.render(
+  <App/>
+);
diff --git a/app/electron/src/renderer/app.css b/app/electron/src/renderer/app.css
diff --git a/app/electron/tsconfig.json b/app/electron/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "incremental": true,
+        "target": "es2021",
+        "module": "commonjs",
+        "lib": ["dom", "es2021"],
+        "jsx": "react-jsx",
+        "strict": true,
+        "sourceMap": true,
+        "baseUrl": "./src",
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "resolveJsonModule": true,
+        "allowJs": true,
+    },
+    "exclude": ["test", "release/build", "release/app/dist"]
+}
diff --git a/app/electron/webpack/webpack.common.js b/app/electron/webpack/webpack.common.js
@@ -0,0 +1,44 @@
+const webpack = require("webpack");
+const path = require("path");
+const CopyPlugin = require("copy-webpack-plugin");
+const srcDir = path.join(__dirname, "..", "src/renderer");
+
+module.exports = {
+  entry: {
+    app: path.join(srcDir, 'App.tsx'),
+  },
+  output: {
+    path: path.join(__dirname, "../dist/renderer/"),
+    filename: "[name].js",
+  },
+  optimization: {
+    splitChunks: {
+      name: "vendor",
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: [
+          {loader: "style-loader"},
+          {loader: "css-loader"}
+        ]
+      },
+      {
+        test: /\.tsx?$/,
+        use: "ts-loader",
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js", ".css"],
+  },
+  plugins: [
+    new CopyPlugin({
+      patterns: [{from: ".", to: "../", context: "public"}],
+      options: {},
+    }),
+  ],
+};
diff --git a/app/electron/webpack/webpack.dev.js b/app/electron/webpack/webpack.dev.js
@@ -0,0 +1,7 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    devtool: 'inline-source-map',
+    mode: 'development',
+});
diff --git a/app/electron/webpack/webpack.prod.js b/app/electron/webpack/webpack.prod.js
@@ -0,0 +1,6 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    mode: 'production'
+});