refactor(editor): add gfx turbo renderer package (#10745)

The `ViewportTurboRendererExtension` is now extracted from `@blocksuite/affine-shared` to `@blocksuite/affine-gfx-turbo-renderer` with minimal dependencies, mirroring the gfx text package in #10378.

blocksuite/affine/all/package.json

@@ -37,6 +37,7 @@
     "@blocksuite/affine-fragment-frame-panel": "workspace:*",
     "@blocksuite/affine-fragment-outline": "workspace:*",
     "@blocksuite/affine-gfx-text": "workspace:*",
+    "@blocksuite/affine-gfx-turbo-renderer": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
@@ -106,6 +107,7 @@
     "./fragments/frame-panel": "./src/fragments/frame-panel.ts",
     "./fragments/outline": "./src/fragments/outline.ts",
     "./gfx/text": "./src/gfx/text.ts",
+    "./gfx/turbo-renderer": "./src/gfx/turbo-renderer.ts",
     "./components/block-selection": "./src/components/block-selection.ts",
     "./components/block-zero-width": "./src/components/block-zero-width.ts",
     "./components/caption": "./src/components/caption.ts",

blocksuite/affine/all/src/gfx/turbo-renderer.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-gfx-turbo-renderer';

blocksuite/affine/all/src/shared/viewport-renderer.ts

@@ -1 +0,0 @@
-export * from '@blocksuite/affine-shared/viewport-renderer';

blocksuite/affine/all/tsconfig.json

@@ -31,6 +31,7 @@
     { "path": "../fragments/fragment-frame-panel" },
     { "path": "../fragments/fragment-outline" },
     { "path": "../gfx/text" },
+    { "path": "../gfx/turbo-renderer" },
     { "path": "../model" },
     { "path": "../rich-text" },
     { "path": "../shared" },

blocksuite/affine/gfx/turbo-renderer/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@blocksuite/affine-gfx-turbo-renderer",
+  "description": "Turbo renderer for viewport in BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "test:unit": "nx vite:test --run --passWithNoTests",
+    "test:unit:coverage": "nx vite:test --run --coverage",
+    "test:e2e": "playwright test"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/block-std": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@types/lodash-es": "^4.17.12",
+    "lodash-es": "^4.17.21",
+    "tweakpane": "^4.0.5"
+  },
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.20.0"
+}

blocksuite/affine/gfx/turbo-renderer/src/index.ts

@@ -0,0 +1,2 @@
+export * from './turbo-renderer.js';
+export * from './types.js';

blocksuite/affine/gfx/turbo-renderer/src/renderer-utils.ts

@@ -8,12 +8,12 @@ import {
 import { Pane } from 'tweakpane';
 
 import { getSentenceRects, segmentSentences } from './text-utils.js';
+import type { ViewportTurboRendererExtension } from './turbo-renderer.js';
 import type {
   ParagraphLayout,
   RenderingState,
   ViewportLayout,
 } from './types.js';
-import type { ViewportTurboRendererExtension } from './viewport-renderer.js';
 
 export function syncCanvasSize(canvas: HTMLCanvasElement, host: HTMLElement) {
   const hostRect = host.getBoundingClientRect();

blocksuite/affine/gfx/turbo-renderer/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../../../framework/block-std" },
+    { "path": "../../../framework/global" }
+  ]
+}

blocksuite/affine/shared/package.json

@@ -47,7 +47,6 @@
     "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",
     "remark-stringify": "^11.0.0",
-    "tweakpane": "^4.0.5",
     "unified": "^11.0.5",
     "yjs": "^13.6.21",
     "zod": "^3.23.8"
@@ -62,7 +61,6 @@
     "./theme": "./src/theme/index.ts",
     "./styles": "./src/styles/index.ts",
     "./services": "./src/services/index.ts",
-    "./viewport-renderer": "./src/viewport-renderer/index.ts",
     "./adapters": "./src/adapters/index.ts"
   },
   "files": [

blocksuite/affine/shared/src/viewport-renderer/index.ts

@@ -1,2 +0,0 @@
-export * from './types.js';
-export * from './viewport-renderer.js';

blocksuite/integration-test/src/__tests__/edgeless/viewport-renderer.spec.ts

@@ -1,4 +1,4 @@
-import { ViewportTurboRendererExtension } from '@blocksuite/affine-shared/viewport-renderer';
+import { ViewportTurboRendererExtension } from '@blocksuite/affine-gfx-turbo-renderer';
 import { beforeEach, describe, expect, test } from 'vitest';
 
 import { wait } from '../utils/common.js';

blocksuite/integration-test/src/__tests__/utils/renderer-entry.ts

@@ -1,7 +1,7 @@
 import {
   ViewportTurboRendererExtension,
   ViewportTurboRendererIdentifier,
-} from '@blocksuite/affine-shared/viewport-renderer';
+} from '@blocksuite/affine/gfx/turbo-renderer';
 
 import { addSampleNotes } from './doc-generator.js';
 import { setupEditor } from './setup.js';

blocksuite/integration-test/src/__tests__/utils/setup.ts

@@ -20,7 +20,7 @@ import {
   CommunityCanvasTextFonts,
   FontConfigExtension,
 } from '@blocksuite/affine/shared/services';
-import type { ViewportTurboRendererExtension } from '@blocksuite/affine-shared/viewport-renderer';
+import type { ViewportTurboRendererExtension } from '@blocksuite/affine-gfx-turbo-renderer';
 import { Schema, Text } from '@blocksuite/store';
 import {
   createAutoIncrementIdGenerator,

packages/frontend/core/src/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -24,8 +24,8 @@ import { MemberSearchService } from '@affine/core/modules/permissions';
 import { WorkspaceService } from '@affine/core/modules/workspace';
 import track from '@affine/track';
 import type { DocTitle } from '@blocksuite/affine/fragments/doc-title';
+import { ViewportTurboRendererExtension } from '@blocksuite/affine/gfx/turbo-renderer';
 import type { DocMode } from '@blocksuite/affine/model';
-import { ViewportTurboRendererExtension } from '@blocksuite/affine/shared/viewport-renderer';
 import type { Store } from '@blocksuite/affine/store';
 import {
   useFramework,

tools/utils/src/workspace.gen.ts

@@ -29,6 +29,7 @@ export const PackageList = [
       'blocksuite/affine/fragments/fragment-frame-panel',
       'blocksuite/affine/fragments/fragment-outline',
       'blocksuite/affine/gfx/text',
+      'blocksuite/affine/gfx/turbo-renderer',
       'blocksuite/affine/model',
       'blocksuite/affine/rich-text',
       'blocksuite/affine/shared',
@@ -447,6 +448,14 @@ export const PackageList = [
       'blocksuite/framework/store',
     ],
   },
+  {
+    location: 'blocksuite/affine/gfx/turbo-renderer',
+    name: '@blocksuite/affine-gfx-turbo-renderer',
+    workspaceDependencies: [
+      'blocksuite/framework/block-std',
+      'blocksuite/framework/global',
+    ],
+  },
   {
     location: 'blocksuite/affine/model',
     name: '@blocksuite/affine-model',
@@ -942,6 +951,7 @@ export type PackageName =
   | '@blocksuite/affine-fragment-frame-panel'
   | '@blocksuite/affine-fragment-outline'
   | '@blocksuite/affine-gfx-text'
+  | '@blocksuite/affine-gfx-turbo-renderer'
   | '@blocksuite/affine-model'
   | '@blocksuite/affine-rich-text'
   | '@blocksuite/affine-shared'

tsconfig.json

@@ -76,6 +76,7 @@
     { "path": "./blocksuite/affine/fragments/fragment-frame-panel" },
     { "path": "./blocksuite/affine/fragments/fragment-outline" },
     { "path": "./blocksuite/affine/gfx/text" },
+    { "path": "./blocksuite/affine/gfx/turbo-renderer" },
     { "path": "./blocksuite/affine/model" },
     { "path": "./blocksuite/affine/rich-text" },
     { "path": "./blocksuite/affine/shared" },

yarn.lock

@@ -2870,6 +2870,18 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-gfx-turbo-renderer@workspace:*, @blocksuite/affine-gfx-turbo-renderer@workspace:blocksuite/affine/gfx/turbo-renderer":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-gfx-turbo-renderer@workspace:blocksuite/affine/gfx/turbo-renderer"
+  dependencies:
+    "@blocksuite/block-std": "workspace:*"
+    "@blocksuite/global": "workspace:*"
+    "@types/lodash-es": "npm:^4.17.12"
+    lodash-es: "npm:^4.17.21"
+    tweakpane: "npm:^4.0.5"
+  languageName: unknown
+  linkType: soft
+
 "@blocksuite/affine-model@workspace:*, @blocksuite/affine-model@workspace:blocksuite/affine/model":
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-model@workspace:blocksuite/affine/model"
@@ -2959,7 +2971,6 @@ __metadata:
     remark-math: "npm:^6.0.0"
     remark-parse: "npm:^11.0.0"
     remark-stringify: "npm:^11.0.0"
-    tweakpane: "npm:^4.0.5"
     unified: "npm:^11.0.5"
     vitest: "npm:3.0.8"
     yjs: "npm:^13.6.21"
@@ -3138,6 +3149,7 @@ __metadata:
     "@blocksuite/affine-fragment-frame-panel": "workspace:*"
     "@blocksuite/affine-fragment-outline": "workspace:*"
     "@blocksuite/affine-gfx-text": "workspace:*"
+    "@blocksuite/affine-gfx-turbo-renderer": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-rich-text": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"