feat: electron app setup (#123)

vpbs2 · web-flow · commit fd2e3737f62e · 2025-01-06T21:10:56.000+05:30
* add: electron project

* update: project

* update: cleanup

* fix: build

* fix: lint
diff --git a/benchmarking/src/app/app.tsx b/benchmarking/src/app/app.tsx
@@ -1,4 +1,4 @@
-import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
+import { Link, Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 import { IndexedDBMProvider } from './dbm-context/indexed-dbm-context';
 import { MemoryDBMProvider } from './dbm-context/memory-dbm-context';
 import { ParallelIndexedDBMProvider } from './dbm-context/parallel-indexed-dbm-context';
@@ -10,6 +10,25 @@ import { QueryBenchmarking } from './query-benchmarking/query-benchmarking';
 export function App() {
   return (
     <Router>
+      <nav>
+        <ul>
+          <li>
+            <Link to="/raw-dbm">Raw DuckDB</Link>
+          </li>
+          <li>
+            <Link to="/memory-dbm">In Memory Sequence DuckDB</Link>
+          </li>
+          <li>
+            <Link to="/indexed-dbm">IndexedDB DuckDB</Link>
+          </li>
+          <li>
+            <Link to="/parallel-memory-dbm">Parallel Memory DuckDB</Link>
+          </li>
+          <li>
+            <Link to="/parallel-indexed-dbm">Parallel Indexed DuckDB</Link>
+          </li>
+        </ul>
+      </nav>
       <Routes>
         <Route
           path="/raw-dbm"
diff --git a/benchmarking/src/app/benchmarking-tests/dbm-benchmarking.spec.ts b/benchmarking/src/app/benchmarking-tests/dbm-benchmarking.spec.ts
@@ -28,7 +28,7 @@ describe('Benchmarking DBMs', () => {
     while (!serverStarted) {
       console.info('Waiting for server to start');
       try {
-        await page.goto('http://localhost:4200');
+        await page.goto('http://localhost:4204');
         serverStarted = true;
       } catch (error) {
         console.info('Server not started yet', error);
@@ -51,7 +51,7 @@ describe('Benchmarking DBMs', () => {
   }, 30000);
 
   it('Benchmark raw duckdb with memory sequence duckdb', async () => {
-    await page.goto('http://localhost:4200/raw-dbm');
+    await page.goto('http://localhost:4204/raw-dbm');
     /**
      * wait for total time to be render
      */
@@ -65,7 +65,7 @@ describe('Benchmarking DBMs', () => {
 
     console.info('totalTimeForRawDB', totalTimeForRawDB);
 
-    await page.goto('http://localhost:4200/memory-dbm');
+    await page.goto('http://localhost:4204/memory-dbm');
 
     /**
      * wait for total time to be render
@@ -88,7 +88,7 @@ describe('Benchmarking DBMs', () => {
   }, 220000);
 
   it('Benchmark indexed dbm duckdb', async () => {
-    await page.goto('http://localhost:4200/indexed-dbm');
+    await page.goto('http://localhost:4204/indexed-dbm');
     /**
      * wait for total time to be render
      */
@@ -109,7 +109,7 @@ describe('Benchmarking DBMs', () => {
   }, 300000);
 
   it('Benchmark parallel memory dbm duckdb', async () => {
-    await page.goto('http://localhost:4200/parallel-memory-dbm');
+    await page.goto('http://localhost:4204/parallel-memory-dbm');
     /**
      * wait for total time to be render
      */
diff --git a/benchmarking/src/app/dbm-context/parallel-indexed-dbm-context.tsx b/benchmarking/src/app/dbm-context/parallel-indexed-dbm-context.tsx
@@ -37,8 +37,8 @@ export const ParallelIndexedDBMProvider = ({
       return;
     }
     const iframeManager = new IFrameRunnerManager({
-      runnerURL: 'http://localhost:4200/runner/indexeddb-runner.html',
-      origin: 'http://localhost:4200',
+      runnerURL: 'http://localhost:4204/runner/indexeddb-runner.html',
+      origin: 'http://localhost:4204',
       totalRunners: 4,
       fetchTableFileBuffers: async (table) => {
         return [];
diff --git a/benchmarking/src/app/dbm-context/parallel-memory-dbm-context.tsx b/benchmarking/src/app/dbm-context/parallel-memory-dbm-context.tsx
@@ -37,8 +37,8 @@ export const ParallelMemoryDBMProvider = ({
       return;
     }
     const iframeManager = new IFrameRunnerManager({
-      runnerURL: 'http://localhost:4200/runner/memory-runner.html',
-      origin: 'http://localhost:4200',
+      runnerURL: 'http://localhost:4204/runner/memory-runner.html',
+      origin: 'http://localhost:4204',
       totalRunners: 4,
       fetchTableFileBuffers: async (table) => {
         return fileManagerRef.current.getTableBufferData(table);
diff --git a/benchmarking/src/app/file-loader/file-loader.tsx b/benchmarking/src/app/file-loader/file-loader.tsx
@@ -20,7 +20,7 @@ export const FileLoader = ({
   useClassicEffect(() => {
     (async () => {
       const file = await axios.get(
-        'http://localhost:4200/data-sets/fhvhv_tripdata_2023-01.parquet',
+        'http://localhost:4204/data-sets/fhvhv_tripdata_2023-01.parquet',
         { responseType: 'arraybuffer' }
       );
       const fileBuffer = file.data;
diff --git a/benchmarking/vite.config.ts b/benchmarking/vite.config.ts
@@ -7,7 +7,7 @@ export default defineConfig({
   cacheDir: '../node_modules/.vite/benchmarking-app',
 
   server: {
-    port: 4200,
+    port: 4204,
     host: 'localhost',
     headers: {
       'Cross-Origin-Opener-Policy': 'same-origin',
diff --git a/electron-app/.eslintrc.json b/electron-app/.eslintrc.json
@@ -0,0 +1,25 @@
+{
+  "extends": ["../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}
diff --git a/electron-app/jest.config.ts b/electron-app/jest.config.ts
@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'electron-app',
+  preset: '../jest.preset.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../coverage/electron-app',
+};
diff --git a/electron-app/project.json b/electron-app/project.json
@@ -0,0 +1,76 @@
+{
+  "name": "electron-app",
+  "$schema": "../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "electron-app/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "nx-electron:build",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/electron-app",
+        "main": "electron-app/src/main.ts",
+        "tsConfig": "electron-app/tsconfig.app.json",
+        "assets": ["electron-app/src/assets"]
+      },
+      "configurations": {
+        "production": {
+          "optimization": true,
+          "extractLicenses": true,
+          "inspect": false,
+          "fileReplacements": [
+            {
+              "replace": "electron-app/src/environments/environment.ts",
+              "with": "electron-app/src/environments/environment.prod.ts"
+            }
+          ]
+        }
+      }
+    },
+    "serve": {
+      "executor": "nx-electron:execute",
+      "options": {
+        "buildTarget": "electron-app:build"
+      }
+    },
+    "package": {
+      "executor": "nx-electron:package",
+      "options": {
+        "name": "electron-app",
+        "frontendProject": "benchmarking-app",
+        "sourcePath": "dist/apps",
+        "outputPath": "dist/packages",
+        "prepackageOnly": true
+      }
+    },
+    "make": {
+      "executor": "nx-electron:make",
+      "options": {
+        "name": "electron-app",
+        "frontendProject": "benchmarking-app",
+        "sourcePath": "dist/apps",
+        "outputPath": "dist/executables"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "lintFilePatterns": ["electron-app/**/*.ts"]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "electron-app/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    }
+  }
+}
diff --git a/electron-app/src/app/api/main.preload.ts b/electron-app/src/app/api/main.preload.ts
@@ -0,0 +1,5 @@
+import { contextBridge } from 'electron';
+
+contextBridge.exposeInMainWorld('electron', {
+  platform: process.platform,
+});
diff --git a/electron-app/src/app/app.ts b/electron-app/src/app/app.ts
@@ -0,0 +1,94 @@
+import { BrowserWindow, screen } from 'electron';
+import { join } from 'path';
+import { format } from 'url';
+import { environment } from '../environments/environment';
+import { RENDER_APP_PORT, RENDERER_APP_NAME } from './constants';
+
+export default class App {
+  static mainWindow: Electron.BrowserWindow;
+  static application: Electron.App;
+  static BrowserWindow;
+
+  public static isDevelopmentMode() {
+    const isEnvironmentSet: boolean = 'ELECTRON_IS_DEV' in process.env;
+    const getFromEnvironment: boolean =
+      parseInt(process.env.ELECTRON_IS_DEV, 10) === 1;
+
+    return isEnvironmentSet ? getFromEnvironment : !environment.production;
+  }
+
+  private static onWindowAllClosed() {
+    if (process.platform !== 'darwin') {
+      App.application.quit();
+    }
+  }
+
+  private static onClose() {
+    App.mainWindow = null;
+  }
+
+  private static onReady() {
+    if (RENDERER_APP_NAME) {
+      App.initMainWindow();
+      App.loadMainWindow();
+    }
+  }
+
+  private static onActivate() {
+    if (App.mainWindow === null) {
+      App.onReady();
+    }
+  }
+
+  private static initMainWindow() {
+    const workAreaSize = screen.getPrimaryDisplay().workAreaSize;
+    const width = Math.min(1280, workAreaSize.width || 1280);
+    const height = Math.min(720, workAreaSize.height || 720);
+
+    // Create the browser window.
+    App.mainWindow = new BrowserWindow({
+      width: width,
+      height: height,
+      show: false,
+      webPreferences: {
+        contextIsolation: true,
+        backgroundThrottling: false,
+        preload: join(__dirname, 'main.preload.js'),
+      },
+    });
+    App.mainWindow.setMenu(null);
+    App.mainWindow.center();
+
+    App.mainWindow.once('ready-to-show', () => {
+      App.mainWindow.show();
+    });
+
+    // Emitted when the window is closed.
+    App.mainWindow.on('closed', () => {
+      App.mainWindow = null;
+    });
+  }
+
+  private static loadMainWindow() {
+    if (!App.application.isPackaged) {
+      App.mainWindow.loadURL(`http://localhost:${RENDER_APP_PORT}`);
+    } else {
+      App.mainWindow.loadURL(
+        format({
+          pathname: join(__dirname, '..', RENDERER_APP_NAME, 'index.html'),
+          protocol: 'file:',
+          slashes: true,
+        })
+      );
+    }
+  }
+
+  static main(app: Electron.App, browserWindow: typeof BrowserWindow) {
+    App.BrowserWindow = browserWindow;
+    App.application = app;
+
+    App.application.on('window-all-closed', App.onWindowAllClosed);
+    App.application.on('ready', App.onReady);
+    App.application.on('activate', App.onActivate);
+  }
+}
diff --git a/electron-app/src/app/constants.ts b/electron-app/src/app/constants.ts
@@ -0,0 +1,2 @@
+export const RENDER_APP_PORT = 4204;
+export const RENDERER_APP_NAME = 'benchmarking-app';
diff --git a/electron-app/src/app/events/electron.events.ts b/electron-app/src/app/events/electron.events.ts
@@ -0,0 +1,16 @@
+/**
+ * This module is responsible on handling all the inter process communications
+ * between the frontend to the electron backend.
+ */
+
+import { app, ipcMain } from 'electron';
+
+export default class ElectronEvents {
+  static bootstrapElectronEvents(): Electron.IpcMain {
+    return ipcMain;
+  }
+}
+
+ipcMain.on('quit', (event, code) => {
+  app.exit(code);
+});
diff --git a/electron-app/src/app/options/maker.options.json b/electron-app/src/app/options/maker.options.json
@@ -0,0 +1,3 @@
+{
+  "$schema": "../../../../../node_modules/nx-electron/src/validation/maker.schema.json"
+}
diff --git a/electron-app/src/assets/.gitkeep b/electron-app/src/assets/.gitkeep
diff --git a/electron-app/src/environments/environment.ts b/electron-app/src/environments/environment.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: false,
+};
diff --git a/electron-app/src/main.ts b/electron-app/src/main.ts
@@ -0,0 +1,17 @@
+import { app, BrowserWindow } from 'electron';
+import App from './app/app';
+import ElectronEvents from './app/events/electron.events';
+
+export default class Main {
+  static bootstrapApp() {
+    App.main(app, BrowserWindow);
+  }
+
+  static bootstrapAppEvents() {
+    ElectronEvents.bootstrapElectronEvents();
+  }
+}
+
+// bootstrap app
+Main.bootstrapApp();
+Main.bootstrapAppEvents();
diff --git a/electron-app/tsconfig.app.json b/electron-app/tsconfig.app.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../dist/out-tsc",
+    "types": ["node"]
+  },
+  "exclude": ["**/*.spec.ts", "**/*.test.ts"],
+  "include": ["**/*.ts"]
+}
diff --git a/electron-app/tsconfig.json b/electron-app/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "module": "commonjs"
+  },
+  "include": ["**/*.ts"]
+}
diff --git a/electron-app/tsconfig.spec.json b/electron-app/tsconfig.spec.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
