fix(editor): worker loading in webpack env (#10832)

### TL;DR

Created dedicated worker entry points to avoid dynamic imports.

### What changed?

- Painters are provided during worker initialization
- Removed `ParagraphPaintConfigExtension` and the associated configuration system
- Created dedicated worker entry points in both the integration test and frontend packages
- Modified `ViewportLayoutPainter` to accept painters in its constructor
- Updated the `TurboRendererConfig` interface to require a `painterWorkerEntry` function

### Why make this change?

Webpack support. Extension objects in main thread are not available to be passed into workers. Dynamic painter path import is hard to support in webpack environment. With the [webpack-ignore](https://webpack.js.org/api/module-methods/#webpackignore) rule, there are still build errors in webpack.
This commit is contained in:
doodlewind
2025-03-14 05:26:57 +00:00
parent 8af0526a22
commit be9f44fc4f
13 changed files with 100 additions and 99 deletions

View File

@@ -1,13 +1,21 @@
import { ViewportTurboRendererExtension } from '@blocksuite/affine-gfx-turbo-renderer';
import { ParagraphLayoutHandlerExtension } from '@blocksuite/affine/blocks/paragraph';
import {
TurboRendererConfigFactory,
ViewportTurboRendererExtension,
} from '@blocksuite/affine-gfx-turbo-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';
import { createPainterWorker, setupEditor } from '../utils/setup.js';
describe('viewport turbo renderer', () => {
beforeEach(async () => {
const cleanup = await setupEditor('edgeless', [
ParagraphLayoutHandlerExtension,
TurboRendererConfigFactory({
painterWorkerEntry: createPainterWorker,
}),
ViewportTurboRendererExtension,
]);
return cleanup;

View File

@@ -1,7 +1,4 @@
import {
ParagraphLayoutHandlerExtension,
ParagraphPaintConfigExtension,
} from '@blocksuite/affine/blocks/paragraph';
import { ParagraphLayoutHandlerExtension } from '@blocksuite/affine/blocks/paragraph';
import {
TurboRendererConfigFactory,
ViewportTurboRendererExtension,
@@ -9,17 +6,13 @@ import {
} from '@blocksuite/affine/gfx/turbo-renderer';
import { addSampleNotes } from './doc-generator.js';
import { setupEditor } from './setup.js';
import { createPainterWorker, setupEditor } from './setup.js';
async function init() {
setupEditor('edgeless', [
ParagraphLayoutHandlerExtension,
ParagraphPaintConfigExtension,
TurboRendererConfigFactory({
options: {
zoomThreshold: 1,
debounceTime: 1000,
},
painterWorkerEntry: createPainterWorker,
}),
ViewportTurboRendererExtension,
]);

View File

@@ -99,6 +99,16 @@ async function createEditor(
return app;
}
export function createPainterWorker() {
const worker = new Worker(
new URL('./turbo-painter-entry.worker.ts', import.meta.url),
{
type: 'module',
}
);
return worker;
}
export async function setupEditor(
mode: DocMode = 'page',
extensions: ExtensionType[] = []

View File

@@ -0,0 +1,6 @@
import { ParagraphLayoutPainter } from '@blocksuite/affine-block-paragraph/turbo-painter';
import { ViewportLayoutPainter } from '@blocksuite/affine-gfx-turbo-renderer/painter';
new ViewportLayoutPainter({
'affine:paragraph': new ParagraphLayoutPainter(),
});