fix: electron sourcemap issues (#1919)

apps/electron/layers/main/src/app-state/index.ts

@@ -51,9 +51,15 @@ export const registerHandlers = () => {
         );
         const urlObj = parse(url.replace('??', '?'), true);
         if (!mainWindow || !url.startsWith('affine://')) return;
-        const token = (await exchangeToken(urlObj.query['code'] as string)) as {
+        const code = urlObj.query['code'] as string;
+        if (!code) return;
+
+        logger.info('google sign in code received from callback', code);
+
+        const token = (await exchangeToken(code)) as {
           id_token: string;
         };
+
         app.removeListener('open-url', handleOpenUrl);
         resolve(token.id_token);
         logger.info('google sign in successful', token);

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

@@ -1,23 +1,48 @@
 import { protocol, session } from 'electron';
 import { join } from 'path';
 
+protocol.registerSchemesAsPrivileged([
+  {
+    scheme: 'assets',
+    privileges: {
+      secure: false,
+      corsEnabled: true,
+      supportFetchAPI: true,
+      standard: true,
+      bypassCSP: true,
+    },
+  },
+]);
+
+function toAbsolutePath(url: string) {
+  let realpath = decodeURIComponent(url);
+  const webStaticDir = join(__dirname, '../../../resources/web-static');
+  if (url.startsWith('./')) {
+    // if is a file type, load the file in resources
+    if (url.split('/').at(-1)?.includes('.')) {
+      realpath = join(webStaticDir, decodeURIComponent(url));
+    } else {
+      // else, fallback to load the index.html instead
+      realpath = join(webStaticDir, 'index.html');
+    }
+  }
+  return realpath;
+}
+
 export function registerProtocol() {
   if (process.env.NODE_ENV === 'production') {
     protocol.interceptFileProtocol('file', (request, callback) => {
       const url = request.url.replace(/^file:\/\//, '');
-      const webStaticDir = join(__dirname, '../../../resources/web-static');
-      if (url.startsWith('./')) {
-        // if is a file type, load the file in resources
-        if (url.split('/').at(-1)?.includes('.')) {
-          const realpath = join(webStaticDir, decodeURIComponent(url));
-          callback(realpath);
-        } else {
-          // else, fallback to load the index.html instead
-          const realpath = join(webStaticDir, 'index.html');
-          console.log(realpath, 'realpath', url, 'url');
-          callback(realpath);
-        }
-      }
+      const realpath = toAbsolutePath(url);
+      // console.log('realpath', realpath, 'for', url);
+      callback(realpath);
+    });
+
+    protocol.registerFileProtocol('assets', (request, callback) => {
+      const url = request.url.replace(/^assets:\/\//, '');
+      const realpath = toAbsolutePath(url);
+      // console.log('realpath', realpath, 'for', url);
+      callback(realpath);
     });
   }
 
@@ -35,6 +60,7 @@ export function registerProtocol() {
           'DELETE',
           'OPTIONS',
         ];
+        // responseHeaders['Content-Security-Policy'] = ["default-src 'self'"];
       }
 
       callback({ responseHeaders });

apps/electron/scripts/generate-assets.mjs

@@ -34,6 +34,22 @@ cd(repoRootDir);
 await $`yarn add`;
 await $`yarn build`;
 await $`yarn export`;
+
+// step 1.5: amend sourceMappingURL to allow debugging in devtools
+await glob('**/*.{js,css}', { cwd: affineWebOutDir }).then(files => {
+  return files.map(async file => {
+    const dir = path.dirname(file);
+    const fullpath = path.join(affineWebOutDir, 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(affineWebOutDir, publicAffineOutDir, { overwrite: true });
 
 // step 2: build electron resources

apps/web/next.config.mjs

@@ -138,6 +138,7 @@ const nextConfig = {
     return profile;
   },
   basePath: process.env.NEXT_BASE_PATH,
+  assetPrefix: process.env.NEXT_ASSET_PREFIX,
   pageExtensions: [...(preset.enableDebugPage ? ['tsx', 'dev.tsx'] : ['tsx'])],
 };