chore: upgrade to React 17 with v7.0.0-beta.0 release

.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"
       ]
     }
   ],

.eslintrc.js

@@ -14,15 +14,27 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
     'plugin:@typescript-eslint/recommended',
     'plugin:@typescript-eslint/recommended-requiring-type-checking',
     'prettier',
-    'prettier/@typescript-eslint',
-    'prettier/react',
   ],
+  settings: {
+    react: {
+      version: '17.0',
+    },
+  },
   rules: {
-    '@typescript-eslint/prefer-regexp-exec': 1,
-    '@typescript-eslint/ban-ts-ignore': 0,
-    '@typescript-eslint/unbound-method': 1,
+    '@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',
   },
 };

.github/workflows/publish.yml

@@ -30,4 +30,9 @@ jobs:
       - name: Publish to npm
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
-        run: npm publish --access public || true
+        run: |
+          if [[ "${{ github.event.release.prerelease }}" == "true" ]]; then
+            npm publish --access public --tag beta
+          else
+            npm publish --access public
+          fi

.github/workflows/push.yml

@@ -11,7 +11,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [16.x, 18.x, 20.x]
+        node-version: [18.x, 20.x, 22.x]
 
     steps:
       - uses: actions/checkout@v4

.husky/pre-commit

@@ -0,0 +1 @@
+yarn run ts-check && npx lint-staged

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: [
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+    '../src/stories/stories.tsx',
+  ],
+  addons: ['@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  typescript: {
+    check: false,
+    reactDocgen: 'react-docgen-typescript',
+  },
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+};

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,
 

package.json

@@ -1,7 +1,10 @@
 {
   "name": "react-infinite-scroll-component",
-  "version": "6.1.1",
+  "version": "7.0.0-beta.0",
   "description": "An Infinite Scroll component in react.",
+  "engines": {
+    "node": ">=18.18.0"
+  },
   "source": "src/index.tsx",
   "main": "dist/index.js",
   "unpkg": "dist/index.umd.js",
@@ -10,15 +13,16 @@
   "scripts": {
     "build": "rimraf dist && rollup -c",
     "prepublish": "yarn build",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "codecov": "codecov",
     "lint": "eslint 'src/**/*.{ts,tsx,js,jsx}'",
     "lint:fix": "yarn lint --fix",
     "prettier:check": "prettier --check 'src/**/*'",
     "prettify": "prettier --write 'src/**/*'",
     "ts-check": "tsc -p tsconfig.json --noEmit",
-    "test": "jest"
+    "test": "jest",
+    "prepare": "husky"
   },
   "repository": {
     "type": "git",
@@ -39,64 +43,53 @@
   },
   "homepage": "https://github.com/ankeetmaini/react-infinite-scroll-component#readme",
   "peerDependencies": {
-    "react": ">=16.0.0"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.2",
-    "@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": "^16.9.2",
-    "@types/react-dom": "^16.9.1",
-    "@types/storybook__react": "^4.0.2",
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@storybook/addon-essentials": "^7.6.0",
+    "@storybook/react": "^7.6.0",
+    "@storybook/react-webpack5": "^7.6.0",
+    "@testing-library/react": "^12.1.5",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "@types/throttle-debounce": "^2.1.0",
-    "@typescript-eslint/eslint-plugin": "^2.3.2",
-    "@typescript-eslint/parser": "^2.3.2",
-    "awesome-typescript-loader": "^5.2.1",
+    "@typescript-eslint/eslint-plugin": "^8.50.1",
+    "@typescript-eslint/parser": "^8.50.1",
     "babel-loader": "^8.0.6",
-    "eslint": "^6.5.1",
-    "eslint-config-prettier": "^6.3.0",
-    "eslint-plugin-react": "^7.15.0",
-    "husky": ">=1",
-    "jest": "^24.9.0",
-    "lint-staged": ">=8",
-    "prettier": "1.18.2",
-    "react": "^16.10.1",
-    "react-docgen-typescript-loader": "^3.2.1",
-    "react-dom": "^16.10.1",
+    "eslint": "^8",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "husky": "^9.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^15.0.0",
+    "prettier": "^2.8.0",
+    "react": "^17.0.2",
+    "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": "^3.7.2"
+    "storybook": "^7.6.0",
+    "ts-jest": "^29.4.6",
+    "typescript": "^4.9.0"
   },
   "dependencies": {
     "throttle-debounce": "^2.1.0"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "yarn run ts-check && lint-staged"
-    }
-  },
   "lint-staged": {
     "*.{js,css,json,md}": [
-      "prettier --write",
-      "git add"
-    ],
-    "*.js": [
-      "prettier --write",
-      "eslint --fix",
-      "git add"
+      "prettier --write"
     ],
     "*.{ts,tsx}": [
       "prettier --write",
-      "eslint --fix",
-      "git add"
+      "eslint --fix"
     ]
   }
 }

rollup.config.js

@@ -21,6 +21,6 @@ export default {
       name: 'InfiniteScroll',
     },
   ],
-  external: [...Object.keys(pkg.peerDependencies || {})],
+  external: [...Object.keys(pkg.peerDependencies || {}), 'react/jsx-runtime'],
   plugins: [resolve(), typescript({ useTsconfigDeclarationDir: true })],
 };

src/__tests__/bottom.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import InfiniteScroll from '../index';
 

src/__tests__/hasChildren.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import InfiniteScroll from '../index';
 

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();
     });
   });
 

src/__tests__/inverse.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import InfiniteScroll from '../index';