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/web/src/app.tsx

@@ -0,0 +1,90 @@
+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 { WorkspaceFallback } from '@affine/core/components/workspace';
+import { GlobalScopeProvider } from '@affine/core/modules/infra-web/global-scope';
+import { CloudSessionProvider } from '@affine/core/providers/session-provider';
+import { router } from '@affine/core/router';
+import {
+  performanceLogger,
+  performanceRenderLogger,
+} from '@affine/core/shared';
+import createEmotionCache from '@affine/core/utils/create-emotion-cache';
+import { configureWebServices } from '@affine/core/web';
+import { createI18n, setUpLanguage } from '@affine/i18n';
+import { CacheProvider } from '@emotion/react';
+import { getCurrentStore } from '@toeverything/infra/atom';
+import { ServiceCollection } from '@toeverything/infra/di';
+import type { PropsWithChildren, ReactElement } from 'react';
+import { lazy, Suspense } from 'react';
+import { RouterProvider } from 'react-router-dom';
+
+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() {
+  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 function App() {
+  performanceRenderLogger.info('App');
+
+  if (!languageLoadingPromise) {
+    languageLoadingPromise = loadLanguage().catch(console.error);
+  }
+
+  return (
+    <Suspense>
+      <GlobalScopeProvider provider={serviceProvider}>
+        <CacheProvider value={cache}>
+          <AffineContext store={getCurrentStore()}>
+            <CloudSessionProvider>
+              <DebugProvider>
+                <GlobalLoading />
+                <NotificationCenter />
+                <RouterProvider
+                  fallbackElement={<WorkspaceFallback key="RouterFallback" />}
+                  router={router}
+                  future={future}
+                />
+              </DebugProvider>
+            </CloudSessionProvider>
+          </AffineContext>
+        </CacheProvider>
+      </GlobalScopeProvider>
+    </Suspense>
+  );
+}

packages/frontend/web/src/index.tsx

@@ -0,0 +1,45 @@
+import './polyfill/intl-segmenter';
+import './polyfill/request-idle-callback';
+import './polyfill/resize-observer';
+
+import { setup } from '@affine/core/bootstrap/setup';
+import { performanceLogger } from '@affine/core/shared';
+import { isDesktop } from '@affine/env/constant';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { App } from './app';
+
+const performanceMainLogger = performanceLogger.namespace('main');
+function main() {
+  performanceMainLogger.info('start');
+
+  // skip bootstrap setup for desktop onboarding
+  if (isDesktop && window.appInfo?.windowName === 'onboarding') {
+    performanceMainLogger.info('skip setup');
+  } else {
+    performanceMainLogger.info('setup start');
+    setup();
+    performanceMainLogger.info('setup done');
+  }
+
+  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/web/src/polyfill/intl-segmenter.ts

@@ -0,0 +1,11 @@
+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/web/src/polyfill/request-idle-callback.ts

@@ -0,0 +1,19 @@
+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/web/src/polyfill/resize-observer.ts

@@ -0,0 +1,8 @@
+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;
+}