fix: add intersection observer for resize detection (#3819)

* fix: add intersection observer for resize detection

* feat: add IntersectionObserver support for jest environment

* build: add intersection-observer and update package.json

Author: erha19

jest.setup.jsdom.js

@@ -1,5 +1,6 @@
 require('./jest.setup.base');
 require('jest-canvas-mock');
+require('intersection-observer');
 require('jest-fetch-mock').enableMocks();
 const { Buffer } = require('buffer');
 const timer = require('timers');

jest.setup.node.js

@@ -42,6 +42,7 @@ global.getComputedStyle = jsdom.window.getComputedStyle;
 global.window = jsdom.window;
 global.DOMParser = jsdom.window.DOMParser;
 global.MutationObserver = jsdom.window.MutationObserver;
+global.IntersectionObserver = jsdom.window.IntersectionObserver;
 global.KeyboardEvent = jsdom.window.KeyboardEvent;
 global.requestAnimationFrame = (fn) => setTimeout(fn, 16);
 global.cancelAnimationFrame = (timer) => {

package.json

@@ -107,6 +107,7 @@
     "glob": "^8.0.1",
     "handlebars": "^4.7.3",
     "husky": "^7.0.4",
+    "intersection-observer": "^0.12.2",
     "is-git-clean": "^1.1.0",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.4.0",

packages/monaco-enhance/src/browser/zone-widget.ts

@@ -459,6 +459,13 @@ export abstract class ResizeZoneWidget extends ZoneWidget {
 
   protected observeContainer(dom: HTMLDivElement): IDisposable {
     this.wrap = dom;
+    const intersectionObserver = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          this.resizeZoneWidget();
+        }
+      }
+    });
     const mutationObserver = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.type === 'childList') {
@@ -482,9 +489,11 @@ export abstract class ResizeZoneWidget extends ZoneWidget {
       });
       this.resizeZoneWidget();
     });
+    intersectionObserver.observe(this.wrap);
     mutationObserver.observe(this.wrap, { childList: true, subtree: true });
     return {
       dispose() {
+        intersectionObserver.disconnect();
         mutationObserver.disconnect();
       },
     };

yarn.lock

@@ -1992,6 +1992,7 @@ __metadata:
     glob: "npm:^8.0.1"
     handlebars: "npm:^4.7.3"
     husky: "npm:^7.0.4"
+    intersection-observer: "npm:^0.12.2"
     is-git-clean: "npm:^1.1.0"
     jest: "npm:^29.7.0"
     jest-canvas-mock: "npm:^2.4.0"
@@ -10904,6 +10905,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"intersection-observer@npm:^0.12.2":
+  version: 0.12.2
+  resolution: "intersection-observer@npm:0.12.2"
+  checksum: 10/cb1a6369bd1636b3f227d7cb7fec22f5a35b9d8ba9e26303b405d50c54c3ef02c5a547107b1d951e7eb421e192a564222faf4660a21fad69c34dcb9f926c159c
+  languageName: node
+  linkType: hard
+
 "invariant@npm:^2.2.4":
   version: 2.2.4
   resolution: "invariant@npm:2.2.4"