Upgrade dependencies (React, Typescript, Eslint, get rid of Tslint), mark componentWillReceiveProps as Unsafe

.eslintignore

@@ -0,0 +1 @@
+.eslintrc.js

.eslintrc.js

@@ -0,0 +1,44 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+  },
+  extends: [
+    "plugin:@shopify/typescript",
+    "plugin:@shopify/jest",
+    "plugin:@shopify/react",
+    "plugin:@shopify/prettier",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "tsconfig.json",
+    sourceType: "module",
+    ecmaVersion: 2020
+  },
+  plugins: ["@typescript-eslint"],
+  rules: {
+    "babel/object-curly-spacing": "off",
+    "no-undefined": "off",
+    "no-param-reassign": "off",
+    "react/no-unused-prop-types": "off",
+    "react/jsx-filename-extension": [1, { extensions: [".tsx"] }],
+    "typescript/member-ordering": "off",
+    "jest/consistent-test-it": [
+      "error",
+      {
+        fn: "it",
+      },
+    ],
+    "prettier/prettier": ["error", { "singleQuote": true }],
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["error"],
+    "@shopify/react-prefer-private-members": "off",
+    "@shopify/typescript/prefer-pascal-case-enums": "off",
+    "@typescript-eslint/member-ordering": "off",
+    "@typescript-eslint/naming-convention": "off"
+  },
+  settings: {
+    "import/ignore": ["node_modules", "\\.s?css"],
+  },
+};

.gitignore

@@ -5,3 +5,4 @@
 /types
 npm-debug.log*
 .DS_Store
+.idea

config/build.js

@@ -46,9 +46,16 @@ function runRollup({entry, output, format, minify = false, outputDir = build}) {
 }
 
 function compileTypescript(args = '') {
-  execSync(`./node_modules/.bin/tsc --outDir ${intermediateBuild} --rootDir ./src --baseurl ./src ${args}`, {
-    stdio: 'inherit',
-  });
+    const tscPath = resolvePath(root, './node_modules/.bin/tsc');
+    const tscConfigPath = resolvePath(root, './tsconfig.json');
+    const rootDir = resolvePath(root, './src');
+
+    execSync(
+        `${tscPath} --outDir ${intermediateBuild} --project ${tscConfigPath} --rootDir ${rootDir} --baseurl ${rootDir} ${args}`,
+        {
+            stdio: 'inherit',
+        },
+    );
 }
 
 function cleanIntermediateBuild(callback = () => {}) {

config/jest/config.json

@@ -3,16 +3,17 @@
   "collectCoverage": true,
   "rootDir": "../..",
   "roots": [
-    "<rootDir>/src",
     "<rootDir>/tests"
   ],
   "moduleFileExtensions": [
     "ts",
     "tsx",
     "js"
   ],
-  "testRegex": "[\\w+]\\.test\\.(tsx?|js)$",
   "transform": {
     "\\.tsx?$": "<rootDir>/config/jest/transformers/typescript.js"
-  }
+  },
+  "testMatch": [
+    "**/?(*.)+(spec|test).+(ts|tsx|js)"
+  ]
 }

package.json

@@ -23,40 +23,44 @@
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
-    "react": "15.x || 16.x"
+    "react": "15.x || 16.x || 17.x"
   },
   "devDependencies": {
+    "@shopify/eslint-plugin": "^39.0.4",
     "@types/jest": "^20.0.8",
-    "@types/prop-types": "^15.5.1",
-    "@types/react": "^15.0.38",
-    "@types/react-dom": "^15.5.4",
+    "@types/prop-types": "^15.7.3",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.13.0",
+    "@typescript-eslint/parser": "^4.13.0",
     "awesome-typescript-loader": "^3.2.1",
     "babel-cli": "^6.26.0",
-    "babel-eslint": "7.0.0",
+    "babel-eslint": "^10.1.0",
     "babel-jest": "^19.0.0",
-    "babel-preset-es2015": "^6.22.0",
-    "babel-preset-react": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
     "babel-preset-typescript": "^7.0.0-alpha.19",
     "codecov": "^1.0.1",
-    "eslint": "^4.10.0",
-    "eslint-plugin-shopify": "^22.1.0",
+    "eslint": "^7.18.0",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-prettier": "^3.3.1",
     "fs-extra": "^4.0.1",
-    "jest": "^19.0.2",
+    "jest": "^26.6.3",
     "nwb": "0.15.x",
-    "react": "^15.4.2",
-    "react-addons-test-utils": "^15.4.2",
-    "react-dom": "^15.4.2",
-    "react-test-renderer": "^15.4.2",
+    "prettier": "^2.2.1",
+    "react": "^17.0.1",
+    "react-addons-test-utils": "^15.6.2",
+    "react-dom": "^17.0.1",
+    "react-test-renderer": "^17.0.1",
     "rimraf": "^2.6.1",
-    "rollup": "^0.49.2",
+    "rollup": "0.50.1",
     "rollup-plugin-babel": "^3.0.2",
     "rollup-plugin-commonjs": "^8.2.0",
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-typescript2": "^0.15.0",
     "rollup-plugin-uglify": "^2.0.1",
-    "tslint": "^5.10.0",
-    "tslint-config-shopify": "^3.0.2",
-    "typescript": "2.8.3"
+    "tslib": "^2.1.0",
+    "typescript": "^4.1.3"
   },
   "author": {
     "name": "Clauderic Demers",

src/SizeAndPositionManager.ts

@@ -1,5 +1,5 @@
 /* Forked from react-virtualized 💖 */
-import {ALIGNMENT} from './constants';
+import { ALIGNMENT } from './constants';
 
 export type ItemSizeGetter = (index: number) => number;
 export type ItemSize = number | number[] | ItemSizeGetter;
@@ -26,7 +26,7 @@ export default class SizeAndPositionManager {
   private lastMeasuredIndex: number;
   private itemSizeAndPositionData: SizeAndPositionData;
 
-  constructor({itemCount, itemSizeGetter, estimatedItemSize}: Options) {
+  constructor({ itemCount, itemSizeGetter, estimatedItemSize }: Options) {
     this.itemSizeGetter = itemSizeGetter;
     this.itemCount = itemCount;
     this.estimatedItemSize = estimatedItemSize;
@@ -67,7 +67,7 @@ export default class SizeAndPositionManager {
   getSizeAndPositionForIndex(index: number) {
     if (index < 0 || index >= this.itemCount) {
       throw Error(
-        `Requested index ${index} is outside of range 0..${this.itemCount}`,
+        `Requested index ${index} is outside of range 0..${this.itemCount}`
       );
     }
 
@@ -100,7 +100,7 @@ export default class SizeAndPositionManager {
   getSizeAndPositionOfLastMeasuredItem() {
     return this.lastMeasuredIndex >= 0
       ? this.itemSizeAndPositionData[this.lastMeasuredIndex]
-      : {offset: 0, size: 0};
+      : { offset: 0, size: 0 };
   }
 
   /**
@@ -173,7 +173,7 @@ export default class SizeAndPositionManager {
     containerSize: number;
     offset: number;
     overscanCount: number;
-  }): {start?: number; stop?: number} {
+  }): { start?: number; stop?: number } {
     const totalSize = this.getTotalSize();
 
     if (totalSize === 0) {
@@ -285,7 +285,13 @@ export default class SizeAndPositionManager {
     return 0;
   }
 
-  private exponentialSearch({index, offset}: {index: number; offset: number}) {
+  private exponentialSearch({
+    index,
+    offset,
+  }: {
+    index: number;
+    offset: number;
+  }) {
     let interval = 1;
 
     while (

src/constants.ts

@@ -1,16 +1,16 @@
-export enum ALIGNMENT {
+export const enum ALIGNMENT {
   AUTO = 'auto',
   START = 'start',
   CENTER = 'center',
   END = 'end',
 }
 
-export enum DIRECTION {
+export const enum DIRECTION {
   HORIZONTAL = 'horizontal',
   VERTICAL = 'vertical',
 }
 
-export enum SCROLL_CHANGE_REASON {
+export const enum SCROLL_CHANGE_REASON {
   OBSERVED = 'observed',
   REQUESTED = 'requested',
 }