fix(core): use ResizeObserver polyfill (#6360)

- Close https://github.com/toeverything/AFFiNE/issues/6359

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",

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;

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');

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",

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';

packages/frontend/web/src/polyfill/resize-observer.ts

@@ -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;
-}

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"