feat: new listenToWindowResizeEvent option for html dimensions feature

In polling and mutation implementations, the web script uses
window.addEventListener('resize', ...) which could cause infinite loops
in some edge cases. You can choose to disable those listeners for those
specific implementations via setting `listenToWindowResizeEvent` option
to false.

Author: jsamr

packages/webshell/etc/webshell.api.md

@@ -245,6 +245,7 @@ export const HandleHTMLDimensionsFeature: FeatureClass<HandleHTMLDimensionsOptio
 export interface HandleHTMLDimensionsOptions {
     deltaMin?: number;
     forceImplementation?: HTMLDimensionsImplementation | false;
+    listenToWindowResizeEvent?: boolean;
     pollingInterval?: number;
 }
 

packages/webshell/src/features/HandleHTMLDimensionsFeature.ts

@@ -42,6 +42,7 @@ export interface HandleHTMLDimensionsOptions {
    * @defaultValue 200
    */
   pollingInterval?: number;
+
   /**
    * The minimum difference between two updates' dimensions to trigger a change
    * event.
@@ -50,6 +51,18 @@ export interface HandleHTMLDimensionsOptions {
    * @defaultValue 0
    */
   deltaMin?: number;
+
+  /**
+   * Allow or disallow using `window.addEventListener('resize', handler)` to
+   * complement dimensions extraction.
+   *
+   * @remarks
+   * This option only affects 'polling' and 'resize' implementations.
+   *
+   *
+   * @defaultValue `true`
+   */
+  listenToWindowResizeEvent?: boolean;
 }
 
 /**
@@ -82,7 +95,8 @@ export interface HTMLDimensions {
 const defaultOptions: Required<HandleHTMLDimensionsOptions> = {
   deltaMin: 0,
   forceImplementation: false,
-  pollingInterval: 200
+  pollingInterval: 200,
+  listenToWindowResizeEvent: true
 };
 
 /**

packages/webshell/src/features/HandleHTMLDimensionsFeature.webjs

@@ -1,6 +1,8 @@
 function HandleHTMLDimensionsFeature(context) {
   var options = context.options || {};
   var forceImplementation = options.forceImplementation || false;
+  var listenToWindowResizeEvent =
+    options.listenToWindowResizeEvent === false ? false : true;
   var pollingInterval =
     typeof options.pollingInterval === 'number' ? options.pollingInterval : 200;
   var deltaMin = options.deltaMin || 0;
@@ -62,7 +64,9 @@ function HandleHTMLDimensionsFeature(context) {
   ) {
     // mutation mode
     var observerPostDimensions = createPostDimensions('mutation');
-    window.addEventListener('resize', observerPostDimensions);
+    if (listenToWindowResizeEvent) {
+      window.addEventListener('resize', observerPostDimensions);
+    }
     var observer = new MutationObserver(observerPostDimensions);
     observer.observe(document, {
       subtree: true,
@@ -72,7 +76,9 @@ function HandleHTMLDimensionsFeature(context) {
   } else {
     // polling mode
     var pollingPostDimensions = createPostDimensions('polling');
-    window.addEventListener('resize', pollingPostDimensions);
+    if (listenToWindowResizeEvent) {
+      window.addEventListener('resize', pollingPostDimensions);
+    }
     setInterval(pollingPostDimensions, pollingInterval);
     pollingPostDimensions();
     forceImplementation !== 'polling' &&