revert: use stable react (#3228)

This commit is contained in:
Alex Yang
2023-07-14 13:33:43 +08:00
committed by GitHub
parent 9a85a14970
commit 2be0ae8906
19 changed files with 154 additions and 101 deletions
+2 -2
View File
@@ -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": "*",
@@ -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',
@@ -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',
+1 -2
View File
@@ -6,8 +6,7 @@
"baseUrl": "../..",
"composite": true,
"noEmit": false,
"outDir": "lib",
"types": ["react/experimental"]
"outDir": "lib"
},
"references": [
{
+2 -2
View File
@@ -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",
+42 -3
View File
@@ -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;
+1 -2
View File
@@ -15,8 +15,7 @@
"jsx": "preserve",
"jsxImportSource": "@emotion/react",
"incremental": true,
"experimentalDecorators": true,
"types": ["react/experimental"]
"experimentalDecorators": true
},
"include": [
"next-env.d.ts",
+2 -2
View File
@@ -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"
@@ -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 className={fallbackStyle}>
<div className={fallbackHeaderStyle}>
<Skeleton variant="circular" width={40} height={40} />
<Skeleton variant="rectangular" width={150} height={40} />
<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>
</div>
</div>
</AppSidebar>
</nav>
</div>
);
};
@@ -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';
@@ -1,4 +1,3 @@
/// <reference types="react/experimental" />
import '@blocksuite/blocks';
import { Button, Tooltip } from '@affine/component';
@@ -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}
+2 -2
View File
@@ -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": {
+1 -1
View File
@@ -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",
+2 -2
View File
@@ -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"
-35
View File
@@ -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;
+2 -2
View File
@@ -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": "*",
+2 -2
View File
@@ -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": {
+59 -20
View File
@@ -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"