Merge branch 'feat/cloud-sync-saika' into feat/poc

.changeset/config.json

@@ -5,7 +5,7 @@
   "fixed": [],
   "linked": [],
   "access": "restricted",
-  "baseBranch": "feat/cloud-sync",
+  "baseBranch": "feat/master",
   "updateInternalDependencies": "patch",
   "ignore": []
 }

.github/workflows/changlog.yml

@@ -1,8 +1,7 @@
 name: Pathfinder changelog
 
 on:
-  push:
+  workflow_dispatch:
-    branches: [feat/cloud-sync, master]
 
 # Cancels all previous workflow runs for pull requests that have not completed.
 # See https://docs.github.com/en/actions/using-jobs/using-concurrency

.github/workflows/publish.yml

@@ -1,10 +1,7 @@
-name: Pathfinder Check
+name: Build Pathfinder Self-hosted
 
 on:
-  push:
+  workflow_dispatch:
-    branches: [feat/cloud-sync]
-  pull_request:
-    branches: [feat/cloud-sync]
 
 # Cancels all previous workflow runs for pull requests that have not completed.
 # See https://docs.github.com/en/actions/using-jobs/using-concurrency
@@ -15,69 +12,12 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  build:
+  build-self-hosted:
-    name: Build on Pull Request
+    name: Build Community
-    if: github.ref != 'refs/heads/master'
+    if: github.ref == 'refs/heads/master'
     runs-on: self-hosted
     environment: development
 
-    steps:
-      - uses: actions/checkout@v2
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 'latest'
-
-      - name: Use Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: 18.x
-          registry-url: https://npm.pkg.github.com
-          scope: '@toeverything'
-          cache: 'pnpm'
-
-      - run: node scripts/module-resolve/ci.js
-
-      - name: Restore cache
-        uses: actions/cache@v3
-        with:
-          path: |
-            .next/cache
-          # Generate a new cache whenever packages or source files change.
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
-          # If source files changed but packages didn't, rebuild from a prior cache.
-          restore-keys: |
-            ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-
-
-      - name: Install dependencies
-        run: pnpm install --no-frozen-lockfile
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_GITHUB_AUTH_TOKEN }}
-
-      - name: Build
-        run: pnpm build
-        env:
-          NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
-          NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: ${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }}
-          NEXT_PUBLIC_FIREBASE_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID }}
-          NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}
-          NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}
-          NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}
-          NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}
-
-      - name: Export
-        run: pnpm export
-
-      - name: Upload artifact
-        uses: actions/upload-artifact@v3
-        with:
-          path: ./packages/app/.next
-
-  lint:
-    name: Lint and E2E Test
-    runs-on: ubuntu-latest
-    environment: development
-    needs: build
-
     steps:
       - uses: actions/checkout@v2
       - uses: pnpm/action-setup@v2
@@ -106,18 +46,8 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_GITHUB_AUTH_TOKEN }}
 
-      - name: Download artifact
+      - name: Build
-        uses: actions/download-artifact@v3
+        run: pnpm build
-        with:
-          name: artifact
-          path: packages/app/.next/
-
-      - name: Lint & E2E Test
-        run: |
-          pnpm lint --max-warnings=0
-          PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install chromium
-          PLAYWRIGHT_BROWSERS_PATH=0 pnpm test
-          PLAYWRIGHT_BROWSERS_PATH=0 pnpm test:dc
         env:
           NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
           NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: ${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }}
@@ -126,3 +56,59 @@ jobs:
           NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}
           NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}
           NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}
+
+      - name: Export
+        run: pnpm export
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v3
+        with:
+          path: ./packages/app/out
+
+  publish-self-hosted:
+    name: Push Community Image
+    if: github.ref == 'refs/heads/master'
+    runs-on: ubuntu-latest
+    needs: build-self-hosted
+
+    permissions:
+      contents: read
+      packages: write
+
+    env:
+      REGISTRY: ghcr.io
+      IMAGE_NAME: 'toeverything/affine-static'
+      IMAGE_TAG_LATEST: abbey-wood
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v2
+
+      - name: Download artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: artifact
+          path: packages/app/out/
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: ${{ env.IMAGE_TAG_LATEST }}
+
+      - name: Build Docker image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          push: true
+          file: ./.github/deployment/Dockerfile
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.vscode/settings.json

@@ -3,5 +3,12 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.formatOnSaveMode": "file",
-  "cSpell.words": ["blocksuite", "datacenter", "livedemo", "pnpm", "testid"]
+  "cSpell.words": [
+    "blocksuite",
+    "datacenter",
+    "livedemo",
+    "pnpm",
+    "selfhosted",
+    "testid"
+  ]
 }

jest.config.js

@@ -1,19 +0,0 @@
-/** @type {import('ts-jest').JestConfigWithTsJest} */
-module.exports = {
-  projects: ['<rootDir>/packages/app'],
-  preset: 'ts-jest',
-  testEnvironment: 'node',
-  moduleNameMapper: {
-    '^(\\.{1,2}/.*)\\.js$': '$1',
-  },
-  transform: {
-    // '^.+\\.[tj]sx?$' to process js/ts with `ts-jest`
-    // '^.+\\.m?[tj]sx?$' to process js/ts/mjs/mts with `ts-jest`
-    '^.+\\.tsx?$': [
-      'ts-jest',
-      {
-        useESM: true,
-      },
-    ],
-  },
-};

package.json

@@ -6,7 +6,8 @@
   "license": "MPL-2.0",
   "scripts": {
     "dev": "pnpm --filter=!@affine/app build && pnpm --filter @affine/app dev",
-    "dev:ac": "pnpm --filter=!@affine/app build && pnpm --filter @affine/app dev:ac",
+    "dev:ac": "pnpm --filter=!@affine/app build && NODE_API_SERVER=ac pnpm --filter @affine/app dev",
+    "dev:local": "pnpm --filter=!@affine/app build && NODE_API_SERVER=local pnpm --filter @affine/app dev",
     "build": " pnpm --filter=!@affine/app build && pnpm --filter!=@affine/datacenter -r build",
     "export": "pnpm --filter @affine/app export",
     "start": "pnpm --filter @affine/app start",
@@ -14,7 +15,8 @@
     "test": "playwright test",
     "test:dc": "pnpm --filter @affine/datacenter test",
     "test:e2e:codegen": "npx playwright codegen http://localhost:8080",
-    "test:unit": "jest",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest",
     "postinstall": "husky install",
     "notify": "node --experimental-modules scripts/notify.mjs",
     "check:ci": "pnpm lint & pnpm test"
@@ -24,24 +26,23 @@
     "*.{ts,tsx,js,jsx}": "npx eslint --cache --fix"
   },
   "devDependencies": {
-    "@jest/globals": "^29.3.1",
+    "@changesets/cli": "^2.26.0",
     "@playwright/test": "^1.29.1",
-    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.47.0",
     "@types/eslint": "^8.4.10",
     "@types/node": "^18.11.17",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
+    "@typescript-eslint/parser": "^5.47.0",
     "eslint": "^8.30.0",
     "eslint-config-next": "12.3.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
+    "fake-indexeddb": "4.0.1",
     "got": "^12.5.3",
-    "jest": "^29.3.1",
-    "prettier": "^2.7.1",
-    "ts-jest": "^29.0.3",
-    "typescript": "^4.9.3",
-    "lint-staged": "^13.1.0",
     "husky": "^8.0.2",
-    "@changesets/cli": "^2.26.0"
+    "lint-staged": "^13.1.0",
+    "prettier": "^2.7.1",
+    "typescript": "^4.9.3",
+    "vitest": "^0.26.3"
   },
   "eslintConfig": {
     "root": true,
@@ -65,7 +66,8 @@
     "reportUnusedDisableDirectives": true,
     "ignorePatterns": [
       "src/**/*.test.ts",
-      "package/**/dist/*"
+      "package/**/dist/*",
+      "package/**/sync.js"
     ]
   }
 }

packages/app/next.config.js

@@ -9,6 +9,27 @@ const EDITOR_VERSION = enableDebugLocal
   ? 'local-version'
   : dependencies['@blocksuite/editor'];
 
+const profileTarget = {
+  ac: '100.85.73.88:12001',
+  dev: '100.85.73.88:12001',
+  local: '127.0.0.1:3000',
+};
+
+const getRedirectConfig = profile => {
+  const target = profileTarget[profile || 'dev'] || profileTarget['dev'];
+
+  return [
+    [
+      { source: '/api/:path*', destination: `http://${target}/api/:path*` },
+      {
+        source: '/collaboration/:path*',
+        destination: `http://${target}/collaboration/:path*`,
+      },
+    ],
+    target,
+  ];
+};
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   productionBrowserSourceMaps: true,
@@ -36,30 +57,12 @@ const nextConfig = {
   images: {
     unoptimized: true,
   },
-  // XXX not test yet
   rewrites: async () => {
-    if (process.env.NODE_API_SERVER === 'ac') {
+    const [profile, desc] = getRedirectConfig(process.env.NODE_API_SERVER);
-      let destinationAC = 'http://100.85.73.88:12001/api/:path*';
+    printer.info(
-      printer.info('API request proxy to [AC Server] ' + destinationAC);
+      `API request proxy to [${process.env.NODE_API_SERVER} Server]: ` + desc
-      return [
+    );
-        {
+    return profile;
-          source: '/api/:path*',
-          destination: destinationAC,
-        },
-      ];
-    } else {
-      let destinationStandard = 'http://100.77.180.48:11001/api/:path*';
-      printer.info(
-        'API request proxy to [Standard Server] ' + destinationStandard
-      );
-
-      return [
-        {
-          source: '/api/:path*',
-          destination: destinationStandard,
-        },
-      ];
-    }
   },
   basePath: process.env.BASE_PATH,
 };

packages/app/package.json

@@ -3,7 +3,6 @@
   "version": "0.3.1",
   "scripts": {
     "dev": "next dev -p 8080",
-    "dev:ac": "NODE_API_SERVER=ac next dev -p 8080",
     "build": "next build",
     "export": "next export",
     "start": "next start",
@@ -11,10 +10,10 @@
   },
   "dependencies": {
     "@affine/datacenter": "workspace:*",
-    "@blocksuite/blocks": "0.3.1",
+    "@blocksuite/blocks": "=0.3.1-20230106060050-1aad55d",
-    "@blocksuite/editor": "0.3.1",
+    "@blocksuite/editor": "=0.3.1-20230106060050-1aad55d",
     "@blocksuite/icons": "^2.0.2",
-    "@blocksuite/store": "0.3.1",
+    "@blocksuite/store": "=0.3.1-20230106060050-1aad55d",
     "@emotion/css": "^11.10.0",
     "@emotion/react": "^11.10.4",
     "@emotion/server": "^11.10.0",

packages/app/scripts/__tests__/printer.spec.ts

@@ -1,4 +1,4 @@
-import { describe, test, expect } from '@jest/globals';
+import { describe, test, expect } from 'vitest';
 import { printer } from './../printer';
 const chalk = require('chalk');
 describe('printer', () => {

packages/app/src/components/header/editor-header.tsx

@@ -22,14 +22,14 @@ export const EditorHeader = () => {
 
   useEffect(() => {
     onPropsUpdated(editor => {
-      setTitle(editor.model?.title || 'Untitled');
+      setTitle(editor.pageBlockModel?.title || 'Untitled');
     });
   }, [onPropsUpdated]);
 
   useEffect(() => {
     setTimeout(() => {
       // If first time in, need to wait for editor to be inserted into DOM
-      setTitle(editor?.model?.title || 'Untitled');
+      setTitle(editor?.pageBlockModel?.title || 'Untitled');
     }, 300);
   }, [editor]);
 

packages/app/src/components/import/index.tsx

@@ -31,9 +31,10 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => {
         setTimeout(() => {
           const editor = document.querySelector('editor-container');
           if (editor) {
-            const groupId = page.addBlock({ flavour: 'affine:group' }, pageId);
+            page.addBlock({ flavour: 'affine:surface' }, null);
+            const frameId = page.addBlock({ flavour: 'affine:frame' }, pageId);
             // TODO blocksuite should offer a method to import markdown from store
-            editor.clipboard.importMarkdown(template.source, `${groupId}`);
+            editor.clipboard.importMarkdown(template.source, `${frameId}`);
             page.resetHistory();
             editor.requestUpdate();
           }

packages/app/src/components/login-modal/LoginOptionButton.tsx

@@ -9,14 +9,14 @@ export const GoogleLoginButton = () => {
   return (
     <StyledGoogleButton
       onClick={() => {
-        getDataCenter()
+        // getDataCenter()
-          .then(dc => dc.apis.signInWithGoogle?.())
+        //   .then(dc => dc.apis.signInWithGoogle?.())
-          .then(() => {
+        //   .then(() => {
-            triggerLoginModal();
+        //     triggerLoginModal();
-          })
+        //   })
-          .catch(error => {
+        //   .catch(error => {
-            console.log('sign google error', error);
+        //     console.log('sign google error', error);
-          });
+        //   });
       }}
     >
       <ButtonWrapper>

packages/app/src/components/workspace-setting/general/leave/leave.tsx

@@ -7,7 +7,7 @@ import {
 } from './style';
 import { ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
-import { getDataCenter } from '@affine/datacenter';
+// import { getDataCenter } from '@affine/datacenter';
 import { useAppState } from '@/providers/app-state-provider';
 
 interface WorkspaceDeleteProps {
@@ -25,10 +25,10 @@ export const WorkspaceLeave = ({
   // const router = useRouter();
   const { refreshWorkspacesMeta } = useAppState();
   const handleLeave = async () => {
-    const dc = await getDataCenter();
+    // const dc = await getDataCenter();
-    await dc.apis.leaveWorkspace({ id: workspaceId });
+    // await dc.apis.leaveWorkspace({ id: workspaceId });
-    // router.push(`/workspace/${nextWorkSpaceId}`);
+    // // router.push(`/workspace/${nextWorkSpaceId}`);
-    refreshWorkspacesMeta();
+    // refreshWorkspacesMeta();
     onClose();
   };
 

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx

@@ -53,9 +53,9 @@ export const SelectorPopperContent = ({
           if (type === WorkspaceType.Private) {
             return { id, member_count: 1, owner: user };
           } else {
-            const dc = await getDataCenter();
+            // const dc = await getDataCenter();
-            const data = await dc.apis.getWorkspaceDetail({ id });
+            // const data = await dc.apis.getWorkspaceDetail({ id });
-            return { id, ...data } || { id, member_count: 0, owner: user };
+            // return { id, ...data } || { id, member_count: 0, owner: user };
           }
         }
       })

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx

@@ -52,10 +52,10 @@ export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
         ctx.fillText(workspaceName[0], 50, 50);
         canvas.toBlob(blob => {
           if (blob) {
-            const blobId = getDataCenter().then(dc =>
+            // const blobId = getDataCenter().then(dc =>
-              dc.apis.uploadBlob({ blob })
+            //   dc.apis.uploadBlob({ blob })
-            );
+            // );
-            resolve(blobId);
+            // resolve(blobId);
           } else {
             reject();
           }
@@ -71,23 +71,23 @@ export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
       setCreating(false);
     });
     if (blobId) {
-      getDataCenter()
+      // getDataCenter()
-        .then(dc =>
+      //   .then(dc =>
-          dc.apis.createWorkspace({ name: workspaceName, avatar: blobId })
+      //     dc.apis.createWorkspace({ name: workspaceName, avatar: blobId })
-        )
+      //   )
-        .then(async data => {
+      //   .then(async data => {
-          await refreshWorkspacesMeta();
+      //     await refreshWorkspacesMeta();
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
+      //     // @ts-ignore
-          router.push(`/workspace/${data.id}`);
+      //     router.push(`/workspace/${data.id}`);
-          onClose();
+      //     onClose();
-        })
+      //   })
-        .catch(err => {
+      //   .catch(err => {
-          console.log(err, 'err');
+      //     console.log(err, 'err');
-        })
+      //   })
-        .finally(() => {
+      //   .finally(() => {
-          setCreating(false);
+      //     setCreating(false);
-        });
+      //   });
     }
   };
   return (

packages/app/src/components/workspace-slider-bar/index.tsx

@@ -4,14 +4,14 @@ import {
   StyledArrowButton,
   StyledLink,
   StyledListItem,
-  StyledListItemForWorkspace,
+  // StyledListItemForWorkspace,
   StyledNewPageButton,
   StyledSliderBar,
   StyledSliderBarWrapper,
   StyledSubListItem,
 } from './style';
 import { Arrow } from './icons';
-import { WorkspaceSelector } from './WorkspaceSelector';
+// import { WorkspaceSelector } from './WorkspaceSelector';
 import Collapse from '@mui/material/Collapse';
 import {
   ArrowDownIcon,
@@ -113,9 +113,9 @@ export const WorkSpaceSliderBar = () => {
         </Tooltip>
 
         <StyledSliderBarWrapper data-testid="sliderBar">
-          <StyledListItemForWorkspace>
+          {/* <StyledListItemForWorkspace>
             <WorkspaceSelector />
-          </StyledListItemForWorkspace>
+          </StyledListItemForWorkspace> */}
           <StyledListItem
             data-testid="sliderBar-quickSearchButton"
             style={{ cursor: 'pointer' }}

packages/app/src/hooks/use-ensure-workspace.ts

@@ -1,8 +1,8 @@
 import { useState, useEffect } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
-const defaultOutLineWorkspaceId =
+const defaultOutLineWorkspaceId = 'affine';
-  'local-first-' + '85b4ca0b9081421d903bbc2501ea280f';
+// 'local-first-' + '85b4ca0b9081421d903bbc2501ea280f';
 // It is a fully effective hook
 // Cause it not just ensure workspace loaded, but also have router change.
 export const useEnsureWorkspace = () => {

packages/app/src/hooks/use-props-updated.ts

@@ -17,7 +17,7 @@ export const usePropsUpdated: UsePropsUpdated = () => {
       return;
     }
     setTimeout(() => {
-      editor.model?.propsUpdated.on(() => {
+      editor.pageBlockModel?.propsUpdated.on(() => {
         callbackQueue.current.forEach(callback => {
           callback(editor);
         });
@@ -26,7 +26,7 @@ export const usePropsUpdated: UsePropsUpdated = () => {
 
     return () => {
       callbackQueue.current = [];
-      editor?.model?.propsUpdated.dispose();
+      editor?.pageBlockModel?.propsUpdated?.dispose();
     };
   }, [editor]);
 

packages/app/src/pages/invite/[invite_code].tsx

@@ -24,19 +24,19 @@ export default function DevPage() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [inviteData, setInviteData] = useState<any>(null);
   useEffect(() => {
-    getDataCenter()
+    // getDataCenter()
-      .then(dc =>
+    //   .then(dc =>
-        dc.apis.acceptInviting({
+    //     dc.apis.acceptInviting({
-          invitingCode: router.query.invite_code as string,
+    //       invitingCode: router.query.invite_code as string,
-        })
+    //     })
-      )
+    //   )
-      .then(data => {
+    //   .then(data => {
-        setSuccessInvited(true);
+    //     setSuccessInvited(true);
-        setInviteData(data);
+    //     setInviteData(data);
-      })
+    //   })
-      .catch(err => {
+    //   .catch(err => {
-        console.log('err: ', err);
+    //     console.log('err: ', err);
-      });
+    //   });
   }, [router.query.invite_code]);
 
   return (

packages/app/src/pages/playground/templates.tsx

@@ -43,12 +43,16 @@ const All = () => {
     if (page) {
       currentWorkspace?.setPageMeta(page.id, { title });
       if (page && page.root === null) {
-        setTimeout(() => {
+        setTimeout(async () => {
           const editor = document.querySelector('editor-container');
           if (editor) {
-            const groupId = page.addBlock({ flavour: 'affine:group' }, pageId);
+            page.addBlock({ flavour: 'affine:surface' }, null);
+            const frameId = page.addBlock({ flavour: 'affine:frame' }, pageId);
             // TODO blocksuite should offer a method to import markdown from store
-            editor.clipboard.importMarkdown(template.source, `${groupId}`);
+            await editor.clipboard.importMarkdown(
+              template.source,
+              `${frameId}`
+            );
             page.resetHistory();
             editor.requestUpdate();
           }

packages/app/src/pages/testing-only.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { getDataCenter } from '@affine/datacenter';
+/**
+ * testing only when development
+ */
+
+const Page = () => {
+  useEffect(() => {
+    getDataCenter().then(dc => {
+      // @ts-expect-error global variable
+      window.dc = dc;
+    });
+  }, []);
+
+  return <div>Testing only</div>;
+};
+
+export default Page;

packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import {
-  useRef,
-  useEffect,
-  useState,
-  ReactElement,
   PropsWithChildren,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState,
 } from 'react';
 import { styled } from '@/styles';
 import { EditorHeader } from '@/components/header';
@@ -16,9 +16,11 @@ import type { NextPageWithLayout } from '../..//_app';
 import WorkspaceLayout from '@/components/workspace-layout';
 import { useRouter } from 'next/router';
 import { usePageHelper } from '@/hooks/use-page-helper';
+
 const StyledEditorContainer = styled('div')(() => {
   return {
     height: 'calc(100vh - 60px)',
+    padding: '0 32px',
   };
 });
 
@@ -54,15 +56,20 @@ const Page: NextPageWithLayout = () => {
           flavour: 'affine:page',
           title,
         });
-        const groupId = currentPage!.addBlock(
+        currentPage!.addBlock({ flavour: 'affine:surface' }, null);
-          { flavour: 'affine:group' },
+        const frameId = currentPage!.addBlock(
+          { flavour: 'affine:frame' },
           pageId
         );
-        currentPage!.addBlock({ flavour: 'affine:group' }, pageId);
+        currentPage!.addBlock({ flavour: 'affine:frame' }, pageId);
         // If this is a first page in workspace, init an introduction markdown
         if (isFirstPage) {
-          editor.clipboard.importMarkdown(exampleMarkdown, `${groupId}`);
+          editor.clipboard
-          currentWorkspace!.setPageMeta(currentPage!.id, { title });
+            .importMarkdown(exampleMarkdown, `${frameId}`)
+            .then(() => {
+              currentWorkspace!.setPageMeta(currentPage!.id, { title });
+              currentPage!.resetHistory();
+            });
         }
         currentPage!.resetHistory();
       }

packages/app/src/templates/Welcome-to-AFFiNE-Alpha-v2.0.md

@@ -10,6 +10,11 @@ Let us know what you think of this latest version.
 2. More complete Markdown support and improved keyboard shortcuts;
 3. New features such as dark mode; Switch between view styles using the ☀ and 🌙.
 4. Clean and modern UI/UX design.
+5. You can self-host locally with Docker.
+
+```basic
+docker run -d -v [YOUR_PATH]:/app/data -p 3000:3000 ghcr.io/toeverything/affine-self-hosted:alpha-abbey-wood
+```
 
 **Looking for Markdown syntax or keyboard shortcuts?**
 
@@ -23,15 +28,21 @@ Let us know what you think of this latest version.
 - Copy and paste **images** into your pages, resize them and add captions
 - Add horizontal line dividers to your text with `---` and `***`
 - Changes are saved **locally**, but we still recommend you export your data to avoid data loss
-- Insert code blocks with syntax highlighting support using ```
+- Insert code blocks with syntax highlighting support using `````
 
 ### Playground:
 
 [] Try a horizontal line: `---`
 
-[] What about a code block? ```
+[] What about a code block? `````
 
-        console.log('Hello world');
+```javascript
+console.log('Hello world');
+```
+
+[] Can you resize this image?
+
+![](https://cdn.affine.pro/694fdbab78e0da3ed7922eba7d506dcf12f57308e1904dd694f53eb2.jpg)
 
 **How about page management?**
 

packages/app/src/utils/__tests__/get-is-mobile.spec.ts

@@ -1,4 +1,4 @@
-import { describe, test, expect } from '@jest/globals';
+import { describe, test, expect } from 'vitest';
 import { isMobile } from '../get-is-mobile';
 
 describe('get-is-mobile', () => {

packages/data-center/package.json

@@ -26,8 +26,8 @@
     "typescript": "^4.8.4"
   },
   "dependencies": {
-    "@blocksuite/blocks": "^0.3.1",
+    "@blocksuite/blocks": "=0.3.1-20230106060050-1aad55d",
-    "@blocksuite/store": "^0.3.1",
+    "@blocksuite/store": "=0.3.1-20230106060050-1aad55d",
     "debug": "^4.3.4",
     "encoding": "^0.1.13",
     "firebase": "^9.15.0",

packages/data-center/src/datacenter.ts

@@ -1,230 +1,315 @@
+import { Workspaces } from './workspaces';
+import type { WorkspacesChangeEvent } from './workspaces';
+import { Workspace } from '@blocksuite/store';
+import { BaseProvider } from './provider/base';
+import { LocalProvider } from './provider/local/local';
+import { AffineProvider } from './provider';
+import type { Workspace as WS, WorkspaceMeta } from './types';
 import assert from 'assert';
+import { getLogger } from './logger';
 import { BlockSchema } from '@blocksuite/blocks/models';
-import { Workspace, Signal } from '@blocksuite/store';
+import { applyUpdate, encodeStateAsUpdate } from 'yjs';
-
-import { getLogger } from './index.js';
-import { getApis, Apis } from './apis/index.js';
-import { AffineProvider, BaseProvider } from './provider/index.js';
-import { LocalProvider } from './provider/index.js';
-import { getKVConfigure } from './store.js';
-
-// load workspace's config
-type LoadConfig = {
-  // use witch provider load data
-  providerId?: string;
-  // provider config
-  config?: Record<string, any>;
-};
-
-export type DataCenterSignals = DataCenter['signals'];
-type WorkspaceItem = {
-  // provider id
-  provider: string;
-  // data exists locally
-  locally: boolean;
-};
-type WorkspaceLoadEvent = WorkspaceItem & {
-  workspace: string;
-};
 
+/**
+ * @class DataCenter
+ * @classdesc DataCenter is a data center, it can manage different providers for business
+ */
 export class DataCenter {
-  private readonly _apis: Apis;
+  private readonly _workspaces = new Workspaces();
-  private readonly _providers = new Map<string, typeof BaseProvider>();
+  private readonly _logger = getLogger('dc');
-  private readonly _workspaces = new Map<string, Promise<BaseProvider>>();
+  /**
-  private readonly _config;
+   * A mainProvider must exist as the only data trustworthy source.
-  private readonly _logger;
+   */
+  private _mainProvider?: BaseProvider;
+  providerMap: Map<string, BaseProvider> = new Map();
 
-  readonly signals = {
+  constructor(debug: boolean) {
-    listAdd: new Signal<WorkspaceLoadEvent>(),
+    this._logger.enabled = debug;
-    listRemove: new Signal<string>(),
+  }
-  };
 
   static async init(debug: boolean): Promise<DataCenter> {
     const dc = new DataCenter(debug);
-    dc.addProvider(AffineProvider);
+    // TODO: switch different provider
-    dc.addProvider(LocalProvider);
+    dc.registerProvider(
+      new LocalProvider({
+        logger: dc._logger,
+        workspaces: dc._workspaces.createScope(),
+      })
+    );
+    dc.registerProvider(
+      new AffineProvider({
+        logger: dc._logger,
+        workspaces: dc._workspaces.createScope(),
+      })
+    );
 
     return dc;
   }
 
-  private constructor(debug: boolean) {
+  /**
-    this._apis = getApis();
+   * Register provider.
-    this._config = getKVConfigure('sys');
+   * We will automatically set the first provider to default provider.
-    this._logger = getLogger('dc');
+   */
-    this._logger.enabled = debug;
+  registerProvider(provider: BaseProvider) {
-
+    if (!this._mainProvider) {
-    this.signals.listAdd.on(e => {
+      this._mainProvider = provider;
-      this._config.set(`list:${e.workspace}`, {
-        provider: e.provider,
-        locally: e.locally,
-      });
-    });
-    this.signals.listRemove.on(workspace => {
-      this._config.delete(`list:${workspace}`);
-    });
-  }
-
-  get apis(): Readonly<Apis> {
-    return this._apis;
-  }
-
-  private addProvider(provider: typeof BaseProvider) {
-    this._providers.set(provider.id, provider);
-  }
-
-  private async _getProvider(
-    id: string,
-    providerId = 'local'
-  ): Promise<string> {
-    const providerKey = `${id}:provider`;
-    if (this._providers.has(providerId)) {
-      await this._config.set(providerKey, providerId);
-      return providerId;
-    } else {
-      const providerValue = await this._config.get(providerKey);
-      if (providerValue) return providerValue;
     }
-    throw Error(`Provider ${providerId} not found`);
+
+    provider.init();
+    this.providerMap.set(provider.id, provider);
   }
 
-  private async _getWorkspace(
+  setMainProvider(providerId: string) {
-    id: string,
+    this._mainProvider = this.providerMap.get(providerId);
-    params: LoadConfig
-  ): Promise<BaseProvider> {
-    this._logger(`Init workspace ${id} with ${params.providerId}`);
-
-    const providerId = await this._getProvider(id, params.providerId);
-
-    // init workspace & register block schema
-    const workspace = new Workspace({ room: id }).register(BlockSchema);
-
-    const Provider = this._providers.get(providerId);
-    assert(Provider);
-
-    // initial configurator
-    const config = getKVConfigure(`workspace:${id}`);
-    // set workspace configs
-    const values = Object.entries(params.config || {});
-    if (values.length) await config.setMany(values);
-
-    // init data by provider
-    const provider = new Provider();
-    await provider.init({
-      apis: this._apis,
-      config,
-      debug: this._logger.enabled,
-      logger: this._logger.extend(`${Provider.id}:${id}`),
-      signals: this.signals,
-      workspace,
-    });
-    await provider.initData();
-    this._logger(`Workspace ${id} loaded`);
-
-    return provider;
   }
 
-  async auth(providerId: string, globalConfig?: Record<string, any>) {
+  get providers() {
-    const Provider = this._providers.get(providerId);
+    return Array.from(this.providerMap.values());
-    if (Provider) {
+  }
-      // initial configurator
-      const config = getKVConfigure(`provider:${providerId}`);
-      // set workspace configs
-      const values = Object.entries(globalConfig || {});
-      if (values.length) await config.setMany(values);
 
-      const logger = this._logger.extend(`auth:${providerId}`);
+  public get workspaces() {
-      logger.enabled = this._logger.enabled;
+    return this._workspaces.workspaces;
-      await Provider.auth(config, logger, this.signals);
+  }
-    }
+
+  public async refreshWorkspaces() {
+    return Promise.allSettled(
+      Object.values(this.providerMap).map(provider => provider.loadWorkspaces())
+    );
   }
 
   /**
-   * load workspace data to memory
+   * create new workspace , new workspace is a local workspace
-   * @param workspaceId workspace id
+   * @param {string} name workspace name
-   * @param config.providerId provider id
+   * @returns {Promise<WS>}
-   * @param config.config provider config
-   * @returns Workspace instance
    */
-  async load(
+  public async createWorkspace(workspaceMeta: WorkspaceMeta) {
-    workspaceId: string,
+    assert(
-    params: LoadConfig = {}
+      this._mainProvider,
-  ): Promise<Workspace | null> {
+      'There is no provider. You should add provider first.'
-    if (workspaceId) {
+    );
-      if (!this._workspaces.has(workspaceId)) {
+
-        this._workspaces.set(
+    const workspace = await this._mainProvider.createWorkspace(workspaceMeta);
-          workspaceId,
+    return workspace;
-          this._getWorkspace(workspaceId, params)
-        );
-      }
-      const workspace = this._workspaces.get(workspaceId);
-      assert(workspace);
-      return workspace.then(w => w.workspace);
-    }
-    return null;
   }
 
   /**
-   * destroy workspace's instance in memory
+   * delete workspace by id
-   * @param workspaceId workspace id
+   * @param {string} workspaceId workspace id
    */
-  async destroy(workspaceId: string) {
+  public async deleteWorkspace(workspaceId: string) {
-    const provider = await this._workspaces.get(workspaceId);
+    const workspaceInfo = this._workspaces.find(workspaceId);
+    assert(workspaceInfo, 'Workspace not found');
+    const provider = this.providerMap.get(workspaceInfo.provider);
+    assert(provider, `Workspace exists, but we couldn't find its provider.`);
+    await provider.deleteWorkspace(workspaceId);
+  }
+
+  /**
+   * get a new workspace only has room id
+   * @param {string} workspaceId workspace id
+   */
+  private _getWorkspace(workspaceId: string) {
+    return new Workspace({
+      room: workspaceId,
+    }).register(BlockSchema);
+  }
+
+  /**
+   * login to all providers, it will default run all auth ,
+   *  maybe need a params to control which provider to auth
+   */
+  public async login() {
+    this.providers.forEach(p => {
+      // TODO: may be add params of auth
+      p.auth();
+    });
+  }
+
+  /**
+   * logout from all providers
+   */
+  public async logout() {
+    this.providers.forEach(p => {
+      p.logout();
+    });
+  }
+
+  /**
+   * load workspace instance by id
+   * @param {string} workspaceId workspace id
+   * @returns {Promise<Workspace>}
+   */
+  public async loadWorkspace(workspaceId: string) {
+    const workspaceInfo = this._workspaces.find(workspaceId);
+    assert(workspaceInfo, 'Workspace not found');
+    const currentProvider = this.providerMap.get(workspaceInfo.provider);
+    if (currentProvider) {
+      currentProvider.closeWorkspace(workspaceId);
+    }
+    const provider = this.providerMap.get(workspaceInfo.provider);
+    assert(provider, `provide '${workspaceInfo.provider}' is not registered`);
+    this._logger(`Loading ${workspaceInfo.provider} workspace: `, workspaceId);
+
+    return await provider.warpWorkspace(this._getWorkspace(workspaceId));
+  }
+
+  /**
+   * get user info by provider id
+   * @param {string} providerId the provider name of workspace
+   * @returns {Promise<User>}
+   */
+  public async getUserInfo(providerId = 'affine') {
+    // XXX: maybe return all user info
+    const provider = this.providerMap.get(providerId);
+    assert(provider, `provide '${providerId}' is not registered`);
+    return provider.getUserInfo();
+  }
+
+  /**
+   * listen workspaces list change
+   * @param {Function} callback callback function
+   */
+  public async onWorkspacesChange(
+    callback: (workspaces: WorkspacesChangeEvent) => void
+  ) {
+    this._workspaces.on('change', callback);
+  }
+
+  /**
+   * change workspaces meta
+   * @param {WorkspaceMeta} workspaceMeta workspace meta
+   * @param {Workspace} workspace workspace instance
+   */
+  public async resetWorkspaceMeta(
+    { name, avatar }: WorkspaceMeta,
+    workspace: Workspace
+  ) {
+    assert(workspace?.room, 'No workspace to set meta');
+    const update: Partial<WorkspaceMeta> = {};
+    if (name) {
+      workspace.doc.meta.setName(name);
+      update.name = name;
+    }
+    if (avatar) {
+      workspace.doc.meta.setAvatar(avatar);
+      update.avatar = avatar;
+    }
+    // may run for change workspace meta
+    const workspaceInfo = this._workspaces.find(workspace.room);
+    assert(workspaceInfo, 'Workspace not found');
+    const provider = this.providerMap.get(workspaceInfo.provider);
+    provider?.updateWorkspaceMeta(workspace.room, update);
+  }
+
+  /**
+   *
+   * leave workspace by id
+   * @param id workspace id
+   */
+  public async leaveWorkspace(workspaceId: string) {
+    const workspaceInfo = this._workspaces.find(workspaceId);
+    assert(workspaceInfo, 'Workspace not found');
+    const provider = this.providerMap.get(workspaceInfo.provider);
     if (provider) {
-      this._workspaces.delete(workspaceId);
+      await provider.closeWorkspace(workspaceId);
-      await provider.destroy();
+      await provider.leaveWorkspace(workspaceId);
+    }
+  }
+
+  public async setWorkspacePublish(workspaceId: string, isPublish: boolean) {
+    const workspaceInfo = this._workspaces.find(workspaceId);
+    assert(workspaceInfo, 'Workspace not found');
+    const provider = this.providerMap.get(workspaceInfo.provider);
+    if (provider) {
+      await provider.publish(workspaceId, isPublish);
+    }
+  }
+
+  public async inviteMember(id: string, email: string) {
+    const workspaceInfo = this._workspaces.find(id);
+    assert(workspaceInfo, 'Workspace not found');
+    const provider = this.providerMap.get(workspaceInfo.provider);
+    if (provider) {
+      await provider.invite(id, email);
     }
   }
 
   /**
-   * reload new workspace instance to memory to refresh config
+   * remove the new member to the workspace
-   * @param workspaceId workspace id
+   * @param {number} permissionId permission id
-   * @param config.providerId provider id
-   * @param config.config provider config
-   * @returns Workspace instance
    */
-  async reload(
+  public async removeMember(workspaceId: string, permissionId: number) {
-    workspaceId: string,
+    const workspaceInfo = this._workspaces.find(workspaceId);
-    config: LoadConfig = {}
+    assert(workspaceInfo, 'Workspace not found');
-  ): Promise<Workspace | null> {
+    const provider = this.providerMap.get(workspaceInfo.provider);
-    await this.destroy(workspaceId);
-    return this.load(workspaceId, config);
-  }
-
-  /**
-   * get workspace list，return a map of workspace id and data state
-   * data state is also map, the key is the provider id, and the data exists locally when the value is true, otherwise it does not exist
-   */
-  async list(): Promise<Record<string, Record<string, boolean>>> {
-    const entries: [string, WorkspaceItem][] = await this._config.entries();
-    return entries.reduce((acc, [k, i]) => {
-      if (k.startsWith('list:')) {
-        const key = k.slice(5);
-        acc[key] = acc[key] || {};
-        acc[key][i.provider] = i.locally;
-      }
-      return acc;
-    }, {} as Record<string, Record<string, boolean>>);
-  }
-
-  /**
-   * delete local workspace's data
-   * @param workspaceId workspace id
-   */
-  async delete(workspaceId: string) {
-    await this._config.delete(`${workspaceId}:provider`);
-    const provider = await this._workspaces.get(workspaceId);
     if (provider) {
-      this._workspaces.delete(workspaceId);
+      await provider.removeMember(permissionId);
-      // clear workspace data implement by provider
+    }
+  }
+
+  private async _transWorkspaceProvider(
+    workspace: Workspace,
+    providerId: string
+  ) {
+    assert(workspace.room, 'No workspace id');
+    const workspaceInfo = this._workspaces.find(workspace.room);
+    assert(workspaceInfo, 'Workspace not found');
+    if (workspaceInfo.provider === providerId) {
+      this._logger('Workspace provider is same');
+      return;
+    }
+    const currentProvider = this.providerMap.get(workspaceInfo.provider);
+    assert(currentProvider, 'Provider not found');
+    const newProvider = this.providerMap.get(providerId);
+    assert(newProvider, `provide '${providerId}' is not registered`);
+    this._logger(`create ${providerId} workspace: `, workspaceInfo.name);
+    const newWorkspace = await newProvider.createWorkspace({
+      name: workspaceInfo.name,
+      avatar: workspaceInfo.avatar,
+    });
+    assert(newWorkspace, 'Create workspace failed');
+    this._logger(
+      `update workspace data from ${workspaceInfo.provider} to ${providerId}`
+    );
+    applyUpdate(newWorkspace.doc, encodeStateAsUpdate(workspace.doc));
+    assert(newWorkspace, 'Create workspace failed');
+    await currentProvider.deleteWorkspace(workspace.room);
+  }
+
+  /**
+   * Enable workspace cloud
+   * @param {string} id ID of workspace.
+   */
+  public async enableWorkspaceCloud(workspace: Workspace) {
+    assert(workspace?.room, 'No workspace to enable cloud');
+    return await this._transWorkspaceProvider(workspace, 'affine');
+  }
+
+  /**
+   * @deprecated
+   * clear all workspaces and data
+   */
+  public async clear() {
+    for (const provider of this.providerMap.values()) {
       await provider.clear();
     }
   }
 
   /**
-   * clear all local workspace's data
+   * Select a file to import the workspace
+   * @param {File} file file of workspace.
    */
-  async clear() {
+  public async importWorkspace(file: File) {
-    const workspaces = await this.list();
+    file;
-    await Promise.all(Object.keys(workspaces).map(id => this.delete(id)));
+    return;
+  }
+
+  /**
+   * Generate a file ,and export it to local file system
+   * @param {string} id ID of workspace.
+   */
+  public async exportWorkspace(id: string) {
+    id;
+    return;
   }
 }

packages/data-center/src/index.ts

@@ -1,5 +1,4 @@
-import debug from 'debug';
+import { DataCenter } from './datacenter';
-import { DataCenter } from './datacenter.js';
 
 const _initializeDataCenter = () => {
   let _dataCenterInstance: Promise<DataCenter>;
@@ -26,11 +25,6 @@ const _initializeDataCenter = () => {
 
 export const getDataCenter = _initializeDataCenter();
 
-export function getLogger(namespace: string) {
+export type { AccessTokenMessage } from './provider/affine/apis';
-  const logger = debug(namespace);
+export type { Workspace } from './types';
-  logger.log = console.log.bind(console);
+export { getLogger } from './logger';
-  return logger;
-}
-
-export type { AccessTokenMessage, Member, Workspace } from './apis';
-export { WorkspaceType } from './apis/index.js';

packages/data-center/src/logger.ts

@@ -0,0 +1,7 @@
+import debug from 'debug';
+
+export function getLogger(namespace: string) {
+  const logger = debug(namespace);
+  logger.log = console.log.bind(console);
+  return logger;
+}

packages/data-center/src/provider/affine/affine.ts

@@ -0,0 +1,280 @@
+import {
+  getWorkspaces,
+  getWorkspaceDetail,
+  WorkspaceDetail,
+  downloadWorkspace,
+  deleteWorkspace,
+  leaveWorkspace,
+  inviteMember,
+  removeMember,
+  createWorkspace,
+  updateWorkspace,
+} from './apis/workspace';
+import { BaseProvider } from '../base';
+import type { ProviderConstructorParams } from '../base';
+import { User, Workspace as WS, WorkspaceMeta } from '../../types';
+import { Workspace } from '@blocksuite/store';
+import { BlockSchema } from '@blocksuite/blocks/models';
+import { applyUpdate } from 'yjs';
+import { token, Callback } from './apis';
+import { varStorage as storage } from 'lib0/storage';
+import assert from 'assert';
+import { getAuthorizer } from './apis/token';
+import { WebsocketProvider } from './sync';
+import { IndexedDBProvider } from '../indexeddb';
+import { getDefaultHeadImgBlob } from '../../utils';
+
+export class AffineProvider extends BaseProvider {
+  public id = 'affine';
+  private _workspacesCache: Map<string, Workspace> = new Map();
+  private _onTokenRefresh?: Callback = undefined;
+  private readonly _authorizer = getAuthorizer();
+  private _user: User | undefined = undefined;
+  private _wsMap: Map<string, WebsocketProvider> = new Map();
+  private _idbMap: Map<string, IndexedDBProvider> = new Map();
+
+  constructor(params: ProviderConstructorParams) {
+    super(params);
+  }
+
+  override async init() {
+    this._onTokenRefresh = () => {
+      if (token.refresh) {
+        storage.setItem('token', token.refresh);
+      }
+    };
+
+    token.onChange(this._onTokenRefresh);
+
+    // initial login token
+    if (token.isExpired) {
+      try {
+        const refreshToken = storage.getItem('token');
+        await token.refreshToken(refreshToken);
+
+        if (token.refresh) {
+          storage.set('token', token.refresh);
+        }
+
+        assert(token.isLogin);
+      } catch (_) {
+        // this._logger('Authorization failed, fallback to local mode');
+      }
+    } else {
+      storage.setItem('token', token.refresh);
+    }
+  }
+
+  override async warpWorkspace(workspace: Workspace) {
+    const { doc, room } = workspace;
+    assert(room);
+    this._initWorkspaceDb(workspace);
+    const updates = await downloadWorkspace(room);
+    if (updates) {
+      await new Promise(resolve => {
+        doc.once('update', resolve);
+        applyUpdate(doc, new Uint8Array(updates));
+      });
+    }
+    const ws = new WebsocketProvider('/', room, doc);
+    this._wsMap.set(room, ws);
+    await new Promise<void>((resolve, reject) => {
+      // TODO: synced will also be triggered on reconnection after losing sync
+      // There needs to be an event mechanism to emit the synchronization state to the upper layer
+      assert(ws);
+      ws.once('synced', () => resolve());
+      ws.once('lost-connection', () => resolve());
+      ws.once('connection-error', () => reject());
+    });
+    return workspace;
+  }
+
+  override async loadWorkspaces() {
+    if (!token.isLogin) {
+      return [];
+    }
+    const workspacesList = await getWorkspaces();
+    const workspaces: WS[] = workspacesList.map(w => {
+      return {
+        ...w,
+        memberCount: 0,
+        name: '',
+        provider: 'affine',
+      };
+    });
+    const workspaceInstances = workspaces.map(({ id }) => {
+      const workspace =
+        this._workspacesCache.get(id) ||
+        new Workspace({
+          room: id,
+        }).register(BlockSchema);
+      this._workspacesCache.set(id, workspace);
+      if (workspace) {
+        return new Promise<Workspace>(resolve => {
+          downloadWorkspace(id).then(data => {
+            applyUpdate(workspace.doc, new Uint8Array(data));
+            resolve(workspace);
+          });
+        });
+      } else {
+        return Promise.resolve(null);
+      }
+    });
+
+    (await Promise.all(workspaceInstances)).forEach((workspace, i) => {
+      if (workspace) {
+        workspaces[i] = {
+          ...workspaces[i],
+          name: workspace.doc.meta.name,
+          avatar: workspace.doc.meta.avatar,
+        };
+      }
+    });
+    const getDetailList = workspacesList.map(w => {
+      const { id } = w;
+      return new Promise<{ id: string; detail: WorkspaceDetail | null }>(
+        resolve => {
+          getWorkspaceDetail({ id }).then(data => {
+            resolve({ id, detail: data || null });
+          });
+        }
+      );
+    });
+    const ownerList = await Promise.all(getDetailList);
+    (await Promise.all(ownerList)).forEach(detail => {
+      if (detail) {
+        const { id, detail: workspaceDetail } = detail;
+        if (workspaceDetail) {
+          const { owner, member_count } = workspaceDetail;
+          const currentWorkspace = workspaces.find(w => w.id === id);
+          if (currentWorkspace) {
+            currentWorkspace.owner = {
+              id: owner.id,
+              name: owner.name,
+              avatar: owner.avatar_url,
+              email: owner.email,
+            };
+            currentWorkspace.memberCount = member_count;
+          }
+        }
+      }
+    });
+
+    workspaces.forEach(workspace => {
+      this._workspaces.add(workspace);
+    });
+
+    return workspaces;
+  }
+
+  override async auth() {
+    const refreshToken = await storage.getItem('token');
+    if (refreshToken) {
+      await token.refreshToken(refreshToken);
+      if (token.isLogin && !token.isExpired) {
+        // login success
+        return;
+      }
+    }
+    const user = await this._authorizer[0]?.();
+    assert(user);
+    this._user = {
+      id: user.id,
+      name: user.name,
+      avatar: user.avatar_url,
+      email: user.email,
+    };
+  }
+
+  public override async getUserInfo(): Promise<User | undefined> {
+    return this._user;
+  }
+
+  public override async deleteWorkspace(id: string): Promise<void> {
+    await this.closeWorkspace(id);
+    IndexedDBProvider.delete(id);
+    await deleteWorkspace({ id });
+    this._workspaces.remove(id);
+  }
+
+  public override async clear(): Promise<void> {
+    for (const w of this._workspacesCache.values()) {
+      if (w.room) {
+        try {
+          await this.deleteWorkspace(w.room);
+          this._workspaces.remove(w.room);
+        } catch (e) {
+          this._logger('has a problem of delete workspace ', e);
+        }
+      }
+    }
+    this._workspacesCache.clear();
+  }
+
+  public override async closeWorkspace(id: string) {
+    const idb = this._idbMap.get(id);
+    idb?.destroy();
+    const ws = this._wsMap.get(id);
+    ws?.disconnect();
+  }
+
+  public override async leaveWorkspace(id: string): Promise<void> {
+    await leaveWorkspace({ id });
+  }
+
+  public override async invite(id: string, email: string): Promise<void> {
+    return await inviteMember({ id, email });
+  }
+
+  public override async removeMember(permissionId: number): Promise<void> {
+    return await removeMember({ permissionId });
+  }
+
+  private async _initWorkspaceDb(workspace: Workspace) {
+    assert(workspace.room);
+    let idb = this._idbMap.get(workspace.room);
+    idb?.destroy();
+    idb = new IndexedDBProvider(workspace.room, workspace.doc);
+    this._idbMap.set(workspace.room, idb);
+    await idb.whenSynced;
+    this._logger('Local data loaded');
+    return idb;
+  }
+
+  public override async createWorkspace(
+    meta: WorkspaceMeta
+  ): Promise<Workspace | undefined> {
+    assert(meta.name, 'Workspace name is required');
+    if (!meta.avatar) {
+      // set default avatar
+      const blob = await getDefaultHeadImgBlob(meta.name);
+      meta.avatar = (await this.setBlob(blob)) || '';
+    }
+    const { id } = await createWorkspace(meta as Required<WorkspaceMeta>);
+    this._logger('Creating affine workspace');
+    const nw = new Workspace({
+      room: id,
+    }).register(BlockSchema);
+    nw.meta.setName(meta.name);
+    nw.meta.setAvatar(meta.avatar);
+    this._initWorkspaceDb(nw);
+
+    const workspaceInfo: WS = {
+      name: meta.name,
+      id,
+      isPublish: false,
+      avatar: '',
+      owner: undefined,
+      isLocal: true,
+      memberCount: 1,
+      provider: 'local',
+    };
+
+    this._workspaces.add(workspaceInfo);
+    return nw;
+  }
+
+  public override async publish(id: string, isPublish: boolean): Promise<void> {
+    await updateWorkspace({ id, public: isPublish });
+  }
+}

packages/data-center/src/provider/affine/apis/index.ts

@@ -4,16 +4,24 @@ export type { Callback } from './token.js';
 import { getAuthorizer } from './token.js';
 import * as user from './user.js';
 import * as workspace from './workspace.js';
+import * as business from './business.js';
 
 export type Apis = typeof user &
   typeof workspace & {
+    business: typeof business;
     signInWithGoogle: ReturnType<typeof getAuthorizer>[0];
     onAuthStateChanged: ReturnType<typeof getAuthorizer>[1];
   };
 
 export const getApis = (): Apis => {
   const [signInWithGoogle, onAuthStateChanged] = getAuthorizer();
-  return { ...user, ...workspace, signInWithGoogle, onAuthStateChanged };
+  return {
+    ...user,
+    ...workspace,
+    business,
+    signInWithGoogle,
+    onAuthStateChanged,
+  };
 };
 
 export type { AccessTokenMessage } from './token';

packages/data-center/src/provider/affine/apis/token.ts

@@ -2,8 +2,8 @@ import { initializeApp } from 'firebase/app';
 import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
 import type { User } from 'firebase/auth';
 
-import { getLogger } from '../index.js';
+import { getLogger } from '../../../logger';
-import { bareClient } from './request.js';
+import { bareClient } from './request';
 
 export interface AccessTokenMessage {
   create_at: number;
@@ -168,14 +168,15 @@ export const getAuthorizer = () => {
 
     const signInWithGoogle = async () => {
       const idToken = await getToken();
+      let loginUser: AccessTokenMessage | null = null;
       if (idToken) {
-        await token.initToken(idToken);
+        loginUser = await token.initToken(idToken);
       } else {
         const user = await signInWithPopup(firebaseAuth, googleAuthProvider);
         const idToken = await user.user.getIdToken();
-        await token.initToken(idToken);
+        loginUser = await token.initToken(idToken);
       }
-      return firebaseAuth.currentUser;
+      return loginUser;
     };
 
     const onAuthStateChanged = (callback: (user: User | null) => void) => {

packages/data-center/src/provider/affine/apis/workspace.ts

@@ -84,7 +84,7 @@ export interface CreateWorkspaceParams {
 
 export async function createWorkspace(
   params: CreateWorkspaceParams
-): Promise<void> {
+): Promise<{ id: string }> {
   return client.post('api/workspace', { json: params }).json();
 }
 

packages/data-center/src/provider/affine/index.ts

@@ -1,175 +1 @@
-import assert from 'assert';
+export * from './affine';
-import { applyUpdate, Doc } from 'yjs';
-
-import type {
-  ConfigStore,
-  DataCenterSignals,
-  InitialParams,
-  Logger,
-} from '../index.js';
-import { token, Callback, getApis } from '../../apis/index.js';
-import { LocalProvider } from '../local/index.js';
-
-import { WebsocketProvider } from './sync.js';
-import { IndexedDBProvider } from '../local/indexeddb.js';
-
-export class AffineProvider extends LocalProvider {
-  static id = 'affine';
-  private _onTokenRefresh?: Callback = undefined;
-  private _ws?: WebsocketProvider;
-
-  constructor() {
-    super();
-  }
-
-  async init(params: InitialParams) {
-    super.init(params);
-
-    this._onTokenRefresh = () => {
-      if (token.refresh) {
-        this._config.set('token', token.refresh);
-      }
-    };
-    assert(this._onTokenRefresh);
-
-    token.onChange(this._onTokenRefresh);
-
-    // initial login token
-    if (token.isExpired) {
-      try {
-        const refreshToken = await this._config.get('token');
-        await token.refreshToken(refreshToken);
-
-        if (token.refresh) {
-          this._config.set('token', token.refresh);
-        }
-
-        assert(token.isLogin);
-      } catch (_) {
-        this._logger('Authorization failed, fallback to local mode');
-      }
-    } else {
-      this._config.set('token', token.refresh);
-    }
-  }
-
-  async destroy() {
-    if (this._onTokenRefresh) {
-      token.offChange(this._onTokenRefresh);
-    }
-    this._ws?.disconnect();
-  }
-
-  async initData() {
-    const databases = await indexedDB.databases();
-    await super.initData(
-      // set locally to true if exists a same name db
-      databases
-        .map(db => db.name)
-        .filter(v => v)
-        .includes(this._workspace.room)
-    );
-
-    const workspace = this._workspace;
-    const doc = workspace.doc;
-
-    this._logger(`Login: ${token.isLogin}`);
-
-    if (workspace.room && token.isLogin) {
-      try {
-        // init data from cloud
-        await AffineProvider._initCloudDoc(
-          workspace.room,
-          doc,
-          this._logger,
-          this._signals
-        );
-
-        // Wait for ws synchronization to complete, otherwise the data will be modified in reverse, which can be optimized later
-        this._ws = new WebsocketProvider('/', workspace.room, doc);
-        await new Promise<void>((resolve, reject) => {
-          // TODO: synced will also be triggered on reconnection after losing sync
-          // There needs to be an event mechanism to emit the synchronization state to the upper layer
-          assert(this._ws);
-          this._ws.once('synced', () => resolve());
-          this._ws.once('lost-connection', () => resolve());
-          this._ws.once('connection-error', () => reject());
-        });
-        this._signals.listAdd.emit({
-          workspace: workspace.room,
-          provider: this.id,
-          locally: true,
-        });
-      } catch (e) {
-        this._logger('Failed to init cloud workspace', e);
-      }
-    }
-
-    // if after update, the space:meta is empty
-    // then we need to get map with doc
-    // just a workaround for yjs
-    doc.getMap('space:meta');
-  }
-
-  private static async _initCloudDoc(
-    workspace: string,
-    doc: Doc,
-    logger: Logger,
-    signals: DataCenterSignals
-  ) {
-    const apis = getApis();
-    logger(`Loading ${workspace}...`);
-    const updates = await apis.downloadWorkspace(workspace);
-    if (updates) {
-      await new Promise(resolve => {
-        doc.once('update', resolve);
-        applyUpdate(doc, new Uint8Array(updates));
-      });
-      logger(`Loaded: ${workspace}`);
-
-      // only add to list as online workspace
-      signals.listAdd.emit({
-        workspace,
-        provider: this.id,
-        // at this time we always download full workspace
-        // but after we support sub doc, we can only download metadata
-        locally: false,
-      });
-    }
-  }
-
-  static async auth(
-    config: Readonly<ConfigStore<string>>,
-    logger: Logger,
-    signals: DataCenterSignals
-  ) {
-    const refreshToken = await config.get('token');
-    if (refreshToken) {
-      await token.refreshToken(refreshToken);
-      if (token.isLogin && !token.isExpired) {
-        logger('check login success');
-        // login success
-        return;
-      }
-    }
-
-    logger('start login');
-    // login with google
-    const apis = getApis();
-    assert(apis.signInWithGoogle);
-    const user = await apis.signInWithGoogle();
-    assert(user);
-    logger(`login success: ${user.displayName}`);
-
-    // TODO: refresh local workspace data
-    const workspaces = await apis.getWorkspaces();
-    await Promise.all(
-      workspaces.map(async ({ id }) => {
-        const doc = new Doc();
-        const idb = new IndexedDBProvider(id, doc);
-        await idb.whenSynced;
-        await this._initCloudDoc(id, doc, logger, signals);
-      })
-    );
-  }
-}

packages/data-center/src/provider/base.ts

@@ -1,79 +1,158 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+import { BlobStorage, Workspace } from '@blocksuite/store';
-import type { Workspace } from '@blocksuite/store';
+import { Logger, User, Workspace as WS, WorkspaceMeta } from '../types';
+import type { WorkspacesScope } from '../workspaces';
 
-import type {
+const defaultLogger = () => {
-  Apis,
+  return;
-  DataCenterSignals,
+};
-  Logger,
+
-  InitialParams,
+export interface ProviderConstructorParams {
-  ConfigStore,
+  logger?: Logger;
-} from './index';
+  workspaces: WorkspacesScope;
+}
 
 export class BaseProvider {
-  static id = 'base';
+  public readonly id: string = 'base';
-  protected _apis!: Readonly<Apis>;
+  protected _workspaces!: WorkspacesScope;
-  protected _config!: Readonly<ConfigStore>;
   protected _logger!: Logger;
-  protected _signals!: DataCenterSignals;
+  protected _blobs!: BlobStorage;
-  protected _workspace!: Workspace;
 
-  constructor() {
+  public constructor({ logger, workspaces }: ProviderConstructorParams) {
-    // Nothing to do here
+    this._logger = (logger || defaultLogger) as Logger;
+    this._workspaces = workspaces;
   }
 
-  get id(): string {
+  /**
-    return (this.constructor as any).id;
+   * hook after provider registered
+   */
+  public async init() {
+    return;
   }
 
-  async init(params: InitialParams) {
+  /**
-    this._apis = params.apis;
+   * auth provider
-    this._config = params.config;
+   */
-    this._logger = params.logger;
+  public async auth() {
-    this._signals = params.signals;
+    return;
-    this._workspace = params.workspace;
-    this._logger.enabled = params.debug;
   }
 
+  /**
+   * logout provider
+   */
+  public async logout() {
+    return;
+  }
+
+  /**
+   * warp workspace with provider functions
+   * @param workspace
+   * @returns
+   */
+  public async warpWorkspace(workspace: Workspace): Promise<Workspace> {
+    return workspace;
+  }
+
+  /**
+   * load workspaces
+   **/
+  public async loadWorkspaces(): Promise<WS[]> {
+    throw new Error(`provider: ${this.id} loadWorkSpace Not implemented`);
+  }
+
+  /**
+   * get auth user info
+   * @returns
+   */
+  public async getUserInfo(): Promise<User | undefined> {
+    return;
+  }
+
+  async getBlob(id: string): Promise<string | null> {
+    return await this._blobs.get(id);
+  }
+
+  async setBlob(blob: Blob): Promise<string> {
+    return await this._blobs.set(blob);
+  }
+
+  /**
+   * clear all local data in provider
+   */
   async clear() {
-    await this.destroy();
+    this._blobs.clear();
-    await this._config.clear();
   }
 
-  async destroy() {
+  /**
-    // Nothing to do here
+   * delete workspace include all data
+   * @param id workspace id
+   */
+  public async deleteWorkspace(id: string): Promise<void> {
+    id;
+    return;
   }
 
-  async initData() {
+  /**
-    throw Error('Not implemented: initData');
+   * leave workspace by workspace id
+   * @param id workspace id
+   */
+  public async leaveWorkspace(id: string): Promise<void> {
+    id;
+    return;
   }
 
-  // should return a blob url
+  /**
-  async getBlob(_id: string): Promise<string | null> {
+   * close db link and websocket connection and other resources
-    throw Error('Not implemented: getBlob');
+   * @param id workspace id
+   */
+  public async closeWorkspace(id: string) {
+    id;
+    return;
   }
 
-  // should return a blob unique id
+  /**
-  async setBlob(_blob: Blob): Promise<string> {
+   * invite workspace member
-    throw Error('Not implemented: setBlob');
+   * @param id workspace id
+   */
+  public async invite(id: string, email: string): Promise<void> {
+    id;
+    email;
+    return;
   }
 
-  get workspace() {
+  /**
-    return this._workspace;
+   * remove workspace member by permission id
+   * @param permissionId
+   */
+  public async removeMember(permissionId: number): Promise<void> {
+    permissionId;
+    return;
   }
 
-  static async auth(
+  public async publish(id: string, isPublish: boolean): Promise<void> {
-    _config: Readonly<ConfigStore>,
+    id;
-    logger: Logger,
+    isPublish;
-    _signals: DataCenterSignals
+    return;
-  ) {
-    logger("This provider doesn't require authentication");
   }
 
-  // get workspace list，return a map of workspace id and boolean
+  /**
-  // if value is true, it exists locally, otherwise it does not exist locally
+   * change workspace meta by workspace id , work for cached list in different provider
-  static async list(
+   * @param id
-    _config: Readonly<ConfigStore>
+   * @param meta
-  ): Promise<Map<string, boolean> | undefined> {
+   * @returns
-    throw Error('Not implemented: list');
+   */
+  public async updateWorkspaceMeta(
+    id: string,
+    meta: Partial<WorkspaceMeta>
+  ): Promise<void> {
+    id;
+    meta;
+    return;
+  }
+
+  public async createWorkspace(
+    meta: WorkspaceMeta
+  ): Promise<Workspace | undefined> {
+    meta;
+    return;
   }
 }

packages/data-center/src/provider/index.ts

@@ -1,22 +1 @@
-import type { Workspace } from '@blocksuite/store';
+export * from './affine/affine';
-
-import type { Apis } from '../apis';
-import type { DataCenterSignals } from '../datacenter';
-import type { getLogger } from '../index';
-import type { ConfigStore } from '../store';
-
-export type Logger = ReturnType<typeof getLogger>;
-
-export type InitialParams = {
-  apis: Apis;
-  config: Readonly<ConfigStore>;
-  debug: boolean;
-  logger: Logger;
-  signals: DataCenterSignals;
-  workspace: Workspace;
-};
-
-export type { Apis, ConfigStore, DataCenterSignals, Workspace };
-export type { BaseProvider } from './base.js';
-export { AffineProvider } from './affine/index.js';
-export { LocalProvider } from './local/index.js';

packages/data-center/src/provider/indexeddb.ts

@@ -196,4 +196,8 @@ export class IndexedDBProvider extends Observable<string> {
       return undefined;
     });
   }
+
+  static delete(name: string): Promise<void> {
+    return idb.deleteDB(name);
+  }
 }

packages/data-center/src/provider/local/index.ts

@@ -1,73 +1 @@
-import type { BlobStorage } from '@blocksuite/store';
+export * from './local';
-import assert from 'assert';
-
-import type { ConfigStore, InitialParams } from '../index.js';
-import { BaseProvider } from '../base.js';
-import { IndexedDBProvider } from './indexeddb.js';
-
-export class LocalProvider extends BaseProvider {
-  static id = 'local';
-  private _blobs!: BlobStorage;
-  private _idb?: IndexedDBProvider = undefined;
-
-  constructor() {
-    super();
-  }
-  async init(params: InitialParams) {
-    super.init(params);
-
-    const blobs = await this._workspace.blobs;
-    assert(blobs);
-    this._blobs = blobs;
-  }
-
-  async initData(locally = true) {
-    assert(this._workspace.room);
-    this._logger('Loading local data');
-    this._idb = new IndexedDBProvider(
-      this._workspace.room,
-      this._workspace.doc
-    );
-
-    await this._idb.whenSynced;
-    this._logger('Local data loaded');
-
-    this._signals.listAdd.emit({
-      workspace: this._workspace.room,
-      provider: this.id,
-      locally,
-    });
-  }
-
-  async clear() {
-    assert(this._workspace.room);
-    await super.clear();
-    await this._blobs.clear();
-    await this._idb?.clearData();
-    this._signals.listRemove.emit(this._workspace.room);
-  }
-
-  async destroy(): Promise<void> {
-    super.destroy();
-    await this._idb?.destroy();
-  }
-
-  async getBlob(id: string): Promise<string | null> {
-    return this._blobs.get(id);
-  }
-
-  async setBlob(blob: Blob): Promise<string> {
-    return this._blobs.set(blob);
-  }
-
-  static async list(
-    config: Readonly<ConfigStore<boolean>>
-  ): Promise<Map<string, boolean> | undefined> {
-    const entries = await config.entries();
-    return new Map(
-      entries
-        .filter(([key]) => key.startsWith('list:'))
-        .map(([key, value]) => [key.slice(5), value])
-    );
-  }
-}

packages/data-center/src/provider/local/local.spec.ts

@@ -0,0 +1,49 @@
+import { describe, test, expect } from 'vitest';
+import { Workspaces } from '../../workspaces';
+import { LocalProvider } from './local';
+import 'fake-indexeddb/auto';
+
+describe('local provider', () => {
+  const workspaces = new Workspaces();
+  const provider = new LocalProvider({
+    workspaces: workspaces.createScope(),
+  });
+
+  const workspaceName = 'workspace-test';
+  let workspaceId: string | undefined;
+
+  test('create workspace', async () => {
+    const w = await provider.createWorkspace({
+      name: workspaceName,
+      avatar: 'avatar-url-test',
+    });
+    workspaceId = w?.room;
+
+    expect(workspaces.workspaces.length).toEqual(1);
+    expect(workspaces.workspaces[0].name).toEqual(workspaceName);
+  });
+
+  test('workspace list cache', async () => {
+    const workspaces1 = new Workspaces();
+    const provider1 = new LocalProvider({
+      workspaces: workspaces1.createScope(),
+    });
+    await provider1.loadWorkspaces();
+    expect(workspaces1.workspaces.length).toEqual(1);
+    expect(workspaces1.workspaces[0].name).toEqual(workspaceName);
+    expect(workspaces1.workspaces[0].id).toEqual(workspaceId);
+  });
+
+  test('update workspace', async () => {
+    await provider.updateWorkspaceMeta(workspaceId!, {
+      name: '1111',
+    });
+    expect(workspaces.workspaces[0].name).toEqual('1111');
+  });
+
+  test('delete workspace', async () => {
+    expect(workspaces.workspaces.length).toEqual(1);
+    await provider.deleteWorkspace(workspaces.workspaces[0].id);
+    expect(workspaces.workspaces.length).toEqual(0);
+  });
+});

packages/data-center/src/provider/local/local.ts

@@ -0,0 +1,117 @@
+import { BaseProvider } from '../base';
+import type { ProviderConstructorParams } from '../base';
+import { varStorage as storage } from 'lib0/storage';
+import { Workspace as WS, WorkspaceMeta } from '../../types';
+import { Workspace, uuidv4 } from '@blocksuite/store';
+import { IndexedDBProvider } from '../indexeddb';
+import assert from 'assert';
+import { getDefaultHeadImgBlob } from '../../utils';
+
+const WORKSPACE_KEY = 'workspaces';
+
+export class LocalProvider extends BaseProvider {
+  public id = 'local';
+  private _idbMap: Map<string, IndexedDBProvider> = new Map();
+
+  constructor(params: ProviderConstructorParams) {
+    super(params);
+    this.loadWorkspaces();
+  }
+
+  private _storeWorkspaces(workspaces: WS[]) {
+    storage.setItem(WORKSPACE_KEY, JSON.stringify(workspaces));
+  }
+
+  private async _initWorkspaceDb(workspace: Workspace) {
+    assert(workspace.room);
+    let idb = this._idbMap.get(workspace.room);
+    idb?.destroy();
+    idb = new IndexedDBProvider(workspace.room, workspace.doc);
+    this._idbMap.set(workspace.room, idb);
+    this._logger('Local data loaded');
+    return idb;
+  }
+
+  public override async warpWorkspace(
+    workspace: Workspace
+  ): Promise<Workspace> {
+    assert(workspace.room);
+    await this._initWorkspaceDb(workspace);
+    return workspace;
+  }
+
+  override loadWorkspaces(): Promise<WS[]> {
+    const workspaceStr = storage.getItem(WORKSPACE_KEY);
+    let workspaces: WS[] = [];
+    if (workspaceStr) {
+      try {
+        workspaces = JSON.parse(workspaceStr) as WS[];
+        workspaces.forEach(workspace => {
+          this._workspaces.add(workspace);
+        });
+      } catch (error) {
+        this._logger(`Failed to parse workspaces from storage`);
+      }
+    }
+    return Promise.resolve(workspaces);
+  }
+
+  public override async deleteWorkspace(id: string): Promise<void> {
+    const workspace = this._workspaces.get(id);
+    if (workspace) {
+      IndexedDBProvider.delete(id);
+      this._workspaces.remove(id);
+      this._storeWorkspaces(this._workspaces.list());
+    } else {
+      this._logger(`Failed to delete workspace ${id}`);
+    }
+  }
+
+  public override async updateWorkspaceMeta(
+    id: string,
+    meta: Partial<WorkspaceMeta>
+  ) {
+    this._workspaces.update(id, meta);
+    this._storeWorkspaces(this._workspaces.list());
+  }
+
+  public override async createWorkspace(
+    meta: WorkspaceMeta
+  ): Promise<Workspace | undefined> {
+    assert(meta.name, 'Workspace name is required');
+    if (!meta.avatar) {
+      // set default avatar
+      const blob = await getDefaultHeadImgBlob(meta.name);
+      meta.avatar = (await this.setBlob(blob)) || '';
+    }
+    this._logger('Creating affine workspace');
+
+    const workspaceInfo: WS = {
+      name: meta.name,
+      id: uuidv4(),
+      isPublish: false,
+      avatar: '',
+      owner: undefined,
+      isLocal: true,
+      memberCount: 1,
+      provider: 'local',
+    };
+
+    const workspace = new Workspace({ room: workspaceInfo.id });
+    this._initWorkspaceDb(workspace);
+    workspace.meta.setName(meta.name);
+    workspace.meta.setAvatar(meta.avatar);
+
+    this._workspaces.add(workspaceInfo);
+    this._storeWorkspaces(this._workspaces.list());
+
+    return workspace;
+  }
+
+  public override async clear(): Promise<void> {
+    const workspaces = await this.loadWorkspaces();
+    workspaces.forEach(ws => IndexedDBProvider.delete(ws.id));
+    this._storeWorkspaces([]);
+    this._workspaces.clear();
+  }
+}

packages/data-center/src/provider/selfhosted/index.ts

@@ -0,0 +1,63 @@
+import assert from 'assert';
+
+import { LocalProvider } from '../local/index.js';
+import { WebsocketProvider } from './sync.js';
+
+export class SelfHostedProvider extends LocalProvider {
+  static id = 'selfhosted';
+  private _ws?: WebsocketProvider;
+
+  constructor() {
+    super();
+  }
+
+  async destroy() {
+    this._ws?.disconnect();
+  }
+
+  async initData() {
+    const databases = await indexedDB.databases();
+    await super.initData(
+      // set locally to true if exists a same name db
+      databases
+        .map(db => db.name)
+        .filter(v => v)
+        .includes(this._workspace.room)
+    );
+
+    const workspace = this._workspace;
+    const doc = workspace.doc;
+
+    if (workspace.room) {
+      try {
+        // Wait for ws synchronization to complete, otherwise the data will be modified in reverse, which can be optimized later
+        this._ws = new WebsocketProvider(this.host, workspace.room, doc);
+        await new Promise<void>((resolve, reject) => {
+          // TODO: synced will also be triggered on reconnection after losing sync
+          // There needs to be an event mechanism to emit the synchronization state to the upper layer
+          assert(this._ws);
+          this._ws.once('synced', () => resolve());
+          this._ws.once('lost-connection', () => resolve());
+          this._ws.once('connection-error', () => reject());
+        });
+        this._signals.listAdd.emit({
+          workspace: workspace.room,
+          provider: this.id,
+          locally: true,
+        });
+      } catch (e) {
+        this._logger('Failed to init cloud workspace', e);
+      }
+    }
+
+    // if after update, the space:meta is empty
+    // then we need to get map with doc
+    // just a workaround for yjs
+    doc.getMap('space:meta');
+  }
+
+  private get host() {
+    const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    return `${protocol}//${location.host}/collaboration/`;
+  }
+}

packages/data-center/src/provider/selfhosted/sync.js

@@ -0,0 +1,508 @@
+/* eslint-disable no-undef */
+/**
+ * @module provider/websocket
+ */
+
+/* eslint-env browser */
+
+// import * as Y from 'yjs'; // eslint-disable-line
+import * as bc from 'lib0/broadcastchannel';
+import * as time from 'lib0/time';
+import * as encoding from 'lib0/encoding';
+import * as decoding from 'lib0/decoding';
+import * as syncProtocol from 'y-protocols/sync';
+import * as authProtocol from 'y-protocols/auth';
+import * as awarenessProtocol from 'y-protocols/awareness';
+import { Observable } from 'lib0/observable';
+import * as math from 'lib0/math';
+import * as url from 'lib0/url';
+
+export const messageSync = 0;
+export const messageQueryAwareness = 3;
+export const messageAwareness = 1;
+export const messageAuth = 2;
+
+/**
+ *                       encoder,          decoder,          provider,          emitSynced, messageType
+ * @type {Array<function(encoding.Encoder, decoding.Decoder, WebsocketProvider, boolean,    number):void>}
+ */
+const messageHandlers = [];
+
+messageHandlers[messageSync] = (
+  encoder,
+  decoder,
+  provider,
+  emitSynced,
+  _messageType
+) => {
+  encoding.writeVarUint(encoder, messageSync);
+  const syncMessageType = syncProtocol.readSyncMessage(
+    decoder,
+    encoder,
+    provider.doc,
+    provider
+  );
+  if (
+    emitSynced &&
+    syncMessageType === syncProtocol.messageYjsSyncStep2 &&
+    !provider.synced
+  ) {
+    provider.synced = true;
+  }
+};
+
+messageHandlers[messageQueryAwareness] = (
+  encoder,
+  _decoder,
+  provider,
+  _emitSynced,
+  _messageType
+) => {
+  encoding.writeVarUint(encoder, messageAwareness);
+  encoding.writeVarUint8Array(
+    encoder,
+    awarenessProtocol.encodeAwarenessUpdate(
+      provider.awareness,
+      Array.from(provider.awareness.getStates().keys())
+    )
+  );
+};
+
+messageHandlers[messageAwareness] = (
+  _encoder,
+  decoder,
+  provider,
+  _emitSynced,
+  _messageType
+) => {
+  awarenessProtocol.applyAwarenessUpdate(
+    provider.awareness,
+    decoding.readVarUint8Array(decoder),
+    provider
+  );
+};
+
+messageHandlers[messageAuth] = (
+  _encoder,
+  decoder,
+  provider,
+  _emitSynced,
+  _messageType
+) => {
+  authProtocol.readAuthMessage(decoder, provider.doc, (_ydoc, reason) =>
+    permissionDeniedHandler(provider, reason)
+  );
+};
+
+// @todo - this should depend on awareness.outdatedTime
+const messageReconnectTimeout = 30000;
+
+/**
+ * @param {WebsocketProvider} provider
+ * @param {string} reason
+ */
+const permissionDeniedHandler = (provider, reason) =>
+  console.warn(`Permission denied to access ${provider.url}.\n${reason}`);
+
+/**
+ * @param {WebsocketProvider} provider
+ * @param {Uint8Array} buf
+ * @param {boolean} emitSynced
+ * @return {encoding.Encoder}
+ */
+const readMessage = (provider, buf, emitSynced) => {
+  const decoder = decoding.createDecoder(buf);
+  const encoder = encoding.createEncoder();
+  const messageType = decoding.readVarUint(decoder);
+  const messageHandler = provider.messageHandlers[messageType];
+  if (/** @type {any} */ (messageHandler)) {
+    messageHandler(encoder, decoder, provider, emitSynced, messageType);
+  } else {
+    console.error('Unable to compute message');
+  }
+  return encoder;
+};
+
+/**
+ * @param {WebsocketProvider} provider
+ */
+const setupWS = provider => {
+  if (provider.shouldConnect && provider.ws === null) {
+    const websocket = new provider._WS(provider.url, 'AFFiNE');
+    websocket.binaryType = 'arraybuffer';
+    provider.ws = websocket;
+    provider.wsconnecting = true;
+    provider.wsconnected = false;
+    provider.synced = false;
+
+    websocket.onmessage = event => {
+      provider.wsLastMessageReceived = time.getUnixTime();
+      const encoder = readMessage(provider, new Uint8Array(event.data), true);
+      if (encoding.length(encoder) > 1) {
+        websocket.send(encoding.toUint8Array(encoder));
+      }
+    };
+    websocket.onerror = event => {
+      provider.emit('connection-error', [event, provider]);
+    };
+    websocket.onclose = event => {
+      provider.emit('connection-close', [event, provider]);
+      provider.ws = null;
+      provider.wsconnecting = false;
+      if (provider.wsconnected) {
+        provider.wsconnected = false;
+        provider.synced = false;
+        // update awareness (all users except local left)
+        awarenessProtocol.removeAwarenessStates(
+          provider.awareness,
+          Array.from(provider.awareness.getStates().keys()).filter(
+            client => client !== provider.doc.clientID
+          ),
+          provider
+        );
+        provider.emit('status', [
+          {
+            status: 'disconnected',
+          },
+        ]);
+      } else {
+        provider.wsUnsuccessfulReconnects++;
+      }
+      // Start with no reconnect timeout and increase timeout by
+      // using exponential backoff starting with 100ms
+      setTimeout(
+        setupWS,
+        math.min(
+          math.pow(2, provider.wsUnsuccessfulReconnects) * 100,
+          provider.maxBackoffTime
+        ),
+        provider
+      );
+    };
+    websocket.onopen = () => {
+      provider.wsLastMessageReceived = time.getUnixTime();
+      provider.wsconnecting = false;
+      provider.wsconnected = true;
+      provider.wsUnsuccessfulReconnects = 0;
+      provider.emit('status', [
+        {
+          status: 'connected',
+        },
+      ]);
+      // always send sync step 1 when connected
+      const encoder = encoding.createEncoder();
+      encoding.writeVarUint(encoder, messageSync);
+      syncProtocol.writeSyncStep1(encoder, provider.doc);
+      websocket.send(encoding.toUint8Array(encoder));
+      // broadcast local awareness state
+      if (provider.awareness.getLocalState() !== null) {
+        const encoderAwarenessState = encoding.createEncoder();
+        encoding.writeVarUint(encoderAwarenessState, messageAwareness);
+        encoding.writeVarUint8Array(
+          encoderAwarenessState,
+          awarenessProtocol.encodeAwarenessUpdate(provider.awareness, [
+            provider.doc.clientID,
+          ])
+        );
+        websocket.send(encoding.toUint8Array(encoderAwarenessState));
+      }
+    };
+
+    provider.emit('status', [
+      {
+        status: 'connecting',
+      },
+    ]);
+  }
+};
+
+/**
+ * @param {WebsocketProvider} provider
+ * @param {ArrayBuffer} buf
+ */
+const broadcastMessage = (provider, buf) => {
+  if (provider.wsconnected) {
+    /** @type {WebSocket} */ (provider.ws).send(buf);
+  }
+  if (provider.bcconnected) {
+    bc.publish(provider.bcChannel, buf, provider);
+  }
+};
+
+/**
+ * Websocket Provider for Yjs. Creates a websocket connection to sync the shared document.
+ * The document name is attached to the provided url. I.e. the following example
+ * creates a websocket connection to http://localhost:1234/my-document-name
+ *
+ * @example
+ *   import * as Y from 'yjs'
+ *   import { WebsocketProvider } from 'y-websocket'
+ *   const doc = new Y.Doc()
+ *   const provider = new WebsocketProvider('http://localhost:1234', 'my-document-name', doc)
+ *
+ * @extends {Observable<string>}
+ */
+export class WebsocketProvider extends Observable {
+  /**
+   * @param {string} serverUrl
+   * @param {string} roomname
+   * @param {Y.Doc} doc
+   * @param {object} [opts]
+   * @param {boolean} [opts.connect]
+   * @param {awarenessProtocol.Awareness} [opts.awareness]
+   * @param {Object<string,string>} [opts.params]
+   * @param {typeof WebSocket} [opts.WebSocketPolyfill] Optionall provide a WebSocket polyfill
+   * @param {number} [opts.resyncInterval] Request server state every `resyncInterval` milliseconds
+   * @param {number} [opts.maxBackoffTime] Maximum amount of time to wait before trying to reconnect (we try to reconnect using exponential backoff)
+   * @param {boolean} [opts.disableBc] Disable cross-tab BroadcastChannel communication
+   */
+  constructor(
+    serverUrl,
+    roomname,
+    doc,
+    {
+      connect = true,
+      awareness = new awarenessProtocol.Awareness(doc),
+      params = {},
+      WebSocketPolyfill = WebSocket,
+      resyncInterval = -1,
+      maxBackoffTime = 2500,
+      disableBc = false,
+    } = {}
+  ) {
+    super();
+    // ensure that url is always ends with /
+    while (serverUrl[serverUrl.length - 1] === '/') {
+      serverUrl = serverUrl.slice(0, serverUrl.length - 1);
+    }
+    const encodedParams = url.encodeQueryParams(params);
+    this.maxBackoffTime = maxBackoffTime;
+    this.bcChannel = serverUrl + '/' + roomname;
+    this.url =
+      serverUrl +
+      '/' +
+      roomname +
+      (encodedParams.length === 0 ? '' : '?' + encodedParams);
+    this.roomname = roomname;
+    this.doc = doc;
+    this._WS = WebSocketPolyfill;
+    this.awareness = awareness;
+    this.wsconnected = false;
+    this.wsconnecting = false;
+    this.bcconnected = false;
+    this.disableBc = disableBc;
+    this.wsUnsuccessfulReconnects = 0;
+    this.messageHandlers = messageHandlers.slice();
+    /**
+     * @type {boolean}
+     */
+    this._synced = false;
+    /**
+     * @type {WebSocket?}
+     */
+    this.ws = null;
+    this.wsLastMessageReceived = 0;
+    /**
+     * Whether to connect to other peers or not
+     * @type {boolean}
+     */
+    this.shouldConnect = connect;
+
+    /**
+     * @type {number}
+     */
+    this._resyncInterval = 0;
+    if (resyncInterval > 0) {
+      this._resyncInterval = /** @type {any} */ (
+        setInterval(() => {
+          if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            // resend sync step 1
+            const encoder = encoding.createEncoder();
+            encoding.writeVarUint(encoder, messageSync);
+            syncProtocol.writeSyncStep1(encoder, doc);
+            this.ws.send(encoding.toUint8Array(encoder));
+          }
+        }, resyncInterval)
+      );
+    }
+
+    /**
+     * @param {ArrayBuffer} data
+     * @param {any} origin
+     */
+    this._bcSubscriber = (data, origin) => {
+      if (origin !== this) {
+        const encoder = readMessage(this, new Uint8Array(data), false);
+        if (encoding.length(encoder) > 1) {
+          bc.publish(this.bcChannel, encoding.toUint8Array(encoder), this);
+        }
+      }
+    };
+    /**
+     * Listens to Yjs updates and sends them to remote peers (ws and broadcastchannel)
+     * @param {Uint8Array} update
+     * @param {any} origin
+     */
+    this._updateHandler = (update, origin) => {
+      if (origin !== this) {
+        const encoder = encoding.createEncoder();
+        encoding.writeVarUint(encoder, messageSync);
+        syncProtocol.writeUpdate(encoder, update);
+        broadcastMessage(this, encoding.toUint8Array(encoder));
+      }
+    };
+    this.doc.on('update', this._updateHandler);
+    /**
+     * @param {any} changed
+     * @param {any} _origin
+     */
+    this._awarenessUpdateHandler = ({ added, updated, removed }, _origin) => {
+      const changedClients = added.concat(updated).concat(removed);
+      const encoder = encoding.createEncoder();
+      encoding.writeVarUint(encoder, messageAwareness);
+      encoding.writeVarUint8Array(
+        encoder,
+        awarenessProtocol.encodeAwarenessUpdate(awareness, changedClients)
+      );
+      broadcastMessage(this, encoding.toUint8Array(encoder));
+    };
+    this._unloadHandler = () => {
+      awarenessProtocol.removeAwarenessStates(
+        this.awareness,
+        [doc.clientID],
+        'window unload'
+      );
+    };
+    if (typeof window !== 'undefined') {
+      window.addEventListener('unload', this._unloadHandler);
+    } else if (typeof process !== 'undefined') {
+      process.on('exit', this._unloadHandler);
+    }
+    awareness.on('update', this._awarenessUpdateHandler);
+    this._checkInterval = /** @type {any} */ (
+      setInterval(() => {
+        if (
+          this.wsconnected &&
+          messageReconnectTimeout <
+            time.getUnixTime() - this.wsLastMessageReceived
+        ) {
+          // no message received in a long time - not even your own awareness
+          // updates (which are updated every 15 seconds)
+          /** @type {WebSocket} */ (this.ws).close();
+        }
+      }, messageReconnectTimeout / 10)
+    );
+    if (connect) {
+      this.connect();
+    }
+  }
+
+  /**
+   * @type {boolean}
+   */
+  get synced() {
+    return this._synced;
+  }
+
+  set synced(state) {
+    if (this._synced !== state) {
+      this._synced = state;
+      this.emit('synced', [state]);
+      this.emit('sync', [state]);
+    }
+  }
+
+  destroy() {
+    if (this._resyncInterval !== 0) {
+      clearInterval(this._resyncInterval);
+    }
+    clearInterval(this._checkInterval);
+    this.disconnect();
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('unload', this._unloadHandler);
+    } else if (typeof process !== 'undefined') {
+      process.off('exit', this._unloadHandler);
+    }
+    this.awareness.off('update', this._awarenessUpdateHandler);
+    this.doc.off('update', this._updateHandler);
+    super.destroy();
+  }
+
+  connectBc() {
+    if (this.disableBc) {
+      return;
+    }
+    if (!this.bcconnected) {
+      bc.subscribe(this.bcChannel, this._bcSubscriber);
+      this.bcconnected = true;
+    }
+    // send sync step1 to bc
+    // write sync step 1
+    const encoderSync = encoding.createEncoder();
+    encoding.writeVarUint(encoderSync, messageSync);
+    syncProtocol.writeSyncStep1(encoderSync, this.doc);
+    bc.publish(this.bcChannel, encoding.toUint8Array(encoderSync), this);
+    // broadcast local state
+    const encoderState = encoding.createEncoder();
+    encoding.writeVarUint(encoderState, messageSync);
+    syncProtocol.writeSyncStep2(encoderState, this.doc);
+    bc.publish(this.bcChannel, encoding.toUint8Array(encoderState), this);
+    // write queryAwareness
+    const encoderAwarenessQuery = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwarenessQuery, messageQueryAwareness);
+    bc.publish(
+      this.bcChannel,
+      encoding.toUint8Array(encoderAwarenessQuery),
+      this
+    );
+    // broadcast local awareness state
+    const encoderAwarenessState = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwarenessState, messageAwareness);
+    encoding.writeVarUint8Array(
+      encoderAwarenessState,
+      awarenessProtocol.encodeAwarenessUpdate(this.awareness, [
+        this.doc.clientID,
+      ])
+    );
+    bc.publish(
+      this.bcChannel,
+      encoding.toUint8Array(encoderAwarenessState),
+      this
+    );
+  }
+
+  disconnectBc() {
+    // broadcast message with local awareness state set to null (indicating disconnect)
+    const encoder = encoding.createEncoder();
+    encoding.writeVarUint(encoder, messageAwareness);
+    encoding.writeVarUint8Array(
+      encoder,
+      awarenessProtocol.encodeAwarenessUpdate(
+        this.awareness,
+        [this.doc.clientID],
+        new Map()
+      )
+    );
+    broadcastMessage(this, encoding.toUint8Array(encoder));
+    if (this.bcconnected) {
+      bc.unsubscribe(this.bcChannel, this._bcSubscriber);
+      this.bcconnected = false;
+    }
+  }
+
+  disconnect() {
+    this.shouldConnect = false;
+    this.disconnectBc();
+    if (this.ws !== null) {
+      this.ws.close();
+    }
+  }
+
+  connect() {
+    this.shouldConnect = true;
+    if (!this.wsconnected && this.ws === null) {
+      setupWS(this);
+      this.connectBc();
+    }
+  }
+}

packages/data-center/src/types/index.ts

@@ -0,0 +1,23 @@
+import { getLogger } from '../logger';
+
+export type Workspace = {
+  name: string;
+  id: string;
+  isPublish?: boolean;
+  avatar?: string;
+  owner?: User;
+  isLocal?: boolean;
+  memberCount: number;
+  provider: string;
+};
+
+export type User = {
+  name: string;
+  id: string;
+  email: string;
+  avatar: string;
+};
+
+export type WorkspaceMeta = Pick<Workspace, 'name' | 'avatar'>;
+
+export type Logger = ReturnType<typeof getLogger>;

packages/data-center/src/utils/index.ts

@@ -0,0 +1,38 @@
+const DefaultHeadImgColors = [
+  ['#C6F2F3', '#0C6066'],
+  ['#FFF5AB', '#896406'],
+  ['#FFCCA7', '#8F4500'],
+  ['#FFCECE', '#AF1212'],
+  ['#E3DEFF', '#511AAB'],
+];
+
+export async function getDefaultHeadImgBlob(
+  workspaceName: string
+): Promise<Blob> {
+  const canvas = document.createElement('canvas');
+  canvas.height = 100;
+  canvas.width = 100;
+  const ctx = canvas.getContext('2d');
+  return new Promise<Blob>((resolve, reject) => {
+    if (ctx) {
+      const randomNumber = Math.floor(Math.random() * 5);
+      const randomColor = DefaultHeadImgColors[randomNumber];
+      ctx.fillStyle = randomColor[0];
+      ctx.fillRect(0, 0, 100, 100);
+      ctx.font = "600 50px 'PingFang SC', 'Microsoft Yahei'";
+      ctx.fillStyle = randomColor[1];
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(workspaceName[0], 50, 50);
+      canvas.toBlob(blob => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject();
+        }
+      }, 'image/png');
+    } else {
+      reject();
+    }
+  });
+}

packages/data-center/src/workspaces/index.ts

@@ -0,0 +1,2 @@
+export { Workspaces } from './workspaces';
+export type { WorkspacesScope, WorkspacesChangeEvent } from './workspaces';

packages/data-center/src/workspaces/workspaces.spec.ts

@@ -0,0 +1,50 @@
+import { describe, test, expect } from 'vitest';
+import { Workspaces } from './workspaces';
+import type { WorkspacesChangeEvent } from './workspaces';
+
+describe('workspaces observable', () => {
+  const workspaces = new Workspaces();
+
+  const scope = workspaces.createScope();
+
+  test('add workspace', () => {
+    workspaces.once('change', (event: WorkspacesChangeEvent) => {
+      expect(event.added?.id).toEqual('123');
+    });
+    scope.add({
+      id: '123',
+      name: 'test',
+      memberCount: 1,
+      provider: '',
+    });
+  });
+
+  test('list workspace', () => {
+    const list = scope.list();
+    expect(list.length).toEqual(1);
+    expect(list[0].id).toEqual('123');
+  });
+
+  test('get workspace', () => {
+    expect(scope.get('123')?.id).toEqual('123');
+  });
+
+  test('update workspace', () => {
+    workspaces.once('change', (event: WorkspacesChangeEvent) => {
+      expect(event.updated?.name).toEqual('demo');
+    });
+    scope.update('123', { name: 'demo' });
+  });
+
+  test('get workspace form other scope', () => {
+    const scope1 = workspaces.createScope();
+    expect(scope1.get('123')).toBeFalsy();
+  });
+
+  test('delete workspace', () => {
+    workspaces.once('change', (event: WorkspacesChangeEvent) => {
+      expect(event.deleted?.id).toEqual('123');
+    });
+    scope.remove('123');
+  });
+});

packages/data-center/src/workspaces/workspaces.ts

@@ -0,0 +1,127 @@
+import { Observable } from 'lib0/observable';
+import type { Workspace, WorkspaceMeta } from '../types';
+
+export interface WorkspacesScope {
+  get: (workspaceId: string) => Workspace | undefined;
+  list: () => Workspace[];
+  add: (workspace: Workspace) => void;
+  remove: (workspaceId: string) => boolean;
+  clear: () => void;
+  update: (workspaceId: string, workspaceMeta: Partial<WorkspaceMeta>) => void;
+}
+
+export interface WorkspacesChangeEvent {
+  added?: Workspace;
+  deleted?: Workspace;
+  updated?: Workspace;
+}
+
+export class Workspaces extends Observable<'change'> {
+  private _workspacesMap = new Map<string, Workspace>();
+
+  get workspaces(): Workspace[] {
+    return Array.from(this._workspacesMap.values());
+  }
+
+  find(workspaceId: string) {
+    return this._workspacesMap.get(workspaceId);
+  }
+
+  createScope(): WorkspacesScope {
+    const scopedWorkspaceIds = new Set<string>();
+
+    const get = (workspaceId: string) => {
+      if (!scopedWorkspaceIds.has(workspaceId)) {
+        return;
+      }
+      return this._workspacesMap.get(workspaceId);
+    };
+
+    const add = (workspace: Workspace) => {
+      if (this._workspacesMap.has(workspace.id)) {
+        throw new Error(`Duplicate workspace id.`);
+      }
+      this._workspacesMap.set(workspace.id, workspace);
+      scopedWorkspaceIds.add(workspace.id);
+
+      this.emit('change', [
+        {
+          added: workspace,
+        } as WorkspacesChangeEvent,
+      ]);
+    };
+
+    const remove = (workspaceId: string) => {
+      if (!scopedWorkspaceIds.has(workspaceId)) {
+        return true;
+      }
+
+      const workspace = this._workspacesMap.get(workspaceId);
+      if (workspace) {
+        const ret = this._workspacesMap.delete(workspaceId);
+        // If deletion failed, return.
+        if (!ret) {
+          return ret;
+        }
+
+        scopedWorkspaceIds.delete(workspaceId);
+
+        this.emit('change', [
+          {
+            deleted: workspace,
+          } as WorkspacesChangeEvent,
+        ]);
+      }
+      return true;
+    };
+
+    const clear = () => {
+      scopedWorkspaceIds.forEach(id => {
+        remove(id);
+      });
+    };
+
+    const update = (
+      workspaceId: string,
+      workspaceMeta: Partial<WorkspaceMeta>
+    ) => {
+      if (!scopedWorkspaceIds.has(workspaceId)) {
+        return true;
+      }
+
+      const workspace = this._workspacesMap.get(workspaceId);
+      if (!workspace) {
+        return true;
+      }
+
+      this._workspacesMap.set(workspaceId, { ...workspace, ...workspaceMeta });
+
+      this.emit('change', [
+        {
+          updated: this._workspacesMap.get(workspaceId),
+        } as WorkspacesChangeEvent,
+      ]);
+    };
+
+    // TODO: need to optimize
+    const list = () => {
+      const workspaces: Workspace[] = [];
+      scopedWorkspaceIds.forEach(id => {
+        const workspace = this._workspacesMap.get(id);
+        if (workspace) {
+          workspaces.push(workspace);
+        }
+      });
+      return workspaces;
+    };
+
+    return {
+      get,
+      list,
+      add,
+      remove,
+      clear,
+      update,
+    };
+  }
+}

packages/data-center/src/workspaces/workspaces.ts.bak

@@ -0,0 +1,101 @@
+import { Workspace as WS } from '../types';
+
+import { Observable } from 'lib0/observable';
+import { uuidv4 } from '@blocksuite/store';
+import { DataCenter } from '../datacenter';
+
+export class Workspaces extends Observable<string> {
+  private _workspaces: WS[];
+  private readonly _dc: DataCenter;
+
+  constructor(dc: DataCenter) {
+    super();
+    this._workspaces = [];
+    this._dc = dc;
+  }
+
+  public init() {
+    this._loadWorkspaces();
+  }
+
+  get workspaces() {
+    return this._workspaces;
+  }
+
+  /**
+   * emit when workspaces changed
+   * @param {(workspace: WS[]) => void} cb
+   */
+  onWorkspacesChange(cb: (workspace: WS[]) => void) {
+    this.on('change', cb);
+  }
+
+  private async _loadWorkspaces() {
+    const providers = this._dc.providers;
+    let workspaces: WS[] = [];
+    providers.forEach(async p => {
+      const pWorkspaces = await p.loadWorkspaces();
+      workspaces = [...workspaces, ...pWorkspaces];
+      this._updateWorkspaces([...workspaces, ...pWorkspaces]);
+    });
+  }
+
+  /**
+   * focus load all workspaces list
+   */
+  public async refreshWorkspaces() {
+    this._loadWorkspaces();
+  }
+
+  private _updateWorkspaces(workspaces: WS[]) {
+    this._workspaces = workspaces;
+    this.emit('change', this._workspaces);
+  }
+
+  private _getDefaultWorkspace(name: string): WS {
+    return {
+      name,
+      id: uuidv4(),
+      isPublish: false,
+      avatar: '',
+      owner: undefined,
+      isLocal: true,
+      memberCount: 1,
+      provider: 'local',
+    };
+  }
+
+  /** add a local workspaces */
+  public addLocalWorkspace(name: string) {
+    const workspace = this._getDefaultWorkspace(name);
+    this._updateWorkspaces([...this._workspaces, workspace]);
+    return workspace;
+  }
+
+  /** delete a workspaces by id */
+  public delete(id: string) {
+    const index = this._workspaces.findIndex(w => w.id === id);
+    if (index >= 0) {
+      this._workspaces.splice(index, 1);
+      this._updateWorkspaces(this._workspaces);
+    }
+  }
+
+  /** get workspace info by id */
+  public getWorkspace(id: string) {
+    return this._workspaces.find(w => w.id === id);
+  }
+
+  /** check if workspace exists */
+  public hasWorkspace(id: string) {
+    return this._workspaces.some(w => w.id === id);
+  }
+
+  public updateWorkspaceInfo(id: string, info: Partial<WS>) {
+    const index = this._workspaces.findIndex(w => w.id === id);
+    if (index >= 0) {
+      this._workspaces[index] = { ...this._workspaces[index], ...info };
+      this._updateWorkspaces(this._workspaces);
+    }
+  }
+}

packages/data-center/tests/cloud/auth.spec.ts

@@ -1,15 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-import { getDataCenter } from '../utils.js';
-
-import 'fake-indexeddb/auto';
-
-test.describe('Auth', () => {
-  test('sign in', async () => {});
-
-  test('sign out', async () => {});
-
-  test('isLogin', async () => {});
-
-  test('getUserInfo', async () => {});
-});

packages/data-center/tests/cloud/collaborate.spec.ts

@@ -1,15 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-import { getDataCenter } from '../utils.js';
-
-import 'fake-indexeddb/auto';
-
-test.describe('Collaborate', () => {
-  test('collaborate editor content', async () => {});
-
-  test('collaborate workspace name', async () => {});
-
-  test('collaborate workspace avatar', async () => {});
-
-  test('collaborate workspace list', async () => {});
-});

packages/data-center/tests/cloud/permission.spec.ts

@@ -1,17 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-import { getDataCenter } from '../utils.js';
-
-import 'fake-indexeddb/auto';
-
-test.describe('Permission', () => {
-  test('get the public of workspace', async () => {});
-
-  test('make workspace public', async () => {});
-
-  test('make workspace private', async () => {});
-
-  test('un-login user open the public workspace ', async () => {});
-
-  test('un-login user open the private workspace ', async () => {});
-});

packages/data-center/tests/cloud/share.spec.ts

@@ -1,15 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-import { getDataCenter } from '../utils.js';
-
-import 'fake-indexeddb/auto';
-
-test.describe('Share', () => {
-  test('add(invite) member by email', async () => {});
-
-  test('accept invite member link', async () => {});
-
-  test('members list', async () => {});
-
-  test('delete member', async () => {});
-});

packages/data-center/tests/cloud/sync.spec.ts

@@ -1,23 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-import { getDataCenter } from '../utils.js';
-
-import 'fake-indexeddb/auto';
-
-test.describe('Sync', () => {
-  test('get cloud the sync flag of workspace', async () => {});
-
-  test('enable [cloud sync feature]', async () => {});
-
-  test('close [cloud sync feature]', async () => {});
-
-  test('editor cloud storage', async () => {});
-
-  test('cloud sync is in-progress', async () => {});
-
-  test('cloud sync is completed', async () => {});
-
-  test('cloud sync is error', async () => {});
-
-  test('cloud storage is right', async () => {});
-});

packages/data-center/tests/local/attachment.spec.ts

@@ -1,13 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-import { getDataCenter } from '../utils.js';
-
-import 'fake-indexeddb/auto';
-
-test.describe('Attachment', () => {
-  test('upload blob', async () => {});
-
-  test('get blob', async () => {});
-
-  test('remove blob', async () => {});
-});

packages/data-center/tests/local/import-export.spec.ts

@@ -1,11 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-import { getDataCenter } from '../utils.js';
-
-import 'fake-indexeddb/auto';
-
-test.describe('Import/Export Workspace', () => {
-  test('import workspace', async () => {});
-
-  test('export workspace', async () => {});
-});

packages/data-center/tests/local/init.spec.ts

@@ -1,51 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-import { getDataCenter } from '../utils.js';
-
-import 'fake-indexeddb/auto';
-
-test.describe('Init Data Center', () => {
-  test('init', async () => {
-    const dataCenter = await getDataCenter();
-    expect(dataCenter).toBeTruthy();
-    await dataCenter.clear();
-
-    const workspace = await dataCenter.load('test1');
-    expect(workspace).toBeTruthy();
-  });
-
-  test('init singleton', async () => {
-    // data center is singleton
-    const [dc1, dc2] = await Promise.all([getDataCenter(), getDataCenter()]);
-    expect(dc1).toEqual(dc2);
-
-    // load same workspace will get same instance
-    const [ws1, ws2] = await Promise.all([
-      dc1.load('test1'),
-      dc2.load('test1'),
-    ]);
-    expect(ws1).toEqual(ws2);
-  });
-
-  test('should init error with unknown provider', async () => {
-    const dc = await getDataCenter();
-    await dc.clear();
-
-    // load workspace with unknown provider will throw error
-    test.fail();
-    await dc.load('test2', { providerId: 'not exist provider' });
-  });
-
-  test.skip('init affine provider', async () => {
-    const dataCenter = await getDataCenter();
-    await dataCenter.clear();
-
-    // load workspace with affine provider
-    // TODO: set constant token for testing
-    const workspace = await dataCenter.load('6', {
-      providerId: 'affine',
-      config: { token: 'YOUR_TOKEN' },
-    });
-    expect(workspace).toBeTruthy();
-  });
-});

packages/data-center/tests/local/search.spec.ts

@@ -1,26 +0,0 @@
-import assert from 'assert';
-import { test, expect } from '@playwright/test';
-
-import { getDataCenter, waitOnce } from '../utils.js';
-
-import 'fake-indexeddb/auto';
-
-test.describe('Search', () => {
-  test('search result', async () => {
-    const dc = await getDataCenter();
-    const workspace = await dc.load('test');
-
-    assert(workspace);
-    workspace.createPage('test');
-    await waitOnce(workspace.signals.pageAdded);
-    const page = workspace.getPage('test');
-    assert(page);
-
-    const text = new page.Text(page, 'hello world');
-    const blockId = page.addBlock({ flavour: 'affine:paragraph', text });
-
-    expect(workspace.search('hello')).toStrictEqual(
-      new Map([[blockId, 'test']])
-    );
-  });
-});

packages/data-center/tests/local/workspace.spec.ts

@@ -1,70 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-import { getDataCenter } from '../utils.js';
-
-import 'fake-indexeddb/auto';
-
-test.describe('Workspace', () => {
-  test('create', async () => {});
-
-  test('load', async () => {});
-
-  test('get workspace name', async () => {});
-  test('set workspace name', async () => {});
-
-  test('get workspace avatar', async () => {});
-  test('set workspace avatar', async () => {});
-
-  test('list', async () => {
-    const dataCenter = await getDataCenter();
-    await dataCenter.clear();
-
-    await Promise.all([
-      dataCenter.load('test3'),
-      dataCenter.load('test4'),
-      dataCenter.load('test5'),
-      dataCenter.load('test6'),
-    ]);
-
-    expect(await dataCenter.list()).toStrictEqual({
-      test3: { local: true },
-      test4: { local: true },
-      test5: { local: true },
-      test6: { local: true },
-    });
-
-    await dataCenter.reload('test3', { providerId: 'affine' });
-    expect(await dataCenter.list()).toStrictEqual({
-      test3: { affine: true },
-      test4: { local: true },
-      test5: { local: true },
-      test6: { local: true },
-    });
-  });
-
-  test('destroy', async () => {
-    const dataCenter = await getDataCenter();
-    await dataCenter.clear();
-
-    // return new workspace if origin workspace is destroyed
-    const ws1 = await dataCenter.load('test7');
-    await dataCenter.destroy('test7');
-    const ws2 = await dataCenter.load('test7');
-    expect(ws1 !== ws2).toBeTruthy();
-
-    // return new workspace if workspace is reload
-    const ws3 = await dataCenter.load('test8');
-    const ws4 = await dataCenter.reload('test8', { providerId: 'affine' });
-    expect(ws3 !== ws4).toBeTruthy();
-  });
-
-  test('remove', async () => {
-    const dataCenter = await getDataCenter();
-    await dataCenter.clear();
-
-    // remove workspace will remove workspace data
-    await Promise.all([dataCenter.load('test9'), dataCenter.load('test10')]);
-    await dataCenter.delete('test9');
-    expect(await dataCenter.list()).toStrictEqual({ test10: { local: true } });
-  });
-});

packages/data-center/tests/utils.ts

@@ -1,9 +0,0 @@
-import { Signal } from '@blocksuite/store';
-
-export const getDataCenter = async () => {
-  const dataCenter = await import('../src/index.js');
-  return await dataCenter.getDataCenter(false);
-};
-
-export const waitOnce = <T>(signal: Signal<T>) =>
-  new Promise<T>(resolve => signal.once(val => resolve(val)));

packages/data-center/tsconfig.json

@@ -21,5 +21,5 @@
     "outDir": "./dist"
   },
   "include": ["next-env.d.ts", "src/**/*.ts", "pages/**/*.tsx"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "src/provider/affine/sync.js"]
 }

tests/quick-search.spec.ts

@@ -7,10 +7,13 @@ loadPage();
 const openQuickSearchByShortcut = async (page: Page) =>
   await withCtrlOrMeta(page, () => page.keyboard.press('k', { delay: 50 }));
 
-async function assertTitleTexts(page: Page, texts: string[]) {
+async function assertTitleTexts(page: Page, texts: string) {
-  const actual = await page
+  const actual = await page.evaluate(() => {
-    .locator('.affine-default-page-block-title')
+    const titleElement = <HTMLTextAreaElement>(
-    .allTextContents();
+      document.querySelector('.affine-default-page-block-title')
+    );
+    return titleElement.value;
+  });
   expect(actual).toEqual(texts);
 }
 async function assertResultList(page: Page, texts: string[]) {
@@ -55,7 +58,7 @@ test.describe('Add new page in quick search', () => {
     const addNewPage = page.locator('[data-testid=quickSearch-addNewPage]');
     await addNewPage.click();
     await page.waitForTimeout(200);
-    await assertTitleTexts(page, ['']);
+    await assertTitleTexts(page, '');
   });
 
   test('Create a new page with keyword', async ({ page }) => {
@@ -65,7 +68,7 @@ test.describe('Add new page in quick search', () => {
     const addNewPage = page.locator('[data-testid=quickSearch-addNewPage]');
     await addNewPage.click();
     await page.waitForTimeout(200);
-    await assertTitleTexts(page, ['test123456']);
+    await assertTitleTexts(page, 'test123456');
   });
 });
 
@@ -81,6 +84,6 @@ test.describe('Search and select', () => {
     await page.keyboard.insertText('test123456');
     await assertResultList(page, ['test123456']);
     await page.keyboard.press('Enter', { delay: 50 });
-    await assertTitleTexts(page, ['test123456']);
+    await assertTitleTexts(page, 'test123456');
   });
 });

vitest.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    include: ['packages/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+  },
+});