Feature/5712

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.10.0-alpha.4](https://github.com/krakenjs/belter/compare/v2.9.3...v2.10.0-alpha.4) (2026-04-01)
+
+
+### Features
+
+* added bfcacheAware option to watchElementForClose in belter ([1a61fb1](https://github.com/krakenjs/belter/commit/1a61fb1751ac360eec1adbf6fcc8cc466f5c8394))
+* alpha version ([8dc0186](https://github.com/krakenjs/belter/commit/8dc0186349a5301eee4cd8b20ec126732cc4b624))
+* changes ([b8f7a6c](https://github.com/krakenjs/belter/commit/b8f7a6cf1d0868401593b77c15197da51e7f3706))
+* fix eslint errors ([5a8bde4](https://github.com/krakenjs/belter/commit/5a8bde47e156403d721ce9410724a2d62257da94))
+* fix format issues ([1f61224](https://github.com/krakenjs/belter/commit/1f61224158aa5df405643d401cfbf4043f43f02f))
+* update unload behvaior to support bfcache ([3443df8](https://github.com/krakenjs/belter/commit/3443df8360e1724557c1722418f404abbdf85fe9))
+* update version ([d528fcf](https://github.com/krakenjs/belter/commit/d528fcfab8df47ee0b01c52cce7cc24aae2dac06))
+
 ### [2.9.3](https://github.com/krakenjs/belter/compare/v2.9.2...v2.9.3) (2026-01-07)
 
 

dist/belter.js

@@ -2875,9 +2875,12 @@
         function isElementClosed(el) {
             return !(el && el.parentNode && el.ownerDocument && el.ownerDocument.documentElement && el.ownerDocument.documentElement.contains(el));
         }
-        function watchElementForClose(element, handler) {
+        function watchElementForClose(element, handler, options) {
+            var _ref2$isBfcacheEnable = (options || {}).isBfcacheEnabled, isBfcacheEnabled = void 0 !== _ref2$isBfcacheEnable && _ref2$isBfcacheEnable;
+            console.log("[bfcache-belter] watchElementForClose called with isBfcacheEnabled=" + String(isBfcacheEnabled));
             handler = once(handler);
             var terminationEvent = "onpagehide" in window ? "pagehide" : "unload";
+            console.log("[bfcache-belter] terminationEvent=" + terminationEvent);
             var cancelled = !1;
             var mutationObservers = [];
             var interval;
@@ -2887,7 +2890,7 @@
                 cancelled = !0;
                 for (var _i16 = 0; _i16 < mutationObservers.length; _i16++) mutationObservers[_i16].disconnect();
                 interval && interval.cancel();
-                sacrificialFrameWin && sacrificialFrameWin.removeEventListener(terminationEvent, elementClosed);
+                sacrificialFrameWin && sacrificialFrameWin.removeEventListener(terminationEvent, elementClosedOnTermination);
                 sacrificialFrame && destroyElement(sacrificialFrame);
             };
             var elementClosed = function() {
@@ -2896,6 +2899,13 @@
                     cancel();
                 }
             };
+            var elementClosedOnTermination = function(event) {
+                console.log("[bfcache-belter] sacrificial iframe " + terminationEvent + " fired, persisted=" + event.persisted + ", isBfcacheEnabled=" + String(isBfcacheEnabled));
+                if (isBfcacheEnabled && "pagehide" === terminationEvent && event.persisted) console.log("[bfcache-belter] skipping elementClosed (page entering bfcache)"); else {
+                    console.log("[bfcache-belter] calling elementClosed (real navigation)");
+                    elementClosed();
+                }
+            };
             if (isElementClosed(element)) {
                 elementClosed();
                 return {
@@ -2917,11 +2927,13 @@
             }
             (sacrificialFrame = document.createElement("iframe")).setAttribute("name", "__detect_close_" + uniqueID() + "__");
             sacrificialFrame.style.display = "none";
+            console.log("[bfcache-belter] sacrificial iframe created");
             awaitFrameWindow(sacrificialFrame).then((function(frameWin) {
                 (sacrificialFrameWin = function(win) {
                     if (!isSameDomain(win)) throw new Error("Expected window to be same domain");
                     return win;
-                }(frameWin)).addEventListener(terminationEvent, elementClosed);
+                }(frameWin)).addEventListener(terminationEvent, elementClosedOnTermination);
+                console.log("[bfcache-belter] event listener attached to sacrificial iframe for " + terminationEvent);
             }));
             element.appendChild(sacrificialFrame);
             interval = safeInterval((function() {
@@ -2944,7 +2956,7 @@
             }
         }
         function onResize(el, handler, _temp) {
-            var _ref2 = void 0 === _temp ? {} : _temp, _ref2$width = _ref2.width, width = void 0 === _ref2$width || _ref2$width, _ref2$height = _ref2.height, height = void 0 === _ref2$height || _ref2$height, _ref2$interval = _ref2.interval, interval = void 0 === _ref2$interval ? 100 : _ref2$interval, _ref2$win = _ref2.win, win = void 0 === _ref2$win ? window : _ref2$win;
+            var _ref3 = void 0 === _temp ? {} : _temp, _ref3$width = _ref3.width, width = void 0 === _ref3$width || _ref3$width, _ref3$height = _ref3.height, height = void 0 === _ref3$height || _ref3$height, _ref3$interval = _ref3.interval, interval = void 0 === _ref3$interval ? 100 : _ref3$interval, _ref3$win = _ref3.win, win = void 0 === _ref3$win ? window : _ref3$win;
             var currentWidth = el.offsetWidth;
             var currentHeight = el.offsetHeight;
             var canceled = !1;
@@ -3081,8 +3093,8 @@
             script.setAttribute(ATTRIBUTES.UID + "-auto", uid);
             return uid;
         }));
-        function submitForm(_ref3) {
-            var url = _ref3.url, target = _ref3.target, body = _ref3.body, _ref3$method = _ref3.method, method = void 0 === _ref3$method ? "post" : _ref3$method;
+        function submitForm(_ref4) {
+            var url = _ref4.url, target = _ref4.target, body = _ref4.body, _ref4$method = _ref4.method, method = void 0 === _ref4$method ? "post" : _ref4$method;
             var form = document.createElement("form");
             form.setAttribute("target", target);
             form.setAttribute("method", method);

dist/module/dom.js

@@ -686,9 +686,14 @@ export function isElementClosed(el) {
   }
   return false;
 }
-export function watchElementForClose(element, handler) {
+export function watchElementForClose(element, handler, options) {
+  var _ref2 = options || {},
+    _ref2$isBfcacheEnable = _ref2.isBfcacheEnabled,
+    isBfcacheEnabled = _ref2$isBfcacheEnable === void 0 ? false : _ref2$isBfcacheEnable;
+  console.log("[bfcache-belter] watchElementForClose called with isBfcacheEnabled=" + String(isBfcacheEnabled));
   handler = once(handler);
   var terminationEvent = "onpagehide" in window ? "pagehide" : "unload";
+  console.log("[bfcache-belter] terminationEvent=" + terminationEvent);
   var cancelled = false;
   var mutationObservers = [];
   var interval;
@@ -704,7 +709,7 @@ export function watchElementForClose(element, handler) {
       interval.cancel();
     }
     if (sacrificialFrameWin) {
-      sacrificialFrameWin.removeEventListener(terminationEvent, elementClosed);
+      sacrificialFrameWin.removeEventListener(terminationEvent, elementClosedOnTermination);
     }
     if (sacrificialFrame) {
       destroyElement(sacrificialFrame);
@@ -716,6 +721,15 @@ export function watchElementForClose(element, handler) {
       cancel();
     }
   };
+  var elementClosedOnTermination = function elementClosedOnTermination(event) {
+    console.log("[bfcache-belter] sacrificial iframe " + terminationEvent + " fired, persisted=" + event.persisted + ", isBfcacheEnabled=" + String(isBfcacheEnabled));
+    if (isBfcacheEnabled && terminationEvent === "pagehide" && event.persisted) {
+      console.log("[bfcache-belter] skipping elementClosed (page entering bfcache)");
+      return;
+    }
+    console.log("[bfcache-belter] calling elementClosed (real navigation)");
+    elementClosed();
+  };
   if (isElementClosed(element)) {
     elementClosed();
     return {
@@ -740,9 +754,11 @@ export function watchElementForClose(element, handler) {
   sacrificialFrame = document.createElement("iframe");
   sacrificialFrame.setAttribute("name", "__detect_close_" + uniqueID() + "__");
   sacrificialFrame.style.display = "none";
+  console.log("[bfcache-belter] sacrificial iframe created");
   awaitFrameWindow(sacrificialFrame).then(function (frameWin) {
     sacrificialFrameWin = assertSameDomain(frameWin);
-    sacrificialFrameWin.addEventListener(terminationEvent, elementClosed);
+    sacrificialFrameWin.addEventListener(terminationEvent, elementClosedOnTermination);
+    console.log("[bfcache-belter] event listener attached to sacrificial iframe for " + terminationEvent);
   });
   element.appendChild(sacrificialFrame);
   var check = function check() {
@@ -771,15 +787,15 @@ export function fixScripts(el, doc) {
   }
 }
 export function onResize(el, handler, _temp) {
-  var _ref2 = _temp === void 0 ? {} : _temp,
-    _ref2$width = _ref2.width,
-    width = _ref2$width === void 0 ? true : _ref2$width,
-    _ref2$height = _ref2.height,
-    height = _ref2$height === void 0 ? true : _ref2$height,
-    _ref2$interval = _ref2.interval,
-    interval = _ref2$interval === void 0 ? 100 : _ref2$interval,
-    _ref2$win = _ref2.win,
-    win = _ref2$win === void 0 ? window : _ref2$win;
+  var _ref3 = _temp === void 0 ? {} : _temp,
+    _ref3$width = _ref3.width,
+    width = _ref3$width === void 0 ? true : _ref3$width,
+    _ref3$height = _ref3.height,
+    height = _ref3$height === void 0 ? true : _ref3$height,
+    _ref3$interval = _ref3.interval,
+    interval = _ref3$interval === void 0 ? 100 : _ref3$interval,
+    _ref3$win = _ref3.win,
+    win = _ref3$win === void 0 ? window : _ref3$win;
   var currentWidth = el.offsetWidth;
   var currentHeight = el.offsetHeight;
   var canceled = false;
@@ -964,12 +980,12 @@ export var getCurrentScriptUID = memoize(function () {
   script.setAttribute(ATTRIBUTES.UID + "-auto", uid);
   return uid;
 });
-export function submitForm(_ref3) {
-  var url = _ref3.url,
-    target = _ref3.target,
-    body = _ref3.body,
-    _ref3$method = _ref3.method,
-    method = _ref3$method === void 0 ? "post" : _ref3$method;
+export function submitForm(_ref4) {
+  var url = _ref4.url,
+    target = _ref4.target,
+    body = _ref4.body,
+    _ref4$method = _ref4.method,
+    method = _ref4$method === void 0 ? "post" : _ref4$method;
   var form = document.createElement("form");
   form.setAttribute("target", target);
   form.setAttribute("method", method);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krakenjs/belter",
-  "version": "2.9.3",
+  "version": "2.10.0-alpha.4",
   "description": "Utilities.",
   "main": "index.js",
   "scripts": {

src/dom.js

@@ -1041,10 +1041,20 @@ export function isElementClosed(el: HTMLElement): boolean {
 
 export function watchElementForClose(
   element: HTMLElement,
-  handler: () => mixed
+  handler: () => mixed,
+  options?: {| isBfcacheEnabled?: boolean |}
 ): CancelableType {
+  const { isBfcacheEnabled = false } = options || {};
+  // eslint-disable-next-line no-console
+  console.log(
+    `[bfcache-belter] watchElementForClose called with isBfcacheEnabled=${String(
+      isBfcacheEnabled
+    )}`
+  );
   handler = once(handler);
   const terminationEvent = "onpagehide" in window ? "pagehide" : "unload";
+  // eslint-disable-next-line no-console
+  console.log(`[bfcache-belter] terminationEvent=${terminationEvent}`);
 
   let cancelled = false;
   const mutationObservers = [];
@@ -1063,8 +1073,12 @@ export function watchElementForClose(
       interval.cancel();
     }
     if (sacrificialFrameWin) {
-      // eslint-disable-next-line no-use-before-define
-      sacrificialFrameWin.removeEventListener(terminationEvent, elementClosed);
+      /* eslint-disable no-use-before-define */
+      sacrificialFrameWin.removeEventListener(
+        terminationEvent,
+        elementClosedOnTermination
+      );
+      /* eslint-enable no-use-before-define */
     }
     if (sacrificialFrame) {
       destroyElement(sacrificialFrame);
@@ -1078,6 +1092,29 @@ export function watchElementForClose(
     }
   };
 
+  const elementClosedOnTermination = (event) => {
+    // eslint-disable-next-line no-console
+    console.log(
+      `[bfcache-belter] sacrificial iframe ${terminationEvent} fired, persisted=${
+        event.persisted
+      }, isBfcacheEnabled=${String(isBfcacheEnabled)}`
+    );
+    if (
+      isBfcacheEnabled &&
+      terminationEvent === "pagehide" &&
+      event.persisted
+    ) {
+      // eslint-disable-next-line no-console
+      console.log(
+        "[bfcache-belter] skipping elementClosed (page entering bfcache)"
+      );
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.log("[bfcache-belter] calling elementClosed (real navigation)");
+    elementClosed();
+  };
+
   if (isElementClosed(element)) {
     elementClosed();
     return { cancel };
@@ -1105,9 +1142,18 @@ export function watchElementForClose(
   sacrificialFrame = document.createElement("iframe");
   sacrificialFrame.setAttribute("name", `__detect_close_${uniqueID()}__`);
   sacrificialFrame.style.display = "none";
+  // eslint-disable-next-line no-console
+  console.log("[bfcache-belter] sacrificial iframe created");
   awaitFrameWindow(sacrificialFrame).then((frameWin) => {
     sacrificialFrameWin = assertSameDomain(frameWin);
-    sacrificialFrameWin.addEventListener(terminationEvent, elementClosed);
+    sacrificialFrameWin.addEventListener(
+      terminationEvent,
+      elementClosedOnTermination
+    );
+    // eslint-disable-next-line no-console
+    console.log(
+      `[bfcache-belter] event listener attached to sacrificial iframe for ${terminationEvent}`
+    );
   });
   element.appendChild(sacrificialFrame);