[core] Move utils package to TypeScript (#22367)

Author: oliviertassinari

.eslintrc.js

@@ -131,6 +131,8 @@ module.exports = {
       files: [
         // matching the pattern of the test runner
         '*.test.js',
+        '*.test.ts',
+        '*.test.tsx',
       ],
       env: {
         mocha: true,

packages/material-ui-system/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "../../tsconfig",
+  "compilerOptions": {
+    "types": ["node"]
+  },
   "include": ["src/**/*"]
 }

packages/material-ui-utils/package.json

@@ -4,7 +4,7 @@
   "private": false,
   "author": "Material-UI Team",
   "description": "Material-UI Utils - Utility functions for Material-UI.",
-  "main": "./src/index.js",
+  "main": "./src/index.ts",
   "keywords": [
     "react",
     "react-component",
@@ -23,21 +23,25 @@
   },
   "homepage": "https://github.com/mui-org/material-ui/tree/next/packages/material-ui-utils",
   "scripts": {
-    "build": "yarn build:cjs && yarn build:esm && yarn build:es && yarn build:copy-files",
+    "build": "yarn build:cjs && yarn build:esm && yarn build:es && yarn build:copy-files && yarn build:types",
     "build:cjs": "node ../../scripts/build cjs",
     "build:esm": "node ../../scripts/build esm",
     "build:es": "node ../../scripts/build es",
     "build:copy-files": "node ../../scripts/copy-files.js",
+    "build:types": "tsc -p tsconfig.build.json",
     "prebuild": "rimraf build",
     "release": "yarn build && npm publish build --tag next",
-    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-utils/**/*.test.{js,ts,tsx}' --exclude '**/node_modules/**'"
+    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-utils/**/*.test.{js,ts,tsx}' --exclude '**/node_modules/**'",
+    "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json"
   },
   "peerDependencies": {
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.4.4",
+    "@types/prop-types": "^15.7.3",
+    "@types/react-is": "^16.7.1",
     "prop-types": "^15.7.2",
     "react-is": "^16.8.0"
   },

packages/material-ui-utils/src/HTMLElementType.js packages/material-ui-utils/src/HTMLElementType.ts

@@ -1,4 +1,10 @@
-export default function HTMLElementType(props, propName, componentName, location, propFullName) {
+export default function HTMLElementType(
+  props: { [key: string]: unknown },
+  propName: string,
+  componentName: string,
+  location: string,
+  propFullName: string,
+): Error | null {
   if (process.env.NODE_ENV === 'production') {
     return null;
   }
@@ -10,7 +16,7 @@ export default function HTMLElementType(props, propName, componentName, location
     return null;
   }
 
-  if (propValue && propValue.nodeType !== 1) {
+  if (propValue && (propValue as any).nodeType !== 1) {
     return new Error(
       `Invalid ${location} \`${safePropName}\` supplied to \`${componentName}\`. ` +
         `Expected an HTMLElement.`,

packages/material-ui-utils/src/chainPropTypes.js

@@ -0,0 +1,14 @@
+import * as PropTypes from 'prop-types';
+
+export default function chainPropTypes(
+  propType1: PropTypes.Validator<unknown>,
+  propType2: PropTypes.Validator<unknown>,
+): PropTypes.Validator<unknown> {
+  if (process.env.NODE_ENV === 'production') {
+    return () => null;
+  }
+
+  return function validate(...args) {
+    return propType1(...args) || propType2(...args);
+  };
+}

packages/material-ui-utils/src/chainPropTypes.test.js packages/material-ui-utils/src/chainPropTypes.test.ts

@@ -7,7 +7,8 @@ describe('deepmerge', () => {
     deepmerge({}, JSON.parse('{ "myProperty": "a", "__proto__" : { "isAdmin" : true } }'), {
       clone: false,
     });
-    expect({}.isAdmin).to.equal(undefined);
+
+    expect({}).not.to.have.property('isAdmin');
   });
 
   // https://github.com/mui-org/material-ui/issues/20095

packages/material-ui-utils/src/chainPropTypes.ts

@@ -0,0 +1,33 @@
+export function isPlainObject(item: unknown): item is Record<keyof any, unknown> {
+  return item && typeof item === 'object' && item.constructor === Object;
+}
+
+export interface DeepmergeOptions {
+  clone?: boolean;
+}
+
+export default function deepmerge<T>(
+  target: T,
+  source: unknown,
+  options: DeepmergeOptions = { clone: true },
+): T {
+  const output = options.clone ? { ...target } : target;
+
+  if (isPlainObject(target) && isPlainObject(source)) {
+    Object.keys(source).forEach((key) => {
+      // Avoid prototype pollution
+      if (key === '__proto__') {
+        return;
+      }
+
+      if (isPlainObject(source[key]) && key in target) {
+        // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
+        (output as Record<keyof any, unknown>)[key] = deepmerge(target[key], source[key], options);
+      } else {
+        (output as Record<keyof any, unknown>)[key] = source[key];
+      }
+    });
+  }
+
+  return output;
+}

packages/material-ui-utils/src/deepmerge.js

@@ -6,7 +6,7 @@ import ReactDOM from 'react-dom';
 import elementAcceptingRef from './elementAcceptingRef';
 
 describe('elementAcceptingRef', () => {
-  function checkPropType(element, required = false) {
+  function checkPropType(element: any, required = false) {
     PropTypes.checkPropTypes(
       { children: required ? elementAcceptingRef.isRequired : elementAcceptingRef },
       { children: element },
@@ -20,11 +20,9 @@ describe('elementAcceptingRef', () => {
   });
 
   describe('acceptance when not required', () => {
-    let rootNode;
-
-    function assertPass(element, options = {}) {
-      const { shouldMount = true } = options;
+    let rootNode: HTMLElement;
 
+    function assertPass(element: any, { shouldMount = true } = {}) {
       function testAct() {
         checkPropType(element);
         if (shouldMount) {
@@ -84,14 +82,14 @@ describe('elementAcceptingRef', () => {
     });
 
     it('accepts memo', () => {
-      const Component = React.memo('div');
+      const Component = React.memo(React.forwardRef(() => null));
 
       assertPass(<Component />);
     });
 
     it('accepts lazy', () => {
       const Component = React.lazy(() =>
-        Promise.resolve({ default: (props) => <div {...props} /> }),
+        Promise.resolve({ default: (props: any) => <div {...props} /> }),
       );
 
       // should actually fail when mounting since the ref is forwarded to a function component
@@ -110,7 +108,7 @@ describe('elementAcceptingRef', () => {
   });
 
   describe('rejections', () => {
-    function assertFail(Component, hint) {
+    function assertFail(Component: any, hint: string) {
       expect(() => {
         checkPropType(Component);
       }).toErrorDev(

packages/material-ui-utils/src/deepmerge.test.js packages/material-ui-utils/src/deepmerge.test.ts

@@ -1,14 +1,20 @@
 import PropTypes from 'prop-types';
 import chainPropTypes from './chainPropTypes';
 
-function isClassComponent(elementType) {
+function isClassComponent(elementType: Function) {
   // elementType.prototype?.isReactComponent
   const { prototype = {} } = elementType;
 
   return Boolean(prototype.isReactComponent);
 }
 
-function acceptingRef(props, propName, componentName, location, propFullName) {
+function acceptingRef(
+  props: { [key: string]: unknown },
+  propName: string,
+  componentName: string,
+  location: string,
+  propFullName: string,
+) {
   const element = props[propName];
   const safePropName = propFullName || propName;
 
@@ -18,7 +24,7 @@ function acceptingRef(props, propName, componentName, location, propFullName) {
 
   let warningHint;
 
-  const elementType = element.type;
+  const elementType: unknown = (element as any).type;
   /**
    * Blacklisting instead of whitelisting
    *
@@ -43,7 +49,10 @@ function acceptingRef(props, propName, componentName, location, propFullName) {
   return null;
 }
 
-const elementAcceptingRef = chainPropTypes(PropTypes.element, acceptingRef);
+const elementAcceptingRef = chainPropTypes(
+  PropTypes.element,
+  acceptingRef,
+) as PropTypes.Requireable<unknown>;
 elementAcceptingRef.isRequired = chainPropTypes(PropTypes.element.isRequired, acceptingRef);
 
 export default elementAcceptingRef;

packages/material-ui-utils/src/deepmerge.ts

@@ -6,7 +6,7 @@ import ReactDOM from 'react-dom';
 import elementTypeAcceptingRef from './elementTypeAcceptingRef';
 
 describe('elementTypeAcceptingRef', () => {
-  function checkPropType(elementType) {
+  function checkPropType(elementType: any) {
     PropTypes.checkPropTypes(
       { component: elementTypeAcceptingRef },
       { component: elementType },
@@ -20,11 +20,9 @@ describe('elementTypeAcceptingRef', () => {
   });
 
   describe('acceptance', () => {
-    let rootNode;
-
-    function assertPass(Component, options = {}) {
-      const { failsOnMount = false, shouldMount = true } = options;
+    let rootNode: HTMLElement;
 
+    function assertPass(Component: any, { failsOnMount = false, shouldMount = true } = {}) {
       function testAct() {
         checkPropType(Component);
         if (shouldMount) {
@@ -88,14 +86,14 @@ describe('elementTypeAcceptingRef', () => {
     });
 
     it('accepts memo', () => {
-      const Component = React.memo('div');
+      const Component = React.memo(React.forwardRef(() => null));
 
       assertPass(Component);
     });
 
     it('accepts lazy', () => {
       const Component = React.lazy(() =>
-        Promise.resolve({ default: (props) => <div {...props} /> }),
+        Promise.resolve({ default: (props: any) => <div {...props} /> }),
       );
 
       // should actually fail when mounting since the ref is forwarded to a function component
@@ -114,7 +112,7 @@ describe('elementTypeAcceptingRef', () => {
   });
 
   describe('rejections', () => {
-    function assertFail(Component, hint) {
+    function assertFail(Component: any, hint: string) {
       expect(() => {
         checkPropType(Component);
       }).toErrorDev(

packages/material-ui-utils/src/elementAcceptingRef.test.js packages/material-ui-utils/src/elementAcceptingRef.test.tsx

@@ -1,14 +1,20 @@
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import chainPropTypes from './chainPropTypes';
 
-function isClassComponent(elementType) {
+function isClassComponent(elementType: Function) {
   // elementType.prototype?.isReactComponent
-  const { prototype = {} } = elementType;
+  const { prototype } = elementType;
 
   return Boolean(prototype.isReactComponent);
 }
 
-function elementTypeAcceptingRef(props, propName, componentName, location, propFullName) {
+function elementTypeAcceptingRef(
+  props: { [key: string]: unknown },
+  propName: string,
+  componentName: string,
+  location: string,
+  propFullName: string,
+) {
   const propValue = props[propName];
   const safePropName = propFullName || propName;