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/web/README.md

@@ -0,0 +1,3 @@
+# web
+
+AFFiNE Desktop Edition Web app.

packages/frontend/apps/web/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@affine/web",
+  "version": "0.16.0",
+  "description": "AFFiNE Desktop Web application",
+  "private": true,
+  "browser": "src/index.tsx",
+  "scripts": {
+    "build": "cross-env DISTRIBUTION=web yarn workspace @affine/cli build",
+    "dev": "yarn workspace @affine/cli dev",
+    "static-server": "yarn workspace @affine/cli dev --static"
+  },
+  "dependencies": {
+    "@affine/component": "workspace:*",
+    "@affine/core": "workspace:*",
+    "@affine/electron-api": "workspace:*",
+    "@affine/env": "workspace:*",
+    "@affine/i18n": "workspace:*",
+    "@emotion/react": "^11.11.4",
+    "@sentry/react": "^8.0.0",
+    "core-js": "^3.36.1",
+    "intl-segmenter-polyfill-rs": "^0.1.7",
+    "jotai": "^2.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3"
+  },
+  "devDependencies": {
+    "@affine/cli": "workspace:*",
+    "@types/react": "^18.2.75",
+    "@types/react-dom": "^18.2.24",
+    "cross-env": "^7.0.3",
+    "typescript": "^5.4.5"
+  }
+}

packages/frontend/apps/web/project.json

@@ -0,0 +1,69 @@
+{
+  "name": "@affine/web",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "targets": {
+    "build": {
+      "executor": "nx:run-script",
+      "dependsOn": [
+        {
+          "projects": ["tag:infra"],
+          "target": "build",
+          "params": "ignore"
+        },
+        "^build"
+      ],
+      "inputs": [
+        "{projectRoot}/**/*",
+        "{workspaceRoot}/tools/**/*",
+        "{workspaceRoot}/packages/frontend/core/**/*",
+        "{workspaceRoot}/packages/**/*",
+        {
+          "env": "BUILD_TYPE"
+        },
+        {
+          "env": "BUILD_TYPE_OVERRIDE"
+        },
+        {
+          "env": "PERFSEE_TOKEN"
+        },
+        {
+          "env": "SENTRY_ORG"
+        },
+        {
+          "env": "SENTRY_PROJECT"
+        },
+        {
+          "env": "SENTRY_AUTH_TOKEN"
+        },
+        {
+          "env": "SENTRY_DSN"
+        },
+        {
+          "env": "DISTRIBUTION"
+        },
+        {
+          "env": "COVERAGE"
+        },
+        {
+          "env": "DISABLE_DEV_OVERLAY"
+        },
+        {
+          "env": "CAPTCHA_SITE_KEY"
+        },
+        {
+          "env": "R2_ACCOUNT_ID"
+        },
+        {
+          "env": "R2_ACCESS_KEY_ID"
+        },
+        {
+          "env": "R2_SECRET_ACCESS_KEY"
+        }
+      ],
+      "options": {
+        "script": "build"
+      },
+      "outputs": ["{projectRoot}/dist"]
+    }
+  }
+}

packages/frontend/apps/web/src/app.tsx

@@ -0,0 +1,99 @@
+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 { configureCommonModules } from '@affine/core/modules';
+import { configureLocalStorageStateStorageImpls } from '@affine/core/modules/storage';
+import { CustomThemeModifier } from '@affine/core/modules/theme-editor';
+import { configureIndexedDBUserspaceStorageProvider } from '@affine/core/modules/userspace';
+import { configureBrowserWorkbenchModule } from '@affine/core/modules/workbench';
+import {
+  configureBrowserWorkspaceFlavours,
+  configureIndexedDBWorkspaceEngineStorageProvider,
+} 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';
+
+if (environment.isElectron && environment.isDebug) {
+  document.body.innerHTML = `<h1 style="color:red;font-size:5rem;text-align:center;">Don't run web entry in electron.</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);
+configureBrowserWorkbenchModule(framework);
+configureLocalStorageStateStorageImpls(framework);
+configureBrowserWorkspaceFlavours(framework);
+configureIndexedDBWorkspaceEngineStorageProvider(framework);
+configureIndexedDBUserspaceStorageProvider(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 key="RouterFallback" />}
+              router={router}
+              future={future}
+            />
+          </AffineContext>
+        </CacheProvider>
+      </FrameworkRoot>
+    </Suspense>
+  );
+}

packages/frontend/apps/web/src/index.tsx

@@ -0,0 +1,76 @@
+import './polyfill/dispose';
+import './polyfill/intl-segmenter';
+import './polyfill/promise-with-resolvers';
+import './polyfill/request-idle-callback';
+import '@affine/core/bootstrap/preload';
+
+import { performanceLogger } from '@affine/core/shared';
+import { appInfo } from '@affine/electron-api';
+import {
+  init,
+  reactRouterV6BrowserTracingIntegration,
+  setTags,
+} from '@sentry/react';
+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');
+
+  // skip bootstrap setup for desktop onboarding
+  if (environment.isElectron && appInfo?.windowName === 'onboarding') {
+    performanceMainLogger.info('skip setup');
+  } else {
+    performanceMainLogger.info('setup start');
+    if (window.SENTRY_RELEASE || environment.isDebug) {
+      // https://docs.sentry.io/platforms/javascript/guides/react/#configure
+      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,
+      });
+    }
+    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/apps/web/src/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/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/apps/web/src/polyfill/promise-with-resolvers.ts

@@ -0,0 +1 @@
+import 'core-js/features/promise/with-resolvers';

packages/frontend/apps/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/apps/web/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "lib",
+    "moduleResolution": "Bundler",
+    "types": ["affine__env"],
+    "rootDir": "./src"
+  },
+  "include": ["./src"],
+  "references": [{ "path": "../../core" }]
+}