From 2be0ae89061e6a13aefdbf3e47969f6ec216c4b6 Mon Sep 17 00:00:00 2001 From: Alex Yang Date: Fri, 14 Jul 2023 13:33:43 +0800 Subject: [PATCH] revert: use stable react (#3228) --- apps/storybook/package.json | 4 +- .../stories/block-suite-editor.stories.tsx | 2 +- .../src/stories/share-menu.stories.tsx | 3 +- apps/storybook/tsconfig.json | 3 +- apps/web/package.json | 4 +- apps/web/src/pages/index.tsx | 45 ++++++++++- apps/web/tsconfig.json | 3 +- packages/component/package.json | 4 +- .../src/components/app-sidebar/index.tsx | 32 +++++--- .../components/block-suite-editor/index.tsx | 11 +-- .../components/image-preview-modal/index.tsx | 1 - .../src/components/workspace/index.tsx | 11 ++- packages/env/package.json | 4 +- packages/i18n/package.json | 2 +- packages/workspace/package.json | 4 +- packages/workspace/src/atom.ts | 35 -------- plugins/bookmark-block/package.json | 4 +- plugins/copilot/package.json | 4 +- yarn.lock | 79 ++++++++++++++----- 19 files changed, 154 insertions(+), 101 deletions(-) diff --git a/apps/storybook/package.json b/apps/storybook/package.json index 16f23410ef..212ed72f87 100644 --- a/apps/storybook/package.json +++ b/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-dom": "18.3.0-canary-1fdacbefd-20230630" + "react": "18.2.0", + "react-dom": "18.2.0" }, "peerDependencies": { "@blocksuite/blocks": "*", diff --git a/apps/storybook/src/stories/block-suite-editor.stories.tsx b/apps/storybook/src/stories/block-suite-editor.stories.tsx index 14e28eb6dc..fdef49fe27 100644 --- a/apps/storybook/src/stories/block-suite-editor.stories.tsx +++ b/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', diff --git a/apps/storybook/src/stories/share-menu.stories.tsx b/apps/storybook/src/stories/share-menu.stories.tsx index 340e015941..1930711808 100644 --- a/apps/storybook/src/stories/share-menu.stories.tsx +++ b/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', diff --git a/apps/storybook/tsconfig.json b/apps/storybook/tsconfig.json index 4f4ebce10d..20f092d454 100644 --- a/apps/storybook/tsconfig.json +++ b/apps/storybook/tsconfig.json @@ -6,8 +6,7 @@ "baseUrl": "../..", "composite": true, "noEmit": false, - "outDir": "lib", - "types": ["react/experimental"] + "outDir": "lib" }, "references": [ { diff --git a/apps/web/package.json b/apps/web/package.json index 7945c471ff..041cfd7669 100644 --- a/apps/web/package.json +++ b/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-dom": "18.3.0-canary-1fdacbefd-20230630", + "react": "18.2.0", + "react-dom": "18.2.0", "react-is": "^18.2.0", "react-resizable-panels": "^0.0.53", "rxjs": "^7.8.1", diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx index 7ada99e9ef..d2898abc11 100644 --- a/apps/web/src/pages/index.tsx +++ b/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; diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json index 6705fa73d1..fa7a09a661 100644 --- a/apps/web/tsconfig.json +++ b/apps/web/tsconfig.json @@ -15,8 +15,7 @@ "jsx": "preserve", "jsxImportSource": "@emotion/react", "incremental": true, - "experimentalDecorators": true, - "types": ["react/experimental"] + "experimentalDecorators": true }, "include": [ "next-env.d.ts", diff --git a/packages/component/package.json b/packages/component/package.json index b5989e1c81..ad1b5a0e05 100644 --- a/packages/component/package.json +++ b/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" diff --git a/packages/component/src/components/app-sidebar/index.tsx b/packages/component/src/components/app-sidebar/index.tsx index 1763a0b3cd..537dcf4e22 100644 --- a/packages/component/src/components/app-sidebar/index.tsx +++ b/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(null); @@ -128,15 +128,29 @@ export function AppSidebar(props: AppSidebarProps): ReactElement { } export const AppSidebarFallback = (): ReactElement | null => { + const appSidebarWidth = useAtomValue(appSidebarWidthAtom); return ( - -
-
- - +
+ +
); }; diff --git a/packages/component/src/components/block-suite-editor/index.tsx b/packages/component/src/components/block-suite-editor/index.tsx index dd649a390d..7d83216dfc 100644 --- a/packages/component/src/components/block-suite-editor/index.tsx +++ b/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 { - lazy, - memo, - Suspense, - use, - useCallback, - useEffect, - useRef, -} from 'react'; +import { lazy, memo, Suspense, useCallback, useEffect, useRef } from 'react'; import { createPortal } from 'react-dom'; import type { FallbackProps } from 'react-error-boundary'; import { ErrorBoundary } from 'react-error-boundary'; diff --git a/packages/component/src/components/image-preview-modal/index.tsx b/packages/component/src/components/image-preview-modal/index.tsx index db68780084..ae750cf8fb 100644 --- a/packages/component/src/components/image-preview-modal/index.tsx +++ b/packages/component/src/components/image-preview-modal/index.tsx @@ -1,4 +1,3 @@ -/// import '@blocksuite/blocks'; import { Button, Tooltip } from '@affine/component'; diff --git a/packages/component/src/components/workspace/index.tsx b/packages/component/src/components/workspace/index.tsx index 6404e0894c..97cf7af2a4 100644 --- a/packages/component/src/components/workspace/index.tsx +++ b/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; + HTMLAttributes; export const MainContainer = ({ className, @@ -47,7 +52,7 @@ export const MainContainer = ({
{children} diff --git a/packages/env/package.json b/packages/env/package.json index 1835970521..ff3d5f448f 100644 --- a/packages/env/package.json +++ b/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-dom": "18.3.0-canary-1fdacbefd-20230630", + "react": "18.2.0", + "react-dom": "18.2.0", "zod": "^3.21.4" }, "exports": { diff --git a/packages/i18n/package.json b/packages/i18n/package.json index 3bb7dfc522..c1484fe63e 100644 --- a/packages/i18n/package.json +++ b/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", diff --git a/packages/workspace/package.json b/packages/workspace/package.json index 0775aeef87..02e3b1197d 100644 --- a/packages/workspace/package.json +++ b/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-dom": "18.3.0-canary-1fdacbefd-20230630", + "react": "18.2.0", + "react-dom": "18.2.0", "y-protocols": "^1.0.5", "yjs": "^13.6.6", "zod": "^3.21.4" diff --git a/packages/workspace/src/atom.ts b/packages/workspace/src/atom.ts index 5304cfa4c0..bb6130781b 100644 --- a/packages/workspace/src/atom.ts +++ b/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 >( async get => { - if (environment.isServer) { - return Promise.resolve([]); - } const maybeMetadata = get(rootWorkspacesMetadataPrimitiveAtom); if (maybeMetadata !== null) { return maybeMetadata; diff --git a/plugins/bookmark-block/package.json b/plugins/bookmark-block/package.json index b7b0b5f10d..7d85e8b86a 100644 --- a/plugins/bookmark-block/package.json +++ b/plugins/bookmark-block/package.json @@ -18,8 +18,8 @@ "link-preview-js": "^3.0.4" }, "devDependencies": { - "react": "18.3.0-canary-1fdacbefd-20230630", - "react-dom": "18.3.0-canary-1fdacbefd-20230630" + "react": "18.2.0", + "react-dom": "18.2.0" }, "peerDependencies": { "react": "*", diff --git a/plugins/copilot/package.json b/plugins/copilot/package.json index cc19420cf4..12f8df12b8 100644 --- a/plugins/copilot/package.json +++ b/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-dom": "18.3.0-canary-1fdacbefd-20230630", + "react": "18.2.0", + "react-dom": "18.2.0", "zod": "^3.21.4" }, "peerDependencies": { diff --git a/yarn.lock b/yarn.lock index 9bb00f2f0e..0429ee1a08 100644 --- a/yarn.lock +++ b/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-dom: 18.3.0-canary-1fdacbefd-20230630 + react: 18.2.0 + 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-dom: 18.3.0-canary-1fdacbefd-20230630 + react: 18.2.0 + 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-dom: 18.3.0-canary-1fdacbefd-20230630 + react: 18.2.0 + 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-dom: 18.3.0-canary-1fdacbefd-20230630 + react: 18.2.0 + 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-dom: 18.3.0-canary-1fdacbefd-20230630 + react: 18.2.0 + 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-dom: 18.3.0-canary-1fdacbefd-20230630 + react: 18.2.0 + 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": - version: 13.0.1 - resolution: "react-i18next@npm:13.0.1" +"react-i18next@npm:^13.0.2": + version: 13.0.2 + 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"