Update types + add TS tests (#77)

* Update contributing guidelines

* Use tsc's project reference to isolate tests

* Update our timeout call

* Update docs surrounding new scripts

* Remove compiled JS, do not generate on test

* Add eslint-plugin-react

* Run tslint in CI

Author: Kylie Stewart

.eslintignore

@@ -0,0 +1 @@
+test/typescript/index.js

.eslintrc.yml

@@ -1,6 +1,12 @@
 env:
   node: true
-extends: 'eslint:recommended'
+extends: [ 'eslint:recommended', 'plugin:react/recommended' ]
+parser: '@typescript-eslint/parser'
+parserOptions:
+  sourceType: module
+settings:
+  react:
+    version: detect
 rules:
   indent: [ 2, 2, { SwitchCase: 1 } ]
   no-trailing-spaces: 2

.github/pull_request_template.md

@@ -12,6 +12,7 @@ Please include a summary of the change and which issue is fixed. Please also inc
 ## Checklist:
 
 - [ ] All tests are passing
+- [ ] Type definitions, if updated, pass both `test-ts-defs` and `test-ts-usage`
 - [ ] Benchmark performance has not significantly decreased
 - [ ] Bundle size has not been significantly impacted
 - [ ] The bundle size badge has been updated to reflect the new size

.gitignore

@@ -39,6 +39,9 @@ jspm_packages/
 # Typescript v1 declaration files
 typings/
 
+# Compiled output from Typescript usage test
+test/typescript/*.js
+
 # Optional npm cache directory
 .npm
 

CONTRIBUTING.md

@@ -84,10 +84,14 @@ $ yarn run test-browser-ie
 
 ### Types
 
-We validate our TypeScript `index.d.ts` with:
+We validate our TypeScript `index.d.ts` with two steps:
 
 ```sh
-$ yarn run test-ts
+# Runs the TypeScript compiler over our types
+$ yarn run test-ts-defs
+
+# Runs our types through a sample TypeScript file
+$ yarn run test-ts-usage
 ```
 
 ### Style
@@ -135,7 +139,13 @@ please flag to your reviewers and have a discussion about whether or not the siz
 
 _Only for project administrators_
 
-1. Run `npm version patch` (or `minor|major|VERSION`) to run tests and lint,
-   build published directories, then update `package.json` + add a git tag.
-2. Run `npm publish` and publish to NPM if all is well.
-3. Run `git push && git push --tags`
+```sh
+# (1) Run tests, lint, build published dir, update package.json
+$ npm version [patch|minor|major|<version>]
+
+# (2) If all is well, publish the new version to the npm registry
+$ npm publish
+
+# (3) Then, update github with the associated tag
+$ git push && git push --tags
+```

package.json

@@ -3,17 +3,20 @@
   "version": "3.1.1",
   "description": "Fastest deep equal comparison for React. Great for React.memo & shouldComponentUpdate. Also really fast general-purpose deep comparison.",
   "main": "index.js",
+  "typings": "index.d.ts",
   "scripts": {
     "preversion": "yarn test",
     "benchmark": "node benchmark",
     "eslint": "eslint \"*.js\" benchmark test",
+    "tslint": "eslint test/typescript/sample-usage.tsx",
     "test-browser": "karma start test/browser/karma.conf.js",
     "test-browser-ie": "karma start test/browser/karma.conf.ie.js",
     "test-node": "mocha \"test/node/*.spec.js\"",
     "test-node-cov": "nyc mocha \"test/node/*.spec.js\"",
-    "test-ts": "tsc --target ES5 --noImplicitAny index.d.ts",
-    "test": "builder concurrent --buffer eslint test-ts test-node-cov test-browser",
-    "test-ie": "builder concurrent --buffer eslint test-ts test-node-cov test-browser-ie",
+    "test-ts-usage": "tsc --esModuleInterop --jsx react --noEmit test/typescript/sample-usage.tsx",
+    "test-ts-defs": "tsc --target ES5 index.d.ts",
+    "test": "builder concurrent --buffer eslint tslint test-ts-usage test-ts-defs test-node-cov test-browser",
+    "test-ie": "builder concurrent --buffer eslint tslint test-ts-usage test-ts-defs test-node-cov test-browser-ie",
     "compress": "terser --compress --mangle=\"toplevel:true\" -- index.js",
     "size-min-gz": "yarn -s compress | gzip -9 | wc -c"
   },
@@ -40,12 +43,16 @@
     "@babel/preset-env": "^7.7.6",
     "@testing-library/dom": "^7.5.1",
     "@testing-library/preact": "^1.0.2",
+    "@types/node": "^14.0.1",
+    "@types/react": "^16.9.35",
+    "@typescript-eslint/parser": "^2.34.0",
     "babel-loader": "^8.0.6",
     "benchmark": "^2.1.4",
     "builder": "^5.0.0",
     "codecov": "^3.6.5",
     "core-js": "^3.5.0",
     "eslint": "^6.7.2",
+    "eslint-plugin-react": "^7.20.0",
     "fast-deep-equal": "3.1.1",
     "fast-deep-equal-git": "epoberezkin/fast-deep-equal#v3.1.1",
     "jsdom": "^16.2.2",

test/node/advanced.spec.js

@@ -1,5 +1,8 @@
 'use strict';
 
+/* eslint-disable react/prop-types */
+/* eslint-disable react/no-children-prop */
+
 const assert = require('assert');
 const jsdom = require('jsdom-global');
 const sinon = require('sinon');
@@ -13,7 +16,10 @@ const PreactTestRenderer = require('@testing-library/preact');
 const equal = require('../..');
 const tests = require('./tests');
 
-const TIMEOUT = '5000';
+// `jsdom-global` does a lazy require under the hood to `jsdom` which is
+// super expensive. We deliberately call + cleanup to take the require hit
+// early and seed the require cache so subsequent calls are fast.
+jsdom()();
 
 class ReactChild extends React.Component {
   shouldComponentUpdate(nextProps) {
@@ -61,9 +67,6 @@ describe('advanced', () => {
   let sandbox;
   let warnStub;
 
-  // eslint-disable-next-line no-invalid-this
-  beforeEach(function () { this.timeout(TIMEOUT); });
-
   beforeEach(() => {
     sandbox = sinon.createSandbox();
     warnStub = sandbox.stub(console, 'warn');

test/typescript/sample-usage.tsx

@@ -0,0 +1,40 @@
+// This file exists to test our types against sample user code
+// This is compiled using `tsc` in our `test-ts-usage` script
+import React from 'react';
+import equal from '../../index.js';
+
+type ITodo = {
+  text: string;
+  id: string;
+};
+
+const testArr: ITodo[] = [
+  { text: 'green', id: '23' },
+  { text: 'sunshine', id: '1' },
+  { text: 'mountain', id: '11' },
+  { text: 'air', id: '8' },
+  { text: 'plants', id: '9' },
+];
+
+type IProps = {
+  todo: ITodo;
+};
+
+class TestChild extends React.Component<IProps> {
+  shouldComponentUpdate(nextProps: IProps) {
+    return !equal(this.props, nextProps);
+  }
+
+  render() {
+    const todo = this.props.todo;
+    return <div>{todo.text}</div>;
+  }
+}
+
+class TestContainer extends React.Component {
+  render() {
+    return testArr.map((item) => <TestChild key={item.id} todo={item} />);
+  }
+}
+
+export default TestContainer;

test/typescript/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "jsx": "react",
+    "target": "ES6",
+    "allowSyntheticDefaultImports": true
+  }
+}

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": true
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "references": [{ "path": "test/typescript" }],
+  "parserOptions": {
+    "sourceType": "module"
+  }
+}