refactor(core): split web entry from core (#6082)

This pr is trying to split `web` and `electron` entries from `core`. It allows more platform-related optimization to be addressed in each entry.
We should remove all browser/electron only codes from `core` eventually, this is the very first step for that.

packages/frontend/core/src/app.tsx

@@ -1,94 +0,0 @@
-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 { NotificationCenter } from '@affine/component/notification-center';
-import { createI18n, setUpLanguage } from '@affine/i18n';
-import { CacheProvider } from '@emotion/react';
-import { getCurrentStore } from '@toeverything/infra/atom';
-import {
-  ServiceCollection,
-  ServiceProviderContext,
-} from '@toeverything/infra/di';
-import type { PropsWithChildren, ReactElement } from 'react';
-import { lazy, memo, Suspense } from 'react';
-import { RouterProvider } from 'react-router-dom';
-
-import { WorkspaceFallback } from './components/workspace';
-import { CloudSessionProvider } from './providers/session-provider';
-import { router } from './router';
-import { performanceLogger, performanceRenderLogger } from './shared';
-import createEmotionCache from './utils/create-emotion-cache';
-import { configureWebServices } from './web';
-
-const performanceI18nLogger = performanceLogger.namespace('i18n');
-const cache = createEmotionCache();
-
-const DevTools = lazy(() =>
-  import('jotai-devtools').then(m => ({ default: m.DevTools }))
-);
-
-const DebugProvider = ({ children }: PropsWithChildren): ReactElement => {
-  return (
-    <>
-      <Suspense>{process.env.DEBUG_JOTAI === 'true' && <DevTools />}</Suspense>
-      {children}
-    </>
-  );
-};
-
-const future = {
-  v7_startTransition: true,
-} as const;
-
-async function loadLanguage() {
-  if (environment.isBrowser) {
-    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 services = new ServiceCollection();
-configureWebServices(services);
-const serviceProvider = services.provider();
-
-export const App = memo(function App() {
-  performanceRenderLogger.info('App');
-
-  if (!languageLoadingPromise) {
-    languageLoadingPromise = loadLanguage().catch(console.error);
-  }
-
-  return (
-    <Suspense>
-      <ServiceProviderContext.Provider value={serviceProvider}>
-        <CacheProvider value={cache}>
-          <AffineContext store={getCurrentStore()}>
-            <CloudSessionProvider>
-              <DebugProvider>
-                <GlobalLoading />
-                {runtimeConfig.enableNotificationCenter && (
-                  <NotificationCenter />
-                )}
-                <RouterProvider
-                  fallbackElement={<WorkspaceFallback key="RouterFallback" />}
-                  router={router}
-                  future={future}
-                />
-              </DebugProvider>
-            </CloudSessionProvider>
-          </AffineContext>
-        </CacheProvider>
-      </ServiceProviderContext.Provider>
-    </Suspense>
-  );
-});

packages/frontend/core/src/hooks/use-app-config-storage.ts

@@ -1,4 +1,5 @@
 import { apis } from '@affine/electron-api';
+import { setupGlobal } from '@affine/env/global';
 import { assertExists } from '@blocksuite/global/utils';
 import {
   type AppConfigSchema,
@@ -35,6 +36,8 @@ class AppConfigProxy {
 }
 export const appConfigProxy = new AppConfigProxy();
 
+setupGlobal();
+
 const storage = environment.isDesktop
   ? new AppConfigStorage({
       config: defaultAppConfig,

packages/frontend/core/src/index.tsx

@@ -1,43 +1 @@
-import './polyfill/intl-segmenter';
-import './polyfill/request-idle-callback';
-import './polyfill/resize-observer';
-
-import { assertExists } from '@blocksuite/global/utils';
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-
-import { App } from './app';
-import { setup } from './bootstrap/setup';
-import { performanceLogger } from './shared';
-
-const performanceMainLogger = performanceLogger.namespace('main');
-function main() {
-  performanceMainLogger.info('start');
-
-  // skip bootstrap setup for desktop onboarding
-  if (window.appInfo?.windowName !== 'onboarding') {
-    performanceMainLogger.info('setup start');
-    setup();
-    performanceMainLogger.info('setup done');
-  }
-
-  mountApp();
-}
-
-function mountApp() {
-  performanceMainLogger.info('import app');
-  const root = document.getElementById('app');
-  assertExists(root);
-  performanceMainLogger.info('render app');
-  createRoot(root).render(
-    <StrictMode>
-      <App />
-    </StrictMode>
-  );
-}
-
-try {
-  main();
-} catch (err) {
-  console.error('Failed to bootstrap app', err);
-}
+export * from './web';

packages/frontend/core/src/polyfill/intl-segmenter.ts

@@ -1,11 +0,0 @@
-if (Intl.Segmenter === undefined) {
-  await import('intl-segmenter-polyfill-rs').then(({ Segmenter }) => {
-    Object.defineProperty(Intl, 'Segmenter', {
-      value: Segmenter,
-      configurable: true,
-      writable: true,
-    });
-  });
-}
-
-export {};

packages/frontend/core/src/polyfill/request-idle-callback.ts

@@ -1,19 +0,0 @@
-window.requestIdleCallback =
-  window.requestIdleCallback ||
-  function (cb) {
-    const start = Date.now();
-    return setTimeout(function () {
-      cb({
-        didTimeout: false,
-        timeRemaining: function () {
-          return Math.max(0, 50 - (Date.now() - start));
-        },
-      });
-    }, 1);
-  };
-
-window.cancelIdleCallback =
-  window.cancelIdleCallback ||
-  function (id) {
-    clearTimeout(id);
-  };

packages/frontend/core/src/polyfill/resize-observer.ts

@@ -1,8 +0,0 @@
-import { ResizeObserver } from '@juggle/resize-observer';
-
-// prevents the following error in development mode:
-// ResizeOvserver loop limit exceeded
-// https://github.com/petyosi/react-virtuoso/issues/875#issuecomment-1962897033
-if (process.env.NODE_ENV !== 'production') {
-  window.ResizeObserver = ResizeObserver;
-}

packages/frontend/core/src/web.ts

@@ -1,6 +1,8 @@
 import { configureWorkspaceImplServices } from '@affine/workspace-impl';
-import type { ServiceCollection } from '@toeverything/infra';
-import { configureInfraServices } from '@toeverything/infra';
+import {
+  configureInfraServices,
+  type ServiceCollection,
+} from '@toeverything/infra';
 
 import {
   configureBusinessServices,