diff --git a/.jules/bolt.md b/.jules/bolt.md deleted file mode 100644 index 404cb8b..0000000 --- a/.jules/bolt.md +++ /dev/null @@ -1,4 +0,0 @@ -## 2024-06-02 - Eliminate Layout Thrashing in Theme Sync - -**Learning:** Interleaving `window.getComputedStyle().getPropertyValue()` and `element.style.setProperty()` inside a loop causes layout thrashing (forced synchronous layout) multiple times per animation frame during drawing. -**Action:** When synchronizing many DOM styles based on computed styles, always collect the computed values in a first pass, and only then apply `setProperty` updates in a separate second pass, preferably also skipping updates where the value hasn't actually changed. diff --git a/src/client/components/EditorCanvas.tsx b/src/client/components/EditorCanvas.tsx index 7bb9117..9876db0 100644 --- a/src/client/components/EditorCanvas.tsx +++ b/src/client/components/EditorCanvas.tsx @@ -28,7 +28,7 @@ function sceneFromEditor( files: BinaryFiles, ): ScenePayload { return { - // ⚡ Bolt: Excalidraw passes immutable arrays, avoid copying it on every onChange event + // Excalidraw passes immutable arrays, avoid copying it on every onChange event elements: elements as unknown[], appState: appState as unknown as Record, files: files as unknown as Record, diff --git a/src/client/hooks/useThemeTokenSync.ts b/src/client/hooks/useThemeTokenSync.ts index 5a031f7..30cda88 100644 --- a/src/client/hooks/useThemeTokenSync.ts +++ b/src/client/hooks/useThemeTokenSync.ts @@ -33,7 +33,7 @@ export function useThemeTokenSync( return; } - // ⚡ Bolt: Read all tokens first to avoid layout thrashing + // Read all tokens first to avoid layout thrashing const computedStyles = window.getComputedStyle(excalidrawRoot); const updates: Array<[string, string]> = []; @@ -44,7 +44,7 @@ export function useThemeTokenSync( } } - // ⚡ Bolt: Write in a separate pass, skipping unchanged values + // Write in a separate pass, skipping unchanged values for (const [targetToken, value] of updates) { if (appShell.style.getPropertyValue(targetToken) !== value) { appShell.style.setProperty(targetToken, value);