feat(electron): multi tabs support (#7440)

use https://www.electronjs.org/docs/latest/api/web-contents-view to serve different tab views
added tabs view manager in electron to handle multi-view actions and events.

fix AF-1111
fix AF-999
fix PD-1459
fix AF-964
PD-1458

tools/cli/src/bin/build.ts

@@ -29,14 +29,14 @@ const getChannel = () => {
   }
 };
 
-let entry: string | undefined;
+let entry: BuildFlags['entry'];
 
 const { DISTRIBUTION } = process.env;
 
 const cwd = getCwdFromDistribution(DISTRIBUTION);
 
 if (DISTRIBUTION === 'desktop') {
-  entry = './index.tsx';
+  entry = { app: './index.tsx', shell: './shell/index.tsx' };
 }
 
 const flags = {

tools/cli/src/bin/dev.ts

@@ -111,7 +111,10 @@ const cwd = getCwdFromDistribution(flags.distribution);
 process.env.DISTRIBUTION = flags.distribution;
 
 if (flags.distribution === 'desktop') {
-  flags.entry = join(cwd, 'index.tsx');
+  flags.entry = {
+    app: join(cwd, 'index.tsx'),
+    shell: join(cwd, 'shell/index.tsx'),
+  };
 }
 
 if (buildFlags.debugBlockSuite) {

tools/cli/src/config/index.ts

@@ -4,5 +4,5 @@ export type BuildFlags = {
   channel: 'stable' | 'beta' | 'canary' | 'internal';
   coverage?: boolean;
   localBlockSuite?: string;
-  entry?: string;
+  entry?: string | { [key: string]: string };
 };

tools/cli/src/webpack/config.ts

@@ -368,6 +368,9 @@ export const createConfiguration: (
         ? new WebpackS3Plugin()
         : null,
     ]),
+    stats: {
+      errorDetails: true,
+    },
 
     optimization: OptimizeOptionOptions(buildFlags),
 

tools/cli/src/webpack/webpack.config.ts

@@ -33,23 +33,30 @@ export function createWebpackConfig(cwd: string, flags: BuildFlags) {
   const runtimeConfig = getRuntimeConfig(flags);
   console.log('runtime config', runtimeConfig);
   const config = createConfiguration(cwd, flags, runtimeConfig);
+  const entry =
+    typeof flags.entry === 'string' || !flags.entry
+      ? {
+          app: flags.entry ?? resolve(cwd, 'src/index.tsx'),
+        }
+      : flags.entry;
+
+  const createHTMLPlugin = (entryName = 'app') => {
+    return new HTMLPlugin({
+      template: join(rootPath, 'webpack', 'template.html'),
+      inject: 'body',
+      scriptLoading: 'module',
+      minify: false,
+      chunks: [entryName],
+      filename: `${entryName === 'app' ? 'index' : entryName}.html`, // main entry should take name index.html
+      templateParameters: {
+        GIT_SHORT_SHA: gitShortHash(),
+        DESCRIPTION,
+      },
+    });
+  };
+
   return merge(config, {
-    entry: {
-      [flags.distribution]: flags.entry ?? resolve(cwd, 'src/index.tsx'),
-    },
-    plugins: [
-      new HTMLPlugin({
-        template: join(rootPath, 'webpack', 'template.html'),
-        inject: 'body',
-        scriptLoading: 'module',
-        minify: false,
-        chunks: 'all',
-        filename: 'index.html',
-        templateParameters: {
-          GIT_SHORT_SHA: gitShortHash(),
-          DESCRIPTION,
-        },
-      }),
-    ],
+    entry: entry,
+    plugins: Object.keys(entry).map(createHTMLPlugin),
   });
 }