refactor: new project struct (#8199)

packages/frontend/web -> packages/frontend/apps/web
packages/frontend/mobile -> packages/frontend/apps/mobile
packages/frontend/electron -> packages/frontend/apps/electron

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

@@ -0,0 +1,120 @@
+import '@affine/component/theme/global.css';
+import '@affine/component/theme/theme.css';
+
+import { AffineContext } from '@affine/component/context';
+import { GlobalLoading } from '@affine/component/global-loading';
+import { AppFallback } from '@affine/core/components/affine/app-container';
+import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
+import { configureCommonModules } from '@affine/core/modules';
+import { configureAppTabsHeaderModule } from '@affine/core/modules/app-tabs-header';
+import { configureElectronStateStorageImpls } from '@affine/core/modules/storage';
+import { CustomThemeModifier } from '@affine/core/modules/theme-editor';
+import { configureSqliteUserspaceStorageProvider } from '@affine/core/modules/userspace';
+import { configureDesktopWorkbenchModule } from '@affine/core/modules/workbench';
+import {
+  configureBrowserWorkspaceFlavours,
+  configureSqliteWorkspaceEngineStorageProvider,
+} from '@affine/core/modules/workspace-engine';
+import { router } from '@affine/core/router';
+import {
+  performanceLogger,
+  performanceRenderLogger,
+} from '@affine/core/shared';
+import { Telemetry } from '@affine/core/telemetry';
+import createEmotionCache from '@affine/core/utils/create-emotion-cache';
+import { createI18n, setUpLanguage } from '@affine/i18n';
+import { CacheProvider } from '@emotion/react';
+import {
+  Framework,
+  FrameworkRoot,
+  getCurrentStore,
+  LifecycleService,
+} from '@toeverything/infra';
+import { Suspense } from 'react';
+import { RouterProvider } from 'react-router-dom';
+
+const desktopWhiteList = [
+  '/open-app/signin-redirect',
+  '/open-app/url',
+  '/upgrade-success',
+  '/ai-upgrade-success',
+  '/share',
+  '/oauth',
+  '/magic-link',
+];
+if (
+  !environment.isElectron &&
+  environment.isDebug &&
+  desktopWhiteList.every(path => !location.pathname.startsWith(path))
+) {
+  document.body.innerHTML = `<h1 style="color:red;font-size:5rem;text-align:center;">Don't run electron entry in browser.</h1>`;
+  throw new Error('Wrong distribution');
+}
+
+const performanceI18nLogger = performanceLogger.namespace('i18n');
+const cache = createEmotionCache();
+
+const future = {
+  v7_startTransition: true,
+} as const;
+
+async function loadLanguage() {
+  performanceI18nLogger.info('start');
+
+  const i18n = createI18n();
+  document.documentElement.lang = i18n.language;
+
+  performanceI18nLogger.info('set up');
+  await setUpLanguage(i18n);
+  performanceI18nLogger.info('done');
+}
+
+let languageLoadingPromise: Promise<void> | null = null;
+
+const framework = new Framework();
+configureCommonModules(framework);
+configureElectronStateStorageImpls(framework);
+configureBrowserWorkspaceFlavours(framework);
+configureSqliteWorkspaceEngineStorageProvider(framework);
+configureSqliteUserspaceStorageProvider(framework);
+configureDesktopWorkbenchModule(framework);
+configureAppTabsHeaderModule(framework);
+const frameworkProvider = framework.provider();
+
+// setup application lifecycle events, and emit application start event
+window.addEventListener('focus', () => {
+  frameworkProvider.get(LifecycleService).applicationFocus();
+});
+frameworkProvider.get(LifecycleService).applicationStart();
+
+export function App() {
+  performanceRenderLogger.debug('App');
+
+  if (!languageLoadingPromise) {
+    languageLoadingPromise = loadLanguage().catch(console.error);
+  }
+
+  return (
+    <Suspense>
+      <FrameworkRoot framework={frameworkProvider}>
+        <CacheProvider value={cache}>
+          <AffineContext store={getCurrentStore()}>
+            <Telemetry />
+            <CustomThemeModifier />
+            <GlobalLoading />
+            <RouterProvider
+              fallbackElement={<AppFallback />}
+              router={router}
+              future={future}
+            />
+            {environment.isWindows && (
+              <div style={{ position: 'fixed', right: 0, top: 0, zIndex: 5 }}>
+                <WindowsAppControls />
+              </div>
+            )}
+          </AffineContext>
+        </CacheProvider>
+      </FrameworkRoot>
+    </Suspense>
+  );
+}

packages/frontend/apps/electron/renderer/global.css

@@ -0,0 +1,29 @@
+button,
+input,
+select,
+textarea
+/* [role='button']  */ {
+  -webkit-app-region: no-drag;
+}
+
+#webpack-dev-server-client-overlay {
+  -webkit-app-region: no-drag;
+}
+
+html[data-active='true'] {
+  opacity: 1;
+}
+
+html:is([data-active='false'], [data-dragging='true']) * {
+  -webkit-app-region: no-drag !important;
+}
+
+html[data-active='false'] {
+  opacity: 0;
+  transition: opacity 0.2s 0.1s;
+}
+
+html[data-active='true']:has([data-blur-background='true']) {
+  opacity: 1;
+  transition: opacity 0.2s;
+}

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

@@ -0,0 +1,132 @@
+import './polyfill/dispose';
+import '@affine/core/bootstrap/preload';
+import './global.css';
+
+import { appConfigProxy } from '@affine/core/hooks/use-app-config-storage';
+import { performanceLogger } from '@affine/core/shared';
+import { apis, appInfo, events } from '@affine/electron-api';
+import {
+  init,
+  reactRouterV6BrowserTracingIntegration,
+  setTags,
+} from '@sentry/react';
+import { debounce } from 'lodash-es';
+import { StrictMode, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  useLocation,
+  useNavigationType,
+} from 'react-router-dom';
+
+import { App } from './app';
+
+const performanceMainLogger = performanceLogger.namespace('main');
+function main() {
+  performanceMainLogger.info('start');
+
+  // load persistent config for electron
+  // TODO(@Peng): should be sync, but it's not necessary for now
+  appConfigProxy
+    .getSync()
+    .catch(() => console.error('failed to load app config'));
+
+  // skip bootstrap setup for desktop onboarding
+  if (
+    appInfo?.windowName === 'onboarding' ||
+    appInfo?.windowName === 'theme-editor'
+  ) {
+    performanceMainLogger.info('skip setup');
+  } else {
+    performanceMainLogger.info('setup start');
+    if (window.SENTRY_RELEASE || environment.isDebug) {
+      // https://docs.sentry.io/platforms/javascript/guides/electron/
+      init({
+        dsn: process.env.SENTRY_DSN,
+        environment: process.env.BUILD_TYPE ?? 'development',
+        integrations: [
+          reactRouterV6BrowserTracingIntegration({
+            useEffect,
+            useLocation,
+            useNavigationType,
+            createRoutesFromChildren,
+            matchRoutes,
+          }),
+        ],
+      });
+      setTags({
+        appVersion: runtimeConfig.appVersion,
+        editorVersion: runtimeConfig.editorVersion,
+      });
+
+      apis?.ui.handleNetworkChange(navigator.onLine);
+      window.addEventListener('offline', () => {
+        apis?.ui.handleNetworkChange(false);
+      });
+      window.addEventListener('online', () => {
+        apis?.ui.handleNetworkChange(true);
+      });
+    }
+
+    const handleMaximized = (maximized: boolean | undefined) => {
+      document.documentElement.dataset.maximized = String(maximized);
+    };
+    const handleFullscreen = (fullscreen: boolean | undefined) => {
+      document.documentElement.dataset.fullscreen = String(fullscreen);
+    };
+    apis?.ui.isMaximized().then(handleMaximized).catch(console.error);
+    apis?.ui.isFullScreen().then(handleFullscreen).catch(console.error);
+    events?.ui.onMaximized(handleMaximized);
+    events?.ui.onFullScreen(handleFullscreen);
+
+    const tabId = appInfo?.viewId;
+    const handleActiveTabChange = (active: boolean) => {
+      document.documentElement.dataset.active = String(active);
+    };
+
+    if (tabId) {
+      apis?.ui
+        .isActiveTab()
+        .then(active => {
+          handleActiveTabChange(active);
+          events?.ui.onActiveTabChanged(id => {
+            handleActiveTabChange(id === tabId);
+          });
+        })
+        .catch(console.error);
+    }
+
+    const handleResize = debounce(() => {
+      apis?.ui.handleWindowResize().catch(console.error);
+    }, 50);
+    window.addEventListener('resize', handleResize);
+    performanceMainLogger.info('setup done');
+    window.addEventListener('dragstart', () => {
+      document.documentElement.dataset.dragging = 'true';
+    });
+    window.addEventListener('dragend', () => {
+      document.documentElement.dataset.dragging = 'false';
+    });
+  }
+
+  mountApp();
+}
+
+function mountApp() {
+  performanceMainLogger.info('import app');
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const root = document.getElementById('app')!;
+  performanceMainLogger.info('render app');
+  createRoot(root).render(
+    <StrictMode>
+      <App />
+    </StrictMode>
+  );
+}
+
+try {
+  main();
+} catch (err) {
+  console.error('Failed to bootstrap app', err);
+}

packages/frontend/apps/electron/renderer/polyfill/dispose.ts

@@ -0,0 +1,2 @@
+import 'core-js/modules/esnext.symbol.async-dispose';
+import 'core-js/modules/esnext.symbol.dispose';

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

@@ -0,0 +1,75 @@
+import '@affine/component/theme/global.css';
+import '@affine/component/theme/theme.css';
+import '@affine/core/bootstrap/preload';
+import '../global.css';
+
+import { ThemeProvider } from '@affine/component/theme-provider';
+import { configureAppTabsHeaderModule } from '@affine/core/modules/app-tabs-header';
+import { configureElectronStateStorageImpls } from '@affine/core/modules/storage';
+import { performanceLogger } from '@affine/core/shared';
+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';
+
+const framework = new Framework();
+configureGlobalStorageModule(framework);
+configureElectronStateStorageImpls(framework);
+configureAppTabsHeaderModule(framework);
+const frameworkProvider = framework.provider();
+
+const logger = performanceLogger.namespace('shell');
+
+async function loadLanguage() {
+  const i18n = createI18n();
+  document.documentElement.lang = i18n.language;
+
+  await setUpLanguage(i18n);
+}
+
+async function main() {
+  const handleMaximized = (maximized: boolean | undefined) => {
+    document.documentElement.dataset.maximized = String(maximized);
+  };
+  const handleFullscreen = (fullscreen: boolean | undefined) => {
+    document.documentElement.dataset.fullscreen = String(fullscreen);
+  };
+  const handleActive = (active: boolean | undefined) => {
+    document.documentElement.dataset.active = String(active);
+  };
+
+  apis?.ui.isMaximized().then(handleMaximized).catch(console.error);
+  apis?.ui.isFullScreen().then(handleFullscreen).catch(console.error);
+  events?.ui.onMaximized(handleMaximized);
+  events?.ui.onFullScreen(handleFullscreen);
+  events?.ui.onTabShellViewActiveChange(handleActive);
+
+  await loadLanguage();
+  mountApp();
+}
+
+function mountApp() {
+  const root = document.getElementById('app');
+  if (!root) {
+    throw new Error('Root element not found');
+  }
+  logger.info('render app');
+  createRoot(root).render(
+    <StrictMode>
+      <FrameworkRoot framework={frameworkProvider}>
+        <ThemeProvider>
+          <ShellRoot />
+        </ThemeProvider>
+      </FrameworkRoot>
+    </StrictMode>
+  );
+}
+
+main().catch(console.error);

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

@@ -0,0 +1,39 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { createVar, style } from '@vanilla-extract/css';
+
+export const sidebarOffsetVar = createVar();
+
+export const root = style({
+  width: '100vw',
+  height: '100vh',
+  display: 'flex',
+  flexDirection: 'column',
+  background: cssVarV2('layer/background/primary'),
+  selectors: {
+    '&[data-translucent="true"]': {
+      background: 'transparent',
+    },
+  },
+});
+
+export const appTabsHeader = style({
+  zIndex: 1,
+});
+
+export const fallbackRoot = style({
+  position: 'absolute',
+  paddingTop: 52,
+  width: '100%',
+  height: '100%',
+  zIndex: 0,
+});
+
+export const splitViewFallback = style({
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  bottom: 0,
+  right: 0,
+  zIndex: 0,
+  background: cssVarV2('layer/background/primary'),
+});

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

@@ -0,0 +1,22 @@
+import { AppFallback } from '@affine/core/components/affine/app-container';
+import { useAppSettingHelper } from '@affine/core/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 =
+    environment.isElectron &&
+    environment.isMacOs &&
+    appSettings.enableBlurBackground;
+  return (
+    <div className={styles.root} data-translucent={translucent}>
+      <AppTabsHeader mode="shell" className={styles.appTabsHeader} />
+      <AppFallback className={styles.fallbackRoot}>
+        <SplitViewFallback className={styles.splitViewFallback} />
+      </AppFallback>
+    </div>
+  );
+}

packages/frontend/apps/electron/renderer/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "extends": "../../../../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true,
+    "noEmit": false,
+    "outDir": "../lib",
+    "allowJs": true
+  },
+  "references": [
+    {
+      "path": "../../../../common/env"
+    },
+    {
+      "path": "../../../core"
+    },
+    {
+      "path": "../../../component"
+    },
+    {
+      "path": "../../../../common/infra"
+    }
+  ],
+  "include": ["."],
+  "exclude": ["dist"]
+}