@proteinjs/app-version-ui 1.0.22 → 1.1.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0](https://github.com/proteinjs/notifications/compare/@proteinjs/app-version-ui@1.0.23...@proteinjs/app-version-ui@1.1.0) (2026-04-08)
+
+
+### Features
+
+* auto-reload on window refocus after 30s when update is pending ([ac4900c](https://github.com/proteinjs/notifications/commit/ac4900c7d15c21f0e20c428939cde2f15d4528f8))
+
+
+
+
+
 ## [1.0.2](https://github.com/proteinjs/notifications/compare/@proteinjs/app-version-ui@1.0.1...@proteinjs/app-version-ui@1.0.2) (2024-08-02)
 
 

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Brent Bahry
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/src/useVersionChecker.d.ts

@@ -8,6 +8,10 @@ import { Socket } from 'socket.io-client';
  * This hook will check with the server if the client should update when the socket
  * receives a `connect` event.
  *
+ * When `needToUpdate` is `true`, the hook will also automatically reload the page
+ * when the tab regains focus after being hidden for at least 30 seconds. This
+ * ensures background tabs pick up new versions without user interaction.
+ *
  * Reason:
  *
  * When a new version is deployed, the server process will terminate. The socket will always

package/dist/src/useVersionChecker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVersionChecker.d.ts","sourceRoot":"","sources":["../../src/useVersionChecker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAG1C;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,iBAAiB,mBAAoB,MAAM,UAAU,MAAM,GAAG,IAAI;;CAqC9E,CAAC"}
+{"version":3,"file":"useVersionChecker.d.ts","sourceRoot":"","sources":["../../src/useVersionChecker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAK1C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,iBAAiB,mBAAoB,MAAM,UAAU,MAAM,GAAG,IAAI;;CAgE9E,CAAC"}

package/dist/src/useVersionChecker.js

@@ -13,6 +13,7 @@ exports.useVersionChecker = void 0;
 const react_1 = require("react");
 const app_version_common_1 = require("@proteinjs/app-version-common");
 const util_1 = require("@proteinjs/util");
+const VISIBILITY_CHANGE_THRESHOLD_MS = 30000;
 /**
  * A hook that exposes `needToUpdate`, which indicates whether or not the client's
  * bundle is stale and the new version has been marked as significant enough to
@@ -22,6 +23,10 @@ const util_1 = require("@proteinjs/util");
  * This hook will check with the server if the client should update when the socket
  * receives a `connect` event.
  *
+ * When `needToUpdate` is `true`, the hook will also automatically reload the page
+ * when the tab regains focus after being hidden for at least 30 seconds. This
+ * ensures background tabs pick up new versions without user interaction.
+ *
  * Reason:
  *
  * When a new version is deployed, the server process will terminate. The socket will always
@@ -36,6 +41,7 @@ const useVersionChecker = (currentVersion, socket) => {
     const [needToUpdate, setNeedToUpdate] = (0, react_1.useState)(false);
     const debouncerRef = (0, react_1.useRef)(new util_1.Debouncer(1000));
     const needToUpdateRef = (0, react_1.useRef)(needToUpdate); // having `needToUpdate` in the `checkVersion` dep array was causing double checks, despite debouncer
+    const hiddenAtRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         needToUpdateRef.current = needToUpdate;
     }, [needToUpdate]);
@@ -62,6 +68,27 @@ const useVersionChecker = (currentVersion, socket) => {
             socket.off('connect', handleConnect);
         };
     }, [socket, checkVersion]);
+    // Auto-reload when the window regains focus after being blurred for 30s+.
+    // Uses window blur/focus rather than document visibilitychange so that
+    // switching to another desktop app (not just another browser tab) is detected.
+    (0, react_1.useEffect)(() => {
+        const handleBlur = () => {
+            hiddenAtRef.current = Date.now();
+        };
+        const handleFocus = () => {
+            if (needToUpdateRef.current &&
+                hiddenAtRef.current &&
+                Date.now() - hiddenAtRef.current > VISIBILITY_CHANGE_THRESHOLD_MS) {
+                window.location.reload();
+            }
+        };
+        window.addEventListener('blur', handleBlur);
+        window.addEventListener('focus', handleFocus);
+        return () => {
+            window.removeEventListener('blur', handleBlur);
+            window.removeEventListener('focus', handleFocus);
+        };
+    }, []);
     return { needToUpdate };
 };
 exports.useVersionChecker = useVersionChecker;

package/dist/src/useVersionChecker.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVersionChecker.js","sourceRoot":"","sources":["../../src/useVersionChecker.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,iCAAiE;AACjE,sEAAyE;AAEzE,0CAA4C;AAE5C;;;;;;;;;;;;;;;;;;GAkBG;AACI,MAAM,iBAAiB,GAAG,CAAC,cAAsB,EAAE,MAAqB,EAAE,EAAE;IACjF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxD,MAAM,YAAY,GAAG,IAAA,cAAM,EAAY,IAAI,gBAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,IAAA,cAAM,EAAC,YAAY,CAAC,CAAC,CAAC,qGAAqG;IAEnJ,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,eAAe,CAAC,OAAO,GAAG,YAAY,CAAC;IACzC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,GAAS,EAAE;QAC1C,IAAI;YACF,MAAM,eAAe,GAAG,MAAM,IAAA,6CAAwB,GAAE,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;YACtF,IAAI,eAAe,CAAC,OAAO,KAAK,eAAe,EAAE;gBAC/C,eAAe,CAAC,eAAe,CAAC,CAAC;aAClC;SACF;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,KAAK,CAAC,CAAC;SAClD;IACH,CAAC,CAAA,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QAED,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;QAC9C,CAAC,CAAC;QAEF,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAEpC,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,GAAG,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACvC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAE3B,OAAO,EAAE,YAAY,EAAE,CAAC;AAC1B,CAAC,CAAC;AArCW,QAAA,iBAAiB,qBAqC5B"}
+{"version":3,"file":"useVersionChecker.js","sourceRoot":"","sources":["../../src/useVersionChecker.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,iCAAiE;AACjE,sEAAyE;AAEzE,0CAA4C;AAE5C,MAAM,8BAA8B,GAAG,KAAK,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACI,MAAM,iBAAiB,GAAG,CAAC,cAAsB,EAAE,MAAqB,EAAE,EAAE;IACjF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxD,MAAM,YAAY,GAAG,IAAA,cAAM,EAAY,IAAI,gBAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,IAAA,cAAM,EAAC,YAAY,CAAC,CAAC,CAAC,qGAAqG;IACnJ,MAAM,WAAW,GAAG,IAAA,cAAM,EAAgB,IAAI,CAAC,CAAC;IAEhD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,eAAe,CAAC,OAAO,GAAG,YAAY,CAAC;IACzC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,GAAS,EAAE;QAC1C,IAAI;YACF,MAAM,eAAe,GAAG,MAAM,IAAA,6CAAwB,GAAE,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;YACtF,IAAI,eAAe,CAAC,OAAO,KAAK,eAAe,EAAE;gBAC/C,eAAe,CAAC,eAAe,CAAC,CAAC;aAClC;SACF;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,KAAK,CAAC,CAAC;SAClD;IACH,CAAC,CAAA,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QAED,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;QAC9C,CAAC,CAAC;QAEF,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAEpC,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,GAAG,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACvC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAE3B,0EAA0E;IAC1E,uEAAuE;IACvE,+EAA+E;IAC/E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,GAAG,EAAE;YACtB,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACnC,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,IACE,eAAe,CAAC,OAAO;gBACvB,WAAW,CAAC,OAAO;gBACnB,IAAI,CAAC,GAAG,EAAE,GAAG,WAAW,CAAC,OAAO,GAAG,8BAA8B,EACjE;gBACA,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;aAC1B;QACH,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAC5C,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAC9C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;YAC/C,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACnD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,YAAY,EAAE,CAAC;AAC1B,CAAC,CAAC;AAhEW,QAAA,iBAAiB,qBAgE5B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteinjs/app-version-ui",
-  "version": "1.0.22",
+  "version": "1.1.0",
   "description": "App version ui components",
   "publishConfig": {
     "access": "public"
@@ -25,8 +25,8 @@
     "@emotion/styled": "11.11.0",
     "@mui/icons-material": "5.14.11",
     "@mui/material": "5.14.11",
-    "@proteinjs/app-version-common": "^1.0.21",
-    "@proteinjs/util": "1.5.0",
+    "@proteinjs/app-version-common": "^1.1.0",
+    "@proteinjs/util": "^1.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "socket.io-client": "4.7.5"
@@ -45,5 +45,6 @@
     "typescript": "5.2.2"
   },
   "main": "./dist/index.js",
-  "types": "./dist/index.d.ts"
+  "types": "./dist/index.d.ts",
+  "gitHead": "49080ab46d73cfda8c5893e3964d7a594fa973ea"
 }

package/src/useVersionChecker.tsx

@@ -3,6 +3,8 @@ import { getVersionCheckerService } from '@proteinjs/app-version-common';
 import { Socket } from 'socket.io-client';
 import { Debouncer } from '@proteinjs/util';
 
+const VISIBILITY_CHANGE_THRESHOLD_MS = 30000;
+
 /**
  * A hook that exposes `needToUpdate`, which indicates whether or not the client's
  * bundle is stale and the new version has been marked as significant enough to
@@ -12,6 +14,10 @@ import { Debouncer } from '@proteinjs/util';
  * This hook will check with the server if the client should update when the socket
  * receives a `connect` event.
  *
+ * When `needToUpdate` is `true`, the hook will also automatically reload the page
+ * when the tab regains focus after being hidden for at least 30 seconds. This
+ * ensures background tabs pick up new versions without user interaction.
+ *
  * Reason:
  *
  * When a new version is deployed, the server process will terminate. The socket will always
@@ -26,6 +32,7 @@ export const useVersionChecker = (currentVersion: string, socket: Socket | null)
   const [needToUpdate, setNeedToUpdate] = useState(false);
   const debouncerRef = useRef<Debouncer>(new Debouncer(1000));
   const needToUpdateRef = useRef(needToUpdate); // having `needToUpdate` in the `checkVersion` dep array was causing double checks, despite debouncer
+  const hiddenAtRef = useRef<number | null>(null);
 
   useEffect(() => {
     needToUpdateRef.current = needToUpdate;
@@ -58,5 +65,31 @@ export const useVersionChecker = (currentVersion: string, socket: Socket | null)
     };
   }, [socket, checkVersion]);
 
+  // Auto-reload when the window regains focus after being blurred for 30s+.
+  // Uses window blur/focus rather than document visibilitychange so that
+  // switching to another desktop app (not just another browser tab) is detected.
+  useEffect(() => {
+    const handleBlur = () => {
+      hiddenAtRef.current = Date.now();
+    };
+
+    const handleFocus = () => {
+      if (
+        needToUpdateRef.current &&
+        hiddenAtRef.current &&
+        Date.now() - hiddenAtRef.current > VISIBILITY_CHANGE_THRESHOLD_MS
+      ) {
+        window.location.reload();
+      }
+    };
+
+    window.addEventListener('blur', handleBlur);
+    window.addEventListener('focus', handleFocus);
+    return () => {
+      window.removeEventListener('blur', handleBlur);
+      window.removeEventListener('focus', handleFocus);
+    };
+  }, []);
+
   return { needToUpdate };
 };