react-update-notification - npm Package Compare versions

Comparing version 0.1.0-alpha.4 to 1.0.0

bin/generate-version.js

@@ -23,4 +23,4 @@ #!/usr/bin/env node
 
-  const versionPath = path.resolve(process.cwd(), argv.v);
-  const indexPath = path.resolve(process.cwd(), argv.i);
+  const versionPath = path.resolve(process.cwd(), argv.b, argv.v);
+  const indexPath = path.resolve(process.cwd(), argv.b, argv.i);
 
@@ -69,18 +69,25 @@ try {
     nargs: 1,
-    default: 'package'
+    default: 'latest-commit',
   })
+  .option('buildPath', {
+    alias: 'b',
+    description: 'The build root',
+    nargs: 1,
+    default: 'build',
+  })
   .option('indexFile', {
     alias: 'i',
-    description: 'Path to index.html',
+    description: 'Path to index.html relative to build root',
     nargs: 1,
-    default: 'build/index.html'
+    default: 'index.html',
   })
   .option('versionFile', {
     alias: 'v',
-    description: 'Version file target path',
+    description: 'Version file target path relative to build root',
     nargs: 1,
-    default: 'build/version.json'
+    default: 'version.json',
   })
-  .example('$0 -i build/index.html')
-  .example('$0 -i build/index.html -v build/version.json')
+  .example('$0 -b build/my-custom-build-root')
+  .example('$0 -i index.html')
+  .example('$0 -i index.html -v version.json')
   .version(false)
@@ -87,0 +94,0 @@ .help().argv;

es/index.d.ts

@@ -1,15 +0,2 @@
-declare global {
-    interface Window {
-        __APP_VERSION__: string;
-    }
-}
-interface UpdateHookParams {
-    type: 'mount' | 'interval';
-    interval?: number;
-}
-declare type Status = 'checking' | 'current' | 'available';
-export declare const useUpdateCheck: (params: UpdateHookParams) => {
-    status: Status;
-    reloadPage: () => void;
-};
-export {};
+import { UpdateHookParams, UpdateHookReturnValue } from './types';
+export declare const useUpdateCheck: ({ interval, type, }: UpdateHookParams) => UpdateHookReturnValue;

es/index.js

@@ -1,41 +0,45 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { UpdateStatus, } from './types';
 var reloadPage = function () { return window.location.reload(true); };
 var currentVersion = window.__APP_VERSION__;
-export var useUpdateCheck = function (params) {
-    var _a = useState('checking'), status = _a[0], setStatus = _a[1];
+export var useUpdateCheck = function (_a) {
+    var interval = _a.interval, type = _a.type;
+    var _b = useState(UpdateStatus.checking), status = _b[0], setStatus = _b[1];
     var checkUpdate = function () {
-        if (status === 'available') {
-            return;
-        }
         if (typeof currentVersion === 'undefined') {
-            setStatus('current');
+            setStatus(UpdateStatus.current);
             return;
         }
-        setStatus('checking');
-        fetch('/version.json')
+        setStatus(UpdateStatus.checking);
+        fetch("/" + window.__APP_VERSION_FILE__)
             .then(function (res) { return res.json(); })
             .then(function (data) {
             if (data.version === currentVersion) {
-                setStatus('current');
+                setStatus(UpdateStatus.current);
             }
             else {
-                setStatus('available');
+                setStatus(UpdateStatus.available);
             }
         })
-            .catch(function (err) {
-            //TODO Define behavior when version file is broken / does not exist
+            .catch(function () {
+            setStatus(UpdateStatus.current);
         });
     };
     useEffect(function () {
-        checkUpdate();
-    }, []);
+        if (type !== 'manual') {
+            checkUpdate();
+        }
+    }, [type]);
     useEffect(function () {
-        if (params.type === 'interval') {
-            var interval_1 = setInterval(function () { return checkUpdate(); }, params.interval || 10000);
+        if (status !== UpdateStatus.current) {
+            return;
+        }
+        if (type === 'interval') {
+            var timeoutId_1 = window.setTimeout(function () { return checkUpdate(); }, interval || 10000);
             return function () {
-                clearInterval(interval_1);
+                clearTimeout(timeoutId_1);
             };
         }
-    }, [params.type, params.interval]);
-    return { status: status, reloadPage: reloadPage };
+    }, [type, interval, status]);
+    return { status: status, reloadPage: reloadPage, checkUpdate: checkUpdate };
 };

lib/index.d.ts

@@ -1,15 +0,2 @@
-declare global {
-    interface Window {
-        __APP_VERSION__: string;
-    }
-}
-interface UpdateHookParams {
-    type: 'mount' | 'interval';
-    interval?: number;
-}
-declare type Status = 'checking' | 'current' | 'available';
-export declare const useUpdateCheck: (params: UpdateHookParams) => {
-    status: Status;
-    reloadPage: () => void;
-};
-export {};
+import { UpdateHookParams, UpdateHookReturnValue } from './types';
+export declare const useUpdateCheck: ({ interval, type, }: UpdateHookParams) => UpdateHookReturnValue;

lib/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUpdateCheck = void 0;
 var react_1 = require("react");
+var types_1 = require("./types");
 var reloadPage = function () { return window.location.reload(true); };
 var currentVersion = window.__APP_VERSION__;
-exports.useUpdateCheck = function (params) {
-    var _a = react_1.useState('checking'), status = _a[0], setStatus = _a[1];
+exports.useUpdateCheck = function (_a) {
+    var interval = _a.interval, type = _a.type;
+    var _b = react_1.useState(types_1.UpdateStatus.checking), status = _b[0], setStatus = _b[1];
     var checkUpdate = function () {
-        if (status === 'available') {
-            return;
-        }
         if (typeof currentVersion === 'undefined') {
-            setStatus('current');
+            setStatus(types_1.UpdateStatus.current);
             return;
         }
-        setStatus('checking');
-        fetch('/version.json')
+        setStatus(types_1.UpdateStatus.checking);
+        fetch("/" + window.__APP_VERSION_FILE__)
             .then(function (res) { return res.json(); })
             .then(function (data) {
             if (data.version === currentVersion) {
-                setStatus('current');
+                setStatus(types_1.UpdateStatus.current);
             }
             else {
-                setStatus('available');
+                setStatus(types_1.UpdateStatus.available);
             }
         })
-            .catch(function (err) {
-            //TODO Define behavior when version file is broken / does not exist
+            .catch(function () {
+            setStatus(types_1.UpdateStatus.current);
         });
     };
     react_1.useEffect(function () {
-        checkUpdate();
-    }, []);
+        if (type !== 'manual') {
+            checkUpdate();
+        }
+    }, [type]);
     react_1.useEffect(function () {
-        if (params.type === 'interval') {
-            var interval_1 = setInterval(function () { return checkUpdate(); }, params.interval || 10000);
+        if (status !== types_1.UpdateStatus.current) {
+            return;
+        }
+        if (type === 'interval') {
+            var timeoutId_1 = window.setTimeout(function () { return checkUpdate(); }, interval || 10000);
             return function () {
-                clearInterval(interval_1);
+                clearTimeout(timeoutId_1);
             };
         }
-    }, [params.type, params.interval]);
-    return { status: status, reloadPage: reloadPage };
+    }, [type, interval, status]);
+    return { status: status, reloadPage: reloadPage, checkUpdate: checkUpdate };
 };

package.json

 {
   "name": "react-update-notification",
-  "version": "0.1.0-alpha.4",
+  "version": "1.0.0",
   "description": "New version notification for your React application.",
@@ -13,3 +13,4 @@ "main": "lib/index.js",
     "build": "yarn clean && yarn build:cjs && yarn build:es",
-    "clean": "rimraf lib es"
+    "clean": "rimraf lib es",
+    "prettier": "prettier --write src/*.ts bin/*.js"
   },
@@ -32,10 +33,15 @@ "bin": {
   "devDependencies": {
-    "@types/react": "^16.9.18",
-    "prettier": "^1.19.1",
-    "rimraf": "^3.0.0"
+    "@types/react": "^16.9.48",
+    "@typescript-eslint/eslint-plugin": "^3.10.1",
+    "@typescript-eslint/parser": "^3.10.1",
+    "eslint": "^7.7.0",
+    "eslint-plugin-react-hooks": "^4.1.0",
+    "prettier": "^2.1.1",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.0.2"
   },
   "dependencies": {
     "cheerio": "^1.0.0-rc.3",
-    "yargs": "^15.1.0"
+    "yargs": "^15.4.1"
   }
 }

README.md

 # react-update-notification · [![npm version](https://img.shields.io/npm/v/react-update-notification.svg?style=flat)](https://www.npmjs.com/package/react-update-notification)
 
-A small cli tool & React hook to check when your app is updated and show a notification.
+A small CLI tool & React hook to check when your app has a new version and show a notification.
+Works great when you cannot or do not want to set up a service worker.
 
@@ -21,3 +22,3 @@ ## Installation
 
-1. Injecting current version number into `window` object in `index.html` and creating `version.json` file to check for a new version.
+1. Injecting current version number into `window` object in `index.html` and creating a `version.json` file to check for a new version.
 2. Providing a React hook to build a custom update notification component.
@@ -37,15 +38,25 @@
 
-`generate-version` accepts several types of strategies to differentiate versions and trigger the update notification:
+#### CLI Options
 
-- `latest-commit` uses current commit hash.
-- `package` uses package.json `version` field.
+|        Option         | Description                                                                                                                                                                                                                                             |     Default     |
+| :-------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------: |
+|  `-s`, `--strategy`   | Set strategy. The update notification will trigger when the version string in the JSON file is different from the version string in the HTML file. <br><br> `latest-commit` uses current commit hash. <br> `package` uses package.json `version` field. | `latest-commit` |
+|  `-b`, `--buildPath`  | Set custom build path. This should be the root of the public directory that is served.                                                                                                                                                                  |     `build`     |
+|  `-i`, `--indexFile`  | Path to index.html relative to build path.                                                                                                                                                                                                              |  `index.html`   |
+| `-v`, `--versionFile` | Version file target path relative to build path.                                                                                                                                                                                                        | `version.json`  |
 
-<!-- `generate-version` accepts custom paths to `index.html` and to target `version.json` like this:
+### 2. Using a React hook
 
-```bash
-generate-version -i build/customIndex.html -v build/customVersionFile.json
-``` -->
+The `useUpdateCheck` hook returns:
 
-### 2. Using a React hook
+- `status` string that can be `'checking'`, `'current'` or `'available'`.
+- `reloadPage` helper function that reloads the page.
+- `checkUpdate` function to manually trigger the update check.
 
+It supports three check types:
+
+- `interval` checks on component mount and then every set period defined by `interval` property (10 seconds by default).
+- `mount` checks only on component mount.
+- `manual` does not check at all. It is used to check with `checkUpdate`.
+
 ```jsx
@@ -58,3 +69,3 @@ import React from 'react';
     type: 'interval',
-    interval: 10000
+    interval: 10000,
   });
@@ -75,9 +86,1 @@
 ```
-
-## TODO
-
-- [ ] Define behavior when version file is broken / does not exist
-- [x] Custom strategies for version generation (package.json, commit id)
-- [ ] Custom paths to `generate-version`
-- [x] Hook options (checking update using interval)
-- [ ] Proper documentation, tests and build

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12703

increased by43.94%

Number of package files

11

increased by57.14%

Lines of code

241

increased by26.84%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

83

increased by3.75%

Worsened metrics

Dev dependency count

8

increased by166.67%

Number of medium supply chain risk alerts

4

increased by33.33%

Dependency changes

• Updatedyargs@^15.4.1