Add auto teardown of event listeners in child page

packages/child/index.js

@@ -60,7 +60,6 @@ import {
   WIDTH,
   WIDTH_EDGE,
 } from '../common/consts'
-import { addEventListener, removeEventListener } from '../common/listeners'
 import setMode, { getKey, getModeData, getModeLabel } from '../common/mode'
 import {
   capitalizeFirstLetter,
@@ -96,6 +95,11 @@ import {
   warn,
 } from './console'
 import { getBoolean, getNumber } from './from-string'
+import {
+  addEventListener,
+  removeEventListener,
+  tearDownList,
+} from './listeners'
 import createMutationObserver from './observers/mutation'
 import createOverflowObserver from './observers/overflow'
 import createPerformanceObserver, {
@@ -132,7 +136,6 @@ function iframeResizerChild() {
   const eventCancelTimer = 128
   const eventHandlersByName = {}
   const heightCalcModeDefault = AUTO
-  const tearDown = []
   const widthCalcModeDefault = SCROLL
 
   let autoResize = true
@@ -208,7 +211,9 @@ function iframeResizerChild() {
     readDataFromParent(data)
 
     setConsoleOptions({ id: parentId, enabled: logging, expand: logExpand })
+    consoleEvent('initReceived')
     log(`Initialising iframe v${VERSION} ${window.location.href}`)
+
     readDataFromPage()
 
     const setup = [
@@ -224,26 +229,28 @@ function iframeResizerChild() {
       checkAndSetupTags,
       bothDirections ? id : checkBlockingCSS,
 
-      applySelectors,
-      setupPublicMethods,
-      setupMouseEvents,
-      setupInPageLinks,
       setMargin,
       () => setBodyStyle('background', bodyBackground),
       () => setBodyStyle('padding', bodyPadding),
 
       bothDirections ? id : stopInfiniteResizingOfIframe,
       injectClearFixIntoBodyElement,
 
-      initEventListeners,
+      applySelectors,
       attachObservers,
+
+      setupInPageLinks,
+      setupEventListeners,
+      setupMouseEvents,
       setupOnPageHide,
+      setupPublicMethods,
     ]
 
     isolate(setup)
 
     checkReadyYet(once(onReady))
     log('Initialization complete')
+    endAutoGroup()
 
     sendSize(
       INIT,
@@ -263,18 +270,20 @@ function iframeResizerChild() {
     consoleEvent(PAGE_HIDE)
     info('Page persisted:', persisted)
     if (persisted) return
-    tearDown.forEach(invoke)
+    tearDownList.forEach(invoke)
   }
 
   const setupOnPageHide = () =>
     addEventListener(window, lower(PAGE_HIDE), onPageHide)
 
+  let readyChecked = false
   function checkReadyYet(readyCallback) {
     if (document.readyState === 'complete') isolateUserCode(readyCallback)
-    else
+    else if (!readyChecked)
       addEventListener(document, READY_STATE_CHANGE, () =>
         checkReadyYet(readyCallback),
       )
+    readyChecked = true
   }
 
   function checkAndSetupTags() {
@@ -526,13 +535,6 @@ See <u>https://iframe-resizer.com/api/child</> for more details.`,
     }
 
     listener[options.method](options.eventName)
-
-    log(
-      `${capitalizeFirstLetter(options.method)} event listener: %c${
-        options.eventType
-      }`,
-      HIGHLIGHT,
-    )
   }
 
   function manageEventListeners(method) {
@@ -547,12 +549,6 @@ See <u>https://iframe-resizer.com/api/child</> for more details.`,
       eventType: 'Before Print',
       eventName: 'beforeprint',
     })
-
-    manageTriggerEvent({
-      method,
-      eventType: 'Ready State Change',
-      eventName: READY_STATE_CHANGE,
-    })
   }
 
   function checkDeprecatedAttrs() {
@@ -641,13 +637,12 @@ This version of <i>iframe-resizer</> can auto detect the most suitable ${label}
     }
   }
 
-  function initEventListeners() {
+  function setupEventListeners() {
     if (autoResize !== true) {
       log('Auto Resize disabled')
     }
 
     manageEventListeners('add')
-    tearDown.push(() => manageEventListeners('remove'))
   }
 
   function injectClearFixIntoBodyElement() {
@@ -1112,13 +1107,12 @@ This version of <i>iframe-resizer</> can auto detect the most suitable ${label}
   }
 
   function pushDisconnectsOnToTearDown(observers) {
-    tearDown.push(...observers.map((observer) => observer.disconnect))
+    tearDownList.push(...observers.map((observer) => observer.disconnect))
   }
 
   function attachObservers() {
     const nodeList = getAllElements(document.documentElement)
 
-    log('Attaching Observers')
     const observers = [
       createMutationObserver(mutationObserved),
       createOverflowObservers(nodeList),
@@ -1488,11 +1482,13 @@ This version of <i>iframe-resizer</> can auto detect the most suitable ${label}
           totalTime = performance.now()
           timerActive = true
 
-          rafId = requestAnimationFrame(() => {
-            sendPending = false
-            consoleEvent('requestAnimationFrame')
-            debug(`Reset sendPending: %c${triggerEvent}`, HIGHLIGHT)
-          })
+          if (!rafId)
+            rafId = requestAnimationFrame(() => {
+              sendPending = false
+              rafId = null
+              consoleEvent('requestAnimationFrame')
+              debug(`Reset sendPending: %c${triggerEvent}`, HIGHLIGHT)
+            })
 
           sizeIframe(
             triggerEvent,
@@ -1765,6 +1761,7 @@ This version of <i>iframe-resizer</> can auto detect the most suitable ${label}
     window.iframeChildListener = (data) =>
       setTimeout(() => received({ data, sameOrigin: true }))
 
+    consoleEvent('listen')
     addEventListener(window, MESSAGE, received)
     addEventListener(document, READY_STATE_CHANGE, ready)
 

packages/child/listeners.js

@@ -0,0 +1,20 @@
+import { HIGHLIGHT } from 'auto-console-group'
+
+import { log } from './console'
+
+export const tearDownList = []
+
+function logEvent(type, evt) {
+  log(`${type} event listener: %c${evt}`, HIGHLIGHT)
+}
+
+export const removeEventListener = (el, evt, func, options) => {
+  el.removeEventListener(evt, func, options)
+  logEvent('Removed', evt)
+}
+
+export const addEventListener = (el, evt, func, options = false) => {
+  el.addEventListener(evt, func, options)
+  tearDownList.push(() => removeEventListener(el, evt, func, options))
+  logEvent('Added', evt)
+}

packages/child/observers/mutation.js

@@ -144,7 +144,7 @@ export default function createMutationObserver(callback) {
 
   observer.observe(target, config)
 
-  info('Attached MutationObserver to body')
+  info('Attached%c MutationObserver%c to body', HIGHLIGHT, FOREGROUND)
 
   return {
     ...observer,
@@ -153,7 +153,7 @@ export default function createMutationObserver(callback) {
       removedNodes.clear()
       newMutations.length = 0
       observer.disconnect()
-      info('Detached MutationObserver')
+      info('Detached%c MutationObserver', HIGHLIGHT)
     },
   }
 }

packages/child/observers/overflow.js

@@ -1,3 +1,5 @@
+import { HIGHLIGHT } from 'auto-console-group'
+
 import { HEIGHT_EDGE, OVERFLOW_ATTR } from '../../common/consts'
 import { id } from '../../common/utils'
 import { info } from '../console'
@@ -86,7 +88,7 @@ const createOverflowObserver = (callback, options) => {
     ),
     disconnect: () => {
       observer.disconnect()
-      info('Detached OverflowObserver')
+      info('Detached%c OverflowObserver', HIGHLIGHT)
     },
   }
 }

packages/child/observers/perf.js

@@ -1,3 +1,5 @@
+import { FOREGROUND, HIGHLIGHT } from 'auto-console-group'
+
 import { round } from '../../common/utils'
 import { advise, event, info, log } from '../console'
 
@@ -92,7 +94,7 @@ function perfObserver(list) {
 }
 
 export default function createPerformanceObserver() {
-  info('Attached PerformanceObserver to page')
+  info('Attached%c PerformanceObserver%c to page', HIGHLIGHT, FOREGROUND)
   const observer = new PerformanceObserver(perfObserver)
   observer.observe({ entryTypes: ['mark'] })
 
@@ -106,7 +108,7 @@ export default function createPerformanceObserver() {
       clearPerfMarks()
       clearInterval(timingCheckId)
       observer.disconnect()
-      info('Detached PerformanceObserver')
+      info('Detached%c PerformanceObserver', HIGHLIGHT)
     },
   }
 }

packages/child/observers/resize.js

@@ -1,3 +1,5 @@
+import { FOREGROUND, HIGHLIGHT } from 'auto-console-group'
+
 import { info } from '../console'
 import {
   createDetachObservers,
@@ -49,7 +51,7 @@ export default (callback) => {
   observer = new ResizeObserver(callback)
   observer.observe(document.body)
   observed.add(document.body)
-  info('Attached ResizeObserver to body')
+  info('Attached%c ResizeObserver%c to body', HIGHLIGHT, FOREGROUND)
 
   return {
     attachObserverToNonStaticElements,
@@ -61,7 +63,7 @@ export default (callback) => {
     ),
     disconnect: () => {
       observer.disconnect()
-      info('Detached ResizeObserver')
+      info('Detached%c ResizeObserver', HIGHLIGHT)
     },
   }
 }

packages/child/observers/utils.js

@@ -39,7 +39,9 @@ export const createLogCounter =
   (counter) => {
     if (counter > 0) {
       info(
-        `${isAttach ? 'At' : 'De'}tached ${type}Observer ${isAttach ? 'to' : 'from'} %c${counter}%c element${counter === 1 ? '' : 's'}`,
+        `${isAttach ? 'At' : 'De'}tached %c${type}Observer%c ${isAttach ? 'to' : 'from'} %c${counter}%c element${counter === 1 ? '' : 's'}`,
+        HIGHLIGHT,
+        NORMAL,
         HIGHLIGHT,
         NORMAL,
       )

packages/child/observers/visibility.js

@@ -1,3 +1,5 @@
+import { FOREGROUND, HIGHLIGHT } from 'auto-console-group'
+
 import { info } from '../console'
 
 export default function visibilityObserver(callback) {
@@ -11,12 +13,12 @@ export default function visibilityObserver(callback) {
   const target = document.documentElement
   observer.observe(target)
 
-  info('Attached VisibilityObserver to page')
+  info('Attached%c VisibilityObserver%c to page', HIGHLIGHT, FOREGROUND)
 
   return {
     disconnect: () => {
       observer.disconnect()
-      info('Detached VisibilityObserver')
+      info('Detached%c VisibilityObserver', HIGHLIGHT)
     },
   }
 }