Fix reset error (#737)

* Fix reset error

* Update rollup-babel

* Remove node 12 from workflow

README.md

@@ -386,15 +386,15 @@ export default function App() {
 > Note: For latest **react-countup** releases there are new options [`enableScrollSpy`](#enablescrollspy-boolean) and [`scrollSpyDelay`](#scrollspydelay-number) which enable scroll spy, so that as user scrolls to the target element, it begins counting animation automatically once it has scrolled into view.
 
 ```js
-import "./styles.css";
-import CountUp, { useCountUp } from "react-countup";
+import './styles.css';
+import CountUp, { useCountUp } from 'react-countup';
 
 export default function App() {
   useCountUp({
-    ref: "counter",
+    ref: 'counter',
     end: 1234567,
     enableScrollSpy: true,
-    scrollSpyDelay: 1000
+    scrollSpyDelay: 1000,
   });
 
   return (

demo/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "prism-react-renderer": "^1.3.3",
     "react": "^18.2.0",
-    "react-countup": "^6.2.0",
+    "react-countup": "^6.3.2",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
     "react-github-corner": "^2.5.0",

demo/yarn.lock

@@ -4553,10 +4553,10 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-countup.js@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/countup.js/-/countup.js-2.2.0.tgz#e20e247abf801190056c5eeed51ceb13cef6ea0c"
-  integrity sha512-m0TvFNXm9/eFqJm+QiKVI8e0wRUHzlQSewz9dqVjlhl2DFoZtceLbomwzxHz0hJ1+r4zBC7wSpR/TpthG49h6g==
+countup.js@^2.2.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/countup.js/-/countup.js-2.3.2.tgz#9a91d95780be1c908d1e6feb548625f353f57988"
+  integrity sha512-dQ7F/CmKGjaO6cDfhtEXwsKVlXIpJ89dFs8PvkaZH9jBVJ2Z8GU4iwG/qP7MgY8qwr+1skbwR6qecWWQLUzB8Q==
 
 cross-spawn@^6.0.0:
   version "6.0.5"
@@ -9065,12 +9065,12 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
-react-countup@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/react-countup/-/react-countup-6.2.0.tgz#091ef28874c5bd11fb713b98c56dd2093a80a932"
-  integrity sha512-3WOKAQpWgjyFoH231SHEpIpHhDGb5g5EkTppM6T7vLa3X+8WMdw6750vVcY0wxysKiY00gTFhDwSB5qLU+xPZA==
+react-countup@^6.3.2:
+  version "6.3.2"
+  resolved "https://registry.yarnpkg.com/react-countup/-/react-countup-6.3.2.tgz#37359bb4262c2af52ae1e0ad36d2d0feff01d278"
+  integrity sha512-ID3344D1Yo0X5CWQiJYXBpiPCYLwMOw1VvNP9geJE+PqpdDmx6iuoMhxXAqjpdaRWiD6zUnLRK6rrnGgDg09pg==
   dependencies:
-    countup.js "^2.1.0"
+    countup.js "^2.2.0"
 
 react-dev-utils@^12.0.1:
   version "12.0.1"

package.json

@@ -26,40 +26,40 @@
   "typings": "build/index.d.ts",
   "scripts": {
     "format": "prettier --write \"*.md\" \"src/**/*.ts\"  \"src/**/*.tsx\"",
-    "build": "rollup -c && tsc --emitDeclarationOnly --noEmit false --project src/tsconfig.json --outDir build",
+    "build": "rollup --bundleConfigAsCjs -c && tsc --emitDeclarationOnly --noEmit false --project src/tsconfig.json --outDir build",
     "prepublishOnly": "yarn build",
     "test": "jest"
   },
   "peerDependencies": {
     "react": ">= 16.3.0"
   },
   "dependencies": {
-    "countup.js": "^2.2.0"
+    "@rollup/plugin-babel": "^6.0.2",
+    "countup.js": "^2.3.2"
   },
   "devDependencies": {
-    "@babel/core": "7.19.3",
-    "@babel/preset-env": "7.18.9",
+    "@babel/core": "7.20.2",
+    "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "^7.14.5",
-    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-node-resolve": "^15.0.1",
     "@testing-library/react": "13.4.0",
-    "@typescript-eslint/eslint-plugin": "^4.29.1",
-    "@typescript-eslint/parser": "^4.29.1",
-    "babel-jest": "29.2.0",
-    "eslint": "^7.32.0",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/parser": "^5.44.0",
+    "babel-jest": "29.3.1",
+    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "28.1.2",
     "jest-environment-jsdom": "^28.1.1",
-    "prettier": "2.7.1",
+    "prettier": "2.8.0",
     "pretty-quick": "3.1.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-test-renderer": "18.2.0",
-    "rollup": "2.79.1",
-    "rollup-plugin-babel": "4.4.0",
-    "typescript": "^4.3.5"
+    "rollup": "3.4.0",
+    "typescript": "^4.9.3"
   }
 }

rollup.config.js

@@ -1,4 +1,4 @@
-import babel from 'rollup-plugin-babel';
+import { babel } from '@rollup/plugin-babel';
 import resolve from '@rollup/plugin-node-resolve';
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];

src/__tests__/CountUp.test.js

@@ -303,7 +303,7 @@ describe('CountUp component', () => {
     expect(spy.pauseResume).toHaveBeenCalled();
   });
 
-  it.skip('throws warning if ref not attached to a component', () => {
+  it('throws warning if ref not attached to a component', () => {
     console.error = jest.fn();
     jest.spyOn(console, 'error');
 

src/__tests__/useCountUp.test.js

@@ -40,7 +40,7 @@ describe('useCountUp', () => {
     await checkContent(container, '10');
   });
 
-  it.skip('does not start countup when startOnMount is false', async () => {
+  it('does not start countup when startOnMount is false', async () => {
     const Hook = () => {
       useCountUp({ end: 10, startOnMount: false, ref: 'counter' });
       return <span id="counter" />;

src/common.ts

@@ -20,7 +20,7 @@ export const createCountUpInstance = (
     useEasing,
     enableScrollSpy,
     scrollSpyDelay,
-    scrollSpyOnce
+    scrollSpyOnce,
   } = props;
 
   return new CountUp(el, end, {
@@ -38,6 +38,6 @@ export const createCountUpInstance = (
     useGrouping: !!separator,
     enableScrollSpy,
     scrollSpyDelay,
-    scrollSpyOnce
+    scrollSpyOnce,
   });
 };

src/useCountUp.ts

@@ -78,11 +78,14 @@ const useCountUp = (props: useCountUpProps): CountUpApi => {
   });
 
   const reset = useEventCallback(() => {
-    timerRef.current && clearTimeout(timerRef.current);
-
-    getCountUp().reset();
-
-    onReset?.({ pauseResume, start: restart, update });
+    // Quick fix for https://github.com/glennreyes/react-countup/issues/736 - should be investigated
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    if (getCountUp().el) {
+      timerRef.current && clearTimeout(timerRef.current);
+      getCountUp().reset();
+      onReset?.({ pauseResume, start: restart, update });
+    }
   });
 
   const update: UpdateFn = useEventCallback((newEnd) => {