Update types + add TS tests

.eslintignore

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

.eslintrc.yml

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

CONTRIBUTING.md

@@ -84,10 +84,16 @@ $ 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
+# Runs the TypeScript compiler over our types
+$ yarn run test-tsc
+
+# Runs our types through a sample TypeScript file
 $ yarn run test-ts
+# Compiled output is put into a co-located index.js
+# Treat the output like a snapshot, commit any changes
 ```
 
 ### Style
@@ -135,7 +141,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

@@ -7,13 +7,15 @@
     "preversion": "yarn test",
     "benchmark": "node benchmark",
     "eslint": "eslint \"*.js\" benchmark test",
+    "tslint": "eslint test/typescript/index.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-node-cov": "nyc yarn test-node",
+    "test-ts-usage": "tsc --esModuleInterop --jsx react test/typescript/index.tsx",
+    "test-ts-defs": "tsc --target ES5 index.d.ts",
+    "test": "builder concurrent --buffer eslint test-ts-usage test-ts-defs test-node-cov test-browser",
+    "test-ie": "builder concurrent --buffer eslint 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,6 +42,10 @@
     "@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",
+    "@types/react-redux": "^7.1.8",
+    "@typescript-eslint/parser": "^2.34.0",
     "babel-loader": "^8.0.6",
     "benchmark": "^2.1.4",
     "builder": "^5.0.0",
@@ -64,7 +70,9 @@
     "nyc": "^14.1.1",
     "preact": "^10.4.1",
     "react": "^16.3.1",
+    "react-redux": "^7.2.0",
     "react-test-renderer": "^16.13.1",
+    "redux": "^4.0.5",
     "shallow-equal-fuzzy": "0.0.2",
     "sinon": "^7.5.0",
     "terser": "^4.4.3",

test/node/advanced.spec.js

@@ -13,7 +13,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 +64,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/index.js

@@ -0,0 +1,52 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var equal = require("../..");
+var testArr = [
+    { text: "green", id: "23" },
+    { text: "sunshine", id: "1" },
+    { text: "mountain", id: "11" },
+    { text: "air", id: "8" },
+    { text: "plants", id: "9" },
+];
+var TestChild = /** @class */ (function (_super) {
+    __extends(TestChild, _super);
+    function TestChild() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TestChild.prototype.shouldComponentUpdate = function (nextProps) {
+        return !equal(this.props, nextProps);
+    };
+    TestChild.prototype.render = function () {
+        var todo = this.props.todo;
+        return react_1["default"].createElement("div", null, todo.text);
+    };
+    return TestChild;
+}(react_1["default"].Component));
+;
+var TestContainer = /** @class */ (function (_super) {
+    __extends(TestContainer, _super);
+    function TestContainer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TestContainer.prototype.render = function () {
+        return testArr.map(function (item) { return react_1["default"].createElement(TestChild, { key: item.id, todo: item }); });
+    };
+    return TestContainer;
+}(react_1["default"].Component));

test/typescript/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+// import { useSelector } from 'react-redux';
+
+const equal = require('../..');
+
+const testArr = [
+  { text: 'green', id: '23' },
+  { text: 'sunshine', id: '1' },
+  { text: 'mountain', id: '11' },
+  { text: 'air', id: '8' },
+  { text: 'plants', id: '9' },
+] as ITodo[];
+
+type ITodo = {
+  text: string;
+  id: string;
+};
+
+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} />);
+  }
+}

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"
+  }
+}