From 7cd75824a47323a1148ccde1b844fa6fe43ab255 Mon Sep 17 00:00:00 2001
From: Brooooooklyn <lynweklm@gmail.com>
Date: Thu, 28 Mar 2024 10:48:22 +0000
Subject: [PATCH] fix(core): use ResizeObserver polyfill (#6360)

- Close https://github.com/toeverything/AFFiNE/issues/6359
---
 packages/frontend/core/package.json                   | 1 +
 packages/frontend/core/src/bootstrap/preload.ts       | 3 +++
 packages/frontend/electron/renderer/index.tsx         | 3 ---
 packages/frontend/web/package.json                    | 1 -
 packages/frontend/web/src/index.tsx                   | 1 -
 packages/frontend/web/src/polyfill/resize-observer.ts | 8 --------
 yarn.lock                                             | 2 +-
 7 files changed, 5 insertions(+), 14 deletions(-)
 delete mode 100644 packages/frontend/web/src/polyfill/resize-observer.ts

diff --git a/packages/frontend/core/package.json b/packages/frontend/core/package.json
index 6cdaf710ea..2d31e9d20e 100644
--- a/packages/frontend/core/package.json
+++ b/packages/frontend/core/package.json
@@ -33,6 +33,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
+    "@juggle/resize-observer": "^3.4.0",
     "@marsidev/react-turnstile": "^0.5.3",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
diff --git a/packages/frontend/core/src/bootstrap/preload.ts b/packages/frontend/core/src/bootstrap/preload.ts
index 670182b9f1..d78043eca3 100644
--- a/packages/frontend/core/src/bootstrap/preload.ts
+++ b/packages/frontend/core/src/bootstrap/preload.ts
@@ -3,5 +3,8 @@ import './register-blocksuite-components';
 import './edgeless-template';
 
 import { setupGlobal } from '@affine/env/global';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 setupGlobal();
+
+window.ResizeObserver = ResizeObserver;
diff --git a/packages/frontend/electron/renderer/index.tsx b/packages/frontend/electron/renderer/index.tsx
index 506b925537..e92fb2b15d 100644
--- a/packages/frontend/electron/renderer/index.tsx
+++ b/packages/frontend/electron/renderer/index.tsx
@@ -4,7 +4,6 @@ import '@affine/core/bootstrap/preload';
 import { appConfigProxy } from '@affine/core/hooks/use-app-config-storage';
 import { performanceLogger } from '@affine/core/shared';
 import { apis, events } from '@affine/electron-api';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { init, replayIntegration, setTags } from '@sentry/electron/renderer';
 import {
   init as reactInit,
@@ -22,8 +21,6 @@ import {
 
 import { App } from './app';
 
-window.ResizeObserver = ResizeObserver;
-
 const performanceMainLogger = performanceLogger.namespace('main');
 function main() {
   performanceMainLogger.info('start');
diff --git a/packages/frontend/web/package.json b/packages/frontend/web/package.json
index af5eb3213b..d661052789 100644
--- a/packages/frontend/web/package.json
+++ b/packages/frontend/web/package.json
@@ -13,7 +13,6 @@
     "@affine/component": "workspace:*",
     "@affine/core": "workspace:*",
     "@affine/env": "workspace:*",
-    "@juggle/resize-observer": "^3.4.0",
     "@sentry/react": "^7.108.0",
     "core-js": "^3.36.1",
     "intl-segmenter-polyfill-rs": "^0.1.7",
diff --git a/packages/frontend/web/src/index.tsx b/packages/frontend/web/src/index.tsx
index b0facfeb8d..8f1da00f9a 100644
--- a/packages/frontend/web/src/index.tsx
+++ b/packages/frontend/web/src/index.tsx
@@ -1,7 +1,6 @@
 import './polyfill/dispose';
 import './polyfill/intl-segmenter';
 import './polyfill/request-idle-callback';
-import './polyfill/resize-observer';
 import '@affine/core/bootstrap/preload';
 
 import { performanceLogger } from '@affine/core/shared';
diff --git a/packages/frontend/web/src/polyfill/resize-observer.ts b/packages/frontend/web/src/polyfill/resize-observer.ts
deleted file mode 100644
index 1c543dcdfb..0000000000
--- a/packages/frontend/web/src/polyfill/resize-observer.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ResizeObserver } from '@juggle/resize-observer';
-
-// prevents the following error in development mode:
-// ResizeOvserver loop limit exceeded
-// https://github.com/petyosi/react-virtuoso/issues/875#issuecomment-1962897033
-if (process.env.NODE_ENV !== 'production') {
-  window.ResizeObserver = ResizeObserver;
-}
diff --git a/yarn.lock b/yarn.lock
index 4e9418ba67..dfb19fde07 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -341,6 +341,7 @@ __metadata:
     "@emotion/react": "npm:^11.11.3"
     "@emotion/server": "npm:^11.11.0"
     "@emotion/styled": "npm:^11.11.0"
+    "@juggle/resize-observer": "npm:^3.4.0"
     "@marsidev/react-turnstile": "npm:^0.5.3"
     "@perfsee/webpack": "npm:^1.12.2"
     "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11"
@@ -827,7 +828,6 @@ __metadata:
     "@affine/component": "workspace:*"
     "@affine/core": "workspace:*"
     "@affine/env": "workspace:*"
-    "@juggle/resize-observer": "npm:^3.4.0"
     "@sentry/react": "npm:^7.108.0"
     "@types/react": "npm:^18.2.60"
     "@types/react-dom": "npm:^18.2.19"