feat: bump electron (#14158)

packages/frontend/apps/electron/src/main/index.ts

@@ -4,7 +4,7 @@ import path from 'node:path';
 
 import * as Sentry from '@sentry/electron/main';
 import { IPCMode } from '@sentry/electron/main';
-import { app } from 'electron';
+import { app, protocol } from 'electron';
 
 import { createApplicationMenu } from './application-menu/create';
 import { buildType, isDev, overrideSession } from './config';
@@ -22,26 +22,40 @@ import { launchStage } from './windows-manager/stage';
 
 app.enableSandbox();
 
-app.commandLine.appendSwitch('enable-features', 'CSSTextAutoSpace');
 if (isDev) {
   // In electron the dev server will be resolved to 0.0.0.0, but it
   // might be blocked by electron.
   // See https://github.com/webpack/webpack-dev-server/pull/384
-  app.commandLine.appendSwitch('host-rules', 'MAP 0.0.0.0 127.0.0.1');
+  app.commandLine.appendSwitch('host-resolver-rules', 'MAP 0.0.0.0 127.0.0.1');
 }
 // https://github.com/electron/electron/issues/43556
 // // `CalculateNativeWinOcclusion` - Disable native window occlusion tracker (https://groups.google.com/a/chromium.org/g/embedder-dev/c/ZF3uHHyWLKw/m/VDN2hDXMAAAJ)
-app.commandLine.appendSwitch(
-  'disable-features',
-  'PlzDedicatedWorker,CalculateNativeWinOcclusion'
-);
+const disabledFeatures = [
+  'PlzDedicatedWorker',
+  'CalculateNativeWinOcclusion',
+  // Disable Chrome autofill and password save prompts
+  'AutofillServerCommunication',
+  'AutofillProfileCleanup',
+  'AutofillAddressProfileSavePrompt',
+  'AutofillPaymentCards',
+  'AutofillEnableAccountWalletStorage',
+  'SavePasswordBubble',
+].join(',');
+app.commandLine.appendSwitch('disable-features', disabledFeatures);
+app.commandLine.appendSwitch('disable-blink-features', 'Autofill');
 
 // Following features are enabled from the runtime:
 // `DocumentPolicyIncludeJSCallStacksInCrashReports` - https://www.electronjs.org/docs/latest/api/web-frame-main#framecollectjavascriptcallstack-experimental
 // `EarlyEstablishGpuChannel` - Refs https://issues.chromium.org/issues/40208065
 // `EstablishGpuChannelAsync` - Refs https://issues.chromium.org/issues/40208065
-const featuresToEnable = `DocumentPolicyIncludeJSCallStacksInCrashReports,EarlyEstablishGpuChannel,EstablishGpuChannelAsync`;
-app.commandLine.appendSwitch('enable-features', featuresToEnable);
+const enabledFeatures = [
+  'DocumentPolicyIncludeJSCallStacksInCrashReports',
+  'EarlyEstablishGpuChannel',
+  'EstablishGpuChannelAsync',
+].join(',');
+app.commandLine.appendSwitch('enable-features', enabledFeatures);
+const enabledBlinkFeatures = ['CSSTextAutoSpace', 'WebCodecs'].join(',');
+app.commandLine.appendSwitch('enable-blink-features', enabledBlinkFeatures);
 app.commandLine.appendSwitch('force-color-profile', 'srgb');
 
 // use the same data for internal & beta for testing
@@ -123,3 +137,16 @@ if (process.env.SENTRY_RELEASE) {
     appVersion: app.getVersion(),
   });
 }
+
+protocol.registerSchemesAsPrivileged([
+  {
+    scheme: 'assets',
+    privileges: {
+      secure: true,
+      corsEnabled: true,
+      supportFetchAPI: true,
+      standard: true,
+      stream: true,
+    },
+  },
+]);

packages/frontend/apps/electron/src/main/protocol.ts

@@ -5,24 +5,12 @@ import { app, net, protocol, session } from 'electron';
 import cookieParser from 'set-cookie-parser';
 
 import { isWindows, resourcesPath } from '../shared/utils';
-import { isDev } from './config';
+import { buildType, isDev } from './config';
 import { anotherHost, mainHost } from './constants';
 import { logger } from './logger';
 
-protocol.registerSchemesAsPrivileged([
-  {
-    scheme: 'assets',
-    privileges: {
-      secure: true,
-      corsEnabled: true,
-      supportFetchAPI: true,
-      standard: true,
-      stream: true,
-    },
-  },
-]);
-
 const webStaticDir = join(resourcesPath, 'web-static');
+const devServerBase = process.env.DEV_SERVER_URL;
 const localWhiteListDirs = [
   path.resolve(app.getPath('sessionData')).toLowerCase(),
   path.resolve(app.getPath('temp')).toLowerCase(),
@@ -35,6 +23,41 @@ function isPathInWhiteList(filepath: string) {
   );
 }
 
+const apiBaseByBuildType: Record<typeof buildType, string> = {
+  stable: 'https://app.affine.pro',
+  beta: 'https://insider.affine.pro',
+  internal: 'https://insider.affine.pro',
+  canary: 'https://affine.fail',
+};
+
+function resolveApiBaseUrl() {
+  if (isDev && devServerBase) {
+    return devServerBase;
+  }
+
+  return apiBaseByBuildType[buildType] ?? apiBaseByBuildType.stable;
+}
+
+function buildTargetUrl(base: string, urlObject: URL) {
+  return new URL(`${urlObject.pathname}${urlObject.search}`, base).toString();
+}
+
+function proxyRequest(
+  request: Request,
+  urlObject: URL,
+  base: string,
+  options: { bypassCustomProtocolHandlers?: boolean } = {}
+) {
+  const { bypassCustomProtocolHandlers = true } = options;
+  const targetUrl = buildTargetUrl(base, urlObject);
+  const proxiedRequest = bypassCustomProtocolHandlers
+    ? Object.assign(request.clone(), {
+        bypassCustomProtocolHandlers: true,
+      })
+    : request;
+  return net.fetch(targetUrl, proxiedRequest);
+}
+
 async function handleFileRequest(request: Request) {
   const urlObject = new URL(request.url);
 
@@ -43,22 +66,24 @@ async function handleFileRequest(request: Request) {
   }
 
   const isAbsolutePath = urlObject.host !== '.';
+  const isApiRequest =
+    !isAbsolutePath &&
+    (urlObject.pathname.startsWith('/api/') ||
+      urlObject.pathname === '/graphql');
+
+  if (isApiRequest) {
+    return proxyRequest(request, urlObject, resolveApiBaseUrl());
+  }
+
   const isFontRequest =
     urlObject.pathname &&
     /\.(woff2?|ttf|otf)$/i.test(urlObject.pathname.split('?')[0] ?? '');
 
   // Redirect to webpack dev server if available
-  if (
-    isDev &&
-    process.env.DEV_SERVER_URL &&
-    !isAbsolutePath &&
-    !isFontRequest
-  ) {
-    const devServerUrl = new URL(
-      `${urlObject.pathname}${urlObject.search}`,
-      process.env.DEV_SERVER_URL
-    );
-    return net.fetch(devServerUrl.toString(), request);
+  if (isDev && devServerBase && !isAbsolutePath && !isFontRequest) {
+    return proxyRequest(request, urlObject, devServerBase, {
+      bypassCustomProtocolHandlers: false,
+    });
   }
   const clonedRequest = Object.assign(request.clone(), {
     bypassCustomProtocolHandlers: true,