react-version-check
Version:
provide a react component to check your code version. when not latest, forces hard refresh on browser
115 lines • 5 kB
JavaScript
;
exports.__esModule = true;
exports.VersionCheck = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var react_2 = require("react");
var WAS_REFRESHED_BEFORE = "was-refreshed-before";
function semverGreaterThan(versionA, versionB) {
var versionsA = versionA.split(/\./g);
var versionsB = versionB.split(/\./g);
while (versionsA.length || versionsB.length) {
var a = Number(versionsA.shift());
var b = Number(versionsB.shift());
if (a === b)
continue;
return a > b || isNaN(b);
}
return false;
}
function refreshCacheAndReload() {
localStorage.setItem(WAS_REFRESHED_BEFORE, "true");
if (caches) {
// Service worker cache should be cleared with caches.delete()
caches.keys().then(function (names) {
for (var _i = 0, names_1 = names; _i < names_1.length; _i++) {
var name_1 = names_1[_i];
caches["delete"](name_1);
}
});
}
// delete browser cache and hard reload
window.location.reload();
}
var defaultStyle = {
position: "fixed",
bottom: 0,
zIndex: 99999,
padding: "3px 7px",
fontSize: "12px",
background: "#5d5d5d",
color: "white",
letterSpacing: "1px",
fontFamily: "Helvetica"
};
/**
* sometimes browsers cashes websites, thus presenting old version of the site.
* the VersionCheck component check if your version is the latest,
* and if not, it forces hard refresh on the site, to bring its latest version.
* */
var VersionCheck = function (props) {
var currentVersion = props.currentVersion, _a = props.logs, logs = _a === void 0 ? true : _a, _b = props.display, display = _b === void 0 ? true : _b, _c = props.dependencies, dependencies = _c === void 0 ? [] : _c, _d = props.serverFilePath, serverFilePath = _d === void 0 ? "/meta.json" : _d, _e = props.className, className = _e === void 0 ? "" : _e, _f = props.style, style = _f === void 0 ? {} : _f, _g = props.side, side = _g === void 0 ? "left" : _g;
var _h = (0, react_2.useState)(false), loading = _h[0], setLoading = _h[1];
var _j = (0, react_2.useState)(true), isLatestVersion = _j[0], setIsLatestVersion = _j[1];
var _k = (0, react_2.useState)(false), error = _k[0], setError = _k[1];
function print(msg, logger) {
if (logger === void 0) { logger = console.log; }
if (logs)
logger("VERSION-CHECK: ".concat(msg));
}
var Render = function (p) {
var _a;
var newStyle = tslib_1.__assign(tslib_1.__assign((_a = {}, _a[side] = 0, _a), defaultStyle), style);
return (react_1["default"].createElement("div", { style: newStyle, className: className }, p.children));
};
(0, react_2.useEffect)(function () {
if (localStorage.getItem(WAS_REFRESHED_BEFORE)) {
localStorage.removeItem(WAS_REFRESHED_BEFORE);
print("server version is bigger then local version", console.error);
setError(true);
return;
}
// reset all
setLoading(true);
setIsLatestVersion(false);
setError(false);
fetch(serverFilePath)
.then(function (response) { return response.json(); })
.then(function (meta) {
print("fetching version...");
var latestVersion = meta.version;
if (!latestVersion)
throw new Error("property \"version\" was not found in the file: ".concat(serverFilePath, ".json"));
var shouldForceRefresh = semverGreaterThan(latestVersion, currentVersion);
if (shouldForceRefresh) {
print("we have a new version - ".concat(latestVersion, ". should force refresh"));
setIsLatestVersion(false);
}
else {
print("you already have the latest version: ".concat(currentVersion, ". no cache refresh needed."));
setIsLatestVersion(true);
}
})["catch"](function (e) {
print(e, console.error);
setError(true);
})["finally"](function () { return setLoading(false); });
}, dependencies);
if (loading || error || isLatestVersion) {
if (!display)
return null;
if (loading) {
return react_1["default"].createElement(Render, null, "loading version...");
}
if (error) {
return react_1["default"].createElement(Render, null, "version error");
}
return (react_1["default"].createElement(Render, null,
"version: ",
react_1["default"].createElement("code", null, currentVersion)));
}
print("clearing cache and hard reloading...");
refreshCacheAndReload();
return null;
};
exports.VersionCheck = VersionCheck;
//# sourceMappingURL=VersionCheck.js.map