fix: prevent crash firing lifecycle callbacks on closing browser tab

.changeset/upset-moments-cheer.md

@@ -0,0 +1,6 @@
+---
+"@marko/runtime-tags": patch
+"marko": patch
+---
+
+Prevent lifecycle callbacks firing on closing browser tab

.sizes.json

@@ -7,8 +7,8 @@
     {
       "name": "*",
       "total": {
-        "min": 21132,
-        "brotli": 7918
+        "min": 21384,
+        "brotli": 8029
       }
     },
     {
@@ -18,12 +18,12 @@
         "brotli": 120
       },
       "runtime": {
-        "min": 4053,
-        "brotli": 1803
+        "min": 4295,
+        "brotli": 1881
       },
       "total": {
-        "min": 4216,
-        "brotli": 1923
+        "min": 4458,
+        "brotli": 2001
       }
     },
     {
@@ -33,12 +33,12 @@
         "brotli": 79
       },
       "runtime": {
-        "min": 2360,
-        "brotli": 1225
+        "min": 2606,
+        "brotli": 1296
       },
       "total": {
-        "min": 2449,
-        "brotli": 1304
+        "min": 2695,
+        "brotli": 1375
       }
     },
     {
@@ -48,12 +48,12 @@
         "brotli": 393
       },
       "runtime": {
-        "min": 6413,
-        "brotli": 2825
+        "min": 6656,
+        "brotli": 2890
       },
       "total": {
-        "min": 7095,
-        "brotli": 3218
+        "min": 7338,
+        "brotli": 3283
       }
     },
     {
@@ -63,12 +63,12 @@
         "brotli": 104
       },
       "runtime": {
-        "min": 2532,
-        "brotli": 1287
+        "min": 2778,
+        "brotli": 1350
       },
       "total": {
-        "min": 2654,
-        "brotli": 1391
+        "min": 2900,
+        "brotli": 1454
       }
     }
   ]

.sizes/comments.csr/runtime.js

@@ -1,4 +1,4 @@
-// size: 6413 (min) 2825 (brotli)
+// size: 6656 (min) 2890 (brotli)
 //#region packages/runtime-tags/dist/dom.mjs
 let decodeAccessor = (num) =>
     (num + (num < 26 ? 10 : num < 962 ? 334 : 11998)).toString(36),
@@ -72,6 +72,7 @@ let decodeAccessor = (num) =>
   pendingEffects = [],
   pendingScopes = [],
   rendering,
+  isUnloading = !1,
   runEffects = (effects) => {
     for (let i = 0; i < effects.length; ) effects[i++](effects[i++]);
   },
@@ -140,6 +141,14 @@ function removeAndDestroyBranch(branch) {
 function insertBranchBefore(branch, parentNode, nextSibling) {
   insertChildNodes(parentNode, nextSibling, branch.S, branch.K);
 }
+typeof window < "u" &&
+  window.addEventListener(
+    "pageshow",
+    () => {
+      ((isScheduled = 0), schedule());
+    },
+    { capture: !0 },
+  );
 function schedule() {
   isScheduled || ((isScheduled = 1), queueMicrotask(flushAndWaitFrame));
 }
@@ -500,6 +509,21 @@ function loop(forEach) {
 function bySecondArg(_item, index) {
   return index;
 }
+typeof window < "u" &&
+  (window.addEventListener(
+    "pagehide",
+    () => {
+      isUnloading = !0;
+    },
+    { capture: !0 },
+  ),
+  window.addEventListener(
+    "pageshow",
+    () => {
+      isUnloading = !1;
+    },
+    { capture: !0 },
+  ));
 function queueRender(scope, signal, signalKey, value, scopeKey = scope.L) {
   let key = scopeKey * 1e3 + signalKey,
     render = signalKey >= 0 && pendingRendersLookup[key];
@@ -529,6 +553,7 @@ function queueEffect(scope, fn) {
   pendingEffects.push(fn, scope);
 }
 function run() {
+  if (isUnloading) return;
   let effects = pendingEffects;
   asyncRendersLookup = {};
   try {

.sizes/comments.ssr/runtime.js

@@ -1,4 +1,4 @@
-// size: 2532 (min) 1287 (brotli)
+// size: 2778 (min) 1350 (brotli)
 //#region packages/runtime-tags/dist/dom.mjs
 let decodeAccessor = (num) =>
     (num + (num < 26 ? 10 : num < 962 ? 334 : 11998)).toString(36),
@@ -14,6 +14,7 @@ let decodeAccessor = (num) =>
   pendingEffects = [],
   pendingScopes = [],
   rendering,
+  isUnloading = !1,
   runEffects = (effects) => {
     for (let i = 0; i < effects.length; ) effects[i++](effects[i++]);
   },
@@ -37,6 +38,14 @@ function handleDelegated(ev) {
     (target["$" + ev.type]?.(ev, target),
       (target = ev.bubbles && !ev.cancelBubble && target.parentNode));
 }
+typeof window < "u" &&
+  window.addEventListener(
+    "pageshow",
+    () => {
+      ((isScheduled = 0), schedule());
+    },
+    { capture: !0 },
+  );
 function schedule() {
   isScheduled || ((isScheduled = 1), queueMicrotask(flushAndWaitFrame));
 }
@@ -175,10 +184,11 @@ function init(runtimeId = "M") {
     });
 }
 function runResumeEffects(render) {
-  try {
-    runEffects(render.m(), 1);
-  } finally {
-  }
+  if (!isUnloading)
+    try {
+      runEffects(render.m(), 1);
+    } finally {
+    }
 }
 function _resume(id, obj) {
   return (registeredValues[id] = obj);
@@ -202,6 +212,21 @@ function _text(node, value) {
 function normalizeAttrValue(value) {
   if (value || value === 0) return value === !0 ? "" : value + "";
 }
+typeof window < "u" &&
+  (window.addEventListener(
+    "pagehide",
+    () => {
+      isUnloading = !0;
+    },
+    { capture: !0 },
+  ),
+  window.addEventListener(
+    "pageshow",
+    () => {
+      isUnloading = !1;
+    },
+    { capture: !0 },
+  ));
 function queueRender(scope, signal, signalKey, value, scopeKey = scope.L) {
   let key = scopeKey * 1e3 + signalKey,
     render = signalKey >= 0 && pendingRendersLookup[key];
@@ -231,6 +256,7 @@ function queueEffect(scope, fn) {
   pendingEffects.push(fn, scope);
 }
 function run() {
+  if (isUnloading) return;
   let effects = pendingEffects;
   asyncRendersLookup = {};
   try {

.sizes/counter.csr/runtime.js

@@ -1,4 +1,4 @@
-// size: 4053 (min) 1803 (brotli)
+// size: 4295 (min) 1881 (brotli)
 //#region packages/runtime-tags/dist/dom.mjs
 let decodeAccessor = (num) =>
     (num + (num < 26 ? 10 : num < 962 ? 334 : 11998)).toString(36),
@@ -67,6 +67,7 @@ let decodeAccessor = (num) =>
   pendingEffects = [],
   pendingScopes = [],
   rendering,
+  isUnloading = !1,
   runEffects = (effects) => {
     for (let i = 0; i < effects.length; ) effects[i++](effects[i++]);
   },
@@ -123,6 +124,14 @@ function resetControllers(scope) {
 function removeAndDestroyBranch(branch) {
   (destroyBranch(branch), removeChildNodes(branch.S, branch.K));
 }
+typeof window < "u" &&
+  window.addEventListener(
+    "pageshow",
+    () => {
+      ((isScheduled = 0), schedule());
+    },
+    { capture: !0 },
+  );
 function schedule() {
   isScheduled || ((isScheduled = 1), queueMicrotask(flushAndWaitFrame));
 }
@@ -250,6 +259,21 @@ function toInsertNode(startNode, endNode) {
   }
   return parent;
 }
+typeof window < "u" &&
+  (window.addEventListener(
+    "pagehide",
+    () => {
+      isUnloading = !0;
+    },
+    { capture: !0 },
+  ),
+  window.addEventListener(
+    "pageshow",
+    () => {
+      isUnloading = !1;
+    },
+    { capture: !0 },
+  ));
 function queueRender(scope, signal, signalKey, value, scopeKey = scope.L) {
   let key = scopeKey * 1e3 + signalKey,
     render = signalKey >= 0 && pendingRendersLookup[key];
@@ -279,6 +303,7 @@ function queueEffect(scope, fn) {
   pendingEffects.push(fn, scope);
 }
 function run() {
+  if (isUnloading) return;
   let effects = pendingEffects;
   asyncRendersLookup = {};
   try {

.sizes/counter.ssr/runtime.js

@@ -1,4 +1,4 @@
-// size: 2360 (min) 1225 (brotli)
+// size: 2606 (min) 1296 (brotli)
 //#region packages/runtime-tags/dist/dom.mjs
 let decodeAccessor = (num) =>
     (num + (num < 26 ? 10 : num < 962 ? 334 : 11998)).toString(36),
@@ -14,6 +14,7 @@ let decodeAccessor = (num) =>
   pendingEffects = [],
   pendingScopes = [],
   rendering,
+  isUnloading = !1,
   runEffects = (effects) => {
     for (let i = 0; i < effects.length; ) effects[i++](effects[i++]);
   },
@@ -37,6 +38,14 @@ function handleDelegated(ev) {
     (target["$" + ev.type]?.(ev, target),
       (target = ev.bubbles && !ev.cancelBubble && target.parentNode));
 }
+typeof window < "u" &&
+  window.addEventListener(
+    "pageshow",
+    () => {
+      ((isScheduled = 0), schedule());
+    },
+    { capture: !0 },
+  );
 function schedule() {
   isScheduled || ((isScheduled = 1), queueMicrotask(flushAndWaitFrame));
 }
@@ -175,10 +184,11 @@ function init(runtimeId = "M") {
     });
 }
 function runResumeEffects(render) {
-  try {
-    runEffects(render.m(), 1);
-  } finally {
-  }
+  if (!isUnloading)
+    try {
+      runEffects(render.m(), 1);
+    } finally {
+    }
 }
 function _resume(id, obj) {
   return (registeredValues[id] = obj);
@@ -190,6 +200,21 @@ function _text(node, value) {
   let normalizedValue = _to_text(value);
   node.data !== normalizedValue && (node.data = normalizedValue);
 }
+typeof window < "u" &&
+  (window.addEventListener(
+    "pagehide",
+    () => {
+      isUnloading = !0;
+    },
+    { capture: !0 },
+  ),
+  window.addEventListener(
+    "pageshow",
+    () => {
+      isUnloading = !1;
+    },
+    { capture: !0 },
+  ));
 function queueRender(scope, signal, signalKey, value, scopeKey = scope.L) {
   let key = scopeKey * 1e3 + signalKey,
     render = signalKey >= 0 && pendingRendersLookup[key];
@@ -219,6 +244,7 @@ function queueEffect(scope, fn) {
   pendingEffects.push(fn, scope);
 }
 function run() {
+  if (isUnloading) return;
   let effects = pendingEffects;
   asyncRendersLookup = {};
   try {