revert: use stable react (#3228)

apps/storybook/package.json

@@ -37,8 +37,8 @@
     "@blocksuite/icons": "^2.1.24",
     "@blocksuite/lit": "0.0.0-20230713131127-200a0dc1-nightly",
     "@blocksuite/store": "0.0.0-20230713131127-200a0dc1-nightly",
-    "react": "18.3.0-canary-1fdacbefd-20230630",
+    "react": "18.2.0",
-    "react-dom": "18.3.0-canary-1fdacbefd-20230630"
+    "react-dom": "18.2.0"
   },
   "peerDependencies": {
     "@blocksuite/blocks": "*",

apps/storybook/src/stories/block-suite-editor.stories.tsx

@@ -9,7 +9,7 @@ import type { Page } from '@blocksuite/store';
 import { createMemoryStorage, Workspace } from '@blocksuite/store';
 import { expect } from '@storybook/jest';
 import type { Meta, StoryFn } from '@storybook/react';
-import { use } from 'react';
+import { use } from 'foxact/use';
 
 const blockSuiteWorkspace = new Workspace({
   id: 'test',

apps/storybook/src/stories/share-menu.stories.tsx

@@ -13,7 +13,8 @@ import { createEmptyBlockSuiteWorkspace } from '@affine/workspace/utils';
 import type { Page } from '@blocksuite/store';
 import { expect } from '@storybook/jest';
 import type { StoryFn } from '@storybook/react';
-import { use, useState } from 'react';
+import { use } from 'foxact/use';
+import { useState } from 'react';
 
 export default {
   title: 'AFFiNE/ShareMenu',

apps/storybook/tsconfig.json

@@ -6,8 +6,7 @@
     "baseUrl": "../..",
     "composite": true,
     "noEmit": false,
-    "outDir": "lib",
+    "outDir": "lib"
-    "types": ["react/experimental"]
   },
   "references": [
     {

apps/web/package.json

@@ -47,8 +47,8 @@
     "lit": "^2.7.5",
     "lottie-web": "^5.12.2",
     "next-themes": "^0.2.1",
-    "react": "18.3.0-canary-1fdacbefd-20230630",
+    "react": "18.2.0",
-    "react-dom": "18.3.0-canary-1fdacbefd-20230630",
+    "react-dom": "18.2.0",
     "react-is": "^18.2.0",
     "react-resizable-panels": "^0.0.53",
     "rxjs": "^7.8.1",

apps/web/src/pages/index.tsx

@@ -1,13 +1,15 @@
 import { WorkspaceFallback } from '@affine/component/workspace';
 import { DebugLogger } from '@affine/debug';
-import { WorkspaceSubPath } from '@affine/env/workspace';
+import { WorkspaceSubPath, WorkspaceVersion } from '@affine/env/workspace';
+import type { RootWorkspaceMetadataV2 } from '@affine/workspace/atom';
 import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
 import { getWorkspace } from '@toeverything/plugin-infra/__internal__/workspace';
-import { useAtomValue } from 'jotai';
+import { useAtom } from 'jotai';
 import type { NextPage } from 'next';
 import { useRouter } from 'next/router';
 import { Suspense, useEffect } from 'react';
 
+import { WorkspaceAdapters } from '../adapters/workspace';
 import { RouteLogic, useRouterHelper } from '../hooks/use-router-helper';
 import { useWorkspace } from '../hooks/use-workspace';
 import { useAppHelper } from '../hooks/use-workspaces';
@@ -27,9 +29,46 @@ const WorkspaceLoader = (props: AllWorkspaceLoaderProps): null => {
 const IndexPageInner = () => {
   const router = useRouter();
   const { jumpToPage, jumpToSubPath } = useRouterHelper(router);
-  const meta = useAtomValue(rootWorkspacesMetadataAtom);
+  const [meta, setMeta] = useAtom(rootWorkspacesMetadataAtom);
   const helper = useAppHelper();
 
+  useEffect(() => {
+    const abortController = new AbortController();
+    const signal = abortController.signal;
+    const createFirst = (): RootWorkspaceMetadataV2[] => {
+      if (signal.aborted) {
+        return [];
+      }
+
+      const Plugins = Object.values(WorkspaceAdapters).sort(
+        (a, b) => a.loadPriority - b.loadPriority
+      );
+
+      return Plugins.flatMap(Plugin => {
+        return Plugin.Events['app:init']?.().map(
+          id =>
+            ({
+              id,
+              flavour: Plugin.flavour,
+              // new workspace should all support sub-doc feature
+              version: WorkspaceVersion.SubDoc,
+            }) satisfies RootWorkspaceMetadataV2
+        );
+      }).filter((ids): ids is RootWorkspaceMetadataV2 => !!ids);
+    };
+
+    if (meta.length === 0 && localStorage.getItem('is-first-open') === null) {
+      meta.push(...createFirst());
+      console.info('create first workspace', meta);
+      localStorage.setItem('is-first-open', 'false');
+      setMeta(meta).catch(console.error);
+    }
+
+    return () => {
+      abortController.abort();
+    };
+  }, [meta, setMeta]);
+
   useEffect(() => {
     if (!router.isReady) {
       return;

apps/web/tsconfig.json

@@ -15,8 +15,7 @@
     "jsx": "preserve",
     "jsxImportSource": "@emotion/react",
     "incremental": true,
-    "experimentalDecorators": true,
+    "experimentalDecorators": true
-    "types": ["react/experimental"]
   },
   "include": [
     "next-env.d.ts",

packages/component/package.json

@@ -43,9 +43,9 @@
     "jotai": "^2.2.2",
     "lit": "^2.7.5",
     "lottie-web": "^5.12.2",
-    "react": "18.3.0-canary-1fdacbefd-20230630",
+    "react": "18.2.0",
     "react-datepicker": "^4.15.0",
-    "react-dom": "18.3.0-canary-1fdacbefd-20230630",
+    "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.10",
     "react-is": "^18.2.0",
     "rxjs": "^7.8.1"

packages/component/src/components/app-sidebar/index.tsx

@@ -9,6 +9,7 @@ import { fallbackHeaderStyle, fallbackStyle } from './fallback.css';
 import {
   floatingMaxWidth,
   navBodyStyle,
+  navHeaderStyle,
   navStyle,
   navWidthVar,
   navWrapperStyle,
@@ -28,7 +29,6 @@ import { SidebarHeader } from './sidebar-header';
 export type AppSidebarProps = PropsWithChildren<
   SidebarHeaderProps & {
     hasBackground?: boolean;
-    isFallback?: boolean;
   }
 >;
 
@@ -53,7 +53,7 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
   const [appSidebarFloating, setAppSidebarFloating] = useAtom(
     appSidebarFloatingAtom
   );
-  const initialRender = open === undefined && !props.isFallback;
+  const initialRender = open === undefined;
 
   const isResizing = useAtomValue(appSidebarResizingAtom);
   const navRef = useRef<HTMLDivElement>(null);
@@ -128,15 +128,29 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
 }
 
 export const AppSidebarFallback = (): ReactElement | null => {
+  const appSidebarWidth = useAtomValue(appSidebarWidthAtom);
   return (
-    <AppSidebar isFallback>
+    <div
+      style={assignInlineVars({
+        [navWidthVar]: `${appSidebarWidth}px`,
+      })}
+      className={clsx(navWrapperStyle, {
+        'has-border': true,
+      })}
+      data-open="true"
+    >
+      <nav className={navStyle}>
+        <div className={navHeaderStyle} data-open="true" />
+        <div className={navBodyStyle}>
           <div className={fallbackStyle}>
             <div className={fallbackHeaderStyle}>
               <Skeleton variant="circular" width={40} height={40} />
               <Skeleton variant="rectangular" width={150} height={40} />
             </div>
           </div>
-    </AppSidebar>
+        </div>
+      </nav>
+    </div>
   );
 };
 

packages/component/src/components/block-suite-editor/index.tsx

@@ -4,17 +4,10 @@ import type { EditorContainer } from '@blocksuite/editor';
 import { assertExists } from '@blocksuite/global/utils';
 import type { Page } from '@blocksuite/store';
 import { Skeleton } from '@mui/material';
+import { use } from 'foxact/use';
 import { useAtomValue } from 'jotai';
 import type { CSSProperties, ReactElement } from 'react';
-import {
+import { lazy, memo, Suspense, useCallback, useEffect, useRef } from 'react';
-  lazy,
-  memo,
-  Suspense,
-  use,
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react';
 import { createPortal } from 'react-dom';
 import type { FallbackProps } from 'react-error-boundary';
 import { ErrorBoundary } from 'react-error-boundary';

packages/component/src/components/image-preview-modal/index.tsx

@@ -1,4 +1,3 @@
-/// <reference types="react/experimental" />
 import '@blocksuite/blocks';
 
 import { Button, Tooltip } from '@affine/component';

packages/component/src/components/workspace/index.tsx

@@ -1,5 +1,10 @@
 import { clsx } from 'clsx';
-import type { FC, PropsWithChildren, ReactElement } from 'react';
+import type {
+  FC,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactElement,
+} from 'react';
 
 import { AppSidebarFallback } from '../app-sidebar';
 import { appStyle, mainContainerStyle, toolStyle } from './index.css';
@@ -35,7 +40,7 @@ export type MainContainerProps = PropsWithChildren<{
   className?: string;
   padding?: boolean;
 }> &
-  React.HTMLAttributes<HTMLDivElement>;
+  HTMLAttributes<HTMLDivElement>;
 
 export const MainContainer = ({
   className,
@@ -47,7 +52,7 @@ export const MainContainer = ({
     <div
       {...props}
       className={clsx(mainContainerStyle, 'main-container', className)}
-      data-is-macos={environment.isBrowser && environment.isMacOs}
+      data-is-macos={environment.isDesktop && environment.isMacOs}
       data-show-padding={padding}
     >
       {children}

packages/env/package.json

@@ -7,8 +7,8 @@
   "devDependencies": {
     "@blocksuite/global": "0.0.0-20230713131127-200a0dc1-nightly",
     "next": "=13.4.2",
-    "react": "18.3.0-canary-1fdacbefd-20230630",
+    "react": "18.2.0",
-    "react-dom": "18.3.0-canary-1fdacbefd-20230630",
+    "react-dom": "18.2.0",
     "zod": "^3.21.4"
   },
   "exports": {

packages/i18n/package.json

@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "i18next": "^23.2.6",
-    "react-i18next": "^13.0.1"
+    "react-i18next": "^13.0.2"
   },
   "devDependencies": {
     "@types/node": "^18.16.19",

packages/workspace/package.json

@@ -25,8 +25,8 @@
     "js-base64": "^3.7.5",
     "ky": "^0.33.3",
     "lib0": "^0.2.78",
-    "react": "18.3.0-canary-1fdacbefd-20230630",
+    "react": "18.2.0",
-    "react-dom": "18.3.0-canary-1fdacbefd-20230630",
+    "react-dom": "18.2.0",
     "y-protocols": "^1.0.5",
     "yjs": "^13.6.6",
     "zod": "^3.21.4"

packages/workspace/src/atom.ts

@@ -71,27 +71,6 @@ const rootWorkspacesMetadataPromiseAtom = atom<
   if (maybeMetadata !== null) {
     return maybeMetadata;
   }
-  const createFirst = (): RootWorkspaceMetadataV2[] => {
-    if (signal.aborted) {
-      return [];
-    }
-
-    const Plugins = Object.values(WorkspaceAdapters).sort(
-      (a, b) => a.loadPriority - b.loadPriority
-    );
-
-    return Plugins.flatMap(Plugin => {
-      return Plugin.Events['app:init']?.().map(
-        id =>
-          ({
-            id,
-            flavour: Plugin.flavour,
-            // new workspace should all support sub-doc feature
-            version: WorkspaceVersion.SubDoc,
-          }) satisfies RootWorkspaceMetadataV2
-      );
-    }).filter((ids): ids is RootWorkspaceMetadataV2 => !!ids);
-  };
 
   if (environment.isServer) {
     // return a promise in SSR to avoid the hydration mismatch
@@ -159,17 +138,6 @@ const rootWorkspacesMetadataPromiseAtom = atom<
         }
       }
     }
-    // step 3: create initial workspaces
-    {
-      if (
-        metadata.length === 0 &&
-        localStorage.getItem('is-first-open') === null
-      ) {
-        metadata.push(...createFirst());
-        console.info('create first workspace', metadata);
-        localStorage.setItem('is-first-open', 'false');
-      }
-    }
     const metadataMap = new Map(metadata.map(x => [x.id, x]));
     // init workspace data
     metadataMap.forEach((meta, id) => {
@@ -194,9 +162,6 @@ export const rootWorkspacesMetadataAtom = atom<
   Promise<RootWorkspaceMetadata[]>
 >(
   async get => {
-    if (environment.isServer) {
-      return Promise.resolve([]);
-    }
     const maybeMetadata = get(rootWorkspacesMetadataPrimitiveAtom);
     if (maybeMetadata !== null) {
       return maybeMetadata;

plugins/bookmark-block/package.json

@@ -18,8 +18,8 @@
     "link-preview-js": "^3.0.4"
   },
   "devDependencies": {
-    "react": "18.3.0-canary-1fdacbefd-20230630",
+    "react": "18.2.0",
-    "react-dom": "18.3.0-canary-1fdacbefd-20230630"
+    "react-dom": "18.2.0"
   },
   "peerDependencies": {
     "react": "*",

plugins/copilot/package.json

@@ -20,8 +20,8 @@
     "@types/react-dom": "^18.2.6",
     "idb": "^7.1.1",
     "jotai": "^2.2.2",
-    "react": "18.3.0-canary-1fdacbefd-20230630",
+    "react": "18.2.0",
-    "react-dom": "18.3.0-canary-1fdacbefd-20230630",
+    "react-dom": "18.2.0",
     "zod": "^3.21.4"
   },
   "peerDependencies": {

yarn.lock

@@ -72,8 +72,8 @@ __metadata:
     "@toeverything/plugin-infra": "workspace:*"
     foxact: ^0.2.11
     link-preview-js: ^3.0.4
-    react: 18.3.0-canary-1fdacbefd-20230630
+    react: 18.2.0
-    react-dom: 18.3.0-canary-1fdacbefd-20230630
+    react-dom: 18.2.0
   peerDependencies:
     react: "*"
     react-dom: "*"
@@ -137,9 +137,9 @@ __metadata:
     jotai: ^2.2.2
     lit: ^2.7.5
     lottie-web: ^5.12.2
-    react: 18.3.0-canary-1fdacbefd-20230630
+    react: 18.2.0
     react-datepicker: ^4.15.0
-    react-dom: 18.3.0-canary-1fdacbefd-20230630
+    react-dom: 18.2.0
     react-error-boundary: ^4.0.10
     react-is: ^18.2.0
     rxjs: ^7.8.1
@@ -171,8 +171,8 @@ __metadata:
     marked: ^5.1.0
     marked-gfm-heading-id: ^3.0.4
     marked-mangle: ^1.1.0
-    react: 18.3.0-canary-1fdacbefd-20230630
+    react: 18.2.0
-    react-dom: 18.3.0-canary-1fdacbefd-20230630
+    react-dom: 18.2.0
     zod: ^3.21.4
   peerDependencies:
     react: "*"
@@ -272,8 +272,8 @@ __metadata:
     "@blocksuite/global": 0.0.0-20230713131127-200a0dc1-nightly
     lit: ^2.7.5
     next: =13.4.2
-    react: 18.3.0-canary-1fdacbefd-20230630
+    react: 18.2.0
-    react-dom: 18.3.0-canary-1fdacbefd-20230630
+    react-dom: 18.2.0
     zod: ^3.21.4
   peerDependencies:
     "@affine/templates": "workspace:*"
@@ -305,7 +305,7 @@ __metadata:
     "@types/prettier": ^2.7.3
     i18next: ^23.2.6
     prettier: ^3.0.0
-    react-i18next: ^13.0.1
+    react-i18next: ^13.0.2
     ts-node: ^10.9.1
     typescript: ^5.1.6
   languageName: unknown
@@ -494,8 +494,8 @@ __metadata:
     "@vitejs/plugin-react": ^4.0.1
     concurrently: ^8.2.0
     jest-mock: ^29.5.0
-    react: 18.3.0-canary-1fdacbefd-20230630
+    react: 18.2.0
-    react-dom: 18.3.0-canary-1fdacbefd-20230630
+    react-dom: 18.2.0
     serve: ^14.2.0
     storybook: ^7.0.24
     storybook-dark-mode: ^3.0.0
@@ -578,8 +578,8 @@ __metadata:
     next-router-mock: ^0.9.7
     next-themes: ^0.2.1
     raw-loader: ^4.0.2
-    react: 18.3.0-canary-1fdacbefd-20230630
+    react: 18.2.0
-    react-dom: 18.3.0-canary-1fdacbefd-20230630
+    react-dom: 18.2.0
     react-is: ^18.2.0
     react-resizable-panels: ^0.0.53
     redux: ^4.2.1
@@ -612,8 +612,8 @@ __metadata:
     ky: ^0.33.3
     lib0: ^0.2.78
     next: =13.4.2
-    react: 18.3.0-canary-1fdacbefd-20230630
+    react: 18.2.0
-    react-dom: 18.3.0-canary-1fdacbefd-20230630
+    react-dom: 18.2.0
     ws: ^8.13.0
     y-protocols: ^1.0.5
     yjs: ^13.6.6
@@ -13042,7 +13042,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.7.1, acorn@npm:^8.8.0, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
+"acorn@npm:^8.4.1, acorn@npm:^8.7.1, acorn@npm:^8.8.0, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
   version: 8.9.0
   resolution: "acorn@npm:8.9.0"
   bin:
@@ -13051,6 +13051,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"acorn@npm:^8.5.0":
+  version: 8.10.0
+  resolution: "acorn@npm:8.10.0"
+  bin:
+    acorn: bin/acorn
+  checksum: 538ba38af0cc9e5ef983aee196c4b8b4d87c0c94532334fa7e065b2c8a1f85863467bb774231aae91613fcda5e68740c15d97b1967ae3394d20faddddd8af61d
+  languageName: node
+  linkType: hard
+
 "address@npm:^1.0.1":
   version: 1.2.2
   resolution: "address@npm:1.2.2"
@@ -26568,6 +26577,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-dom@npm:18.2.0":
+  version: 18.2.0
+  resolution: "react-dom@npm:18.2.0"
+  dependencies:
+    loose-envify: ^1.1.0
+    scheduler: ^0.23.0
+  peerDependencies:
+    react: ^18.2.0
+  checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:18.3.0-canary-1fdacbefd-20230630":
   version: 18.3.0-canary-1fdacbefd-20230630
   resolution: "react-dom@npm:18.3.0-canary-1fdacbefd-20230630"
@@ -26623,9 +26644,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-i18next@npm:^13.0.1":
+"react-i18next@npm:^13.0.2":
-  version: 13.0.1
+  version: 13.0.2
-  resolution: "react-i18next@npm:13.0.1"
+  resolution: "react-i18next@npm:13.0.2"
   dependencies:
     "@babel/runtime": ^7.22.5
     html-parse-stringify: ^3.0.1
@@ -26637,7 +26658,7 @@ __metadata:
       optional: true
     react-native:
       optional: true
-  checksum: eac59c4517c07e4e4b182570140ad9b2f7a7920dac5dadd694107ea6359743fe855390192072464fac579d3de1370bf4656b987a8c9c77babeb5b60ff8f17d3c
+  checksum: ab8226939f3681efb5a8628f938d90b3311336e69ca9aaf1ea54aad6fac3395516736971a3484234455f3831ecae8555f68c32fa1cd4d38b94ff69769da2b677
   languageName: node
   linkType: hard
 
@@ -26872,6 +26893,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react@npm:18.2.0":
+  version: 18.2.0
+  resolution: "react@npm:18.2.0"
+  dependencies:
+    loose-envify: ^1.1.0
+  checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b
+  languageName: node
+  linkType: hard
+
 "react@npm:18.3.0-canary-1fdacbefd-20230630":
   version: 18.3.0-canary-1fdacbefd-20230630
   resolution: "react@npm:18.3.0-canary-1fdacbefd-20230630"
@@ -27721,6 +27751,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scheduler@npm:^0.23.0":
+  version: 0.23.0
+  resolution: "scheduler@npm:0.23.0"
+  dependencies:
+    loose-envify: ^1.1.0
+  checksum: d79192eeaa12abef860c195ea45d37cbf2bbf5f66e3c4dcd16f54a7da53b17788a70d109ee3d3dde1a0fd50e6a8fc171f4300356c5aee4fc0171de526bf35f8a
+  languageName: node
+  linkType: hard
+
 "schema-utils@npm:^3.0.0, schema-utils@npm:^3.1.1, schema-utils@npm:^3.2.0":
   version: 3.3.0
   resolution: "schema-utils@npm:3.3.0"