@tanem/react-nprogress 6.0.4 → 7.0.0

package/package.json

@@ -1,40 +1,67 @@
 {
   "name": "@tanem/react-nprogress",
-  "version": "6.0.4",
+  "version": "7.0.0",
   "description": "A React primitive for building slim progress bars.",
-  "main": "dist/index.js",
-  "module": "dist/react-nprogress.esm.js",
-  "types": "dist/index.d.ts",
+  "type": "commonjs",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/react-nprogress.d.mts",
+        "default": "./dist/react-nprogress.mjs"
+      },
+      "default": {
+        "types": "./dist/react-nprogress.d.cts",
+        "default": "./dist/react-nprogress.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/react-nprogress.cjs",
+  "module": "dist/react-nprogress.mjs",
+  "types": "dist/react-nprogress.d.cts",
   "sideEffects": false,
+  "size-limit": [
+    {
+      "name": "ESM bundle",
+      "path": "dist/react-nprogress.mjs",
+      "gzip": true,
+      "limit": "1.2 kB"
+    },
+    {
+      "name": "CJS bundle",
+      "path": "dist/react-nprogress.cjs",
+      "gzip": true,
+      "limit": "1.3 kB"
+    }
+  ],
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "scripts": {
     "authors": "tanem-scripts authors > AUTHORS",
-    "build": "run-s clean compile bundle",
-    "bundle": "rollup -c",
+    "build": "run-s clean bundle",
+    "bundle": "tsdown",
     "changelog": "tanem-scripts changelog -f v$npm_package_version > CHANGELOG.md",
-    "check:format": "prettier --list-different \"**/*.{js,ts,tsx}\"",
+    "check:format": "prettier --list-different \"**/*.{cjs,cts,js,mjs,mts,ts,tsx}\"",
     "check:types": "tsc --noEmit",
     "clean": "run-p clean:*",
-    "clean:compiled": "shx rm -rf compiled",
     "clean:coverage": "shx rm -rf coverage",
-    "clean:dist": "shx rm -rf dist",
     "clean:react": "node ./scripts/clean-react.js",
-    "compile": "tsc -p tsconfig.base.json",
-    "format": "eslint . --fix && prettier --write \"**/*.{js,ts,tsx}\"",
+    "format": "eslint . --fix && prettier --write \"**/*.{cjs,cts,js,mjs,mts,ts,tsx}\"",
     "lint": "eslint . --max-warnings=0",
-    "postbundle": "npm run clean:compiled && shx cp ./index.js ./dist/index.js",
+    "package:attw": "node ./scripts/attw.js",
+    "package:publint": "publint",
+    "postbuild": "run-s package:*",
     "prepare": "npm run build",
     "release": "tanem-scripts release",
-    "test": "run-s check:* lint build test:*",
+    "size": "size-limit",
+    "test": "run-s check:* lint build size test:*",
+    "test:bundles": "jest --config ./scripts/jest/config.bundles.js",
     "test:cjs": "jest --config ./scripts/jest/config.cjs.js",
-    "test:cjsprod": "jest --config ./scripts/jest/config.cjsprod.js",
-    "test:es": "jest --config ./scripts/jest/config.es.js",
+    "test:es": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js --config ./scripts/jest/config.es.js",
     "test:react": "node ./scripts/test-react.js",
     "test:src": "jest --config ./scripts/jest/config.src.js",
-    "test:umd": "jest --config ./scripts/jest/config.umd.js",
-    "test:umdprod": "jest --config ./scripts/jest/config.umdprod.js",
     "version": "run-s test changelog authors && git add ."
   },
   "repository": {
@@ -44,8 +71,6 @@
   "keywords": [
     "animation",
     "component",
-    "higher-order-component",
-    "hoc",
     "hook",
     "hooks",
     "javascript",
@@ -70,25 +95,12 @@
   "overrides": {
     "brace-expansion": "^5.0.8"
   },
-  "dependencies": {
-    "@babel/runtime": "^7.28.6",
-    "hoist-non-react-statics": "^3.3.2"
-  },
   "devDependencies": {
-    "@babel/core": "7.29.7",
-    "@babel/plugin-transform-runtime": "7.29.0",
-    "@babel/preset-env": "7.29.0",
-    "@babel/preset-react": "7.28.5",
-    "@babel/preset-typescript": "7.28.5",
+    "@arethetypeswrong/cli": "0.18.5",
     "@eslint-react/eslint-plugin": "5.18.0",
     "@eslint/js": "10.0.1",
-    "@rollup/plugin-babel": "6.1.0",
-    "@rollup/plugin-commonjs": "29.0.0",
-    "@rollup/plugin-node-resolve": "16.0.3",
-    "@rollup/plugin-replace": "6.0.3",
-    "@rollup/plugin-terser": "1.0.0",
+    "@size-limit/file": "13.0.2",
     "@testing-library/react": "16.3.2",
-    "@types/hoist-non-react-statics": "3.3.7",
     "@types/jest": "30.0.0",
     "@types/mock-raf": "1.0.6",
     "@types/node": "24.11.0",
@@ -105,12 +117,14 @@
     "mock-raf": "1.0.1",
     "npm-run-all2": "8.0.4",
     "prettier": "3.8.1",
+    "publint": "0.3.22",
     "react": "19.2.4",
     "react-dom": "19.2.4",
-    "rollup": "4.59.0",
     "shx": "0.4.0",
+    "size-limit": "13.0.2",
     "tanem-scripts": "8.0.4",
     "ts-jest": "29.4.6",
+    "tsdown": "0.22.14",
     "typescript": "5.9.3",
     "typescript-eslint": "8.56.1"
   }

package/src/NProgress.tsx

@@ -0,0 +1,13 @@
+import type { FC, ReactElement } from 'react'
+
+import type { NProgressOptions, NProgressState } from './types'
+import { useNProgress } from './useNProgress'
+
+type Props = NProgressOptions & {
+  children: (renderProps: NProgressState) => ReactElement
+}
+
+export const NProgress: FC<Props> = ({ children, ...restProps }: Props) => {
+  const renderProps = useNProgress(restProps)
+  return children(renderProps)
+}

package/src/clamp.ts

@@ -0,0 +1,5 @@
+export const clamp = (num: number, lower: number, upper: number): number => {
+  num = num <= upper ? num : upper
+  num = num >= lower ? num : lower
+  return num
+}

package/src/createTimeout.ts

@@ -0,0 +1,35 @@
+// Uses requestAnimationFrame rather than setTimeout for smoother animation
+// timing. Note that rAF is throttled or paused in background tabs, so progress
+// will stall when the tab is hidden and resume when it regains focus.
+export const createTimeout = () => {
+  let handle: number | undefined
+
+  const cancel = (): void => {
+    if (handle !== undefined) {
+      window.cancelAnimationFrame(handle)
+    }
+  }
+
+  const schedule = (callback: () => void, delay: number): void => {
+    cancel()
+
+    let deltaTime
+    let start: number | undefined
+    const frame: FrameRequestCallback = (time) => {
+      start = start || time
+      deltaTime = time - start
+      if (deltaTime > delay) {
+        callback()
+        return
+      }
+      handle = window.requestAnimationFrame(frame)
+    }
+
+    handle = window.requestAnimationFrame(frame)
+  }
+
+  return {
+    cancel,
+    schedule,
+  }
+}

package/src/increment.ts

@@ -0,0 +1,17 @@
+import { clamp } from './clamp'
+
+export const increment = (progress: number): number => {
+  let amount = 0
+
+  if (progress >= 0 && progress < 0.2) {
+    amount = 0.1
+  } else if (progress >= 0.2 && progress < 0.5) {
+    amount = 0.04
+  } else if (progress >= 0.5 && progress < 0.8) {
+    amount = 0.02
+  } else if (progress >= 0.8 && progress < 0.99) {
+    amount = 0.005
+  }
+
+  return clamp(progress + amount, 0, 0.994)
+}

package/src/index.tsx

@@ -0,0 +1,3 @@
+export * from './NProgress'
+export type { NProgressOptions, NProgressState } from './types'
+export * from './useNProgress'

package/src/types.ts

@@ -0,0 +1,12 @@
+export interface NProgressOptions {
+  animationDuration?: number
+  incrementDuration?: number
+  isAnimating?: boolean
+  minimum?: number
+}
+
+export interface NProgressState {
+  animationDuration: number
+  isFinished: boolean
+  progress: number
+}

package/src/useNProgress.tsx

@@ -0,0 +1,121 @@
+import { useEffect, useReducer } from 'react'
+
+import { clamp } from './clamp'
+import { createTimeout } from './createTimeout'
+import { increment } from './increment'
+import type { NProgressOptions, NProgressState } from './types'
+
+// A four-phase state machine. `idle` and `finished` both report
+// `isFinished: true` and differ only in the progress they hold, so the phase,
+// not `isFinished`, is what decides which transitions and timers apply.
+type Phase = 'animating' | 'completing' | 'finished' | 'idle'
+
+interface State {
+  phase: Phase
+  progress: number
+}
+
+type Action =
+  | { minimum: number; type: 'start' }
+  | { minimum: number; type: 'trickle' }
+  | { type: 'complete' }
+  | { type: 'finish' }
+
+const initialState: State = {
+  phase: 'idle',
+  progress: 0,
+}
+
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'complete':
+      // Unlike the original nprogress `done()`, completion does not include a
+      // random progress jump before animating to 1. This keeps the primitive
+      // predictable; consumers can set a higher progress value before stopping
+      // the animation if they want that effect.
+      //
+      // Ignored unless an animation is actually running, which is what makes a
+      // StrictMode double-mount a no-op rather than a spurious completion.
+      return state.phase === 'animating'
+        ? { phase: 'completing', progress: 1 }
+        : state
+
+    case 'finish':
+      return { phase: 'finished', progress: 1 }
+
+    case 'start':
+      // The original nprogress calls set(0) - which clamps to `minimum` -
+      // before the first trickle. Here, the first trickle starts from
+      // increment(0) = 0.1, so the bar appears at max(0.1, minimum) rather
+      // than exactly `minimum`. The difference is negligible at the default
+      // minimum of 0.08.
+      //
+      // Guarded the same way as `complete`, and for the same reason: a repeat
+      // dispatch against a running animation must not rewind the bar. That
+      // happens whenever `minimum` changes mid-animation, as well as on a
+      // StrictMode double-mount.
+      return state.phase === 'animating'
+        ? state
+        : {
+            phase: 'animating',
+            progress: clamp(increment(0), action.minimum, 1),
+          }
+
+    case 'trickle':
+      return {
+        ...state,
+        progress: clamp(increment(state.progress), action.minimum, 1),
+      }
+  }
+}
+
+export const useNProgress = ({
+  animationDuration = 200,
+  incrementDuration = 200,
+  isAnimating = false,
+  minimum = 0.08,
+}: NProgressOptions = {}): NProgressState => {
+  const [{ phase, progress }, dispatch] = useReducer(reducer, initialState)
+
+  useEffect(() => {
+    dispatch(isAnimating ? { minimum, type: 'start' } : { type: 'complete' })
+  }, [isAnimating, minimum])
+
+  // A timer per running phase, rather than one effect branching over both.
+  // Each then depends only on the options its own phase reads, so changing an
+  // option the running phase ignores cannot cancel its timer. Both are keyed
+  // on the phase rather than on progress, so trickling does not tear down and
+  // recreate the timer mid-animation.
+  useEffect(() => {
+    if (phase !== 'animating') {
+      return
+    }
+
+    const timeout = createTimeout()
+
+    const trickle = () => {
+      dispatch({ minimum, type: 'trickle' })
+      timeout.schedule(trickle, incrementDuration)
+    }
+    timeout.schedule(trickle, incrementDuration)
+
+    return () => timeout.cancel()
+  }, [incrementDuration, minimum, phase])
+
+  useEffect(() => {
+    if (phase !== 'completing') {
+      return
+    }
+
+    const timeout = createTimeout()
+    timeout.schedule(() => dispatch({ type: 'finish' }), animationDuration)
+
+    return () => timeout.cancel()
+  }, [animationDuration, phase])
+
+  return {
+    animationDuration,
+    isFinished: phase === 'finished' || phase === 'idle',
+    progress,
+  }
+}

package/dist/NProgress.d.ts

@@ -1,8 +0,0 @@
-import type { FC, ReactElement } from 'react';
-import type { Options } from './types';
-import { useNProgress } from './useNProgress';
-type Props = Options & {
-    children: (renderProps: ReturnType<typeof useNProgress>) => ReactElement;
-};
-export declare const NProgress: FC<Props>;
-export {};

package/dist/clamp.d.ts

@@ -1 +0,0 @@
-export declare const clamp: (num: number, lower: number, upper: number) => number;

package/dist/createQueue.d.ts

@@ -1,7 +0,0 @@
-type Next = () => void;
-type Callback = (next: Next) => void;
-export declare const createQueue: () => {
-    clear: () => void;
-    enqueue: (cb: Callback) => void;
-};
-export {};

package/dist/createTimeout.d.ts

@@ -1,4 +0,0 @@
-export declare const createTimeout: () => {
-    cancel: () => void;
-    schedule: (callback: () => void, delay: number) => void;
-};

package/dist/increment.d.ts

@@ -1 +0,0 @@
-export declare const increment: (progress: number) => number;

package/dist/index.d.ts

@@ -1,3 +0,0 @@
-export * from './NProgress';
-export * from './useNProgress';
-export * from './withNProgress';

package/dist/index.js

@@ -1,7 +0,0 @@
-'use strict'
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./react-nprogress.cjs.production.js')
-} else {
-  module.exports = require('./react-nprogress.cjs.development.js')
-}