refactor: remove NoSsr on top level (#1951)

packages/component/package.json

@@ -13,11 +13,11 @@
     "./*": "./src/components/*/index.tsx"
   },
   "peerDependencies": {
-    "@blocksuite/blocks": "0.0.0-20230409084303-221991d4-nightly",
-    "@blocksuite/editor": "0.0.0-20230409084303-221991d4-nightly",
-    "@blocksuite/global": "0.0.0-20230409084303-221991d4-nightly",
-    "@blocksuite/icons": "2.1.10",
-    "@blocksuite/store": "0.0.0-20230409084303-221991d4-nightly"
+    "@blocksuite/blocks": "*",
+    "@blocksuite/editor": "*",
+    "@blocksuite/global": "*",
+    "@blocksuite/icons": "*",
+    "@blocksuite/store": "*"
   },
   "dependencies": {
     "@affine/debug": "workspace:*",
@@ -36,6 +36,7 @@
     "@radix-ui/react-avatar": "^1.0.2",
     "@toeverything/hooks": "workspace:*",
     "clsx": "^1.2.1",
+    "jotai": "^2.0.4",
     "kebab-case": "^1.0.2",
     "lit": "^2.7.2",
     "lottie-web": "^5.11.0",

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

@@ -59,13 +59,13 @@ const Template: StoryFn<EditorProps> = (props: EditorProps) => {
 
 export const Empty = Template.bind({});
 Empty.play = async ({ canvasElement }) => {
+  await new Promise<void>(resolve => {
+    setTimeout(() => resolve(), 500);
+  });
   const editorContainer = canvasElement.querySelector(
     '[data-testid="editor-page0"]'
   ) as HTMLDivElement;
   expect(editorContainer).not.toBeNull();
-  await new Promise<void>(resolve => {
-    setTimeout(() => resolve(), 50);
-  });
   const editor = editorContainer.querySelector(
     'editor-container'
   ) as EditorContainer;

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

@@ -1,9 +1,11 @@
+import { editorContainerModuleAtom } from '@affine/jotai';
 import type { BlockHub } from '@blocksuite/blocks';
-import { EditorContainer } from '@blocksuite/editor';
+import type { EditorContainer } from '@blocksuite/editor';
 import { assertExists } from '@blocksuite/global/utils';
 import type { Page } from '@blocksuite/store';
+import { useAtomValue } from 'jotai';
 import type { CSSProperties, ReactElement } from 'react';
-import { memo, useCallback, useEffect, useRef } from 'react';
+import { memo, Suspense, useCallback, useEffect, useRef } from 'react';
 import type { FallbackProps } from 'react-error-boundary';
 import { ErrorBoundary } from 'react-error-boundary';
 
@@ -27,12 +29,15 @@ declare global {
 }
 
 const BlockSuiteEditorImpl = (props: EditorProps): ReactElement => {
+  const JotaiEditorContainer = useAtomValue(
+    editorContainerModuleAtom
+  ) as typeof EditorContainer;
   const page = props.page;
   assertExists(page, 'page should not be null');
   const editorRef = useRef<EditorContainer | null>(null);
   const blockHubRef = useRef<BlockHub | null>(null);
   if (editorRef.current === null) {
-    editorRef.current = new EditorContainer();
+    editorRef.current = new JotaiEditorContainer();
     editorRef.current.autofocus = true;
     globalThis.currentEditor = editorRef.current;
   }
@@ -83,7 +88,7 @@ const BlockSuiteEditorImpl = (props: EditorProps): ReactElement => {
       blockHubRef.current?.remove();
       container.removeChild(editor);
     };
-  }, [page]);
+  }, [editor, page]);
   return (
     <div
       data-testid={`editor-${props.page.id}`}
@@ -126,7 +131,9 @@ export const BlockSuiteEditor = memo(function BlockSuiteEditor(
         [props.onReset]
       )}
     >
-      <BlockSuiteEditorImpl {...props} />
+      <Suspense fallback={null}>
+        <BlockSuiteEditorImpl {...props} />
+      </Suspense>
     </ErrorBoundary>
   );
 });

packages/jotai/package.json

@@ -7,9 +7,17 @@
     "jotai": "^2.0.4"
   },
   "devDependencies": {
+    "@blocksuite/blocks": "0.0.0-20230413190748-4d32b79a-nightly",
+    "@blocksuite/editor": "0.0.0-20230413190748-4d32b79a-nightly",
+    "@blocksuite/global": "0.0.0-20230413190748-4d32b79a-nightly",
+    "@blocksuite/store": "0.0.0-20230413190748-4d32b79a-nightly",
     "lottie-web": "^5.11.0"
   },
   "peerDependencies": {
+    "@blocksuite/blocks": "*",
+    "@blocksuite/editor": "*",
+    "@blocksuite/global": "*",
+    "@blocksuite/store": "*",
     "lottie-web": "*"
   }
 }

packages/jotai/src/resource.ts

@@ -1,5 +1,14 @@
+import { getEnvironment } from '@affine/env';
+import type { EditorContainer } from '@blocksuite/editor';
 import { atom } from 'jotai';
 
-export const lottieAtom = atom(async () =>
-  import('lottie-web').then(m => m.default)
+export const lottieAtom = atom(import('lottie-web').then(m => m.default));
+
+export const editorContainerModuleAtom = atom<Promise<typeof EditorContainer>>(
+  getEnvironment().isServer
+    ? async () =>
+        import('@blocksuite/editor').then(module => module.EditorContainer)
+    : (import('@blocksuite/editor').then(
+        module => module.EditorContainer
+      ) as any)
 );

packages/workspace/package.json

@@ -13,8 +13,8 @@
     "./affine/keck": "./src/affine/keck/index.ts"
   },
   "peerDependencies": {
-    "@blocksuite/blocks": "0.0.0-20230409084303-221991d4-nightly",
-    "@blocksuite/store": "0.0.0-20230409084303-221991d4-nightly"
+    "@blocksuite/blocks": "*",
+    "@blocksuite/store": "*"
   },
   "dependencies": {
     "@affine-test/fixtures": "workspace:*",

packages/workspace/src/affine/login.ts

@@ -57,6 +57,7 @@ export const isExpired = (
 };
 
 export const setLoginStorage = (login: LoginResponse) => {
+  loginResponseSchema.parse(login);
   localStorage.setItem(
     STORAGE_KEY,
     JSON.stringify({

packages/workspace/src/utils.ts

@@ -6,11 +6,17 @@ const hashMap = new Map<string, Workspace>();
 export const createEmptyBlockSuiteWorkspace = (
   id: string,
   blobOptionsGetter?: BlobOptionsGetter,
-  idGenerator?: Generator
-): Workspace => {
-  if (hashMap.has(id)) {
-    return hashMap.get(id) as Workspace;
+  config?: {
+    cachePrefix?: string;
+    idGenerator?: Generator;
   }
+): Workspace => {
+  const prefix: string = config?.cachePrefix ?? '';
+  const cacheKey = `${prefix}${id}`;
+  if (hashMap.has(cacheKey)) {
+    return hashMap.get(cacheKey) as Workspace;
+  }
+  const idGenerator = config?.idGenerator;
   const workspace = new Workspace({
     id,
     isSSR: typeof window === 'undefined',
@@ -19,6 +25,6 @@ export const createEmptyBlockSuiteWorkspace = (
   })
     .register(AffineSchemas)
     .register(__unstableSchemas);
-  hashMap.set(id, workspace);
+  hashMap.set(cacheKey, workspace);
   return workspace;
 };