chore: upgrade to React 17 for v7.0.0

iamdarshshah · iamdarshshah · commit 5722579eb37c · 2025-12-23T02:33:40.000+05:30
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -2,8 +2,8 @@
   "files": [
     "README.md"
   ],
-  "imageSize": 100,
-  "contributorsPerLine": 5,
+  "imageSize": 80,
+  "contributorsPerLine": 6,
   "skipCi": true,
   "contributors": [
     {
@@ -25,7 +25,10 @@
       "avatar_url": "https://avatars.githubusercontent.com/u/25670841?v=4",
       "profile": "https://github.com/iamdarshshah",
       "contributions": [
-        "infra"
+        "infra",
+        "code",
+        "review",
+        "maintenance"
       ]
     }
   ],
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -21,14 +21,20 @@ module.exports = {
   ],
   settings: {
     react: {
-      version: 'detect',
+      version: '17.0',
     },
   },
   rules: {
-    '@typescript-eslint/prefer-regexp-exec': 1,
-    '@typescript-eslint/ban-ts-comment': 0,
-    '@typescript-eslint/unbound-method': 1,
-    'react/prop-types': 0, // Using TypeScript for prop validation
+    '@typescript-eslint/prefer-regexp-exec': 'warn',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/unbound-method': 'warn',
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/no-unused-expressions': 'warn',
+    '@typescript-eslint/no-unsafe-return': 'warn',
+    '@typescript-eslint/no-unsafe-assignment': 'warn',
+    '@typescript-eslint/no-unsafe-call': 'warn',
+    '@typescript-eslint/no-unsafe-argument': 'warn',
+    '@typescript-eslint/no-empty-object-type': 'warn',
+    'react/no-deprecated': 'warn',
   },
-  ignorePatterns: ['**/*.test.ts', '**/*.test.tsx'],
 };
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -22,7 +22,7 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install dependencies
-        run: yarn install
+        run: yarn install --frozen-lockfile
 
       - name: Build
         run: yarn build
diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml
@@ -11,7 +11,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [18.x, 20.x, 22.x]
+        node-version: [16.x, 18.x, 20.x]
 
     steps:
       - uses: actions/checkout@v4
@@ -23,7 +23,7 @@ jobs:
           cache: 'yarn'
 
       - name: Install dependencies
-        run: yarn install
+        run: yarn install --frozen-lockfile
 
       - name: Lint
         run: yarn lint
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
diff --git a/jest.config.js b/jest.config.js
@@ -79,6 +79,18 @@ module.exports = {
   // A preset that is used as a base for Jest's configuration
   preset: 'ts-jest',
 
+  // ts-jest configuration for React 17 JSX transform
+  transform: {
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        tsconfig: {
+          jsx: 'react-jsx',
+        },
+      },
+    ],
+  },
+
   // Run tests from one or more projects
   // projects: null,
 
diff --git a/package.json b/package.json
@@ -39,20 +39,20 @@
   },
   "homepage": "https://github.com/ankeetmaini/react-infinite-scroll-component#readme",
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.2",
+    "@babel/core": "^7.20.0",
     "@storybook/addon-actions": "^5.2.1",
     "@storybook/addon-info": "^5.2.1",
     "@storybook/addon-links": "^5.2.1",
     "@storybook/addons": "^5.2.1",
-    "@storybook/react": "^5.2.1",
-    "@testing-library/react": "^9.2.0",
-    "@types/jest": "^24.0.18",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@storybook/react": "^7.0.0",
+    "@testing-library/react": "^12.1.5",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "@types/storybook__react": "^4.0.2",
     "@types/throttle-debounce": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^8.50.1",
@@ -63,25 +63,23 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",
     "husky": ">=1",
-    "jest": "^24.9.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": ">=8",
-    "prettier": "1.18.2",
-    "react": "^18.2.0",
+    "prettier": "^2.8.0",
+    "react": "^17.0.2",
     "react-docgen-typescript-loader": "^3.2.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^17.0.2",
     "rimraf": "^3.0.0",
     "rollup": "^1.26.3",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-typescript2": "^0.25.2",
-    "ts-jest": "^24.1.0",
-    "typescript": "^5.0.0"
+    "ts-jest": "^29.4.6",
+    "typescript": "^4.9.0"
   },
   "dependencies": {
     "throttle-debounce": "^2.1.0"
   },
-  "engines": {
-    "node": ">=18.18.0"
-  },
   "husky": {
     "hooks": {
       "pre-commit": "yarn run ts-check && lint-staged"
diff --git a/src/__tests__/bottom.test.tsx b/src/__tests__/bottom.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import InfiniteScroll from '../index';
 
diff --git a/src/__tests__/hasChildren.test.tsx b/src/__tests__/hasChildren.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import InfiniteScroll from '../index';
 
diff --git a/src/__tests__/index.test.tsx b/src/__tests__/index.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import InfiniteScroll from '../index';
 
@@ -57,6 +56,7 @@ describe('React Infinite Scroll Component', () => {
 
   it('calls scroll handler if provided, when user scrolls', () => {
     jest.useFakeTimers();
+    const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
     const onScrollMock = jest.fn();
 
     const { container } = render(
@@ -79,21 +79,23 @@ describe('React Infinite Scroll Component', () => {
 
     node.dispatchEvent(scrollEvent);
     jest.runOnlyPendingTimers();
-    expect(setTimeout).toHaveBeenCalledTimes(1);
+    expect(setTimeoutSpy).toHaveBeenCalled();
     expect(onScrollMock).toHaveBeenCalled();
+    setTimeoutSpy.mockRestore();
   });
 
   describe('When missing the dataLength prop', () => {
     it('throws an error', () => {
-      console.error = jest.fn();
+      const consoleSpy = jest
+        .spyOn(console, 'error')
+        .mockImplementation(() => {});
       const props = { loader: 'Loading...', hasMore: false, next: () => {} };
 
       // @ts-ignore
-      expect(() => render(<InfiniteScroll {...props} />)).toThrow(Error);
-      // @ts-ignore
-      expect(console.error.mock.calls[0][0]).toContain(
-        '"dataLength" is missing'
+      expect(() => render(<InfiniteScroll {...props} />)).toThrow(
+        'mandatory prop "dataLength" is missing'
       );
+      consoleSpy.mockRestore();
     });
   });
 
diff --git a/src/__tests__/inverse.test.tsx b/src/__tests__/inverse.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import InfiniteScroll from '../index';
 
diff --git a/src/__tests__/pullDown.test.tsx b/src/__tests__/pullDown.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import InfiniteScroll from '../index';
 
diff --git a/src/__tests__/scrollableTarget.test.tsx b/src/__tests__/scrollableTarget.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import InfiniteScroll from '../index';
 
diff --git a/src/__tests__/threshold.test.ts b/src/__tests__/threshold.test.ts
@@ -4,7 +4,7 @@ describe('parseThreshold', () => {
   let warnSpy: jest.SpyInstance;
 
   beforeEach(() => {
-    warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => { });
   });
 
   afterEach(() => {
diff --git a/src/stories/stories.tsx b/src/stories/stories.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 
 import WindowInf from './WindowInfiniteScrollComponent';
diff --git a/src/utils/threshold.ts b/src/utils/threshold.ts
@@ -17,14 +17,14 @@ export function parseThreshold(scrollThreshold: string | number) {
   }
 
   if (typeof scrollThreshold === 'string') {
-    if (scrollThreshold.match(/^(\d*(\.\d+)?)px$/)) {
+    if (/^(\d*(\.\d+)?)px$/.exec(scrollThreshold)) {
       return {
         unit: ThresholdUnits.Pixel,
         value: parseFloat(scrollThreshold),
       };
     }
 
-    if (scrollThreshold.match(/^(\d*(\.\d+)?)%$/)) {
+    if (/^(\d*(\.\d+)?)%$/.exec(scrollThreshold)) {
       return {
         unit: ThresholdUnits.Percent,
         value: parseFloat(scrollThreshold),
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,15 +1,15 @@
 {
   "compilerOptions": {
     /* Basic Options */
-    "target": "ES2020" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
+    "target": "ES2019" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
     "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
     "lib": [
-      "ES2020",
+      "ES2019",
       "DOM"
     ], /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
-    "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', 'react', or 'react-jsx'. */,
+    "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
     "declaration": true /* Generates corresponding '.d.ts' file. */,
     "declarationDir": "./dist",
     "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
@@ -38,7 +38,7 @@
     "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
     "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */,
     /* Module Resolution Options */
-    "moduleResolution": "bundler" /* Specify module resolution strategy: 'bundler', 'node16', 'nodenext', 'node' (deprecated), or 'classic'. */,
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
     // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
@@ -66,8 +66,6 @@
   ],
   "exclude": [
     "node_modules",
-    "dist",
-    "**/*.test.ts",
-    "**/*.test.tsx"
+    "dist"
   ]
 }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import React from 'react';`
`2`	`1`	`import { render, cleanup } from '@testing-library/react';`
`3`	`2`	`import InfiniteScroll from '../index';`
`4`	`3`