@proteinjs/app-version-ui 1.0.1

package/.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', 'prettier'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'prettier'],
+  root: true,
+  ignorePatterns: ['**/dist/*', '**/node_modules/*', '*.md'],
+
+  rules: {
+    'prettier/prettier': ['warn'],
+    curly: ['warn'],
+    'eol-last': ['warn', 'always'],
+    'keyword-spacing': ['warn', { before: true }],
+    'no-undef': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/prefer-as-const': 'off',
+    '@typescript-eslint/ban-types': 'off',
+  },
+};

package/.prettierignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.DS_Store
+*.md

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "printWidth": 120
+}

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 1.0.1 (2024-08-02)
+
+
+### Bug Fixes
+
+* initial implementation of app-version-server and app-version-ui ([6ed1f7f](https://github.com/proteinjs/notifications/commit/6ed1f7fbed212a034256ec643afc937f9b7ff549))

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/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/useVersionChecker';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/dist/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./src/useVersionChecker"), exports);
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0DAAwC"}

package/dist/src/useVersionChecker.d.ts

@@ -0,0 +1,24 @@
+import { Socket } from 'socket.io-client';
+/**
+ * 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
+ * notify the client that they should update. See `LatestVersionRequiringUpdate` in
+ * `@proteinjs/app-version-common` for more details on implementing the server-side logic.
+ *
+ * This hook will check with the server if the client should update when the socket
+ * receives a `connect` event.
+ *
+ * Reason:
+ *
+ * When a new version is deployed, the server process will terminate. The socket will always
+ * need to reconnect in this scenario. Additionally, an explicit `version-updated` event
+ * from the server can be missed (ie. the user's laptop is closed).
+ *
+ * @param currentVersion the version of the bundle currently on the client
+ * @param socket a Socket.IO `Socket`
+ * @returns `true` if the client should be notified to update to the latest version (ie. by reloading the page)
+ */
+export declare const useVersionChecker: (currentVersion: string, socket: Socket | null) => {
+    needToUpdate: boolean;
+};
+//# sourceMappingURL=useVersionChecker.d.ts.map

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

@@ -0,0 +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"}

package/dist/src/useVersionChecker.js

@@ -0,0 +1,68 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+/**
+ * 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
+ * notify the client that they should update. See `LatestVersionRequiringUpdate` in
+ * `@proteinjs/app-version-common` for more details on implementing the server-side logic.
+ *
+ * This hook will check with the server if the client should update when the socket
+ * receives a `connect` event.
+ *
+ * Reason:
+ *
+ * When a new version is deployed, the server process will terminate. The socket will always
+ * need to reconnect in this scenario. Additionally, an explicit `version-updated` event
+ * from the server can be missed (ie. the user's laptop is closed).
+ *
+ * @param currentVersion the version of the bundle currently on the client
+ * @param socket a Socket.IO `Socket`
+ * @returns `true` if the client should be notified to update to the latest version (ie. by reloading the page)
+ */
+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
+    (0, react_1.useEffect)(() => {
+        needToUpdateRef.current = needToUpdate;
+    }, [needToUpdate]);
+    const checkVersion = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            const newNeedToUpdate = yield (0, app_version_common_1.getVersionCheckerService)().needToUpdate(currentVersion);
+            if (needToUpdateRef.current !== newNeedToUpdate) {
+                setNeedToUpdate(newNeedToUpdate);
+            }
+        }
+        catch (error) {
+            console.error('Failed to check version:', error);
+        }
+    }), [currentVersion]);
+    (0, react_1.useEffect)(() => {
+        if (!socket) {
+            return;
+        }
+        const handleConnect = () => {
+            debouncerRef.current.debounce(checkVersion);
+        };
+        socket.on('connect', handleConnect);
+        return () => {
+            socket.off('connect', handleConnect);
+        };
+    }, [socket, checkVersion]);
+    return { needToUpdate };
+};
+exports.useVersionChecker = useVersionChecker;
+//# sourceMappingURL=useVersionChecker.js.map

package/dist/src/useVersionChecker.js.map

@@ -0,0 +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"}

package/index.ts

@@ -0,0 +1 @@
+export * from './src/useVersionChecker';

package/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  roots: ['<rootDir>/test'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  testEnvironment: 'node',
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@proteinjs/app-version-ui",
+  "version": "1.0.1",
+  "description": "App version ui components",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/proteinjs/notifications.git"
+  },
+  "bugs": {
+    "url": "https://github.com/proteinjs/notifications/issues"
+  },
+  "homepage": "https://github.com/proteinjs/notifications#readme",
+  "author": "Brent Bahry",
+  "license": "MIT",
+  "scripts": {
+    "clean": "rm -rf dist/ node_modules/",
+    "build": "tsc",
+    "watch": "tsc -w -p ."
+  },
+  "dependencies": {
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "@mui/icons-material": "5.14.11",
+    "@mui/material": "5.14.11",
+    "@proteinjs/app-version-common": "^1.0.1",
+    "@proteinjs/util": "1.3.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "socket.io-client": "4.7.5"
+  },
+  "devDependencies": {
+    "@types/jest": "29.5.5",
+    "@types/react": "18.2.23",
+    "@types/react-dom": "18.2.8",
+    "@typescript-eslint/eslint-plugin": "7.8.0",
+    "@typescript-eslint/parser": "7.8.0",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-prettier": "5.1.3",
+    "jest": "29.7.0",
+    "ts-jest": "29.1.1",
+    "typescript": "5.2.2"
+  },
+  "main": "./dist/generated/index.js",
+  "types": "./dist/generated/index.d.ts",
+  "gitHead": "38cee278cf7a5929023ca0d0ca346cdffc42662e"
+}

package/src/useVersionChecker.tsx

@@ -0,0 +1,62 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { getVersionCheckerService } from '@proteinjs/app-version-common';
+import { Socket } from 'socket.io-client';
+import { Debouncer } from '@proteinjs/util';
+
+/**
+ * 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
+ * notify the client that they should update. See `LatestVersionRequiringUpdate` in
+ * `@proteinjs/app-version-common` for more details on implementing the server-side logic.
+ *
+ * This hook will check with the server if the client should update when the socket
+ * receives a `connect` event.
+ *
+ * Reason:
+ *
+ * When a new version is deployed, the server process will terminate. The socket will always
+ * need to reconnect in this scenario. Additionally, an explicit `version-updated` event
+ * from the server can be missed (ie. the user's laptop is closed).
+ *
+ * @param currentVersion the version of the bundle currently on the client
+ * @param socket a Socket.IO `Socket`
+ * @returns `true` if the client should be notified to update to the latest version (ie. by reloading the page)
+ */
+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
+
+  useEffect(() => {
+    needToUpdateRef.current = needToUpdate;
+  }, [needToUpdate]);
+
+  const checkVersion = useCallback(async () => {
+    try {
+      const newNeedToUpdate = await getVersionCheckerService().needToUpdate(currentVersion);
+      if (needToUpdateRef.current !== newNeedToUpdate) {
+        setNeedToUpdate(newNeedToUpdate);
+      }
+    } catch (error) {
+      console.error('Failed to check version:', error);
+    }
+  }, [currentVersion]);
+
+  useEffect(() => {
+    if (!socket) {
+      return;
+    }
+
+    const handleConnect = () => {
+      debouncerRef.current.debounce(checkVersion);
+    };
+
+    socket.on('connect', handleConnect);
+
+    return () => {
+      socket.off('connect', handleConnect);
+    };
+  }, [socket, checkVersion]);
+
+  return { needToUpdate };
+};

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "rootDir": "./",
+    "target": "es6",
+    "module": "commonjs",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist/",
+    "strict": true,
+    "noImplicitAny": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "jsx": "react"
+  }
+}