fix: add back sourcemaps to electron build (#4090)

apps/core/.webpack/config.ts

@@ -128,9 +128,7 @@ export const createConfiguration: (
 
     devtool:
       buildFlags.mode === 'production'
-        ? buildFlags.distribution === 'desktop'
-          ? 'nosources-source-map'
-          : 'source-map'
+        ? 'source-map'
         : 'eval-cheap-module-source-map',
 
     resolve: {

apps/electron/scripts/generate-assets.mjs

@@ -45,6 +45,22 @@ cd(repoRootDir);
 if (!process.env.SKIP_WEB_BUILD) {
   await $`yarn -T run build:plugins`;
   await $`yarn nx build @affine/core`;
+
+  // step 1.5: amend sourceMappingURL to allow debugging in devtools
+  await glob('**/*.{js,css}', { cwd: affineCoreOutDir }).then(files => {
+    return files.map(async file => {
+      const dir = path.dirname(file);
+      const fullpath = path.join(affineCoreOutDir, file);
+      let content = await fs.readFile(fullpath, 'utf-8');
+      // replace # sourceMappingURL=76-6370cd185962bc89.js.map
+      // to      # sourceMappingURL=assets://./{dir}/76-6370cd185962bc89.js.map
+      content = content.replace(/# sourceMappingURL=(.*)\.map/g, (_, p1) => {
+        return `# sourceMappingURL=assets://./${dir}/${p1}.map`;
+      });
+      await fs.writeFile(fullpath, content);
+    });
+  });
+
   await fs.move(affineCoreOutDir, publicAffineOutDir, { overwrite: true });
 }
 

apps/electron/src/main/protocol.ts

@@ -3,6 +3,19 @@ import { join } from 'path';
 
 import { CLOUD_BASE_URL } from './config';
 
+protocol.registerSchemesAsPrivileged([
+  {
+    scheme: 'assets',
+    privileges: {
+      secure: false,
+      corsEnabled: true,
+      supportFetchAPI: true,
+      standard: true,
+      bypassCSP: true,
+    },
+  },
+]);
+
 const NETWORK_REQUESTS = ['/api', '/ws', '/socket.io', '/graphql'];
 const webStaticDir = join(__dirname, '../resources/web-static');
 
@@ -10,7 +23,7 @@ function isNetworkResource(pathname: string) {
   return NETWORK_REQUESTS.some(opt => pathname.startsWith(opt));
 }
 
-async function handleHttpRequest(request: Request) {
+async function handleFileRequest(request: Request) {
   const clonedRequest = Object.assign(request.clone(), {
     bypassCustomProtocolHandlers: true,
   });
@@ -34,7 +47,11 @@ async function handleHttpRequest(request: Request) {
 
 export function registerProtocol() {
   protocol.handle('file', request => {
-    return handleHttpRequest(request);
+    return handleFileRequest(request);
+  });
+
+  protocol.handle('assets', request => {
+    return handleFileRequest(request);
   });
 
   // hack for CORS