appium · eglitise · Jul 21, 2024 · Jul 19, 2024 · Jul 19, 2024 · Jul 19, 2024
diff --git a/app/common/index.html b/app/common/index.html
@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="text/javascript" src="renderer/index.jsx"></script>
+    <script type="module" src="renderer/index.jsx"></script>
   </body>
 </html>
diff --git a/app/common/renderer/assets/stylesheets/main.less b/app/common/renderer/assets/stylesheets/main.less
@@ -1,5 +1,5 @@
-@import '../../../../../node_modules/antd/dist/antd.less';
-@import (inline) '../../../../../node_modules/highlight.js/styles/intellij-light.css';
+@import 'antd/dist/antd.less';
+@import (inline) 'highlight.js/styles/intellij-light.css';
 
 // ANTD variables
 @font-size-base: 12px;

diff --git a/app/common/renderer/index.jsx b/app/common/renderer/index.jsx
@@ -13,14 +13,3 @@ root.render(
     <Root store={store} />
   </ErrorBoundary>,
 );
-
-if (module.hot) {
-  module.hot.accept('./Root', () => {
-    const NextRoot = require('./Root.jsx').default;
-    root.render(
-      <ErrorBoundary>
-        <NextRoot store={store} />
-      </ErrorBoundary>,
-    );
-  });
-}
diff --git a/app/common/renderer/polyfills.js b/app/common/renderer/polyfills.js
@@ -1,39 +1,16 @@
-let settings, clipboard, shell, ipcRenderer, i18NextBackend, i18NextBackendOptions, fs, util;
+/**
+ * The '#local-polyfills' alias is defined in both Vite config files.
+ * Since both files define different resolution paths,
+ * they cannot be added to tsconfig and eslint configurations
+ */
 
-function buildForBrowser() {
-  if (process.env.BUILD_BROWSER) {
-    return true;
-  }
-
-  if (typeof navigator !== 'undefined' && !/electron/i.test(navigator.userAgent)) {
-    return true;
-  }
-
-  return false;
-}
-
-if (buildForBrowser()) {
-  ({
-    settings,
-    clipboard,
-    shell,
-    ipcRenderer,
-    i18NextBackend,
-    i18NextBackendOptions,
-    fs,
-    util,
-  } = require('../../web/polyfills'));
-} else {
-  ({
-    settings,
-    clipboard,
-    shell,
-    ipcRenderer,
-    i18NextBackend,
-    i18NextBackendOptions,
-    fs,
-    util,
-  } = require('../../electron/renderer/polyfills'));
-}
-
-export {settings, clipboard, shell, ipcRenderer, i18NextBackend, i18NextBackendOptions, fs, util};
+export {
+  settings,
+  clipboard,
+  shell,
+  ipcRenderer,
+  i18NextBackend,
+  i18NextBackendOptions,
+  fs,
+  util,
+} from '#local-polyfills'; // eslint-disable-line import/no-unresolved
diff --git a/app/electron/main/i18next.js b/app/electron/main/i18next.js
@@ -1,12 +1,18 @@
 import i18n from 'i18next';
 import i18NextBackend from 'i18next-fs-backend';
-import path from 'path';
+import {join} from 'path';
 
 import {getI18NextOptions} from '../../common/shared/i18next.config';
 
+const localesPath =
+  process.env.NODE_ENV === 'development'
+    ? join('app', 'common', 'public', 'locales') // from project root
+    : join(__dirname, '..', 'renderer', 'locales'); // from 'main' in package.json
+const translationFilePath = join(localesPath, '{{lng}}', '{{ns}}.json');
+
 const i18NextBackendOptions = {
-  loadPath: path.join(__dirname, '{{lng}}/{{ns}}.json'),
-  addPath: path.join(__dirname, '{{lng}}/{{ns}}.json'),
+  loadPath: translationFilePath,
+  addPath: translationFilePath,
   jsonIndent: 2,
 };
 

diff --git a/app/electron/main/windows.js b/app/electron/main/windows.js
@@ -1,13 +1,19 @@
 import {BrowserWindow, Menu, dialog, ipcMain, webContents} from 'electron';
+import {join} from 'path';
 
 import settings from '../../common/shared/settings';
 import i18n from './i18next';
 import {openFilePath} from './main';
 import {APPIUM_SESSION_EXTENSION, isDev} from './helpers';
 import {rebuildMenus} from './menus';
 
-const mainUrl = `file://${__dirname}/index.html`;
-const splashUrl = `file://${__dirname}/splash.html`;
+const mainPath = isDev
+  ? process.env.ELECTRON_RENDERER_URL
+  : join(__dirname, '..', 'renderer', 'index.html'); // from 'main' in package.json
+const splashPath = isDev
+  ? `${process.env.ELECTRON_RENDERER_URL}/splash.html`
+  : join(__dirname, '..', 'renderer', 'splash.html'); // from 'main' in package.json
+const pathLoadMethod = isDev ? 'loadURL' : 'loadFile';
 
 let mainWindow = null;
 
@@ -30,6 +36,8 @@ function buildSessionWindow() {
     minHeight: 710,
     titleBarStyle: 'hiddenInset',
     webPreferences: {
+      preload: join(__dirname, '../preload/preload.js'), // from 'main' in package.json
+      sandbox: false,
       nodeIntegration: true,
       contextIsolation: false,
       enableRemoteModule: true,
@@ -52,12 +60,11 @@ function buildSessionWindow() {
 
 export function setupMainWindow() {
   const splashWindow = buildSplashWindow();
-  mainWindow = buildSessionWindow();
-
-  splashWindow.loadURL(splashUrl);
+  splashWindow[pathLoadMethod](splashPath);
   splashWindow.show();
 
-  mainWindow.loadURL(mainUrl);
+  mainWindow = buildSessionWindow();
+  mainWindow[pathLoadMethod](mainPath);
 
   mainWindow.webContents.on('did-finish-load', () => {
     splashWindow.destroy();
@@ -101,6 +108,6 @@ export function setupMainWindow() {
 
 export function launchNewSessionWindow() {
   const win = buildSessionWindow();
-  win.loadURL(mainUrl);
+  win[pathLoadMethod](mainPath);
   win.show();
 }
diff --git a/app/electron/preload/preload.js b/app/electron/preload/preload.js
@@ -0,0 +1 @@
+// Required by Vite
diff --git a/app/electron/renderer/polyfills.js b/app/electron/renderer/polyfills.js
@@ -2,12 +2,18 @@ import {clipboard, ipcRenderer, shell} from 'electron';
 import settings from 'electron-settings';
 import fs from 'fs';
 import i18NextBackend from 'i18next-fs-backend';
-import path from 'path';
+import {join} from 'path';
 import util from 'util';
 
+const localesPath =
+  process.env.NODE_ENV === 'development'
+    ? join('app', 'common', 'public', 'locales') // from project root
+    : join(__dirname, '..', 'renderer', 'locales'); // from 'main' in package.json
+const translationFilePath = join(localesPath, '{{lng}}', '{{ns}}.json');
+
 const i18NextBackendOptions = {
-  loadPath: path.join(__dirname, '{{lng}}/{{ns}}.json'),
-  addPath: path.join(__dirname, '{{lng}}/{{ns}}.json'),
+  loadPath: translationFilePath,
+  addPath: translationFilePath,
   jsonIndent: 2,
 };
 

diff --git a/app/web/polyfills.js b/app/web/polyfills.js
@@ -2,6 +2,11 @@ import i18NextBackend from 'i18next-chained-backend';
 import LocalStorageBackend from 'i18next-localstorage-backend';
 import HttpApi from 'i18next-http-backend';
 
+const localesPath =
+  process.env.NODE_ENV === 'development'
+    ? '/locales' // 'public' folder contents are served at '/'
+    : '../locales'; // from 'dist-browser/assets/'
+
 const browser = {
   clipboard: {
     writeText: (text) => navigator.clipboard.writeText(text),
@@ -43,7 +48,7 @@ const i18NextBackendOptions = {
   backendOptions: [
     {},
     {
-      loadPath: './{{lng}}/{{ns}}.json',
+      loadPath: `${localesPath}/{{lng}}/{{ns}}.json`,
     },
   ],
 };

diff --git a/ci-jobs/templates/package.yml b/ci-jobs/templates/package.yml
@@ -26,7 +26,7 @@ jobs:
           version: '20.x'
       - script: npm ci
         displayName: Install dependencies
-      - script: npm run build
+      - script: npm run build:electron
         displayName: Build
       - script: ${{ parameters.buildScript }}
         displayName: Bundle

diff --git a/docs/contributing.md b/docs/contributing.md
@@ -25,17 +25,11 @@ npm ci
       - [Python](https://www.python.org/)
       - some C/C++ compiler tools matching your operating system
 
-Watch changes during development:
+Run in development mode:
 
 ```bash
-npm run dev           # desktop app
-npm run watch:browser # browser app
-```
-
-Start the production version of the desktop app:
-
-```bash
-npm run start
+npm run dev:browser
+npm run dev:electron
 ```
 
 Run tests:
@@ -45,26 +39,33 @@ npm run test:lint
 npm run test:format
 npm run test:unit
 npm run test:integration
-npm run e2e
+npm run test:e2e
 
 npm run test # lint, unit & integration
 ```
 
-Build the full app (desktop app into `/dist`, browser app into `/dist-browser`):
+Build the production version (desktop app into `/dist`, browser app into `/dist-browser`):
 
 ```bash
-npm run build # desktop and browser
 npm run build:browser
+npm run build:electron
+```
+
+Build the production version and run it:
+
+```bash
+npm run preview:browser
+npm run preview:electron
 ```
 
-Build the app executable package (and other artifacts) for your platform into `/release`:
+Build the Electron app executable package (and other artifacts) for your platform into `/release`:
 
 !!! note
 
     For macOS, this requires code signing environment variables to be set.
 
 ```bash
-npx electron-builder build --publish never
+npm run pack:electron
 ```
 
 ## Documentation

diff --git a/electron-builder.json b/electron-builder.json
@@ -5,7 +5,7 @@
   "directories": {
     "output": "release"
   },
-  "files": ["dist/", "main.js", "main.js.map"],
+  "files": ["dist/"],
   "artifactName": "${productName}-${version}-${os}-${arch}.${ext}",
   "fileAssociations": [
     {

diff --git a/electron.vite.config.mjs b/electron.vite.config.mjs
@@ -0,0 +1,57 @@
+import react from '@vitejs/plugin-react';
+import {defineConfig, externalizeDepsPlugin} from 'electron-vite';
+import {join} from 'path';
+import renderer from 'vite-plugin-electron-renderer';
+
+export default defineConfig({
+  main: {
+    build: {
+      outDir: join(__dirname, 'dist/main'),
+      lib: {
+        entry: join(__dirname, 'app/electron/main/main.js'),
+      },
+    },
+    // main process has a few imports from common, so this is needed
+    resolve: {
+      alias: {
+        '#local-polyfills': join(__dirname, 'app/electron/renderer/polyfills'),
+      },
+    },
+    plugins: [externalizeDepsPlugin()],
+  },
+  preload: {
+    build: {
+      outDir: join(__dirname, 'dist/preload'),
+      lib: {
+        entry: join(__dirname, 'app/electron/preload/preload.js'),
+      },
+    },
+    plugins: [externalizeDepsPlugin()],
+  },
+  renderer: {
+    build: {
+      outDir: join(__dirname, 'dist/renderer'),
+      rollupOptions: {
+        input: {
+          main: join(__dirname, 'app/common/index.html'),
+          splash: join(__dirname, 'app/common/splash.html'),
+        },
+      },
+    },
+    css: {
+      preprocessorOptions: {
+        less: {
+          javascriptEnabled: true,
+          additionalData: '@root-entry-name: default;',
+        },
+      },
+    },
+    plugins: [react(), renderer()],
+    resolve: {
+      alias: {
+        '#local-polyfills': join(__dirname, 'app/electron/renderer/polyfills'),
+      },
+    },
+    root: join(__dirname, 'app/common'),
+  },
+});