fix(core): avoid side effects (#8245)

packages/frontend/apps/electron/renderer/shell/app.tsx

@@ -0,0 +1,42 @@
+import { ThemeProvider } from '@affine/component/theme-provider';
+import { ShellAppFallback } from '@affine/core/components/affine/app-container';
+import { useAppSettingHelper } from '@affine/core/components/hooks/affine/use-app-setting-helper';
+import {
+  AppTabsHeader,
+  configureAppTabsHeaderModule,
+} from '@affine/core/modules/app-tabs-header';
+import { configureElectronStateStorageImpls } from '@affine/core/modules/storage';
+import { SplitViewFallback } from '@affine/core/modules/workbench/view/split-view/split-view';
+import {
+  configureGlobalStorageModule,
+  Framework,
+  FrameworkRoot,
+} from '@toeverything/infra';
+
+import * as styles from './app.css';
+
+const framework = new Framework();
+configureGlobalStorageModule(framework);
+configureElectronStateStorageImpls(framework);
+configureAppTabsHeaderModule(framework);
+const frameworkProvider = framework.provider();
+
+export function App() {
+  const { appSettings } = useAppSettingHelper();
+  const translucent =
+    BUILD_CONFIG.isElectron &&
+    environment.isMacOs &&
+    appSettings.enableBlurBackground;
+  return (
+    <FrameworkRoot framework={frameworkProvider}>
+      <ThemeProvider>
+        <div className={styles.root} data-translucent={translucent}>
+          <AppTabsHeader mode="shell" className={styles.appTabsHeader} />
+          <ShellAppFallback className={styles.fallbackRoot}>
+            <SplitViewFallback className={styles.splitViewFallback} />
+          </ShellAppFallback>
+        </div>
+      </ThemeProvider>
+    </FrameworkRoot>
+  );
+}

packages/frontend/apps/electron/renderer/shell/index.tsx

@@ -1,34 +1,17 @@
-import '@affine/component/theme/global.css';
-import '@affine/component/theme/theme.css';
-import '../global.css';
 import './setup';
 
-import { ThemeProvider } from '@affine/component/theme-provider';
-import { configureAppTabsHeaderModule } from '@affine/core/modules/app-tabs-header';
-import { configureElectronStateStorageImpls } from '@affine/core/modules/storage';
 import { apis, events } from '@affine/electron-api';
 import { createI18n, setUpLanguage } from '@affine/i18n';
-import {
-  configureGlobalStorageModule,
-  Framework,
-  FrameworkRoot,
-} from '@toeverything/infra';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { ShellRoot } from './shell';
+import { App } from './app';
 
-const framework = new Framework();
-configureGlobalStorageModule(framework);
-configureElectronStateStorageImpls(framework);
-configureAppTabsHeaderModule(framework);
-const frameworkProvider = framework.provider();
-
-async function loadLanguage() {
+function loadLanguage() {
   const i18n = createI18n();
   document.documentElement.lang = i18n.language;
 
-  await setUpLanguage(i18n);
+  setUpLanguage(i18n).catch(console.error);
 }
 
 async function main() {
@@ -48,7 +31,7 @@ async function main() {
   events?.ui.onFullScreen(handleFullscreen);
   events?.ui.onTabShellViewActiveChange(handleActive);
 
-  await loadLanguage();
+  loadLanguage();
   mountApp();
 }
 
@@ -59,11 +42,7 @@ function mountApp() {
   }
   createRoot(root).render(
     <StrictMode>
-      <FrameworkRoot framework={frameworkProvider}>
-        <ThemeProvider>
-          <ShellRoot />
-        </ThemeProvider>
-      </FrameworkRoot>
+      <App />
     </StrictMode>
   );
 }

packages/frontend/apps/electron/renderer/shell/setup.ts

@@ -1,3 +1,6 @@
+import '@affine/component/theme';
+import '../global.css';
+
 import { setupElectron } from '@affine/core/bootstrap';
 
 setupElectron();

packages/frontend/apps/electron/renderer/shell/shell.tsx

@@ -1,22 +0,0 @@
-import { ShellAppFallback } from '@affine/core/components/affine/app-container';
-import { useAppSettingHelper } from '@affine/core/components/hooks/affine/use-app-setting-helper';
-import { AppTabsHeader } from '@affine/core/modules/app-tabs-header';
-import { SplitViewFallback } from '@affine/core/modules/workbench/view/split-view/split-view';
-
-import * as styles from './shell.css';
-
-export function ShellRoot() {
-  const { appSettings } = useAppSettingHelper();
-  const translucent =
-    BUILD_CONFIG.isElectron &&
-    environment.isMacOs &&
-    appSettings.enableBlurBackground;
-  return (
-    <div className={styles.root} data-translucent={translucent}>
-      <AppTabsHeader mode="shell" className={styles.appTabsHeader} />
-      <ShellAppFallback className={styles.fallbackRoot}>
-        <SplitViewFallback className={styles.splitViewFallback} />
-      </ShellAppFallback>
-    </div>
-  );
-}