@jsenv/dom 0.14.0 → 0.14.2

package/dist/jsenv_dom.js

@@ -226,6 +226,7 @@ const dispatchPublicCustomEvent = (
   const customEvent = new CustomEvent(customEventName, {
     detail: resolveEventDetail(customEventDetail),
     bubbles: true,
+    cancelable: true,
   });
   return el.dispatchEvent(customEvent);
 };
@@ -357,7 +358,7 @@ const createEventGroupLogger = () => {
     }, 0);
   };
 
-  return (eOrMessage, sideEffect) => {
+  return (eOrMessage, sideEffect, ...args) => {
     if (!(eOrMessage instanceof Event)) {
       console.debug(eOrMessage);
       return;
@@ -378,7 +379,7 @@ const createEventGroupLogger = () => {
       currentInitiator = initiator;
     }
     const line = formatSideEffectLine(e, sideEffect);
-    console.debug(line);
+    console.debug(line, ...args);
     scheduleGroupEnd();
   };
 };
@@ -11055,12 +11056,17 @@ const MIN_CONTENT_VISIBILITY_RATIO = 0.6;
 const visibleRectEffect = (
   element,
   update,
-  { event: initialEvent = new CustomEvent("initialization") } = {},
+  {
+    event: initialEvent = new CustomEvent("initialization"),
+    skipElementResize,
+  } = {},
 ) => {
   const [teardown, addTeardown] = createPubSub();
   const scrollContainer = getScrollContainer(element);
   const scrollContainerIsDocument =
     scrollContainer === document.documentElement;
+  let lastMeasuredWidth;
+  let lastMeasuredHeight;
   let ancestorClosedCount = 0;
   const check = (event) => {
 
@@ -11107,6 +11113,8 @@ const visibleRectEffect = (
 
     // 2. Calculate element visible width/height
     const { width, height } = element.getBoundingClientRect();
+    lastMeasuredWidth = width;
+    lastMeasuredHeight = height;
     const visibleAreaWidth = scrollContainer.clientWidth;
     const visibleAreaHeight = scrollContainer.clientHeight;
     const visibleAreaRight = visibleAreaLeft + visibleAreaWidth;
@@ -11293,11 +11301,37 @@ const visibleRectEffect = (
         });
       }
     }
-    {
+    on_element_resize: {
+      if (skipElementResize) {
+        break on_element_resize;
+      }
+
+      let isFirst = true;
+      let handlingResize = false;
       const resizeObserver = new ResizeObserver(() => {
-        {
+        if (isFirst) {
+          isFirst = false;
+          return;
+        }
+        if (handlingResize) {
           return;
         }
+        // we use directly the result of getBoundingClientRect() instead of the resizeEntry.contentRect or resizeEntry.borderBoxSize
+        // so that:
+        // - We can compare the dimensions measure in the last check and the current one
+        // - We don't have to check element boz-sizing to know what to compare
+        // - resizeEntry.borderBoxSize browser support is not that great
+        const { width, height } = element.getBoundingClientRect();
+        const widthDiff = Math.abs(width - lastMeasuredWidth);
+        const heightDiff = Math.abs(height - lastMeasuredHeight);
+        if (widthDiff === 0 && heightDiff === 0) {
+          return;
+        }
+        handlingResize = true;
+        autoCheck(
+          new CustomEvent("element_size_change", { detail: { width, height } }),
+        );
+        handlingResize = false;
       });
       resizeObserver.observe(element);
       // Temporarily disconnect ResizeObserver to prevent feedback loops eventually caused by update function

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "type": "module",
   "description": "DOM utilities for writing frontend code",
   "repository": {