refactor(editor): move worker renderer to presets with basic test (#10127)

blocksuite/presets/src/__tests__/edgeless/viewport-renderer.spec.ts

@@ -0,0 +1,23 @@
+import { ViewportTurboRendererExtension } from '@blocksuite/affine-shared/viewport-renderer';
+import { beforeEach, describe, expect, test } from 'vitest';
+
+import { wait } from '../utils/common.js';
+import { addSampleNotes } from '../utils/doc-generator.js';
+import { setupEditor } from '../utils/setup.js';
+
+describe('viewport turbo renderer', () => {
+  beforeEach(async () => {
+    const cleanup = await setupEditor('edgeless', [
+      ViewportTurboRendererExtension,
+    ]);
+    return cleanup;
+  });
+
+  test('should render 6 notes in viewport', async () => {
+    addSampleNotes(doc, 6);
+    await wait();
+
+    const notes = document.querySelectorAll('affine-edgeless-note');
+    expect(notes.length).toBe(6);
+  });
+});

blocksuite/presets/src/__tests__/utils/doc-generator.ts

@@ -0,0 +1,41 @@
+import { type Store, Text } from '@blocksuite/store';
+
+function addParagraph(doc: Store, noteId: string, content: string) {
+  const props = { text: new Text(content) };
+  doc.addBlock('affine:paragraph', props, noteId);
+}
+
+function addSampleNote(doc: Store, noteId: string, i: number) {
+  addParagraph(doc, noteId, `Note ${i + 1}`);
+  addParagraph(doc, noteId, 'Hello World!');
+  addParagraph(
+    doc,
+    noteId,
+    'Hello World! Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Sed do eiusmod tempor incididunt.'
+  );
+  addParagraph(
+    doc,
+    noteId,
+    '你好这是测试，这是一个为了换行而写的中文段落。这个段落会自动换行。'
+  );
+}
+
+export function addSampleNotes(doc: Store, n: number) {
+  const cols = Math.ceil(Math.sqrt(n));
+  const NOTE_WIDTH = 500;
+  const NOTE_HEIGHT = 250;
+  const SPACING = 50;
+
+  const rootId = doc.getBlocksByFlavour('affine:page')[0]?.id;
+
+  for (let i = 0; i < n; i++) {
+    const row = Math.floor(i / cols);
+    const col = i % cols;
+    const x = col * (NOTE_WIDTH + SPACING);
+    const y = row * (NOTE_HEIGHT + SPACING);
+
+    const xywh = `[${x},${y},${NOTE_WIDTH},${NOTE_HEIGHT}]`;
+    const noteId = doc.addBlock('affine:note', { xywh }, rootId);
+    addSampleNote(doc, noteId, i);
+  }
+}

blocksuite/presets/src/__tests__/utils/renderer-entry.ts

@@ -0,0 +1,12 @@
+import { ViewportTurboRendererExtension } from '@blocksuite/affine-shared/viewport-renderer';
+
+import { addSampleNotes } from './doc-generator.js';
+import { setupEditor } from './setup.js';
+
+async function init() {
+  setupEditor('edgeless', [ViewportTurboRendererExtension]);
+  addSampleNotes(doc, 6);
+  doc.load();
+}
+
+init();

blocksuite/presets/src/__tests__/utils/setup.ts

@@ -2,7 +2,7 @@ import '@toeverything/theme/style.css';
 import '@toeverything/theme/fonts.css';
 
 import { effects as blocksEffects } from '@blocksuite/blocks/effects';
-import type { Store, Transformer } from '@blocksuite/store';
+import type { ExtensionType, Store, Transformer } from '@blocksuite/store';
 
 import { effects } from '../../effects.js';
 
@@ -59,7 +59,11 @@ function initCollection(collection: TestWorkspace) {
   doc.resetHistory();
 }
 
-async function createEditor(collection: TestWorkspace, mode: DocMode = 'page') {
+async function createEditor(
+  collection: TestWorkspace,
+  mode: DocMode = 'page',
+  extensions: ExtensionType[] = []
+) {
   const app = document.createElement('div');
   const blockCollection = collection.docs.values().next().value;
   assertExists(blockCollection, 'Need to create a doc first');
@@ -69,9 +73,11 @@ async function createEditor(collection: TestWorkspace, mode: DocMode = 'page') {
   editor.mode = mode;
   editor.pageSpecs = editor.pageSpecs.concat([
     FontConfigExtension(CommunityCanvasTextFonts),
+    ...extensions,
   ]);
   editor.edgelessSpecs = editor.edgelessSpecs.concat([
     FontConfigExtension(CommunityCanvasTextFonts),
+    ...extensions,
   ]);
   app.append(editor);
 
@@ -87,7 +93,10 @@ async function createEditor(collection: TestWorkspace, mode: DocMode = 'page') {
   return app;
 }
 
-export async function setupEditor(mode: DocMode = 'page') {
+export async function setupEditor(
+  mode: DocMode = 'page',
+  extensions: ExtensionType[] = []
+) {
   const collection = new TestWorkspace(createCollectionOptions());
   collection.storeExtensions = StoreExtensions;
   collection.meta.initialize();
@@ -95,7 +104,7 @@ export async function setupEditor(mode: DocMode = 'page') {
   window.collection = collection;
 
   initCollection(collection);
-  const appElement = await createEditor(collection, mode);
+  const appElement = await createEditor(collection, mode, extensions);
 
   return () => {
     appElement.remove();