next-nprogress-bar - npm Package Compare versions

Comparing version 2.3.16 to 2.4.0

dist/AppProgressBar.d.ts

 import React from 'react';
-import { ProgressBarProps, RouterNProgressOptions } from '.';
+import type { ProgressBarProps, RouterNProgressOptions } from '.';
 import { type AppRouterInstance, NavigateOptions } from 'next/dist/shared/lib/app-router-context.shared-runtime';
-export declare const AppProgressBar: React.MemoExoticComponent<({ color, height, options, shallowRouting, disableSameURL, startPosition, delay, stopDelay, style, nonce, targetPreprocessor, disableAnchorClick, }: ProgressBarProps) => React.JSX.Element>;
+export declare const AppProgressBar: React.MemoExoticComponent<({ color, height, options, spinnerPosition, shallowRouting, disableSameURL, startPosition, delay, stopDelay, style, nonce, targetPreprocessor, disableAnchorClick, }: ProgressBarProps) => React.JSX.Element>;
 export declare function useRouter(customRouter?: () => AppRouterInstance): {
@@ -6,0 +6,0 @@ push: (href: string, options?: NavigateOptions, NProgressOptions?: RouterNProgressOptions) => void;

dist/index.d.ts

 /// <reference types="react" />
+import { NProgressOptions } from 'nprogress-v2';
 import { useRouter } from './AppProgressBar';
-export interface NProgressOptions {
-    minimum?: number;
-    template?: string;
-    easing?: string;
-    speed?: number;
-    trickle?: boolean;
-    trickleSpeed?: number;
-    showSpinner?: boolean;
-    parent?: string;
-    positionUsing?: string;
-    barSelector?: string;
-    spinnerSelector?: string;
-}
+export type SpinnerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 /**
@@ -20,2 +9,3 @@ * @param color Color of the progress bar. @default #0A2FFF
  * @param options NProgress options. @default undefined
+ * @param spinnerPosition Position of the spinner. @default top-right
  * @param shallowRouting If the progress bar is not displayed when you use shallow routing - @default false
@@ -36,2 +26,3 @@ * @param startPosition The position of the progress bar at the start of the page load - @default 0
     options?: Partial<NProgressOptions>;
+    spinnerPosition?: SpinnerPosition;
     shallowRouting?: boolean;
@@ -57,3 +48,3 @@ disableSameURL?: boolean;
 declare const AppProgressBar: (props: ProgressBarProps) => import("react").JSX.Element;
-export { AppProgressBar, useRouter };
+export { AppProgressBar, useRouter, NProgressOptions };
 export { PagesProgressBar } from './PagesProgressBar';

dist/index.js

 'use strict';
 
-var NProgress = require('nprogress');
+var nprogressV2 = require('nprogress-v2');
 var React = require('react');
@@ -90,7 +90,24 @@ var navigation = require('next/navigation');
 
+var css = function (_a) {
+    var color = _a.color, height = _a.height, spinnerPosition = _a.spinnerPosition;
+    return "\n#nprogress {\n  pointer-events: none;\n}\n\n#nprogress .bar {\n  background: ".concat(color, ";\n\n  position: fixed;\n  z-index: 99999;\n  top: 0;\n  left: 0;\n\n  width: 100%;\n  height: ").concat(height, ";\n}\n\n/* Fancy blur effect */\n#nprogress .peg {\n  display: block;\n  position: absolute;\n  right: 0px;\n  width: 100px;\n  height: 100%;\n  box-shadow: 0 0 10px ").concat(color, ", 0 0 5px ").concat(color, ";\n  opacity: 1.0;\n\n  -webkit-transform: rotate(3deg) translate(0px, -4px);\n      -ms-transform: rotate(3deg) translate(0px, -4px);\n          transform: rotate(3deg) translate(0px, -4px);\n}\n\n/* Remove these to get rid of the spinner */\n#nprogress .spinner {\n  display: block;\n  position: fixed;\n  z-index: 1031;\n  top: ").concat(spinnerPosition === 'top-right' || spinnerPosition === 'top-left'
+        ? '15px'
+        : 'auto', ";\n  bottom: ").concat(spinnerPosition === 'bottom-right' || spinnerPosition === 'bottom-left'
+        ? '15px'
+        : 'auto', ";\n  right: ").concat(spinnerPosition === 'top-right' || spinnerPosition === 'bottom-right'
+        ? '15px'
+        : 'auto', ";\n  left: ").concat(spinnerPosition === 'top-left' || spinnerPosition === 'bottom-left'
+        ? '15px'
+        : 'auto', ";\n}\n\n#nprogress .spinner-icon {\n  width: 18px;\n  height: 18px;\n  box-sizing: border-box;\n\n  border: solid 2px transparent;\n  border-top-color: ").concat(color, ";\n  border-left-color: ").concat(color, ";\n  border-radius: 50%;\n\n  -webkit-animation: nprogress-spinner 400ms linear infinite;\n          animation: nprogress-spinner 400ms linear infinite;\n}\n\n.nprogress-custom-parent {\n  overflow: hidden;\n  position: relative;\n}\n\n.nprogress-custom-parent #nprogress .spinner,\n.nprogress-custom-parent #nprogress .bar {\n  position: absolute;\n}\n\n@-webkit-keyframes nprogress-spinner {\n  0%   { -webkit-transform: rotate(0deg); }\n  100% { -webkit-transform: rotate(360deg); }\n}\n@keyframes nprogress-spinner {\n  0%   { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n");
+};
+
 var AppProgressBar$1 = React.memo(function (_a) {
-    var _b = _a.color, color = _b === void 0 ? '#0A2FFF' : _b, _c = _a.height, height = _c === void 0 ? '2px' : _c, options = _a.options, _d = _a.shallowRouting, shallowRouting = _d === void 0 ? false : _d, _e = _a.disableSameURL, disableSameURL = _e === void 0 ? true : _e, _f = _a.startPosition, startPosition = _f === void 0 ? 0 : _f, _g = _a.delay, delay = _g === void 0 ? 0 : _g, _h = _a.stopDelay, stopDelay = _h === void 0 ? 0 : _h, style = _a.style, nonce = _a.nonce, targetPreprocessor = _a.targetPreprocessor, _j = _a.disableAnchorClick, disableAnchorClick = _j === void 0 ? false : _j;
+    var _b = _a.color, color = _b === void 0 ? '#0A2FFF' : _b, _c = _a.height, height = _c === void 0 ? '2px' : _c, options = _a.options, _d = _a.spinnerPosition, spinnerPosition = _d === void 0 ? 'top-right' : _d, _e = _a.shallowRouting, shallowRouting = _e === void 0 ? false : _e, _f = _a.disableSameURL, disableSameURL = _f === void 0 ? true : _f, _g = _a.startPosition, startPosition = _g === void 0 ? 0 : _g, _h = _a.delay, delay = _h === void 0 ? 0 : _h, _j = _a.stopDelay, stopDelay = _j === void 0 ? 0 : _j, style = _a.style, nonce = _a.nonce, targetPreprocessor = _a.targetPreprocessor, _k = _a.disableAnchorClick, disableAnchorClick = _k === void 0 ? false : _k;
     var styles = (React.createElement("style", { nonce: nonce }, style ||
-        "\n          #nprogress {\n            pointer-events: none;\n          }\n\n          #nprogress .bar {\n            background: ".concat(color, ";\n\n            position: fixed;\n            z-index: 99999;\n            top: 0;\n            left: 0;\n\n            width: 100%;\n            height: ").concat(height, ";\n          }\n\n          /* Fancy blur effect */\n          #nprogress .peg {\n            display: block;\n            position: absolute;\n            right: 0px;\n            width: 100px;\n            height: 100%;\n            box-shadow: 0 0 10px ").concat(color, ", 0 0 5px ").concat(color, ";\n            opacity: 1.0;\n\n            -webkit-transform: rotate(3deg) translate(0px, -4px);\n                -ms-transform: rotate(3deg) translate(0px, -4px);\n                    transform: rotate(3deg) translate(0px, -4px);\n          }\n\n          /* Remove these to get rid of the spinner */\n          #nprogress .spinner {\n            display: block;\n            position: fixed;\n            z-index: 1031;\n            top: 15px;\n            right: 15px;\n          }\n\n          #nprogress .spinner-icon {\n            width: 18px;\n            height: 18px;\n            box-sizing: border-box;\n\n            border: solid 2px transparent;\n            border-top-color: ").concat(color, ";\n            border-left-color: ").concat(color, ";\n            border-radius: 50%;\n\n            -webkit-animation: nprogress-spinner 400ms linear infinite;\n                    animation: nprogress-spinner 400ms linear infinite;\n          }\n\n          .nprogress-custom-parent {\n            overflow: hidden;\n            position: relative;\n          }\n\n          .nprogress-custom-parent #nprogress .spinner,\n          .nprogress-custom-parent #nprogress .bar {\n            position: absolute;\n          }\n\n          @-webkit-keyframes nprogress-spinner {\n            0%   { -webkit-transform: rotate(0deg); }\n            100% { -webkit-transform: rotate(360deg); }\n          }\n          @keyframes nprogress-spinner {\n            0%   { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n          }\n        ")));
-    NProgress.configure(options || {});
+        css({
+            color: color,
+            height: height,
+            spinnerPosition: spinnerPosition,
+        })));
+    nprogressV2.NProgress.configure(options || {});
     var progressDoneTimer;
@@ -103,3 +120,3 @@ var pathname = navigation.usePathname();
         progressDoneTimer = setTimeout(function () {
-            NProgress.done();
+            nprogressV2.NProgress.done();
         }, stopDelay);
@@ -116,4 +133,4 @@ }, [pathname, searchParams]);
                 if (startPosition > 0)
-                    NProgress.set(startPosition);
-                NProgress.start();
+                    nprogressV2.NProgress.set(startPosition);
+                nprogressV2.NProgress.start();
             }, delay);
@@ -125,5 +142,5 @@ };
             timer = setTimeout(function () {
-                if (!NProgress.isStarted())
+                if (!nprogressV2.NProgress.isStarted())
                     return;
-                NProgress.done();
+                nprogressV2.NProgress.done();
             }, stopDelay);
@@ -246,4 +263,4 @@ };
         if (startPosition && startPosition > 0)
-            NProgress.set(startPosition);
-        NProgress.start();
+            nprogressV2.NProgress.set(startPosition);
+        nprogressV2.NProgress.start();
     }, [router]);
@@ -289,6 +306,10 @@ var progress = React.useCallback(function (href, options, NProgressOptions) {
 var PagesProgressBar = React.memo(function (_a) {
-    var _b = _a.color, color = _b === void 0 ? '#0A2FFF' : _b, _c = _a.height, height = _c === void 0 ? '2px' : _c, options = _a.options, _d = _a.shallowRouting, shallowRouting = _d === void 0 ? false : _d, _e = _a.disableSameURL, disableSameURL = _e === void 0 ? true : _e, _f = _a.startPosition, startPosition = _f === void 0 ? 0 : _f, _g = _a.delay, delay = _g === void 0 ? 0 : _g, _h = _a.stopDelay, stopDelay = _h === void 0 ? 0 : _h, style = _a.style, nonce = _a.nonce;
+    var _b = _a.color, color = _b === void 0 ? '#0A2FFF' : _b, _c = _a.height, height = _c === void 0 ? '2px' : _c, options = _a.options, _d = _a.spinnerPosition, spinnerPosition = _d === void 0 ? 'top-right' : _d, _e = _a.shallowRouting, shallowRouting = _e === void 0 ? false : _e, _f = _a.disableSameURL, disableSameURL = _f === void 0 ? true : _f, _g = _a.startPosition, startPosition = _g === void 0 ? 0 : _g, _h = _a.delay, delay = _h === void 0 ? 0 : _h, _j = _a.stopDelay, stopDelay = _j === void 0 ? 0 : _j, style = _a.style, nonce = _a.nonce;
     var styles = (React.createElement("style", { nonce: nonce }, style ||
-        "\n          #nprogress {\n            pointer-events: none;\n          }\n          \n          #nprogress .bar {\n            background: ".concat(color, ";\n          \n            position: fixed;\n            z-index: 99999;\n            top: 0;\n            left: 0;\n          \n            width: 100%;\n            height: ").concat(height, ";\n          }\n          \n          /* Fancy blur effect */\n          #nprogress .peg {\n            display: block;\n            position: absolute;\n            right: 0px;\n            width: 100px;\n            height: 100%;\n            box-shadow: 0 0 10px ").concat(color, ", 0 0 5px ").concat(color, ";\n            opacity: 1.0;\n          \n            -webkit-transform: rotate(3deg) translate(0px, -4px);\n                -ms-transform: rotate(3deg) translate(0px, -4px);\n                    transform: rotate(3deg) translate(0px, -4px);\n          }\n          \n          /* Remove these to get rid of the spinner */\n          #nprogress .spinner {\n            display: block;\n            position: fixed;\n            z-index: 1031;\n            top: 15px;\n            right: 15px;\n          }\n          \n          #nprogress .spinner-icon {\n            width: 18px;\n            height: 18px;\n            box-sizing: border-box;\n          \n            border: solid 2px transparent;\n            border-top-color: ").concat(color, ";\n            border-left-color: ").concat(color, ";\n            border-radius: 50%;\n          \n            -webkit-animation: nprogress-spinner 400ms linear infinite;\n                    animation: nprogress-spinner 400ms linear infinite;\n          }\n          \n          .nprogress-custom-parent {\n            overflow: hidden;\n            position: relative;\n          }\n          \n          .nprogress-custom-parent #nprogress .spinner,\n          .nprogress-custom-parent #nprogress .bar {\n            position: absolute;\n          }\n          \n          @-webkit-keyframes nprogress-spinner {\n            0%   { -webkit-transform: rotate(0deg); }\n            100% { -webkit-transform: rotate(360deg); }\n          }\n          @keyframes nprogress-spinner {\n            0%   { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n          }\n        ")));
-    NProgress.configure(options || {});
+        css({
+            color: color,
+            height: height,
+            spinnerPosition: spinnerPosition,
+        })));
+    nprogressV2.NProgress.configure(options || {});
     React.useEffect(function () {
@@ -299,4 +320,4 @@ var timer;
                 if (startPosition > 0)
-                    NProgress.set(startPosition);
-                NProgress.start();
+                    nprogressV2.NProgress.set(startPosition);
+                nprogressV2.NProgress.start();
             }, delay);
@@ -308,5 +329,5 @@ };
             timer = setTimeout(function () {
-                if (!NProgress.isStarted())
+                if (!nprogressV2.NProgress.isStarted())
                     return;
-                NProgress.done(true);
+                nprogressV2.NProgress.done(true);
             }, stopDelay);
@@ -317,8 +338,9 @@ };
             var currentUrl = new URL(Router.route, location.href);
-            if ((!shallowRouting ||
-                (isSameURL(targetUrl, currentUrl) && !disableSameURL) ||
-                !isSameURL(targetUrl, currentUrl)) &&
-                !NProgress.isStarted()) {
-                startProgress();
-            }
+            if (shallowRouting &&
+                isSameURLWithoutSearch(targetUrl, currentUrl) &&
+                disableSameURL)
+                return;
+            if (isSameURL(targetUrl, currentUrl) && disableSameURL)
+                return;
+            startProgress();
         };
@@ -359,6 +381,6 @@ var handleRouteDone = function () { return stopProgress(); };
 var startProgress = function () {
-    NProgress.start();
+    nprogressV2.NProgress.start();
 };
 var stopProgress = function (force) {
-    NProgress.done(force);
+    nprogressV2.NProgress.done(force);
 };
@@ -365,0 +387,0 @@ var AppProgressBar = withSuspense(AppProgressBar$1);

dist/PagesProgressBar.d.ts

 import React from 'react';
-import { ProgressBarProps } from '.';
-export declare const PagesProgressBar: React.MemoExoticComponent<({ color, height, options, shallowRouting, disableSameURL, startPosition, delay, stopDelay, style, nonce, }: Omit<ProgressBarProps, 'targetPreprocessor' | 'disableAnchorClick'>) => React.JSX.Element>;
+import type { ProgressBarProps } from '.';
+export declare const PagesProgressBar: React.MemoExoticComponent<({ color, height, options, spinnerPosition, shallowRouting, disableSameURL, startPosition, delay, stopDelay, style, nonce, }: Omit<ProgressBarProps, 'targetPreprocessor' | 'disableAnchorClick'>) => React.JSX.Element>;

package.json

 {
   "name": "next-nprogress-bar",
-  "version": "2.3.16",
+  "version": "2.4.0",
   "description": "NextJS progress bar compatible with new app directory",
@@ -33,8 +33,4 @@ "repository": {
   "license": "MIT",
-  "dependencies": {
-    "nprogress": "^0.2.0"
-  },
   "devDependencies": {
     "@types/node": "^20.1.2",
-    "@types/nprogress": "^0.2.0",
     "@types/react": "^18.2.6",
@@ -52,3 +48,6 @@ "@types/react-dom": "^18.2.4",
     "typescript": "^5.0.4"
+  },
+  "dependencies": {
+    "nprogress-v2": "^1.0.3"
   }
 }

README.md

@@ -5,2 +5,5 @@ <div align="center">
 <p>NProgress integration on Next.js compatible with /app and /pages folders</p>
+
+<b>Now using NProgress V2 🚀</b>
+
 </div>
@@ -30,2 +33,3 @@
   - [options](#options)
+  - [spinnerPosition] (#spinnerPosition)
   - [appDirectory](#appdirectory)
@@ -331,4 +335,8 @@ - [shallowRouting](#shallowrouting)
 
-See [NProgress docs](https://www.npmjs.com/package/nprogress#configuration)
+See [NProgress V2 docs](https://www.npmjs.com/package/nprogress-v2#configuration)
 
+### spinnerPosition _optional_ - _SpinnerPosition ('top-left' | 'top-right' | 'bottom-left' | 'bottom-right')_
+
+Position of the spinner (if `showSpinner` is `true`) - **by default top-right**
+
 ### shallowRouting _optional_ - _boolean_
@@ -366,3 +374,3 @@
 
-Your custom CSS - **by default [NProgress CSS](https://github.com/rstacruz/nprogress/blob/master/nprogress.css)**
+Your custom CSS - **by default [NProgress CSS](https://github.com/Skyleen77/nprogress-v2/blob/main/src/index.css)**
 
@@ -369,0 +377,0 @@ ### shouldCompareComplexProps _optional_ - _boolean_

No alert changes

Improved metrics

Dev dependency count

13

decreased by-7.14%

Number of package files

11

increased by10%

Lines of code

450

increased by3.21%

Number of lines in readme file

496

increased by1.64%

Worsened metrics

Total package byte prevSize

76769

decreased by-3.13%

Dependency changes

• + Addednprogress-v2@^1.0.3

• + Addednprogress-v2@1.0.4(transitive)

• - Removednprogress@^0.2.0

• - Removednprogress@0.2.0(transitive)