v0.8.0-canary.11

Co-authored-by: QiShaoXuan <qishaoxuan777@gmail.com>

.codesandbox/task.json

@@ -10,7 +10,7 @@
   "tasks": {
     "start-web": {
       "name": "Start Web",
-      "command": "yarn nx dev @affine/web --port 8080",
+      "command": "yarn dev-core",
       "runAtStart": true,
       "preview": {
         "port": 8080

.commitlintrc.json

@@ -7,7 +7,7 @@
       [
         "electron",
         "server",
-        "web",
+        "core",
         "docs",
         "storybook",
         "component",
@@ -24,7 +24,8 @@
         "debug",
         "storage",
         "infra",
-        "plugin-infra"
+        "plugin-cli",
+        "sdk"
       ]
     ]
   }

.env.template

@@ -0,0 +1,11 @@
+ENABLE_PLUGIN=
+ENABLE_TEST_PROPERTIES=
+ENABLE_BC_PROVIDER=
+CHANGELOG_URL=
+ENABLE_PRELOADING=
+ENABLE_NEW_SETTING_MODAL=
+ENABLE_SQLITE_PROVIDER=
+ENABLE_NEW_SETTING_UNSTABLE_API=
+ENABLE_NOTIFICATION_CENTER=
+ENABLE_CLOUD=
+ENABLE_MOVE_DATABASE=

.eslintignore

@@ -9,3 +9,6 @@ lib
 .eslintrc.js
 packages/i18n/src/i18n-generated.ts
 e2e-dist-*
+static
+web-static
+public

.eslintrc.js

@@ -22,10 +22,15 @@ const createPattern = packageName => [
     allowTypeImports: false,
   },
   {
-    group: ['@blocksuite/store'],
+    group: ['@blocksuite  /store'],
     message: "Import from '@blocksuite/global/utils'",
     importNames: ['assertExists', 'assertEquals'],
   },
+  {
+    group: ['react-router-dom'],
+    message: 'Use `useNavigateHelper` instead',
+    importNames: ['useNavigate'],
+  },
 ];
 
 const allPackages = [
@@ -38,7 +43,8 @@ const allPackages = [
   'packages/i18n',
   'packages/jotai',
   'packages/native',
-  'packages/plugin-infra',
+  'packages/infra',
+  'packages/sdk',
   'packages/templates',
   'packages/theme',
   'packages/workspace',
@@ -144,6 +150,11 @@ const config = {
             message: "Import from '@blocksuite/global/utils'",
             importNames: ['assertExists', 'assertEquals'],
           },
+          {
+            group: ['react-router-dom'],
+            message: 'Use `useNavigateHelper` instead',
+            importNames: ['useNavigate'],
+          },
         ],
       },
     ],
@@ -203,6 +214,7 @@ const config = {
             ignoreIIFE: false,
           },
         ],
+        '@typescript-eslint/no-misused-promises': ['error'],
       },
     })),
     {
@@ -228,6 +240,7 @@ const config = {
           },
         ],
         '@typescript-eslint/no-floating-promises': 0,
+        '@typescript-eslint/no-misused-promises': 0,
       },
     },
   ],

.github/ISSUE_TEMPLATE/BUG-REPORT.yml

@@ -21,8 +21,8 @@ body:
       label: Distribution version
       description: What version of AFFiNE are you using?
       options:
-        - macOS x64
-        - macOS ARM 64
+        - macOS x64 (Intel)
+        - macOS ARM 64 (Apple Silicon)
         - Windows x64
         - Linux
         - Web (app.affine.pro)

.github/actions/setup-maker/action.yml

@@ -0,0 +1,16 @@
+name: Setup maker
+description: 'Setup maker dmg for electron'
+
+runs:
+  using: 'composite'
+  steps:
+    - name: 'Install @electron-forge/maker-dmg'
+      if: runner.os == 'macos'
+      shell: bash
+      working-directory: ./apps/electron
+      run: yarn add @electron-forge/maker-dmg --dev
+      env:
+        HUSKY: '0'
+        PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'
+        ELECTRON_SKIP_BINARY_DOWNLOAD: '1'
+        SENTRYCLI_SKIP_DOWNLOAD: '1'

.github/actions/setup-node/action.yml

@@ -17,10 +17,6 @@ inputs:
     description: 'Download the Electron binary'
     required: false
     default: 'true'
-  npm-token:
-    description: 'The NPM token to use for private packages.'
-    required: false
-    default: ''
   hard-link-nm:
     description: 'set nmMode to hardlinks-local in .yarnrc.yml'
     required: false
@@ -48,20 +44,20 @@ runs:
       shell: bash
       run: yarn install ${{ inputs.extra-flags }}
       env:
-        NODE_AUTH_TOKEN: ${{ inputs.npm-token }}
         HUSKY: '0'
         PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'
         ELECTRON_SKIP_BINARY_DOWNLOAD: '1'
+        SENTRYCLI_SKIP_DOWNLOAD: '1'
 
     - name: yarn install (try again)
       if: ${{ steps.install.outcome == 'failure' }}
       shell: bash
       run: yarn install ${{ inputs.extra-flags }}
       env:
-        NODE_AUTH_TOKEN: ${{ inputs.npm-token }}
         HUSKY: '0'
         PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'
         ELECTRON_SKIP_BINARY_DOWNLOAD: '1'
+        SENTRYCLI_SKIP_DOWNLOAD: '1'
 
     - name: Get installed Playwright version
       id: playwright-version

.github/actions/setup-sentry/action.yml

@@ -0,0 +1,13 @@
+name: Setup @sentry/cli
+description: 'Setup @sentry/cli'
+runs:
+  using: 'composite'
+  steps:
+    - name: 'Install @sentry/cli from brew'
+      if: runner.os == 'macos'
+      shell: bash
+      run: brew install getsentry/tools/sentry-cli
+    - name: 'Install @sentry/cli from npm'
+      if: runner.os != 'macos'
+      shell: bash
+      run: sudo npm install -g @sentry/cli --unsafe-perm

.github/deployment/front/Dockerfile

@@ -1,6 +1,6 @@
 FROM openresty/openresty:1.21.4.1-0-buster
 WORKDIR /app
-COPY ./apps/web/out ./dist
+COPY ./apps/core/dist ./dist
 COPY ./.github/deployment/front/nginx.conf /usr/local/openresty/nginx/conf/nginx.conf
 COPY ./.github/deployment/front/affine.nginx.conf /etc/nginx/conf.d/affine.nginx.conf
 

.github/labeler.yml

@@ -22,8 +22,14 @@ plugin:bookmark-block:
 plugin:copilot:
   - 'plugins/copilot/**/*'
 
-mod:plugin-infra:
-  - 'packages/plugin-infra/**/*'
+mod:infra:
+  - 'packages/infra/**/*'
+
+mod:sdk:
+  - 'packages/sdk/**/*'
+
+mod:plugin-cli:
+  - 'packages/plugin-cli/**/*'
 
 mod:workspace: 'packages/workspace/**/*'
 
@@ -53,7 +59,7 @@ rust:
 
 package:y-indexeddb: 'packages/y-indexeddb/**/*'
 
-app:web: 'apps/web/**/*'
+app:core: 'apps/core/**/*'
 
 app:electron: 'apps/electron/**/*'
 

.github/workflows/build.yml

@@ -47,8 +47,6 @@ jobs:
           electron-install: false
       - name: Run i18n codegen
         run: yarn i18n-codegen gen
-      - name: Run Type Check
-        run: yarn typecheck
       - name: Run ESLint
         run: yarn lint:eslint --max-warnings=0
       - name: Run Prettier
@@ -58,6 +56,21 @@ jobs:
           yarn lint:prettier
       - name: Run circular
         run: yarn circular
+      - name: Run Type Check
+        run: yarn typecheck
+
+  build-server:
+    name: Build Server
+    runs-on: ubuntu-latest
+    environment: development
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: ./.github/actions/setup-node
+        with:
+          electron-install: false
+      - name: Build Server
+        run: yarn nx build @affine/server
       - name: Upload server dist
         uses: actions/upload-artifact@v3
         with:
@@ -101,8 +114,8 @@ jobs:
           path: ./apps/storybook/storybook-static
           if-no-files-found: error
 
-  build-web:
-    name: Build @affine/web
+  build-core:
+    name: Build @affine/core
     runs-on: ubuntu-latest
     environment: development
 
@@ -110,19 +123,44 @@ jobs:
       - uses: actions/checkout@v3
       - name: Setup Node.js
         uses: ./.github/actions/setup-node
-      - name: Build Web
-        run: yarn nx build @affine/web
-      - name: Upload artifact
+      - name: Build Plugins
+        run: yarn run build:plugins
+      - name: Build Core
+        run: yarn nx build @affine/core
+      - name: Upload core artifact
         uses: actions/upload-artifact@v3
         with:
-          name: next-js-static
-          path: ./apps/web/out
+          name: core
+          path: ./apps/core/dist
+          if-no-files-found: error
+
+  build-storage:
+    name: Build Storage
+    runs-on: ubuntu-latest
+    environment: development
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: ./.github/actions/setup-node
+      - name: Setup Rust
+        uses: ./.github/actions/setup-rust
+        with:
+          target: 'x86_64-unknown-linux-gnu'
+      - name: Build Storage
+        run: yarn build:storage
+      - name: Upload storage.node
+        uses: actions/upload-artifact@v3
+        with:
+          name: storage.node
+          path: ./packages/storage/storage.node
           if-no-files-found: error
 
   server-test:
     name: Server Test
     runs-on: ubuntu-latest
     environment: development
+    needs: build-storage
     services:
       postgres:
         image: postgres
@@ -158,24 +196,17 @@ jobs:
         working-directory: apps/server
         env:
           DATABASE_URL: postgresql://affine:affine@localhost:5432/affine
-      - name: Setup Rust
-        uses: ./.github/actions/setup-rust
+      - name: Download storage.node
+        uses: actions/download-artifact@v3
         with:
-          target: 'x86_64-unknown-linux-gnu'
-      - name: Build Storage
-        run: yarn build:storage
+          name: storage.node
+          path: ./apps/server
       - name: Run server tests
         run: yarn test:coverage
         working-directory: apps/server
         env:
           CARGO_TARGET_DIR: '${{ github.workspace }}/target'
           DATABASE_URL: postgresql://affine:affine@localhost:5432/affine
-      - name: Upload storage.node
-        uses: actions/upload-artifact@v3
-        with:
-          name: storage.node
-          path: ./packages/storage/storage.node
-          if-no-files-found: error
       - name: Upload server test coverage results
         uses: codecov/codecov-action@v3
         with:
@@ -207,6 +238,48 @@ jobs:
         run: |
           yarn exec concurrently -k -s first -n "SB,TEST" -c "magenta,blue" "yarn exec serve ./storybook-static -l 6006" "yarn exec wait-on tcp:6006 && yarn test"
 
+  e2e-plugin-test:
+    name: E2E Plugin Test
+    runs-on: ubuntu-latest
+    environment: development
+    needs: build-core
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: ./.github/actions/setup-node
+        with:
+          playwright-install: true
+          electron-install: false
+      - name: Download core artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: core
+          path: ./apps/core/dist
+      - name: Run playwright tests
+        run: yarn e2e --forbid-only
+        working-directory: tests/affine-plugin
+        env:
+          COVERAGE: true
+      - name: Collect code coverage report
+        run: yarn exec nyc report -t .nyc_output --report-dir .coverage --reporter=lcov
+
+      - name: Upload e2e test coverage results
+        uses: codecov/codecov-action@v3
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./.coverage/lcov.info
+          flags: e2e-plugin-test
+          name: affine
+          fail_ci_if_error: false
+
+      - name: Upload test results
+        if: ${{ failure() }}
+        uses: actions/upload-artifact@v3
+        with:
+          name: test-results-e2e-plugin
+          path: ./test-results
+          if-no-files-found: ignore
+
   e2e-test:
     name: E2E Test
     runs-on: ubuntu-latest
@@ -215,7 +288,7 @@ jobs:
       matrix:
         shard: [1, 2, 3, 4, 5]
     environment: development
-    needs: build-web
+    needs: build-core
 
     steps:
       - uses: actions/checkout@v3
@@ -224,11 +297,11 @@ jobs:
         with:
           playwright-install: true
           electron-install: false
-      - name: Download artifact
+      - name: Download core artifact
         uses: actions/download-artifact@v3
         with:
-          name: next-js-static
-          path: ./apps/web/out
+          name: core
+          path: ./apps/core/dist
 
       - name: Run playwright tests
         run: yarn e2e --forbid-only --shard=${{ matrix.shard }}/${{ strategy.job-total }}
@@ -260,8 +333,12 @@ jobs:
     name: E2E Migration Test
     runs-on: ubuntu-latest
     environment: development
-    needs: [build-web]
-
+    needs: build-core
+    strategy:
+      matrix:
+        spec:
+          - { package: 0.7.0-canary.18 }
+          - { package: 0.8.0-canary.7 }
     steps:
       - uses: actions/checkout@v3
       - name: Setup Node.js
@@ -270,30 +347,26 @@ jobs:
           playwright-install: true
           electron-install: false
 
-      - name: Download next static
+      - name: Download core artifact
         uses: actions/download-artifact@v3
         with:
-          name: next-js-static
-          path: ./apps/web/out
+          name: core
+          path: ./apps/core/dist
 
       - name: Unzip
         run: yarn unzip
-        working-directory: ./tests/affine-legacy/0.7.0-canary.18
+        working-directory: ./tests/affine-legacy/${{ matrix.spec.package }}
 
-      - name: Run legacy playwright tests
+      - name: Run playwright tests
         run: yarn e2e --forbid-only
-        working-directory: ./tests/affine-legacy/0.7.0-canary.18
-
-      - name: Run vitest
-        run: yarn test
-        working-directory: ./tests/affine-legacy/0.7.0-canary.18
+        working-directory: ./tests/affine-legacy/${{ matrix.spec.package }}
 
       - name: Upload test results
         if: ${{ failure() }}
         uses: actions/upload-artifact@v3
         with:
-          name: test-results-e2e-migration
-          path: ./tests/affine-legacy/0.7.0-canary.18/test-results
+          name: test-results-e2e-migration-${{ matrix.spec.package }}
+          path: ./tests/affine-legacy/${{ matrix.spec.package }}/test-results
           if-no-files-found: ignore
 
   desktop-test:
@@ -333,11 +406,12 @@ jobs:
               target: x86_64-pc-windows-msvc,
               test: true,
             }
-    needs: [build-web]
+    needs: build-core
     steps:
       - uses: actions/checkout@v3
       - name: Setup Node.js
         uses: ./.github/actions/setup-node
+        timeout-minutes: 10
         with:
           playwright-install: true
           hard-link-nm: false
@@ -349,14 +423,13 @@ jobs:
       - name: Run unit tests
         if: ${{ matrix.spec.test }}
         shell: bash
-        run: yarn nx test @affine/monorepo
-        env:
-          NATIVE_TEST: 'true'
+        run: yarn vitest
+        working-directory: ./apps/electron
 
-      - name: Download static resource artifact
+      - name: Download core artifact
         uses: actions/download-artifact@v3
         with:
-          name: next-js-static
+          name: core
           path: apps/electron/resources/web-static
 
       - name: Build Plugins
@@ -365,6 +438,12 @@ jobs:
       - name: Build Desktop Layers
         run: yarn workspace @affine/electron build
 
+      - name: Upload desktop dist
+        uses: actions/upload-artifact@v3
+        with:
+          name: dist-${{ matrix.spec.platform }}-${{ matrix.spec.arch }}
+          path: ./apps/electron/dist
+
       - name: Run desktop tests
         if: ${{ matrix.spec.test && matrix.spec.os == 'ubuntu-latest' }}
         run: xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- yarn workspace @affine/electron test
@@ -379,12 +458,13 @@ jobs:
 
       - name: Make bundle
         if: ${{ matrix.spec.os == 'macos-latest' && matrix.spec.arch == 'arm64' }}
+        env:
+          SKIP_BUNDLE: true
         run: yarn workspace @affine/electron make --platform=darwin --arch=arm64
 
       - name: Bundle output check
         if: ${{ matrix.spec.os == 'macos-latest' && matrix.spec.arch == 'arm64' }}
         run: |
-          ./scripts/unzip-macos-arm64.sh
           yarn ts-node-esm ./scripts/macos-arm64-output-check.mts
         working-directory: apps/electron
 
@@ -436,18 +516,18 @@ jobs:
   build-docker:
     if: github.ref == 'refs/heads/master'
     name: Build Docker
-    needs:
-      - lint
-      - desktop-test
-      - server-test
     runs-on: ubuntu-latest
+    needs:
+      - build-server
+      - build-core
+      - build-storage
     steps:
       - uses: actions/checkout@v3
-      - name: Download next static
+      - name: Download core artifact
         uses: actions/download-artifact@v3
         with:
-          name: next-js-static
-          path: ./apps/web/out
+          name: core
+          path: ./apps/core/dist
       - name: Download server dist
         uses: actions/download-artifact@v3
         with:

.github/workflows/cancel.yml

@@ -14,5 +14,5 @@ jobs:
       - uses: styfle/cancel-workflow-action@0.11.0
         with:
           # See https://api.github.com/repos/toeverything/AFFiNE/actions/workflows
-          workflow_id: 44038251, 61883931
+          workflow_id: 44038251, 61883931, 65188160
           access_token: ${{ github.token }}

.github/workflows/dependabot.yml

@@ -0,0 +1,9 @@
+version: 2
+updates:
+  - package-ecosystem: 'npm'
+    directory: '/'
+    schedule:
+      interval: 'daily'
+    versioning-strategy: increase
+    commit-message:
+      prefix: 'chore'

.github/workflows/nightly-build.yml

@@ -34,7 +34,7 @@ jobs:
     runs-on: ubuntu-latest
     environment: production
     outputs:
-      version: 0.0.0-${{ steps.version.outputs.version }}
+      version: 0.0.0-internal.${{ steps.version.outputs.version }}
     steps:
       - uses: actions/checkout@v3
       - uses: toeverything/set-build-version@latest
@@ -50,6 +50,8 @@ jobs:
       - uses: actions/checkout@v3
       - name: Setup Node.js
         uses: ./.github/actions/setup-node
+      - name: Setup @sentry/cli
+        uses: ./.github/actions/setup-sentry
       - name: Replace Version
         run: ./scripts/set-version.sh ${{ needs.set-build-version.outputs.version }}
       - name: generate-assets
@@ -62,10 +64,10 @@ jobs:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           RELEASE_VERSION: ${{ needs.set-build-version.outputs.version }}
 
-      - name: Upload Artifact (web-static)
+      - name: Upload core artifact
         uses: actions/upload-artifact@v3
         with:
-          name: before-make-web-static
+          name: core
           path: apps/electron/resources/web-static
 
   make-distribution:
@@ -110,7 +112,11 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Setup Node.js
+        timeout-minutes: 10
         uses: ./.github/actions/setup-node
+      - name: Setup Maker
+        timeout-minutes: 10
+        uses: ./.github/actions/setup-maker
       - name: Build AFFiNE native
         uses: ./.github/actions/build-rust
         with:
@@ -120,7 +126,7 @@ jobs:
         run: ./scripts/set-version.sh ${{ needs.set-build-version.outputs.version }}
       - uses: actions/download-artifact@v3
         with:
-          name: before-make-web-static
+          name: core
           path: apps/electron/resources/web-static
 
       - name: Build Plugins
@@ -159,6 +165,7 @@ jobs:
         run: |
           mkdir -p builds
           mv apps/electron/out/*/make/zip/linux/x64/*.zip ./builds/affine-${{ env.BUILD_TYPE }}-linux-x64.zip
+          mv apps/electron/out/*/make/AppImage/x64/*.AppImage ./builds/affine-${{ env.BUILD_TYPE }}-linux-x64.AppImage
 
       - name: Upload Artifact
         uses: actions/upload-artifact@v3

.github/workflows/release-desktop-app.yml

@@ -47,6 +47,8 @@ jobs:
       - uses: actions/checkout@v3
       - name: Setup Node.js
         uses: ./.github/actions/setup-node
+      - name: Setup @sentry/cli
+        uses: ./.github/actions/setup-sentry
       - name: Get canary version
         id: get-canary-version
         if: ${{ github.ref_type == 'tag' }}
@@ -66,10 +68,10 @@ jobs:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           RELEASE_VERSION: ${{ github.event.inputs.version || steps.get-canary-version.outputs.RELEASE_VERSION }}
 
-      - name: Upload Artifact (web-static)
+      - name: Upload core artifact
         uses: actions/upload-artifact@v3
         with:
-          name: before-make-web-static
+          name: core
           path: apps/electron/resources/web-static
 
   make-distribution:
@@ -112,7 +114,11 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Setup Node.js
+        timeout-minutes: 10
         uses: ./.github/actions/setup-node
+      - name: Setup Maker
+        timeout-minutes: 10
+        uses: ./.github/actions/setup-maker
       - name: Build AFFiNE native
         uses: ./.github/actions/build-rust
         with:
@@ -120,7 +126,7 @@ jobs:
           nx_token: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
       - uses: actions/download-artifact@v3
         with:
-          name: before-make-web-static
+          name: core
           path: apps/electron/resources/web-static
 
       - name: Build Plugins
@@ -159,6 +165,7 @@ jobs:
         run: |
           mkdir -p builds
           mv apps/electron/out/*/make/zip/linux/x64/*.zip ./builds/affine-${{ env.BUILD_TYPE }}-linux-x64.zip
+          mv apps/electron/out/*/make/AppImage/x64/*.AppImage ./builds/affine-${{ env.BUILD_TYPE }}-linux-x64.AppImage
 
       - name: Upload Artifact
         uses: actions/upload-artifact@v3

.gitignore

@@ -13,6 +13,7 @@
 /out-tsc
 .nyc_output
 .coverage
+.swc
 
 # dependencies
 node_modules

.prettierignore

@@ -12,3 +12,5 @@ tests/affine-legacy/0.7.0-canary.18/static
 .github/helm
 _next
 storybook-static
+web-static
+public

README.md

@@ -14,15 +14,6 @@
 </div>
 
 <div align="center">
-<!--
-Make New Badge Pattern badges inline
-See https://github.com/all-?/all-contributors/issues/361#issuecomment-637166066
--->
-<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-
-[all-contributors-badge]: https://img.shields.io/badge/all_contributors-66-orange.svg?style=flat-square
-
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [![AFFiNE Web](<https://img.shields.io/badge/-Try%20It%20Online%20%E2%86%92-rgb(84,56,255)?style=flat-square&logoColor=white&logo=affine>)](https://app.affine.pro)
 [![AFFiNE macOS M1/M2 Chip](https://img.shields.io/badge/-macOS_M_Chip%20%E2%86%92-black?style=flat-square&logo=apple&logoColor=white)](https://affine.pro/download)
@@ -39,6 +30,7 @@ See https://github.com/all-?/all-contributors/issues/361#issuecomment-637166066
 [![React-version-icon]](https://reactjs.org/)
 [![blocksuite-icon]](https://github.com/toeverything/blocksuite)
 [![Rust-version-icon]](https://www.rust-lang.org/)
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Ftoeverything%2FAFFiNE.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Ftoeverything%2FAFFiNE?ref=badge_shield)
 
 </div>
 
@@ -126,10 +118,11 @@ If you have questions, you are welcome to contact us. One of the best places to
 >
 > (Currently, plugins are under heavy development, and the SDK is not yet available.)
 
-| Name                                             |                                           |
-| ------------------------------------------------ | ----------------------------------------- |
-| [@affine/bookmark-block](plugins/bookmark-block) | A block for bookmarking a website         |
-| [@affine/copilot](plugins/copilot)               | AI Copilot that help you document writing |
+| Official Plugin                                       | Description                               |
+| ----------------------------------------------------- | ----------------------------------------- |
+| [@affine/bookmark-plugin](plugins/bookmark)           | A block for bookmarking a website         |
+| [@affine/copilot-plugin](plugins/copilot)             | AI Copilot that help you document writing |
+| [@affine/image-preview-plugin](plugins/image-preview) | Component for previewing an image         |
 
 ## Thanks
 
@@ -190,6 +183,7 @@ See [docs/contributing/tutorial.md](./docs/contributing/tutorial.md) for details
 
 See [LICENSE] for details.
 
+[all-contributors-badge]: https://img.shields.io/github/all-contributors/toeverything/AFFiNE/master?color=orange
 [license]: ./LICENSE
 [building.md]: ./docs/BUILDING.md
 [these people]: https://twitter.com/AffineOfficial/followers
@@ -197,10 +191,12 @@ See [LICENSE] for details.
 [jobs available]: ./docs/jobs.md
 [latest packages]: https://github.com/toeverything/AFFiNE/pkgs/container/affine-self-hosted
 [contributor license agreement]: https://github.com/toeverything/affine/edit/master/.github/CLA.md
-[rust-version-icon]: https://img.shields.io/badge/Rust-1.70.0-dea584
+[rust-version-icon]: https://img.shields.io/badge/Rust-1.71.0-dea584
 [stars-icon]: https://img.shields.io/github/stars/toeverything/AFFiNE.svg?style=flat&logo=github&colorB=red&label=stars
 [codecov]: https://codecov.io/gh/toeverything/affine/branch/master/graphs/badge.svg?branch=master
 [node-version-icon]: https://img.shields.io/badge/node-%3E=18.16.1-success
 [typescript-version-icon]: https://img.shields.io/github/package-json/dependency-version/toeverything/affine/dev/typescript
-[react-version-icon]: https://img.shields.io/github/package-json/dependency-version/toeverything/AFFiNE/react?filename=apps%2Fweb%2Fpackage.json&color=rgb(97%2C228%2C251)
-[blocksuite-icon]: https://img.shields.io/github/package-json/dependency-version/toeverything/AFFiNE/@blocksuite/store?color=6880ff&filename=apps%2Fweb%2Fpackage.json&label=blocksuite
+[react-version-icon]: https://img.shields.io/github/package-json/dependency-version/toeverything/AFFiNE/react?filename=apps%2Fcore%2Fpackage.json&color=rgb(97%2C228%2C251)
+[blocksuite-icon]: https://img.shields.io/github/package-json/dependency-version/toeverything/AFFiNE/@blocksuite/store?color=6880ff&filename=apps%2Fcore%2Fpackage.json&label=blocksuite
+
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Ftoeverything%2FAFFiNE.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Ftoeverything%2FAFFiNE?ref=badge_large)

apps/README.md

@@ -20,6 +20,6 @@ Server using [Nest.js](https://nestjs.com/).
 
 Storybook using [Storybook](https://storybook.js.org/).
 
-## web
+## Core
 
 AFFiNE Core Application using [React.js](https://reactjs.org/).

apps/core/.webpack/cache-group.ts

@@ -0,0 +1,82 @@
+function testPackageName(regexp: RegExp): (module: any) => boolean {
+  return (module: any) =>
+    module.nameForCondition && regexp.test(module.nameForCondition());
+}
+
+export const productionCacheGroups = {
+  asyncVendor: {
+    test: /[\\/]node_modules[\\/]/,
+    name(module: any) {
+      // https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758
+      const name = module.context.match(
+        /[\\/]node_modules[\\/](.*?)([\\/]|$)/
+      )?.[1];
+      return `npm-async-${name}`;
+    },
+    priority: Number.MAX_SAFE_INTEGER,
+    chunks: 'async' as const,
+  },
+  mui: {
+    name: `npm-mui`,
+    test: testPackageName(/[\\/]node_modules[\\/](mui|@mui)[\\/]/),
+    priority: 200,
+    enforce: true,
+  },
+  blocksuite: {
+    name: `npm-blocksuite`,
+    test: testPackageName(/[\\/]node_modules[\\/](@blocksuite)[\\/]/),
+    priority: 200,
+    enforce: true,
+  },
+  react: {
+    name: `npm-react`,
+    test: testPackageName(
+      /[\\/]node_modules[\\/](react|react-dom|scheduler)[\\/]/
+    ),
+    priority: 200,
+    enforce: true,
+  },
+  jotai: {
+    name: `npm-jotai`,
+    test: testPackageName(/[\\/]node_modules[\\/](jotai)[\\/]/),
+    priority: 200,
+    enforce: true,
+  },
+  rxjs: {
+    name: `npm-rxjs`,
+    test: testPackageName(/[\\/]node_modules[\\/]rxjs[\\/]/),
+    priority: 200,
+    enforce: true,
+  },
+  lodash: {
+    name: `npm-lodash`,
+    test: testPackageName(/[\\/]node_modules[\\/]lodash[\\/]/),
+    priority: 200,
+    enforce: true,
+  },
+  emotion: {
+    name: `npm-emotion`,
+    test: testPackageName(/[\\/]node_modules[\\/](@emotion)[\\/]/),
+    priority: 200,
+    enforce: true,
+  },
+  vendor: {
+    name: 'vendor',
+    test: /[\\/]node_modules[\\/]/,
+    priority: 190,
+    enforce: true,
+  },
+  styles: {
+    name: 'styles',
+    test: (module: any) =>
+      module.nameForCondition &&
+      /\.css$/.test(module.nameForCondition()) &&
+      !/^javascript/.test(module.type),
+    chunks: 'all' as const,
+    minSize: 1,
+    minChunks: 1,
+    reuseExistingChunk: true,
+    priority: 1000,
+    enforce: true,
+  },
+};

apps/core/.webpack/config.ts

@@ -0,0 +1,363 @@
+import { join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+import type { Configuration as DevServerConfiguration } from 'webpack-dev-server';
+import { PerfseePlugin } from '@perfsee/webpack';
+import { sentryWebpackPlugin } from '@sentry/webpack-plugin';
+
+import CopyPlugin from 'copy-webpack-plugin';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+import webpack from 'webpack';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+
+import { productionCacheGroups } from './cache-group.js';
+import type { BuildFlags } from '@affine/cli/config';
+import { projectRoot } from '@affine/cli/config';
+import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
+import { computeCacheKey } from './utils.js';
+import type { RuntimeConfig } from '@affine/env/global';
+
+const IN_CI = !!process.env.CI;
+
+export const rootPath = fileURLToPath(new URL('..', import.meta.url));
+
+const require = createRequire(rootPath);
+
+const OptimizeOptionOptions: (
+  buildFlags: BuildFlags
+) => webpack.Configuration['optimization'] = buildFlags => ({
+  minimize: buildFlags.mode === 'production',
+  minimizer: [
+    new TerserPlugin({
+      minify: TerserPlugin.swcMinify,
+      exclude: [/plugins\/.+\/.+\.js$/, /plugins\/.+\/.+\.mjs$/],
+      parallel: true,
+      extractComments: true,
+      terserOptions: {
+        ecma: 2020,
+        compress: {
+          unused: true,
+        },
+        mangle: true,
+      },
+    }),
+  ],
+  removeEmptyChunks: true,
+  providedExports: true,
+  usedExports: true,
+  sideEffects: true,
+  removeAvailableModules: true,
+  runtimeChunk: {
+    name: 'runtime',
+  },
+  splitChunks: {
+    chunks: 'all',
+    minSize: 1,
+    minChunks: 1,
+    maxInitialRequests: Number.MAX_SAFE_INTEGER,
+    maxAsyncRequests: Number.MAX_SAFE_INTEGER,
+    cacheGroups:
+      buildFlags.mode === 'production'
+        ? productionCacheGroups
+        : {
+            default: false,
+            vendors: false,
+          },
+  },
+});
+
+export const createConfiguration: (
+  buildFlags: BuildFlags,
+  runtimeConfig: RuntimeConfig
+) => webpack.Configuration = (buildFlags, runtimeConfig) => {
+  let publicPath = process.env.PUBLIC_PATH ?? '/';
+
+  const cacheKey = computeCacheKey(buildFlags);
+
+  const config = {
+    name: 'affine',
+    // to set a correct base path for the source map
+    context: projectRoot,
+    experiments: {
+      topLevelAwait: true,
+      outputModule: false,
+    },
+    output: {
+      environment: {
+        module: true,
+        dynamicImport: true,
+      },
+      filename:
+        buildFlags.mode === 'production'
+          ? 'js/[name]-[contenthash:8].js'
+          : 'js/[name].js',
+      // In some cases webpack will emit files starts with "_" which is reserved in web extension.
+      chunkFilename: 'js/chunk.[name].js',
+      assetModuleFilename: 'assets/[contenthash:8][ext][query]',
+      devtoolModuleFilenameTemplate: 'webpack://[namespace]/[resource-path]',
+      hotUpdateChunkFilename: 'hot/[id].[fullhash].js',
+      hotUpdateMainFilename: 'hot/[runtime].[fullhash].json',
+      path: join(rootPath, 'dist'),
+      clean: buildFlags.mode === 'production',
+      globalObject: 'globalThis',
+      publicPath,
+    },
+    target: ['web', 'es2022'],
+
+    mode: buildFlags.mode,
+
+    devtool:
+      buildFlags.mode === 'production'
+        ? buildFlags.distribution === 'desktop'
+          ? 'nosources-source-map'
+          : 'source-map'
+        : 'eval-cheap-module-source-map',
+
+    resolve: {
+      symlinks: true,
+      extensionAlias: {
+        '.js': ['.js', '.tsx', '.ts'],
+        '.mjs': ['.mjs', '.mts'],
+      },
+      extensions: ['.js', '.ts', '.tsx'],
+    },
+
+    cache: {
+      type: 'filesystem',
+      buildDependencies: {
+        config: [fileURLToPath(import.meta.url)],
+      },
+      version: cacheKey,
+    },
+
+    module: {
+      parser: {
+        javascript: {
+          // Do not mock Node.js globals
+          node: false,
+          requireJs: false,
+          import: true,
+          // Treat as missing export as error
+          strictExportPresence: true,
+        },
+      },
+      rules: [
+        {
+          test: /\.m?js?$/,
+          enforce: 'pre',
+          use: [
+            {
+              loader: require.resolve('source-map-loader'),
+              options: {
+                filterSourceMappingUrl: (
+                  _url: string,
+                  resourcePath: string
+                ) => {
+                  return resourcePath.includes('@blocksuite');
+                },
+              },
+            },
+          ],
+          resolve: {
+            fullySpecified: false,
+          },
+        },
+        {
+          oneOf: [
+            {
+              test: /\.tsx?$/,
+              // Compile all ts files in the workspace
+              include: resolve(rootPath, '..', '..'),
+              loader: require.resolve('swc-loader'),
+              options: {
+                // https://swc.rs/docs/configuring-swc/
+                jsc: {
+                  preserveAllComments: true,
+                  parser: {
+                    syntax: 'typescript',
+                    dynamicImport: true,
+                    topLevelAwait: false,
+                    tsx: true,
+                  },
+                  target: 'es2022',
+                  externalHelpers: true,
+                  transform: {
+                    react: {
+                      runtime: 'automatic',
+                      refresh: buildFlags.mode === 'development' && {
+                        refreshReg: '$RefreshReg$',
+                        refreshSig: '$RefreshSig$',
+                        emitFullSignatures: true,
+                      },
+                    },
+                  },
+                  experimental: {
+                    keepImportAssertions: true,
+                    plugins: [
+                      buildFlags.coverage && [
+                        'swc-plugin-coverage-instrument',
+                        {},
+                      ],
+                    ].filter(Boolean),
+                  },
+                },
+              },
+            },
+            {
+              test: /\.svg$/,
+              use: [
+                'thread-loader',
+                {
+                  loader: '@svgr/webpack',
+                  options: {
+                    icon: true,
+                  },
+                },
+              ],
+              exclude: [/node_modules/],
+            },
+            {
+              test: /\.(png|jpg|gif|svg|webp)$/,
+              type: 'asset/resource',
+            },
+            {
+              test: /\.(ttf|eot|woff|woff2)$/,
+              type: 'asset/resource',
+            },
+            {
+              test: /\.txt$/,
+              loader: 'raw-loader',
+            },
+            {
+              test: /\.css$/,
+              use: [
+                buildFlags.mode === 'development'
+                  ? 'style-loader'
+                  : MiniCssExtractPlugin.loader,
+                {
+                  loader: 'css-loader',
+                  options: {
+                    url: false,
+                    sourceMap: false,
+                    modules: false,
+                    import: true,
+                    importLoaders: 1,
+                  },
+                },
+                {
+                  loader: 'postcss-loader',
+                  options: {
+                    postcssOptions: {
+                      config: resolve(
+                        rootPath,
+                        '.webpack',
+                        'postcss.config.cjs'
+                      ),
+                    },
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+
+    plugins: [
+      ...(IN_CI ? [] : [new webpack.ProgressPlugin({ percentBy: 'entries' })]),
+      ...(buildFlags.mode === 'development'
+        ? [new ReactRefreshWebpackPlugin({ overlay: false, esModule: true })]
+        : [
+            new MiniCssExtractPlugin({
+              filename: `[name].[contenthash:8].css`,
+              ignoreOrder: true,
+            }),
+          ]),
+      new VanillaExtractPlugin(),
+      new webpack.DefinePlugin({
+        'process.env': JSON.stringify({}),
+        'process.env.COVERAGE': JSON.stringify(!!buildFlags.coverage),
+        'process.env.NODE_ENV': JSON.stringify(buildFlags.mode),
+        runtimeConfig: JSON.stringify(runtimeConfig),
+      }),
+      new CopyPlugin({
+        patterns: [
+          {
+            from: resolve(rootPath, 'public'),
+            to: resolve(rootPath, 'dist'),
+          },
+        ],
+      }),
+    ],
+
+    optimization: OptimizeOptionOptions(buildFlags),
+
+    devServer: {
+      hot: 'only',
+      liveReload: true,
+      client: undefined,
+      historyApiFallback: true,
+      static: {
+        directory: resolve(rootPath, 'public'),
+        publicPath: '/',
+        watch: true,
+      },
+    } as DevServerConfiguration,
+  } satisfies webpack.Configuration;
+
+  if (buildFlags.mode === 'production' && process.env.PERFSEE_TOKEN) {
+    config.devtool = 'hidden-nosources-source-map';
+    config.plugins.push(
+      new PerfseePlugin({
+        project: 'affine-toeverything',
+      })
+    );
+  }
+
+  if (buildFlags.mode === 'development') {
+    config.optimization = {
+      ...config.optimization,
+      minimize: false,
+      runtimeChunk: false,
+      splitChunks: {
+        maxInitialRequests: Infinity,
+        chunks: 'all',
+        cacheGroups: {
+          defaultVendors: {
+            test: `[\\/]node_modules[\\/](?!.*vanilla-extract)`,
+            priority: -10,
+            reuseExistingChunk: true,
+          },
+          default: {
+            minChunks: 2,
+            priority: -20,
+            reuseExistingChunk: true,
+          },
+          styles: {
+            name: 'styles',
+            type: 'css/mini-extract',
+            chunks: 'all',
+            enforce: true,
+          },
+        },
+      },
+    };
+  }
+
+  if (
+    process.env.SENTRY_AUTH_TOKEN &&
+    process.env.SENTRY_ORG &&
+    process.env.SENTRY_PROJECT
+  ) {
+    config.plugins.push(
+      sentryWebpackPlugin({
+        org: process.env.SENTRY_ORG,
+        project: process.env.SENTRY_PROJECT,
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+      })
+    );
+  }
+
+  return config;
+};

apps/core/.webpack/postcss.config.cjs

@@ -0,0 +1,20 @@
+const cssnano = require('cssnano');
+
+module.exports = function (context) {
+  const plugins = [
+    cssnano({
+      preset: [
+        'default',
+        {
+          convertValues: false,
+        },
+      ],
+    }),
+  ];
+
+  return {
+    from: context.from,
+    plugins,
+    to: context.to,
+  };
+};

apps/core/.webpack/runtime-config.ts

@@ -0,0 +1,115 @@
+import type { BlockSuiteFeatureFlags, RuntimeConfig } from '@affine/env/global';
+import type { BuildFlags } from '@affine/cli/config';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+const packageJson = require('../package.json');
+
+const editorFlags: BlockSuiteFeatureFlags = {
+  enable_database: true,
+  enable_slash_menu: true,
+  enable_edgeless_toolbar: true,
+  enable_block_hub: true,
+  enable_drag_handle: true,
+  enable_surface: true,
+  enable_linked_page: true,
+  enable_bookmark_operation: false,
+};
+
+export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
+  const buildPreset: Record<string, RuntimeConfig> = {
+    stable: {
+      enablePlugin: false,
+      enableTestProperties: false,
+      enableBroadcastChannelProvider: true,
+      enableDebugPage: true,
+      changelogUrl: 'https://affine.pro/blog/what-is-new-affine-0728',
+      imageProxyUrl: 'https://workers.toeverything.workers.dev/proxy/image',
+      enablePreloading: true,
+      enableNewSettingModal: true,
+      enableNewSettingUnstableApi: false,
+      enableSQLiteProvider: true,
+      enableMoveDatabase: false,
+      enableNotificationCenter: false,
+      enableCloud: false,
+      serverAPI: 'https://localhost:3010',
+      editorFlags,
+      appVersion: packageJson.version,
+      editorVersion: packageJson.dependencies['@blocksuite/editor'],
+    },
+    // canary will be aggressive and enable all features
+    canary: {
+      enablePlugin: true,
+      enableTestProperties: true,
+      enableBroadcastChannelProvider: true,
+      enableDebugPage: true,
+      changelogUrl: 'https://github.com/toeverything/AFFiNE/releases',
+      imageProxyUrl: 'https://workers.toeverything.workers.dev/proxy/image',
+      enablePreloading: true,
+      enableNewSettingModal: true,
+      enableNewSettingUnstableApi: false,
+      enableSQLiteProvider: true,
+      enableMoveDatabase: false,
+      enableNotificationCenter: true,
+      enableCloud: false,
+      serverAPI: 'https://localhost:3010',
+      editorFlags,
+      appVersion: packageJson.version,
+      editorVersion: packageJson.dependencies['@blocksuite/editor'],
+    },
+  };
+
+  // beta and internal versions are the same as stable
+  buildPreset.beta = buildPreset.stable;
+  buildPreset.internal = buildPreset.stable;
+
+  const currentBuild = buildFlags.channel;
+
+  if (!(currentBuild in buildPreset)) {
+    throw new Error(`BUILD_TYPE ${currentBuild} is not supported`);
+  }
+
+  const currentBuildPreset = buildPreset[currentBuild];
+
+  const environmentPreset = {
+    enablePlugin: process.env.ENABLE_PLUGIN
+      ? process.env.ENABLE_PLUGIN === 'true'
+      : currentBuildPreset.enablePlugin,
+    enableTestProperties: process.env.ENABLE_TEST_PROPERTIES
+      ? process.env.ENABLE_TEST_PROPERTIES === 'true'
+      : currentBuildPreset.enableTestProperties,
+    enableBroadcastChannelProvider: process.env.ENABLE_BC_PROVIDER
+      ? process.env.ENABLE_BC_PROVIDER !== 'false'
+      : currentBuildPreset.enableBroadcastChannelProvider,
+    changelogUrl: process.env.CHANGELOG_URL ?? currentBuildPreset.changelogUrl,
+    enablePreloading: process.env.ENABLE_PRELOADING
+      ? process.env.ENABLE_PRELOADING === 'true'
+      : currentBuildPreset.enablePreloading,
+    enableNewSettingModal: process.env.ENABLE_NEW_SETTING_MODAL
+      ? process.env.ENABLE_NEW_SETTING_MODAL === 'true'
+      : currentBuildPreset.enableNewSettingModal,
+    enableSQLiteProvider: process.env.ENABLE_SQLITE_PROVIDER
+      ? process.env.ENABLE_SQLITE_PROVIDER === 'true'
+      : currentBuildPreset.enableSQLiteProvider,
+    enableNewSettingUnstableApi: process.env.ENABLE_NEW_SETTING_UNSTABLE_API
+      ? process.env.ENABLE_NEW_SETTING_UNSTABLE_API === 'true'
+      : currentBuildPreset.enableNewSettingUnstableApi,
+    enableNotificationCenter: process.env.ENABLE_NOTIFICATION_CENTER
+      ? process.env.ENABLE_NOTIFICATION_CENTER === 'true'
+      : currentBuildPreset.enableNotificationCenter,
+    enableCloud: process.env.ENABLE_CLOUD
+      ? process.env.ENABLE_CLOUD === 'true'
+      : currentBuildPreset.enableCloud,
+    enableMoveDatabase: process.env.ENABLE_MOVE_DATABASE
+      ? process.env.ENABLE_MOVE_DATABASE === 'true'
+      : currentBuildPreset.enableMoveDatabase,
+  };
+
+  return {
+    ...currentBuildPreset,
+    // environment preset will overwrite current build preset
+    // this environment variable is for debug proposes only
+    // do not put them into CI
+    ...(process.env.CI ? {} : environmentPreset),
+  };
+}

apps/core/.webpack/template.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1"
+    />
+    <title>AFFiNE</title>
+    <meta name="theme-color" content="#fafafa" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" sizes="192x192" href="/chrome-192x192.png" />
+    <meta name="emotion-insertion-point" content="" />
+    <meta property="description" content="{description}" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:url" content="https://app.affine.pro/" />
+    <meta
+      name="twitter:title"
+      content="AFFiNE：There can be more than Notion and Miro."
+    />
+    <meta name="twitter:description" content="{description}" />
+    <meta name="twitter:site" content="@AffineOfficial" />
+    <meta name="twitter:image" content="https://affine.pro/og.jpeg" />
+    <meta
+      property="og:title"
+      content="AFFiNE：There can be more than Notion and Miro."
+    />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:description"
+      content="There can be more than Notion and Miro. AFFiNE is a next-gen knowledge base that brings planning, sorting and creating all together."
+    />
+    <meta property="og:url" content="https://app.affine.pro/" />
+    <meta property="og:image" content="https://affine.pro/og.jpeg" />
+    <link
+      data-react-helmet="true"
+      rel="shortcut icon"
+      href="https://affine.pro/favicon.ico"
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

apps/core/.webpack/utils.ts

@@ -0,0 +1,11 @@
+import type { BuildFlags } from '@affine/cli/config';
+
+export function computeCacheKey(buildFlags: BuildFlags) {
+  return [
+    '1',
+    'node' + process.version,
+    buildFlags.mode,
+    buildFlags.distribution,
+    buildFlags.channel,
+  ].join('-');
+}

apps/core/.webpack/webpack.config.ts

@@ -0,0 +1,55 @@
+import { createConfiguration, rootPath } from './config.js';
+import { merge } from 'webpack-merge';
+import { join, resolve } from 'node:path';
+import type { BuildFlags } from '@affine/cli/config';
+import { getRuntimeConfig } from './runtime-config.js';
+import HTMLPlugin from 'html-webpack-plugin';
+
+export default async function (cli_env: any, _: any) {
+  const flags: BuildFlags = JSON.parse(
+    Buffer.from(cli_env.flags, 'hex').toString('utf-8')
+  );
+  console.log('build flags', flags);
+  const runtimeConfig = getRuntimeConfig(flags);
+  console.log('runtime config', runtimeConfig);
+  const config = createConfiguration(flags, runtimeConfig);
+  return merge(config, {
+    entry: {
+      'polyfill/ses': {
+        import: resolve(rootPath, 'src/polyfill/ses.ts'),
+      },
+      plugin: {
+        dependOn: ['polyfill/ses'],
+        import: resolve(rootPath, 'src/bootstrap/register-plugins.ts'),
+      },
+      app: {
+        chunkLoading: 'import',
+        dependOn: ['polyfill/ses', 'plugin'],
+        import: resolve(rootPath, 'src/index.tsx'),
+      },
+      '_plugin/index.test': {
+        chunkLoading: 'import',
+        dependOn: ['polyfill/ses', 'plugin'],
+        import: resolve(rootPath, 'src/_plugin/index.test.tsx'),
+      },
+    },
+    plugins: [
+      new HTMLPlugin({
+        template: join(rootPath, '.webpack', 'template.html'),
+        inject: 'body',
+        scriptLoading: 'module',
+        minify: false,
+        chunks: ['app', 'plugin', 'polyfill/ses'],
+        filename: 'index.html',
+      }),
+      new HTMLPlugin({
+        template: join(rootPath, '.webpack', 'template.html'),
+        inject: 'body',
+        scriptLoading: 'module',
+        minify: false,
+        chunks: ['_plugin/index.test', 'plugin', 'polyfill/ses'],
+        filename: '_plugin/index.html',
+      }),
+    ],
+  });
+}

apps/core/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@affine/core",
+  "type": "module",
+  "private": true,
+  "version": "0.8.0-canary.11",
+  "scripts": {
+    "build": "yarn -T run build-core",
+    "dev": "yarn -T run dev-core",
+    "static-server": "ts-node-esm ./server.mts"
+  },
+  "dependencies": {
+    "@affine-test/fixtures": "workspace:*",
+    "@affine/component": "workspace:*",
+    "@affine/debug": "workspace:*",
+    "@affine/env": "workspace:*",
+    "@affine/graphql": "workspace:*",
+    "@affine/i18n": "workspace:*",
+    "@affine/jotai": "workspace:*",
+    "@affine/templates": "workspace:*",
+    "@affine/workspace": "workspace:*",
+    "@blocksuite/block-std": "0.0.0-20230804190636-37f66904-nightly",
+    "@blocksuite/blocks": "0.0.0-20230804190636-37f66904-nightly",
+    "@blocksuite/editor": "0.0.0-20230804190636-37f66904-nightly",
+    "@blocksuite/global": "0.0.0-20230804190636-37f66904-nightly",
+    "@blocksuite/icons": "^2.1.29",
+    "@blocksuite/lit": "0.0.0-20230804190636-37f66904-nightly",
+    "@blocksuite/store": "0.0.0-20230804190636-37f66904-nightly",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.14.2",
+    "@react-hookz/web": "^23.1.0",
+    "@toeverything/components": "^0.0.6",
+    "async-call-rpc": "^6.3.1",
+    "cmdk": "^0.2.0",
+    "css-spring": "^4.1.0",
+    "cssnano": "^6.0.1",
+    "graphql": "^16.7.1",
+    "jotai": "^2.2.2",
+    "jotai-devtools": "^0.6.0",
+    "lit": "^2.7.6",
+    "lottie-web": "^5.12.2",
+    "mini-css-extract-plugin": "^2.7.6",
+    "next-themes": "^0.2.1",
+    "postcss-loader": "^7.3.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-is": "18.2.0",
+    "react-resizable-panels": "^0.0.54",
+    "react-router-dom": "^6.14.2",
+    "rxjs": "^7.8.1",
+    "ses": "^0.18.5",
+    "swr": "2.1.5",
+    "y-protocols": "^1.0.5",
+    "yjs": "^13.6.7",
+    "zod": "^3.21.4"
+  },
+  "devDependencies": {
+    "@perfsee/webpack": "^1.8.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
+    "@sentry/webpack-plugin": "^2.5.0",
+    "@svgr/webpack": "^8.0.1",
+    "@swc/core": "^1.3.71",
+    "@types/webpack-env": "^1.18.1",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
+    "express": "^4.18.2",
+    "html-webpack-plugin": "^5.5.3",
+    "raw-loader": "^4.0.2",
+    "source-map-loader": "^4.0.1",
+    "style-loader": "^3.3.3",
+    "swc-loader": "^0.2.3",
+    "swc-plugin-coverage-instrument": "^0.0.19",
+    "thread-loader": "^4.0.2",
+    "ts-node": "^10.9.1",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.9.0"
+  }
+}

apps/core/project.json

@@ -0,0 +1,57 @@
+{
+  "name": "@affine/core",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "targets": {
+    "build": {
+      "executor": "nx:run-script",
+      "dependsOn": [
+        {
+          "projects": ["tag:plugin"],
+          "target": "build",
+          "params": "ignore"
+        },
+        "^build"
+      ],
+      "inputs": [
+        "{projectRoot}/.webpack/**/*",
+        "{projectRoot}/**/*",
+        "{projectRoot}/public/**/*",
+        "{workspaceRoot}/packages/component/src/**/*",
+        "{workspaceRoot}/packages/debug/src/**/*",
+        "{workspaceRoot}/packages/graphql/src/**/*",
+        "{workspaceRoot}/packages/hooks/src/**/*",
+        "{workspaceRoot}/packages/jotai/src/**/*",
+        "{workspaceRoot}/packages/templates/src/**/*",
+        "{workspaceRoot}/packages/workspace/src/**/*",
+        {
+          "env": "BUILD_TYPE"
+        },
+        {
+          "env": "PERFSEE_TOKEN"
+        },
+        {
+          "env": "SENTRY_ORG"
+        },
+        {
+          "env": "SENTRY_PROJECT"
+        },
+        {
+          "env": "SENTRY_AUTH_TOKEN"
+        },
+        {
+          "env": "NEXT_PUBLIC_SENTRY_DSN"
+        },
+        {
+          "env": "DISTRIBUTION"
+        },
+        {
+          "env": "COVERAGE"
+        }
+      ],
+      "options": {
+        "script": "build"
+      },
+      "outputs": ["{projectRoot}/dist"]
+    }
+  }
+}

apps/core/public/.gitignore

@@ -0,0 +1,4 @@
+*.js
+*.map
+
+plugins

apps/core/server.mts

@@ -0,0 +1,18 @@
+// static server for web app
+import express from 'express';
+const app = express();
+
+const PORT = process.env.PORT || 8080;
+
+app.use('/', express.static('dist'));
+
+app.get('/*', (req, res) => {
+  if (req.url.startsWith('/plugins')) {
+    res.sendFile(req.url, { root: 'dist' });
+  }
+  res.sendFile('index.html', { root: 'dist' });
+});
+
+app.listen(PORT, () => {
+  console.log(`Server is running on port ${PORT}`);
+});

apps/core/src/_plugin/index.test.tsx

@@ -0,0 +1,47 @@
+import { assertExists } from '@blocksuite/global/utils';
+import { registeredPluginAtom, rootStore } from '@toeverything/infra/atom';
+import { use } from 'foxact/use';
+import { useAtomValue } from 'jotai';
+import { Provider } from 'jotai/react';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { _pluginNestedImportsMap } from '../bootstrap/plugins/setup';
+import { pluginRegisterPromise } from '../bootstrap/register-plugins';
+
+async function main() {
+  const { setup } = await import('../bootstrap/setup');
+  await setup();
+  const root = document.getElementById('app');
+  assertExists(root);
+
+  const App = () => {
+    use(pluginRegisterPromise);
+    const plugins = useAtomValue(registeredPluginAtom);
+    _pluginNestedImportsMap.forEach(value => {
+      const exports = value.get('index.js');
+      assertExists(exports);
+      assertExists(exports?.get('entry'));
+    });
+    return (
+      <div>
+        <div data-plugins-load-status="success">
+          Successfully loaded plugins:
+        </div>
+        {plugins.map(plugin => {
+          return <div key={plugin}>{plugin}</div>;
+        })}
+      </div>
+    );
+  };
+
+  createRoot(root).render(
+    <StrictMode>
+      <Provider store={rootStore}>
+        <App />
+      </Provider>
+    </StrictMode>
+  );
+}
+
+await main();

apps/core/src/adapters/local/index.tsx

@@ -16,10 +16,10 @@ import {
   CRUD,
   saveWorkspaceToLocalStorage,
 } from '@affine/workspace/local/crud';
+import { getOrCreateWorkspace } from '@affine/workspace/manager';
 import { createIndexedDBDownloadProvider } from '@affine/workspace/providers';
-import { createEmptyBlockSuiteWorkspace } from '@affine/workspace/utils';
 import { nanoid } from '@blocksuite/store';
-import { useStaticBlockSuiteWorkspace } from '@toeverything/plugin-infra/__internal__/workspace';
+import { useStaticBlockSuiteWorkspace } from '@toeverything/infra/__internal__/react';
 
 import {
   BlockSuitePageList,
@@ -36,7 +36,7 @@ export const LocalAdapter: WorkspaceAdapter<WorkspaceFlavour.LOCAL> = {
   loadPriority: LoadPriority.LOW,
   Events: {
     'app:init': () => {
-      const blockSuiteWorkspace = createEmptyBlockSuiteWorkspace(
+      const blockSuiteWorkspace = getOrCreateWorkspace(
         nanoid(),
         WorkspaceFlavour.LOCAL
       );

apps/core/src/app.tsx

@@ -0,0 +1,61 @@
+import '@affine/component/theme/global.css';
+import '@affine/component/theme/theme.css';
+import '@toeverything/components/style.css';
+
+import { AffineContext } from '@affine/component/context';
+import { WorkspaceFallback } from '@affine/component/workspace';
+import { CacheProvider } from '@emotion/react';
+import { use } from 'foxact/use';
+import type { PropsWithChildren, ReactElement } from 'react';
+import { lazy, memo, Suspense } from 'react';
+import { RouterProvider } from 'react-router-dom';
+
+import { router } from './router';
+import createEmotionCache from './utils/create-emotion-cache';
+
+const cache = createEmotionCache();
+
+const DevTools = lazy(() =>
+  import('jotai-devtools').then(m => ({ default: m.DevTools }))
+);
+
+const DebugProvider = ({ children }: PropsWithChildren): ReactElement => {
+  return (
+    <>
+      <Suspense>{process.env.DEBUG_JOTAI === 'true' && <DevTools />}</Suspense>
+      {children}
+    </>
+  );
+};
+
+const future = {
+  v7_startTransition: true,
+} as const;
+
+async function loadLanguage() {
+  if (environment.isBrowser) {
+    const { createI18n, setUpLanguage } = await import('@affine/i18n');
+    const i18n = createI18n();
+    document.documentElement.lang = i18n.language;
+    await setUpLanguage(i18n);
+  }
+}
+
+const languageLoadingPromise = loadLanguage().catch(console.error);
+
+export const App = memo(function App() {
+  use(languageLoadingPromise);
+  return (
+    <CacheProvider value={cache}>
+      <AffineContext>
+        <DebugProvider>
+          <RouterProvider
+            fallbackElement={<WorkspaceFallback key="RouterFallback" />}
+            router={router}
+            future={future}
+          />
+        </DebugProvider>
+      </AffineContext>
+    </CacheProvider>
+  );
+});

apps/core/src/atoms/history.ts

@@ -0,0 +1,106 @@
+import { useAtom } from 'jotai';
+import { atomWithStorage, createJSONStorage } from 'jotai/utils';
+import { useCallback } from 'react';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { useNavigate } from 'react-router-dom';
+
+import { router } from '../router';
+
+export type History = {
+  stack: string[];
+  current: number;
+  skip: boolean;
+};
+
+export const MAX_HISTORY = 50;
+
+const historyBaseAtom = atomWithStorage<History>(
+  'router-history',
+  {
+    stack: [],
+    current: 0,
+    skip: false,
+  },
+  createJSONStorage(() => sessionStorage)
+);
+
+historyBaseAtom.onMount = set => {
+  const unsubscribe = router.subscribe(state => {
+    set(prev => {
+      const url = state.location.pathname;
+
+      // if stack top is the same as current, skip
+      if (prev.stack[prev.current] === url) {
+        return prev;
+      }
+
+      if (prev.skip) {
+        return {
+          stack: [...prev.stack],
+          current: prev.current,
+          skip: false,
+        };
+      } else {
+        if (prev.current < prev.stack.length - 1) {
+          const newStack = prev.stack.slice(0, prev.current);
+          newStack.push(url);
+          if (newStack.length > MAX_HISTORY) {
+            newStack.shift();
+          }
+          return {
+            stack: newStack,
+            current: newStack.length - 1,
+            skip: false,
+          };
+        } else {
+          const newStack = [...prev.stack, url];
+          if (newStack.length > MAX_HISTORY) {
+            newStack.shift();
+          }
+          return {
+            stack: newStack,
+            current: newStack.length - 1,
+            skip: false,
+          };
+        }
+      }
+    });
+  });
+  return () => {
+    unsubscribe();
+  };
+};
+
+export function useHistoryAtom() {
+  const navigate = useNavigate();
+  const [base, setBase] = useAtom(historyBaseAtom);
+  return [
+    base,
+    useCallback(
+      (forward: boolean) => {
+        setBase(prev => {
+          if (forward) {
+            const target = Math.min(prev.stack.length - 1, prev.current + 1);
+            const url = prev.stack[target];
+            navigate(url);
+            return {
+              ...prev,
+              current: target,
+              skip: true,
+            };
+          } else {
+            const target = Math.max(0, prev.current - 1);
+            const url = prev.stack[target];
+            navigate(url);
+            return {
+              ...prev,
+              current: target,
+              skip: true,
+            };
+          }
+        });
+      },
+      [setBase, navigate]
+    ),
+  ] as const;
+}

apps/core/src/atoms/index.ts

@@ -1,5 +1,7 @@
+import type { PrimitiveAtom } from 'jotai';
 import { atom } from 'jotai';
 import { atomFamily, atomWithStorage } from 'jotai/utils';
+import type { AtomFamily } from 'jotai/vanilla/utils/atomFamily';
 
 import type { CreateWorkspaceMode } from '../components/affine/create-workspace-modal';
 import type { SettingProps } from '../components/affine/setting-modal';
@@ -59,19 +61,16 @@ const defaultPageSetting = {
   mode: 'page',
 } satisfies PageLocalSetting;
 
-export const pageSettingFamily = atomFamily((pageId: string) =>
+export const pageSettingFamily: AtomFamily<
+  string,
+  PrimitiveAtom<PageLocalSetting>
+> = atomFamily((pageId: string) =>
   atom(
     get =>
       get(pageSettingsBaseAtom)[pageId] ?? {
         ...defaultPageSetting,
       },
-    (
-      get,
-      set,
-      patch:
-        | Partial<PageLocalSetting>
-        | ((prevSetting: PageLocalSetting | undefined) => void)
-    ) => {
+    (get, set, patch) => {
       set(recentPageSettingsBaseAtom, ids => {
         // pick 3 recent page ids
         return [...new Set([pageId, ...ids]).values()].slice(0, 3);
@@ -93,7 +92,7 @@ export const pageSettingFamily = atomFamily((pageId: string) =>
 
 export const setPageModeAtom = atom(
   void 0,
-  (get, set, pageId: string, mode: PageMode) => {
+  (_, set, pageId: string, mode: PageMode) => {
     set(pageSettingFamily(pageId), { mode });
   }
 );

apps/core/src/atoms/mode.ts

@@ -1,4 +1,4 @@
-import { currentPageIdAtom } from '@toeverything/plugin-infra/manager';
+import { currentPageIdAtom } from '@toeverything/infra/atom';
 import { atom } from 'jotai/vanilla';
 
 import { pageSettingFamily } from './index';

apps/core/src/bootstrap/plugins/endowments/fercher.ts

@@ -0,0 +1,86 @@
+export interface FetchOptions {
+  fetch?: typeof fetch;
+  signal?: AbortSignal;
+
+  normalizeURL?(url: string): string;
+
+  /**
+   * Virtualize a url
+   * @param url URL to be rewrite
+   * @param direction Direction of this rewrite.
+   * 'in' means the url is from the outside world and should be virtualized.
+   * 'out' means the url is from the inside world and should be de-virtualized to fetch the real target.
+   */
+  rewriteURL?(url: string, direction: 'in' | 'out'): string;
+
+  replaceRequest?(request: Request): Request | PromiseLike<Request>;
+
+  replaceResponse?(response: Response): Response | PromiseLike<Response>;
+
+  canConnect?(url: string): boolean | PromiseLike<boolean>;
+}
+
+export function createFetch(options: FetchOptions) {
+  const {
+    fetch: _fetch = fetch,
+    signal,
+    rewriteURL,
+    replaceRequest,
+    replaceResponse,
+    canConnect,
+    normalizeURL,
+  } = options;
+
+  return async function fetch(input: RequestInfo, init?: RequestInit) {
+    let request = new Request(input, {
+      ...init,
+      signal: getMergedSignal(init?.signal, signal) || null,
+    });
+
+    if (normalizeURL) request = new Request(normalizeURL(request.url), request);
+    if (canConnect && !(await canConnect(request.url)))
+      throw new TypeError('Failed to fetch');
+    if (rewriteURL)
+      request = new Request(rewriteURL(request.url, 'out'), request);
+    if (replaceRequest) request = await replaceRequest(request);
+
+    let response = await _fetch(request);
+
+    if (rewriteURL) {
+      const { url, redirected, type } = response;
+      // Note: Response constructor does not allow us to set the url of a response.
+      //       we have to define the own property on it. This is not a good simulation.
+      //       To prevent get the original url by Response.prototype.[[get url]].call(response)
+      //       we copy a response and set it's url to empty.
+      response = new Response(response.body, response);
+      Object.defineProperties(response, {
+        url: { value: url, configurable: true },
+        redirected: { value: redirected, configurable: true },
+        type: { value: type, configurable: true },
+      });
+      Object.defineProperty(response, 'url', {
+        configurable: true,
+        value: rewriteURL(url, 'in'),
+      });
+    }
+    if (replaceResponse) response = await replaceResponse(response);
+    return response;
+  };
+}
+
+function getMergedSignal(
+  signal: AbortSignal | undefined | null,
+  signal2: AbortSignal | undefined | null
+) {
+  if (!signal) return signal2;
+  if (!signal2) return signal;
+
+  const abortController = new AbortController();
+  signal.addEventListener('abort', () => abortController.abort(), {
+    once: true,
+  });
+  signal2.addEventListener('abort', () => abortController.abort(), {
+    once: true,
+  });
+  return abortController.signal;
+}

apps/core/src/bootstrap/plugins/endowments/timer.ts

@@ -0,0 +1,110 @@
+type Handler = (...args: any[]) => void;
+
+export interface Timers {
+  setTimeout: (handler: Handler, timeout?: number, ...args: any[]) => number;
+  clearTimeout: (handle: number) => void;
+  setInterval: (handler: Handler, timeout?: number, ...args: any[]) => number;
+  clearInterval: (handle: number) => void;
+  requestAnimationFrame: (callback: Handler) => number;
+  cancelAnimationFrame: (handle: number) => void;
+  requestIdleCallback?: typeof window.requestIdleCallback | undefined;
+  cancelIdleCallback?: typeof window.cancelIdleCallback | undefined;
+  queueMicrotask: typeof window.queueMicrotask;
+}
+
+export function createTimers(
+  abortSignal: AbortSignal,
+  originalTimes: Timers = {
+    requestAnimationFrame,
+    cancelAnimationFrame,
+    requestIdleCallback:
+      typeof requestIdleCallback === 'function'
+        ? requestIdleCallback
+        : undefined,
+    cancelIdleCallback:
+      typeof cancelIdleCallback === 'function' ? cancelIdleCallback : undefined,
+    setTimeout,
+    clearTimeout,
+    setInterval,
+    clearInterval,
+    queueMicrotask,
+  }
+): Timers {
+  const {
+    requestAnimationFrame: _requestAnimationFrame,
+    cancelAnimationFrame: _cancelAnimationFrame,
+    setInterval: _setInterval,
+    clearInterval: _clearInterval,
+    setTimeout: _setTimeout,
+    clearTimeout: _clearTimeout,
+    cancelIdleCallback: _cancelIdleCallback,
+    requestIdleCallback: _requestIdleCallback,
+    queueMicrotask: _queueMicrotask,
+  } = originalTimes;
+
+  const interval_timer_id: number[] = [];
+  const idle_id: number[] = [];
+  const raf_id: number[] = [];
+
+  abortSignal.addEventListener(
+    'abort',
+    () => {
+      raf_id.forEach(_cancelAnimationFrame);
+      interval_timer_id.forEach(_clearInterval);
+      _cancelIdleCallback && idle_id.forEach(_cancelIdleCallback);
+    },
+    { once: true }
+  );
+
+  return {
+    // id is a positive number, it never repeats.
+    requestAnimationFrame(callback) {
+      raf_id[raf_id.length] = _requestAnimationFrame(callback);
+      return raf_id.length;
+    },
+    cancelAnimationFrame(handle) {
+      const id = raf_id[handle - 1];
+      if (!id) return;
+      _cancelAnimationFrame(id);
+    },
+    setInterval(handler, timeout) {
+      interval_timer_id[interval_timer_id.length] = (_setInterval as any)(
+        handler,
+        timeout
+      );
+      return interval_timer_id.length;
+    },
+    clearInterval(id) {
+      if (!id) return;
+      const handle = interval_timer_id[id - 1];
+      if (!handle) return;
+      _clearInterval(handle);
+    },
+    setTimeout(handler, timeout) {
+      idle_id[idle_id.length] = (_setTimeout as any)(handler, timeout);
+      return idle_id.length;
+    },
+    clearTimeout(id) {
+      if (!id) return;
+      const handle = idle_id[id - 1];
+      if (!handle) return;
+      _clearTimeout(handle);
+    },
+    requestIdleCallback: _requestIdleCallback
+      ? function requestIdleCallback(callback, options) {
+          idle_id[idle_id.length] = _requestIdleCallback(callback, options);
+          return idle_id.length;
+        }
+      : undefined,
+    cancelIdleCallback: _cancelIdleCallback
+      ? function cancelIdleCallback(handle) {
+          const id = idle_id[handle - 1];
+          if (!id) return;
+          _cancelIdleCallback(id);
+        }
+      : undefined,
+    queueMicrotask(callback) {
+      _queueMicrotask(() => abortSignal.aborted || callback());
+    },
+  };
+}

apps/core/src/bootstrap/plugins/setup.ts

@@ -0,0 +1,449 @@
+import * as AFFiNEComponent from '@affine/component';
+import { DebugLogger } from '@affine/debug';
+import type { CallbackMap, PluginContext } from '@affine/sdk/entry';
+import { FormatQuickBar } from '@blocksuite/blocks';
+import * as BlockSuiteBlocksStd from '@blocksuite/blocks/std';
+import * as BlockSuiteGlobalUtils from '@blocksuite/global/utils';
+import { assertExists } from '@blocksuite/global/utils';
+import { DisposableGroup } from '@blocksuite/global/utils';
+import * as Icons from '@blocksuite/icons';
+import {
+  contentLayoutAtom,
+  currentPageAtom,
+  currentWorkspaceAtom,
+  editorItemsAtom,
+  headerItemsAtom,
+  rootStore,
+  settingItemsAtom,
+  windowItemsAtom,
+} from '@toeverything/infra/atom';
+import * as Jotai from 'jotai/index';
+import { Provider } from 'jotai/react';
+import * as JotaiUtils from 'jotai/utils';
+import * as React from 'react';
+import { createElement, type PropsWithChildren } from 'react';
+import * as ReactJSXRuntime from 'react/jsx-runtime';
+import * as ReactDom from 'react-dom';
+import * as ReactDomClient from 'react-dom/client';
+import * as SWR from 'swr';
+
+import { createFetch } from './endowments/fercher';
+import { createTimers } from './endowments/timer';
+
+const dynamicImportKey = '$h‍_import';
+
+const permissionLogger = new DebugLogger('plugins:permission');
+const importLogger = new DebugLogger('plugins:import');
+
+const setupRootImportsMap = () => {
+  _rootImportsMap.set('react', new Map(Object.entries(React)));
+  _rootImportsMap.set(
+    'react/jsx-runtime',
+    new Map(Object.entries(ReactJSXRuntime))
+  );
+  _rootImportsMap.set('react-dom', new Map(Object.entries(ReactDom)));
+  _rootImportsMap.set(
+    'react-dom/client',
+    new Map(Object.entries(ReactDomClient))
+  );
+  _rootImportsMap.set('@blocksuite/icons', new Map(Object.entries(Icons)));
+  _rootImportsMap.set(
+    '@affine/component',
+    new Map(Object.entries(AFFiNEComponent))
+  );
+  _rootImportsMap.set(
+    '@blocksuite/blocks/std',
+    new Map(Object.entries(BlockSuiteBlocksStd))
+  );
+  _rootImportsMap.set(
+    '@blocksuite/global/utils',
+    new Map(Object.entries(BlockSuiteGlobalUtils))
+  );
+  _rootImportsMap.set('jotai', new Map(Object.entries(Jotai)));
+  _rootImportsMap.set('jotai/utils', new Map(Object.entries(JotaiUtils)));
+  _rootImportsMap.set(
+    '@affine/sdk/entry',
+    new Map(
+      Object.entries({
+        rootStore: rootStore,
+        currentWorkspaceAtom: currentWorkspaceAtom,
+        currentPageAtom: currentPageAtom,
+        contentLayoutAtom: contentLayoutAtom,
+      })
+    )
+  );
+  _rootImportsMap.set('swr', new Map(Object.entries(SWR)));
+};
+
+// module -> importName -> updater[]
+export const _rootImportsMap = new Map<string, Map<string, any>>();
+setupRootImportsMap();
+// pluginName -> module -> importName -> updater[]
+export const _pluginNestedImportsMap = new Map<
+  string,
+  Map<string, Map<string, any>>
+>();
+
+const pluginImportsFunctionMap = new Map<string, (imports: any) => void>();
+export const createImports = (pluginName: string) => {
+  if (pluginImportsFunctionMap.has(pluginName)) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return pluginImportsFunctionMap.get(pluginName)!;
+  }
+  const imports = (
+    newUpdaters: [string, [string, ((val: any) => void)[]][]][]
+  ) => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const currentImportMap = _pluginNestedImportsMap.get(pluginName)!;
+    importLogger.debug('currentImportMap', pluginName, currentImportMap);
+
+    for (const [module, moduleUpdaters] of newUpdaters) {
+      importLogger.debug('imports module', module, moduleUpdaters);
+      let moduleImports = _rootImportsMap.get(module);
+      if (!moduleImports) {
+        moduleImports = currentImportMap.get(module);
+      }
+      if (moduleImports) {
+        for (const [importName, importUpdaters] of moduleUpdaters) {
+          const updateImport = (value: any) => {
+            for (const importUpdater of importUpdaters) {
+              importUpdater(value);
+            }
+          };
+          if (moduleImports.has(importName)) {
+            const val = moduleImports.get(importName);
+            updateImport(val);
+          }
+        }
+      } else {
+        console.error(
+          'cannot find module in plugin import map',
+          module,
+          currentImportMap,
+          _pluginNestedImportsMap
+        );
+      }
+    }
+  };
+  pluginImportsFunctionMap.set(pluginName, imports);
+  return imports;
+};
+
+const abortController = new AbortController();
+
+const pluginFetch = createFetch({});
+const timer = createTimers(abortController.signal);
+
+const sharedGlobalThis = Object.assign(Object.create(null), timer, {
+  fetch: pluginFetch,
+});
+
+const dynamicImportMap = new Map<
+  string,
+  (moduleName: string) => Promise<any>
+>();
+
+export const createOrGetDynamicImport = (
+  baseUrl: string,
+  pluginName: string
+) => {
+  if (dynamicImportMap.has(pluginName)) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return dynamicImportMap.get(pluginName)!;
+  }
+  const dynamicImport = async (moduleName: string): Promise<any> => {
+    const codeUrl = `${baseUrl}/${moduleName}`;
+    const analysisUrl = `${baseUrl}/${moduleName}.json`;
+    const response = await fetch(codeUrl);
+    const analysisResponse = await fetch(analysisUrl);
+    const analysis = await analysisResponse.json();
+    const exports = analysis.exports as string[];
+    const code = await response.text();
+    const moduleCompartment = new Compartment(
+      createOrGetGlobalThis(
+        pluginName,
+        // use singleton here to avoid infinite loop
+        createOrGetDynamicImport(pluginName, baseUrl)
+      )
+    );
+    const entryPoint = moduleCompartment.evaluate(code, {
+      __evadeHtmlCommentTest__: true,
+    });
+    const moduleExports = {} as Record<string, any>;
+    const setVarProxy = new Proxy(
+      {},
+      {
+        get(_, p: string): any {
+          return (newValue: any) => {
+            moduleExports[p] = newValue;
+          };
+        },
+      }
+    );
+    entryPoint({
+      imports: createImports(pluginName),
+      liveVar: setVarProxy,
+      onceVar: setVarProxy,
+    });
+    importLogger.debug('import', moduleName, exports, moduleExports);
+    return moduleExports;
+  };
+  dynamicImportMap.set(pluginName, dynamicImport);
+  return dynamicImport;
+};
+
+const globalThisMap = new Map<string, any>();
+
+export const createOrGetGlobalThis = (
+  pluginName: string,
+  dynamicImport: (moduleName: string) => Promise<any>
+) => {
+  if (globalThisMap.has(pluginName)) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return globalThisMap.get(pluginName)!;
+  }
+  const pluginGlobalThis = Object.assign(
+    Object.create(null),
+    sharedGlobalThis,
+    {
+      process: Object.freeze({
+        env: {
+          NODE_ENV: process.env.NODE_ENV,
+        },
+      }),
+      // dynamic import function
+      [dynamicImportKey]: dynamicImport,
+      // UNSAFE: React will read `window` and `document`
+      window: new Proxy(
+        {},
+        {
+          get(_, key) {
+            permissionLogger.debug(`${pluginName} is accessing window`, key);
+            if (sharedGlobalThis[key]) return sharedGlobalThis[key];
+            const result = Reflect.get(window, key);
+            if (typeof result === 'function') {
+              return function (...args: any[]) {
+                permissionLogger.debug(
+                  `${pluginName} is calling window`,
+                  key,
+                  args
+                );
+                return result.apply(window, args);
+              };
+            }
+            permissionLogger.debug('window', key, result);
+            return result;
+          },
+        }
+      ),
+      document: new Proxy(
+        {},
+        {
+          get(_, key) {
+            permissionLogger.debug(`${pluginName} is accessing document`, key);
+            if (sharedGlobalThis[key]) return sharedGlobalThis[key];
+            const result = Reflect.get(document, key);
+            if (typeof result === 'function') {
+              return function (...args: any[]) {
+                permissionLogger.debug(
+                  `${pluginName} is calling window`,
+                  key,
+                  args
+                );
+                return result.apply(document, args);
+              };
+            }
+            permissionLogger.debug('document', key, result);
+            return result;
+          },
+        }
+      ),
+      navigator: {
+        userAgent: navigator.userAgent,
+      },
+
+      // safe to use for all plugins
+      Error: globalThis.Error,
+      TypeError: globalThis.TypeError,
+      RangeError: globalThis.RangeError,
+      console: globalThis.console,
+      crypto: globalThis.crypto,
+
+      // copilot uses these
+      CustomEvent: globalThis.CustomEvent,
+      Date: globalThis.Date,
+      Math: globalThis.Math,
+      URL: globalThis.URL,
+      URLSearchParams: globalThis.URLSearchParams,
+      Headers: globalThis.Headers,
+      TextEncoder: globalThis.TextEncoder,
+      TextDecoder: globalThis.TextDecoder,
+      Request: globalThis.Request,
+
+      // image-preview uses these
+      Blob: globalThis.Blob,
+      ClipboardItem: globalThis.ClipboardItem,
+
+      // fixme: use our own db api
+      indexedDB: globalThis.indexedDB,
+      IDBRequest: globalThis.IDBRequest,
+      IDBDatabase: globalThis.IDBDatabase,
+      IDBCursorWithValue: globalThis.IDBCursorWithValue,
+      IDBFactory: globalThis.IDBFactory,
+      IDBKeyRange: globalThis.IDBKeyRange,
+      IDBOpenDBRequest: globalThis.IDBOpenDBRequest,
+      IDBTransaction: globalThis.IDBTransaction,
+      IDBObjectStore: globalThis.IDBObjectStore,
+      IDBIndex: globalThis.IDBIndex,
+      IDBCursor: globalThis.IDBCursor,
+      IDBVersionChangeEvent: globalThis.IDBVersionChangeEvent,
+    }
+  );
+  globalThisMap.set(pluginName, pluginGlobalThis);
+  return pluginGlobalThis;
+};
+
+export const setupPluginCode = async (
+  baseUrl: string,
+  pluginName: string,
+  filename: string
+) => {
+  if (!_pluginNestedImportsMap.has(pluginName)) {
+    _pluginNestedImportsMap.set(pluginName, new Map());
+  }
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const currentImportMap = _pluginNestedImportsMap.get(pluginName)!;
+  const isMissingPackage = (name: string) =>
+    _rootImportsMap.has(name) && !currentImportMap.has(name);
+
+  const bundleAnalysis = await fetch(`${baseUrl}/${filename}.json`).then(res =>
+    res.json()
+  );
+  const moduleExports = bundleAnalysis.exports as Record<string, [string]>;
+  const moduleImports = bundleAnalysis.imports as string[];
+  const moduleReexports = bundleAnalysis.reexports as Record<
+    string,
+    [localName: string, exportedName: string][]
+  >;
+  await Promise.all(
+    moduleImports.map(name => {
+      if (isMissingPackage(name)) {
+        return Promise.resolve();
+      } else {
+        importLogger.debug('missing package', name);
+        return setupPluginCode(baseUrl, pluginName, name);
+      }
+    })
+  );
+  const code = await fetch(`${baseUrl}/${filename.replace(/^\.\//, '')}`).then(
+    res => res.text()
+  );
+  importLogger.debug('evaluating', filename);
+  const moduleCompartment = new Compartment(
+    createOrGetGlobalThis(
+      pluginName,
+      // use singleton here to avoid infinite loop
+      createOrGetDynamicImport(baseUrl, pluginName)
+    )
+  );
+  const entryPoint = moduleCompartment.evaluate(code, {
+    __evadeHtmlCommentTest__: true,
+  });
+  const moduleExportsMap = new Map<string, any>();
+  const setVarProxy = new Proxy(
+    {},
+    {
+      get(_, p: string): any {
+        return (newValue: any) => {
+          moduleExportsMap.set(p, newValue);
+        };
+      },
+    }
+  );
+  currentImportMap.set(filename, moduleExportsMap);
+  entryPoint({
+    imports: createImports(pluginName),
+    liveVar: setVarProxy,
+    onceVar: setVarProxy,
+  });
+
+  for (const [newExport, [originalExport]] of Object.entries(moduleExports)) {
+    if (newExport === originalExport) continue;
+    const value = moduleExportsMap.get(originalExport);
+    moduleExportsMap.set(newExport, value);
+    moduleExportsMap.delete(originalExport);
+  }
+
+  for (const [name, reexports] of Object.entries(moduleReexports)) {
+    const targetExports = currentImportMap.get(filename);
+    const moduleExports = currentImportMap.get(name);
+    assertExists(targetExports);
+    assertExists(moduleExports);
+    for (const [exportedName, localName] of reexports) {
+      const exportedValue: any = moduleExports.get(exportedName);
+      assertExists(exportedValue);
+      targetExports.set(localName, exportedValue);
+    }
+  }
+};
+
+const PluginProvider = ({ children }: PropsWithChildren) =>
+  createElement(
+    Provider,
+    {
+      store: rootStore,
+    },
+    children
+  );
+
+const group = new DisposableGroup();
+const entryLogger = new DebugLogger('plugin:entry');
+
+export const evaluatePluginEntry = (pluginName: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const currentImportMap = _pluginNestedImportsMap.get(pluginName)!;
+  const pluginExports = currentImportMap.get('index.js');
+  assertExists(pluginExports);
+  const entryFunction = pluginExports.get('entry');
+  const cleanup = entryFunction(<PluginContext>{
+    register: (part, callback) => {
+      entryLogger.info(`Registering ${pluginName} to ${part}`);
+      if (part === 'headerItem') {
+        rootStore.set(headerItemsAtom, items => ({
+          ...items,
+          [pluginName]: callback as CallbackMap['headerItem'],
+        }));
+      } else if (part === 'editor') {
+        rootStore.set(editorItemsAtom, items => ({
+          ...items,
+          [pluginName]: callback as CallbackMap['editor'],
+        }));
+      } else if (part === 'window') {
+        rootStore.set(windowItemsAtom, items => ({
+          ...items,
+          [pluginName]: callback as CallbackMap['window'],
+        }));
+      } else if (part === 'setting') {
+        rootStore.set(settingItemsAtom, items => ({
+          ...items,
+          [pluginName]: callback as CallbackMap['setting'],
+        }));
+      } else if (part === 'formatBar') {
+        FormatQuickBar.customElements.push((page, getBlockRange) => {
+          const div = document.createElement('div');
+          (callback as CallbackMap['formatBar'])(div, page, getBlockRange);
+          return div;
+        });
+      } else {
+        throw new Error(`Unknown part: ${part}`);
+      }
+    },
+    utils: {
+      PluginProvider,
+    },
+  });
+  if (typeof cleanup !== 'function') {
+    throw new Error('Plugin entry must return a function');
+  }
+  group.add(cleanup);
+};

apps/core/src/bootstrap/register-plugins.ts

@@ -0,0 +1,77 @@
+import { DebugLogger } from '@affine/debug';
+import { registeredPluginAtom, rootStore } from '@toeverything/infra/atom';
+
+import { evaluatePluginEntry, setupPluginCode } from './plugins/setup';
+
+const builtinPluginUrl = new Set([
+  '/plugins/bookmark',
+  '/plugins/copilot',
+  '/plugins/hello-world',
+  '/plugins/image-preview',
+]);
+
+const logger = new DebugLogger('register-plugins');
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __pluginPackageJson__: unknown[];
+}
+
+globalThis.__pluginPackageJson__ = [];
+
+export const pluginRegisterPromise = Promise.all(
+  [...builtinPluginUrl].map(url => {
+    return fetch(`${url}/package.json`)
+      .then(async res => {
+        const packageJson = await res.json();
+        const {
+          name: pluginName,
+          affinePlugin: {
+            release,
+            entry: { core },
+            assets,
+          },
+        } = packageJson;
+        globalThis.__pluginPackageJson__.push(packageJson);
+        logger.debug(`registering plugin ${pluginName}`);
+        logger.debug(`package.json: ${packageJson}`);
+        if (!release && !runtimeConfig.enablePlugin) {
+          return Promise.resolve();
+        }
+        const baseURL = url;
+        const entryURL = `${baseURL}/${core}`;
+        rootStore.set(registeredPluginAtom, prev => [...prev, pluginName]);
+        await setupPluginCode(baseURL, pluginName, core);
+        console.log(`prepareImports for ${pluginName} done`);
+        await fetch(entryURL).then(async () => {
+          if (assets.length > 0) {
+            await Promise.all(
+              assets.map(async (asset: string) => {
+                if (asset.endsWith('.css')) {
+                  const res = await fetch(`${baseURL}/${asset}`);
+                  if (res.ok) {
+                    // todo: how to put css file into sandbox?
+                    return res.text().then(text => {
+                      const style = document.createElement('style');
+                      style.setAttribute('plugin-id', pluginName);
+                      style.textContent = text;
+                      document.head.appendChild(style);
+                    });
+                  }
+                  return null;
+                } else {
+                  return Promise.resolve();
+                }
+              })
+            );
+          }
+          evaluatePluginEntry(pluginName);
+        });
+      })
+      .catch(e => {
+        console.error(`error when fetch plugin from ${url}`, e);
+      });
+  })
+).then(() => {
+  console.info('All plugins loaded');
+});

apps/core/src/bootstrap/setup.ts

@@ -0,0 +1,183 @@
+import {
+  migrateDatabaseBlockTo3,
+  migrateToSubdoc,
+} from '@affine/env/blocksuite';
+import { setupGlobal } from '@affine/env/global';
+import type {
+  LocalIndexedDBDownloadProvider,
+  WorkspaceAdapter,
+} from '@affine/env/workspace';
+import { WorkspaceFlavour, WorkspaceVersion } from '@affine/env/workspace';
+import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
+import {
+  type RootWorkspaceMetadataV2,
+  rootWorkspacesMetadataAtom,
+  workspaceAdaptersAtom,
+} from '@affine/workspace/atom';
+import {
+  migrateLocalBlobStorage,
+  upgradeV1ToV2,
+} from '@affine/workspace/migration';
+import { createIndexedDBDownloadProvider } from '@affine/workspace/providers';
+import { assertExists } from '@blocksuite/global/utils';
+import { rootStore } from '@toeverything/infra/atom';
+
+import { WorkspaceAdapters } from '../adapters/workspace';
+
+async function tryMigration() {
+  const value = localStorage.getItem('jotai-workspaces');
+  if (value) {
+    try {
+      const metadata = JSON.parse(value) as RootWorkspaceMetadata[];
+      const promises: Promise<void>[] = [];
+      const newMetadata = [...metadata];
+      metadata.forEach(oldMeta => {
+        if (!('version' in oldMeta)) {
+          const adapter = WorkspaceAdapters[oldMeta.flavour];
+          assertExists(adapter);
+          const upgrade = async () => {
+            if (oldMeta.flavour !== WorkspaceFlavour.LOCAL) {
+              console.warn('not supported');
+              return;
+            }
+            const workspace = await adapter.CRUD.get(oldMeta.id);
+            if (!workspace) {
+              console.warn('cannot find workspace', oldMeta.id);
+              return;
+            }
+            const doc = workspace.blockSuiteWorkspace.doc;
+            const provider = createIndexedDBDownloadProvider(
+              workspace.id,
+              doc,
+              {
+                awareness:
+                  workspace.blockSuiteWorkspace.awarenessStore.awareness,
+              }
+            ) as LocalIndexedDBDownloadProvider;
+            provider.sync();
+            await provider.whenReady;
+            const newDoc = migrateToSubdoc(doc);
+            if (doc === newDoc) {
+              console.log('doc not changed');
+              return;
+            }
+            const newWorkspace = upgradeV1ToV2(workspace);
+            await migrateDatabaseBlockTo3(newWorkspace.blockSuiteWorkspace.doc);
+
+            const newId = await adapter.CRUD.create(
+              newWorkspace.blockSuiteWorkspace
+            );
+
+            await adapter.CRUD.delete(workspace as any);
+            console.log('migrated', oldMeta.id, newId);
+            const index = newMetadata.findIndex(meta => meta.id === oldMeta.id);
+            newMetadata[index] = {
+              ...oldMeta,
+              id: newId,
+              version: WorkspaceVersion.DatabaseV3,
+            };
+            await migrateLocalBlobStorage(workspace.id, newId);
+            console.log('migrate to v2');
+          };
+
+          // create a new workspace and push it to metadata
+          promises.push(upgrade());
+        } else if (oldMeta.version < WorkspaceVersion.DatabaseV3) {
+          const adapter = WorkspaceAdapters[oldMeta.flavour];
+          assertExists(adapter);
+          promises.push(
+            (async () => {
+              if (oldMeta.flavour !== WorkspaceFlavour.LOCAL) {
+                console.warn('not supported');
+                return;
+              }
+              const workspace = await adapter.CRUD.get(oldMeta.id);
+              if (workspace) {
+                const provider = createIndexedDBDownloadProvider(
+                  workspace.id,
+                  workspace.blockSuiteWorkspace.doc,
+                  {
+                    awareness:
+                      workspace.blockSuiteWorkspace.awarenessStore.awareness,
+                  }
+                ) as LocalIndexedDBDownloadProvider;
+                provider.sync();
+                await provider.whenReady;
+                await migrateDatabaseBlockTo3(
+                  workspace.blockSuiteWorkspace.doc
+                );
+              }
+              const index = newMetadata.findIndex(
+                meta => meta.id === oldMeta.id
+              );
+              newMetadata[index] = {
+                ...oldMeta,
+                version: WorkspaceVersion.DatabaseV3,
+              };
+              console.log('migrate to v3');
+            })()
+          );
+        }
+      });
+
+      await Promise.all(promises)
+        .then(() => {
+          console.log('migration done');
+        })
+        .catch(e => {
+          console.error('migration failed', e);
+        })
+        .finally(() => {
+          localStorage.setItem('jotai-workspaces', JSON.stringify(newMetadata));
+          window.dispatchEvent(new CustomEvent('migration-done'));
+          window.$migrationDone = true;
+        });
+    } catch (e) {
+      console.error('error when migrating data', e);
+    }
+  }
+}
+
+function createFirstAppData() {
+  const createFirst = (): RootWorkspaceMetadataV2[] => {
+    const Plugins = Object.values(WorkspaceAdapters).sort(
+      (a, b) => a.loadPriority - b.loadPriority
+    );
+
+    return Plugins.flatMap(Plugin => {
+      return Plugin.Events['app:init']?.().map(
+        id =>
+          <RootWorkspaceMetadataV2>{
+            id,
+            flavour: Plugin.flavour,
+            version: WorkspaceVersion.DatabaseV3,
+          }
+      );
+    }).filter((ids): ids is RootWorkspaceMetadataV2 => !!ids);
+  };
+  if (localStorage.getItem('is-first-open') !== null) {
+    return;
+  }
+  const result = createFirst();
+  console.info('create first workspace', result);
+  localStorage.setItem('is-first-open', 'false');
+  rootStore.set(rootWorkspacesMetadataAtom, result);
+}
+
+export async function setup() {
+  rootStore.set(
+    workspaceAdaptersAtom,
+    WorkspaceAdapters as Record<
+      WorkspaceFlavour,
+      WorkspaceAdapter<WorkspaceFlavour>
+    >
+  );
+
+  console.log('setup global');
+  setupGlobal();
+
+  createFirstAppData();
+  await tryMigration();
+  await rootStore.get(rootWorkspacesMetadataAtom);
+  console.log('setup done');
+}

apps/core/src/components/__debug__/client/editor.tsx

@@ -1,6 +1,6 @@
 import { initEmptyPage } from '@affine/env/blocksuite';
 import { WorkspaceFlavour } from '@affine/env/workspace';
-import { createEmptyBlockSuiteWorkspace } from '@affine/workspace/utils';
+import { getOrCreateWorkspace } from '@affine/workspace/manager';
 import type { EditorContainer } from '@blocksuite/editor';
 import type { Page } from '@blocksuite/store';
 import type React from 'react';
@@ -8,7 +8,7 @@ import { useCallback } from 'react';
 
 import { BlockSuiteEditor } from '../../blocksuite/block-suite-editor';
 
-const blockSuiteWorkspace = createEmptyBlockSuiteWorkspace(
+const blockSuiteWorkspace = getOrCreateWorkspace(
   'test',
   WorkspaceFlavour.LOCAL
 );

apps/core/src/components/affine/affine-error-eoundary.tsx

@@ -9,17 +9,14 @@ import {
   currentPageIdAtom,
   currentWorkspaceIdAtom,
   rootStore,
-} from '@toeverything/plugin-infra/manager';
+} from '@toeverything/infra/atom';
 import { useAtomValue } from 'jotai/react';
 import { Provider } from 'jotai/react';
-import type { NextRouter } from 'next/router';
 import type { ErrorInfo, ReactElement, ReactNode } from 'react';
 import type React from 'react';
 import { Component } from 'react';
-
-export type AffineErrorBoundaryProps = React.PropsWithChildren<{
-  router: NextRouter;
-}>;
+import { useLocation, useParams } from 'react-router-dom';
+export type AffineErrorBoundaryProps = React.PropsWithChildren;
 
 type AffineError =
   | QueryParamError
@@ -32,13 +29,13 @@ interface AffineErrorBoundaryState {
   error: AffineError | null;
 }
 
-export const DumpInfo = (props: Pick<AffineErrorBoundaryProps, 'router'>) => {
-  const router = props.router;
+export const DumpInfo = () => {
+  const location = useLocation();
   const metadata = useAtomValue(rootWorkspacesMetadataAtom);
   const currentWorkspaceId = useAtomValue(currentWorkspaceIdAtom);
   const currentPageId = useAtomValue(currentPageIdAtom);
-  const path = router.asPath;
-  const query = router.query;
+  const path = location.pathname;
+  const query = useParams();
   return (
     <>
       <div>
@@ -91,24 +88,6 @@ export class AffineErrorBoundary extends Component<
                 Cannot find page {error.pageId} in workspace{' '}
                 {error.workspace.id}
               </span>
-              <button
-                onClick={() => {
-                  this.props.router
-                    .replace({
-                      pathname: '/workspace/[workspaceId]/[pageId]',
-                      query: {
-                        workspaceId: error.workspace.id,
-                        pageId: error.workspace.meta.pageMetas[0].id,
-                      },
-                    })
-                    .finally(() => {
-                      this.setState({ error: null });
-                    });
-                }}
-              >
-                {' '}
-                refresh{' '}
-              </button>
             </>
           </>
         );
@@ -124,7 +103,7 @@ export class AffineErrorBoundary extends Component<
         <>
           {errorDetail}
           <Provider key="JotaiProvider" store={rootStore}>
-            <DumpInfo router={this.props.router} />
+            <DumpInfo />
           </Provider>
         </>
       );