build: fix electron build gain focus on reloading in dev (#2088)

apps/electron/layers/main/src/main-window.ts

@@ -8,6 +8,7 @@ import { isMacOS } from '../../utils';
 const IS_DEV = process.env.NODE_ENV === 'development';
 
 async function createWindow() {
+  logger.info('create window');
   const mainWindowState = electronWindowState({
     defaultWidth: 1000,
     defaultHeight: 800,
@@ -46,7 +47,14 @@ async function createWindow() {
    * @see https://github.com/electron/electron/issues/25012
    */
   browserWindow.on('ready-to-show', () => {
-    browserWindow.show();
+    if (IS_DEV) {
+      // do not gain focus in dev mode
+      browserWindow.showInactive();
+    } else {
+      browserWindow.show();
+    }
+
+    logger.info('main window is ready to show');
 
     if (IS_DEV) {
       browserWindow.webContents.openDevTools();
@@ -62,13 +70,12 @@ async function createWindow() {
   /**
    * URL for main window.
    */
-  const pageUrl =
+  const pageUrl = process.env.DEV_SERVER_URL || 'file://./index.html'; // see protocol.ts
-    IS_DEV && process.env.DEV_SERVER_URL !== undefined
-      ? process.env.DEV_SERVER_URL
-      : 'file://./index.html'; // see protocol.ts
 
   await browserWindow.loadURL(pageUrl);
 
+  logger.info('main window is loaded at' + pageUrl);
+
   return browserWindow;
 }
 
@@ -86,9 +93,8 @@ export async function restoreOrCreateWindow() {
 
   if (browserWindow.isMinimized()) {
     browserWindow.restore();
+    logger.info('restore main window');
   }
 
-  logger.info('Create main window');
-
   return browserWindow;
 }

apps/electron/layers/main/src/protocol.ts

@@ -30,23 +30,21 @@ function toAbsolutePath(url: string) {
 }
 
 export function registerProtocol() {
-  if (process.env.NODE_ENV === 'production') {
+  protocol.interceptFileProtocol('file', (request, callback) => {
-    protocol.interceptFileProtocol('file', (request, callback) => {
+    const url = request.url.replace(/^file:\/\//, '');
-      const url = request.url.replace(/^file:\/\//, '');
+    const realpath = toAbsolutePath(url);
-      const realpath = toAbsolutePath(url);
+    // console.log('realpath', realpath, 'for', url);
-      // console.log('realpath', realpath, 'for', url);
+    callback(realpath);
-      callback(realpath);
+    return true;
-      return true;
+  });
-    });
 
-    protocol.registerFileProtocol('assets', (request, callback) => {
+  protocol.registerFileProtocol('assets', (request, callback) => {
-      const url = request.url.replace(/^assets:\/\//, '');
+    const url = request.url.replace(/^assets:\/\//, '');
-      const realpath = toAbsolutePath(url);
+    const realpath = toAbsolutePath(url);
-      // console.log('realpath', realpath, 'for', url);
+    // console.log('realpath', realpath, 'for', url);
-      callback(realpath);
+    callback(realpath);
-      return true;
+    return true;
-    });
+  });
-  }
 
   session.defaultSession.webRequest.onHeadersReceived(
     (responseDetails, callback) => {

apps/electron/layers/preload/src/index.ts

@@ -23,7 +23,6 @@ import { isMacOS } from '../../utils';
  */
 contextBridge.exposeInMainWorld('apis', {
   db: {
-    // TODO: do we need to store the workspace list locally?
     // workspace providers
     getDoc: (id: string): Promise<Uint8Array | null> =>
       ipcRenderer.invoke('db:get-doc', id),

apps/electron/package.json

@@ -6,8 +6,8 @@
   "description": "AFFiNE App",
   "homepage": "https://github.com/toeverything/AFFiNE",
   "scripts": {
-    "dev": "cross-env NODE_ENV=development node scripts/dev.mjs",
+    "dev": "cross-env DEV_SERVER_URL=http://localhost:8080 node scripts/dev.mjs",
-    "prod": "cross-env NODE_ENV=production node scripts/dev.mjs",
+    "prod": "node scripts/dev.mjs",
     "generate-assets": "zx scripts/generate-assets.mjs",
     "package": "electron-forge package",
     "make": "electron-forge make",

apps/electron/scripts/dev.mjs

@@ -35,8 +35,8 @@ try {
 }
 
 // hard-coded for now:
-// fixme(xp): report error if app is not running on port 8080
+// fixme(xp): report error if app is not running on DEV_SERVER_URL
-process.env.DEV_SERVER_URL = `http://localhost:8080`;
+const DEV_SERVER_URL = process.env.DEV_SERVER_URL;
 
 /** @type {ChildProcessWithoutNullStreams | null} */
 let spawnProcess = null;
@@ -50,10 +50,12 @@ function spawnOrReloadElectron() {
 
   spawnProcess = spawn(String(electronPath), ['.']);
 
-  spawnProcess.stdout.on(
+  spawnProcess.stdout.on('data', d => {
-    'data',
+    let str = d.toString().trim();
-    d => d.toString().trim() && console.warn(d.toString())
+    if (str) {
-  );
+      console.log(str);
+    }
+  });
   spawnProcess.stderr.on('data', d => {
     const data = d.toString().trim();
     if (!data) return;
@@ -99,13 +101,18 @@ async function main() {
   }
 
   async function watchMain() {
+    const define = {
+      ...common.main.define,
+      'process.env.NODE_ENV': `"${mode}"`,
+    };
+
+    if (DEV_SERVER_URL) {
+      define['process.env.DEV_SERVER_URL'] = `"${DEV_SERVER_URL}"`;
+    }
+
     const mainBuild = await esbuild.context({
       ...common.main,
-      define: {
+      define: define,
-        ...common.main.define,
-        'process.env.NODE_ENV': `"${mode}"`,
-        'process.env.DEV_SERVER_URL': `"${process.env.DEV_SERVER_URL}"`,
-      },
       plugins: [
         ...(common.main.plugins ?? []),
         {