@adobe/helix-rum-enhancer 2.19.2 → 2.20.0

package/.husky/pre-commit

@@ -1,2 +1 @@
 npx lint-staged
-npm test

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [2.20.0](https://github.com/adobe/helix-rum-enhancer/compare/v2.19.2...v2.20.0) (2024-08-19)
+
+
+### Features
+
+* observe all mutations to capture late added medias ([#261](https://github.com/adobe/helix-rum-enhancer/issues/261)) ([56844b2](https://github.com/adobe/helix-rum-enhancer/commit/56844b2aa61fe5cc837cd5a887f0c8669a335e0f))
+
 ## [2.19.2](https://github.com/adobe/helix-rum-enhancer/compare/v2.19.1...v2.19.2) (2024-08-15)
 
 

package/modules/index.js

@@ -26,9 +26,14 @@ const { sampleRUM, queue, isSelected } = (window.hlx && window.hlx.rum) ? window
   /* c8 ignore next */ : {};
 
 const formSubmitListener = (e) => sampleRUM('formsubmit', { target: targetSelector(e.target), source: sourceSelector(e.target) });
-// eslint-disable-next-line no-use-before-define
-const mutationObserver = window.MutationObserver ? new MutationObserver(mutationsCallback)
-/* c8 ignore next */ : null;
+
+// eslint-disable-next-line no-use-before-define, max-len
+const blocksMutationObserver = window.MutationObserver ? new MutationObserver(blocksMutationsCallback)
+  /* c8 ignore next */ : {};
+
+// eslint-disable-next-line no-use-before-define, max-len
+const mediaMutationObserver = window.MutationObserver ? new MutationObserver(mediaMutationsCallback)
+  /* c8 ignore next */ : {};
 
 function trackCheckpoint(checkpoint, data, t) {
   const { weight, id } = window.hlx.rum;
@@ -52,7 +57,7 @@ function trackCheckpoint(checkpoint, data, t) {
 }
 
 function processQueue() {
-  while (queue.length) {
+  while (queue && queue.length) {
     const ck = queue.shift();
     trackCheckpoint(...ck);
   }
@@ -148,21 +153,36 @@ function addLoadResourceTracking() {
 }
 
 function activateBlocksMutationObserver() {
-  if (!mutationObserver || mutationObserver.active) {
+  if (!blocksMutationObserver || blocksMutationObserver.active) {
     return;
   }
-  mutationObserver.active = true;
-  mutationObserver.observe(
+  blocksMutationObserver.active = true;
+  blocksMutationObserver.observe(
     document.body,
     // eslint-disable-next-line object-curly-newline
     { subtree: true, attributes: true, attributeFilter: ['data-block-status'] },
   );
 }
 
+function activateMediaMutationObserver() {
+  if (!mediaMutationObserver || mediaMutationObserver.active) {
+    return;
+  }
+  mediaMutationObserver.active = true;
+  mediaMutationObserver.observe(
+    document.body,
+    // eslint-disable-next-line object-curly-newline
+    { subtree: true, attributes: false, childList: true },
+  );
+}
+
 function getIntersectionObsever(checkpoint) {
-  /* c8 ignore next */
-  if (!window.IntersectionObserver) return null;
+  /* c8 ignore next 3 */
+  if (!window.IntersectionObserver) {
+    return null;
+  }
   activateBlocksMutationObserver();
+  activateMediaMutationObserver();
   const observer = new IntersectionObserver((entries) => {
     try {
       entries
@@ -188,11 +208,13 @@ function addViewBlockTracking(element) {
   }
 }
 
+const observedMedia = new Set();
 function addViewMediaTracking(parent) {
   const mediaobserver = getIntersectionObsever('viewmedia');
   if (mediaobserver) {
     parent.querySelectorAll('img, video, audio, iframe').forEach((m) => {
-      if (!m.closest('div .block') || m.closest('div[data-block-status="loaded"]')) {
+      if (!observedMedia.has(m)) {
+        observedMedia.add(m);
         mediaobserver.observe(m);
       }
     });
@@ -201,19 +223,32 @@ function addViewMediaTracking(parent) {
 
 function addFormTracking(parent) {
   activateBlocksMutationObserver();
+  activateMediaMutationObserver();
   parent.querySelectorAll('form').forEach((form) => {
     form.removeEventListener('submit', formSubmitListener); // listen only once
     form.addEventListener('submit', formSubmitListener);
   });
 }
 
-const addObserver = (ck, fn, block) => DEFAULT_TRACKING_EVENTS.includes(ck) && fn(block);
-function mutationsCallback(mutations) {
-  mutations.filter((m) => m.type === 'attributes' && m.attributeName === 'data-block-status')
+function addObserver(ck, fn, block) {
+  return DEFAULT_TRACKING_EVENTS.includes(ck) && fn(block);
+}
+
+function blocksMutationsCallback(mutations) {
+  // block specific mutations
+  mutations
+    .filter((m) => m.type === 'attributes' && m.attributeName === 'data-block-status')
     .filter((m) => m.target.dataset.blockStatus === 'loaded')
     .forEach((m) => {
       addObserver('form', addFormTracking, m.target);
       addObserver('viewblock', addViewBlockTracking, m.target);
+    });
+}
+
+function mediaMutationsCallback(mutations) {
+  // media mutations
+  mutations
+    .forEach((m) => {
       addObserver('viewmedia', addViewMediaTracking, m.target);
     });
 }
@@ -241,6 +276,7 @@ function initEnhancer() {
       window.hlx.rum.collector = trackCheckpoint;
       processQueue();
     }
+  /* c8 ignore next 3 */
   } catch (error) {
     // something went wrong
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/helix-rum-enhancer",
-  "version": "2.19.2",
+  "version": "2.20.0",
   "description": "Helix RUM Enhancer",
   "main": "src/index.js",
   "type": "module",
@@ -51,13 +51,13 @@
     "husky": "9.1.4",
     "jsdoc-to-markdown": "8.0.3",
     "junit-report-builder": "5.0.0",
-    "lint-staged": "15.2.8",
+    "lint-staged": "15.2.9",
     "mocha": "10.7.3",
     "mocha-multi-reporters": "1.5.1",
     "rollup": "4.20.0",
     "rollup-plugin-cleanup": "3.2.1",
     "rollup-plugin-eslint-bundle": "9.0.0",
-    "semantic-release": "24.0.0",
+    "semantic-release": "24.1.0",
     "web-vitals": "4.2.3"
   },
   "lint-staged": {

package/src/index.js

@@ -203,9 +203,14 @@
     : {};
 
   const formSubmitListener = (e) => sampleRUM('formsubmit', { target: targetSelector(e.target), source: sourceSelector(e.target) });
-  // eslint-disable-next-line no-use-before-define
-  const mutationObserver = window.MutationObserver ? new MutationObserver(mutationsCallback)
-    : null;
+
+  // eslint-disable-next-line no-use-before-define, max-len
+  const blocksMutationObserver = window.MutationObserver ? new MutationObserver(blocksMutationsCallback)
+    : {};
+
+  // eslint-disable-next-line no-use-before-define, max-len
+  const mediaMutationObserver = window.MutationObserver ? new MutationObserver(mediaMutationsCallback)
+    : {};
 
   function trackCheckpoint(checkpoint, data, t) {
     const { weight, id } = window.hlx.rum;
@@ -228,7 +233,7 @@
   }
 
   function processQueue() {
-    while (queue.length) {
+    while (queue && queue.length) {
       const ck = queue.shift();
       trackCheckpoint(...ck);
     }
@@ -322,20 +327,35 @@
   }
 
   function activateBlocksMutationObserver() {
-    if (!mutationObserver || mutationObserver.active) {
+    if (!blocksMutationObserver || blocksMutationObserver.active) {
       return;
     }
-    mutationObserver.active = true;
-    mutationObserver.observe(
+    blocksMutationObserver.active = true;
+    blocksMutationObserver.observe(
       document.body,
       // eslint-disable-next-line object-curly-newline
       { subtree: true, attributes: true, attributeFilter: ['data-block-status'] },
     );
   }
 
+  function activateMediaMutationObserver() {
+    if (!mediaMutationObserver || mediaMutationObserver.active) {
+      return;
+    }
+    mediaMutationObserver.active = true;
+    mediaMutationObserver.observe(
+      document.body,
+      // eslint-disable-next-line object-curly-newline
+      { subtree: true, attributes: false, childList: true },
+    );
+  }
+
   function getIntersectionObsever(checkpoint) {
-    if (!window.IntersectionObserver) return null;
+    if (!window.IntersectionObserver) {
+      return null;
+    }
     activateBlocksMutationObserver();
+    activateMediaMutationObserver();
     const observer = new IntersectionObserver((entries) => {
       try {
         entries
@@ -360,11 +380,13 @@
     }
   }
 
+  const observedMedia = new Set();
   function addViewMediaTracking(parent) {
     const mediaobserver = getIntersectionObsever('viewmedia');
     if (mediaobserver) {
       parent.querySelectorAll('img, video, audio, iframe').forEach((m) => {
-        if (!m.closest('div .block') || m.closest('div[data-block-status="loaded"]')) {
+        if (!observedMedia.has(m)) {
+          observedMedia.add(m);
           mediaobserver.observe(m);
         }
       });
@@ -373,19 +395,32 @@
 
   function addFormTracking(parent) {
     activateBlocksMutationObserver();
+    activateMediaMutationObserver();
     parent.querySelectorAll('form').forEach((form) => {
       form.removeEventListener('submit', formSubmitListener); // listen only once
       form.addEventListener('submit', formSubmitListener);
     });
   }
 
-  const addObserver = (ck, fn, block) => DEFAULT_TRACKING_EVENTS.includes(ck) && fn(block);
-  function mutationsCallback(mutations) {
-    mutations.filter((m) => m.type === 'attributes' && m.attributeName === 'data-block-status')
+  function addObserver(ck, fn, block) {
+    return DEFAULT_TRACKING_EVENTS.includes(ck) && fn(block);
+  }
+
+  function blocksMutationsCallback(mutations) {
+    // block specific mutations
+    mutations
+      .filter((m) => m.type === 'attributes' && m.attributeName === 'data-block-status')
       .filter((m) => m.target.dataset.blockStatus === 'loaded')
       .forEach((m) => {
         addObserver('form', addFormTracking, m.target);
         addObserver('viewblock', addViewBlockTracking, m.target);
+      });
+  }
+
+  function mediaMutationsCallback(mutations) {
+    // media mutations
+    mutations
+      .forEach((m) => {
         addObserver('viewmedia', addViewMediaTracking, m.target);
       });
   }