refactor: migrate src/ to TypeScript (#809)

* build: add tsx files as targets of Babel

* refactor: migrate ChildMapping to TypeScript

* refactor: add types for TransitionGroupContext

* refactor: migrate SwitchTransition to TypeScript

* refactor: migrate Transition to TypeScript

* refactor: migrate CSSTransition to TypeScript

* refactor: migrate TransitionGroup to TypeScript

* refactor: migrate ReplaceTransition to TypeScript

* chore: update size-snapshot

Author: koba04

.size-snapshot.json

@@ -1,12 +1,12 @@
 {
   "lib/dist/react-transition-group.js": {
-    "bundled": 98066,
-    "minified": 26272,
-    "gzipped": 8027
+    "bundled": 101943,
+    "minified": 26331,
+    "gzipped": 8046
   },
   "lib/dist/react-transition-group.min.js": {
-    "bundled": 55134,
-    "minified": 17999,
-    "gzipped": 5654
+    "bundled": 58919,
+    "minified": 18068,
+    "gzipped": 5664
   }
 }

.storybook/main.js

@@ -4,9 +4,18 @@ module.exports = {
   stories: ['../stories/index.js'],
   webpackFinal: (config) => {
     config.module = {
-      rules: [rules.js(), rules.astroturf(), rules.css({ extract: false })],
+      rules: [
+        {
+          test: /\.[t|j]sx?$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+          },
+        },
+        rules.astroturf(),
+        rules.css({ extract: false }),
+      ],
     };
-
     config.plugins.push(plugins.extractCss({ disable: true }));
 
     return config;

package.json

@@ -89,7 +89,7 @@
     "@typescript-eslint/eslint-plugin": "^4.26.1",
     "astroturf": "^0.10.4",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.3",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-preset-jason": "^6.2.0",
     "cherry-pick": "^0.5.0",

rollup.config.js

@@ -14,6 +14,7 @@ const globals = {
 
 const babelOptions = {
   exclude: /node_modules/,
+  extensions: ['.js', '.ts', '.tsx'],
   runtimeHelpers: true,
 };
 

src/CSSTransition.js renamed to src/CSSTransition.tsx

@@ -4,14 +4,32 @@ import addOneClass from 'dom-helpers/addClass';
 import removeOneClass from 'dom-helpers/removeClass';
 import React from 'react';
 
-import Transition from './Transition';
+import Transition, { Props as TransitionProps } from './Transition';
 import { classNamesShape } from './utils/PropTypes';
 
-const addClass = (node, classes) =>
+const addClass = (node: HTMLElement, classes: string) =>
   node && classes && classes.split(' ').forEach((c) => addOneClass(node, c));
-const removeClass = (node, classes) =>
+const removeClass = (node: HTMLElement, classes: string) =>
   node && classes && classes.split(' ').forEach((c) => removeOneClass(node, c));
 
+type TransitionClassNames = {
+  appear: string;
+  appearActive: string;
+  appearDone: string;
+  enter: string;
+  enterActive: string;
+  enterDone: string;
+  exit: string;
+  exitActive: string;
+  exitDone: string;
+};
+
+type Props = TransitionProps & {
+  classNames: string | Partial<TransitionClassNames>;
+};
+
+type TransitionClassNameKeys = 'appear' | 'enter' | 'exit';
+
 /**
  * A transition component inspired by the excellent
  * [ng-animate](https://docs.angularjs.org/api/ngAnimate) library, you should
@@ -81,7 +99,7 @@ const removeClass = (node, classes) =>
  * [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)
  * prop, make sure to define styles for `.appear-*` classes as well.
  */
-class CSSTransition extends React.Component {
+class CSSTransition extends React.Component<Props> {
   static defaultProps = {
     classNames: '',
   };
@@ -92,7 +110,7 @@ class CSSTransition extends React.Component {
     exit: {},
   };
 
-  onEnter = (maybeNode, maybeAppearing) => {
+  onEnter = (maybeNode: HTMLElement | boolean, maybeAppearing?: boolean) => {
     const [node, appearing] = this.resolveArguments(maybeNode, maybeAppearing);
     this.removeClasses(node, 'exit');
     this.addClass(node, appearing ? 'appear' : 'enter', 'base');
@@ -102,7 +120,7 @@ class CSSTransition extends React.Component {
     }
   };
 
-  onEntering = (maybeNode, maybeAppearing) => {
+  onEntering = (maybeNode: HTMLElement | boolean, maybeAppearing?: boolean) => {
     const [node, appearing] = this.resolveArguments(maybeNode, maybeAppearing);
     const type = appearing ? 'appear' : 'enter';
     this.addClass(node, type, 'active');
@@ -112,7 +130,7 @@ class CSSTransition extends React.Component {
     }
   };
 
-  onEntered = (maybeNode, maybeAppearing) => {
+  onEntered = (maybeNode: HTMLElement | boolean, maybeAppearing?: boolean) => {
     const [node, appearing] = this.resolveArguments(maybeNode, maybeAppearing);
     const type = appearing ? 'appear' : 'enter';
     this.removeClasses(node, type);
@@ -123,7 +141,7 @@ class CSSTransition extends React.Component {
     }
   };
 
-  onExit = (maybeNode) => {
+  onExit = (maybeNode?: HTMLElement) => {
     const [node] = this.resolveArguments(maybeNode);
     this.removeClasses(node, 'appear');
     this.removeClasses(node, 'enter');
@@ -134,7 +152,7 @@ class CSSTransition extends React.Component {
     }
   };
 
-  onExiting = (maybeNode) => {
+  onExiting = (maybeNode?: HTMLElement) => {
     const [node] = this.resolveArguments(maybeNode);
     this.addClass(node, 'exit', 'active');
 
@@ -143,7 +161,7 @@ class CSSTransition extends React.Component {
     }
   };
 
-  onExited = (maybeNode) => {
+  onExited = (maybeNode?: HTMLElement) => {
     const [node] = this.resolveArguments(maybeNode);
     this.removeClasses(node, 'exit');
     this.addClass(node, 'exit', 'done');
@@ -154,12 +172,16 @@ class CSSTransition extends React.Component {
   };
 
   // when prop `nodeRef` is provided `node` is excluded
-  resolveArguments = (maybeNode, maybeAppearing) =>
+  resolveArguments = (
+    maybeNode: HTMLElement | boolean | undefined,
+    maybeAppearing?: boolean
+  ): [HTMLElement, boolean] =>
+    // @ts-expect-error FIXME: Type at position 1 in source is not compatible with type at position 1 in target. Type 'boolean | HTMLElement' is not assignable to type 'boolean'. Type 'HTMLElement' is not assignable to type 'boolean'.ts(2322)
     this.props.nodeRef
       ? [this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`
       : [maybeNode, maybeAppearing]; // `findDOMNode` was used
 
-  getClassNames = (type) => {
+  getClassNames = (type: TransitionClassNameKeys) => {
     const { classNames } = this.props;
     const isStringClassNames = typeof classNames === 'string';
     const prefix = isStringClassNames && classNames ? `${classNames}-` : '';
@@ -183,7 +205,11 @@ class CSSTransition extends React.Component {
     };
   };
 
-  addClass(node, type, phase) {
+  addClass(
+    node: HTMLElement | null,
+    type: TransitionClassNameKeys,
+    phase: 'base' | 'active' | 'done'
+  ) {
     let className = this.getClassNames(type)[`${phase}ClassName`];
     const { doneClassName } = this.getClassNames('enter');
 
@@ -194,32 +220,40 @@ class CSSTransition extends React.Component {
     // This is to force a repaint,
     // which is necessary in order to transition styles when adding a class name.
     if (phase === 'active') {
-      /* eslint-disable no-unused-expressions */
+      /* eslint-disable no-unused-expressions, @typescript-eslint/no-unused-expressions */
       node && node.scrollTop;
     }
 
     if (className) {
+      // @ts-expect-error FIXME: Property 'active' does not exist on type '{} | {} | {}'.ts(7053)
       this.appliedClasses[type][phase] = className;
+      // @ts-expect-error FIXME: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.ts(2345)
       addClass(node, className);
     }
   }
 
-  removeClasses(node, type) {
+  removeClasses(node: HTMLElement | null, type: TransitionClassNameKeys) {
     const {
+      // @ts-expect-error FIXME: Property 'base' does not exist on type '{} | {} | {}'.ts(2339)
       base: baseClassName,
+      // @ts-expect-error FIXME: Property 'active' does not exist on type '{} | {} | {}'.ts(2339)
       active: activeClassName,
+      // @ts-expect-error FIMXE: Property 'done' does not exist on type '{} | {} | {}'.ts(2339)
       done: doneClassName,
     } = this.appliedClasses[type];
 
     this.appliedClasses[type] = {};
 
     if (baseClassName) {
+      // @ts-expect-error FIXME: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.ts(2345)
       removeClass(node, baseClassName);
     }
     if (activeClassName) {
+      // @ts-expect-error FIXME: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.ts(2345)
       removeClass(node, activeClassName);
     }
     if (doneClassName) {
+      // @ts-expect-error FIXME: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.ts(2345)
       removeClass(node, doneClassName);
     }
   }
@@ -241,6 +275,7 @@ class CSSTransition extends React.Component {
   }
 }
 
+// @ts-expect-error To make TS migration diffs minimum, I've left propTypes here instead of defining a static property
 CSSTransition.propTypes = {
   ...Transition.propTypes,
 

src/ReplaceTransition.js renamed to src/ReplaceTransition.tsx

@@ -1,7 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import type { ReactElement } from 'react';
 import ReactDOM from 'react-dom';
 import TransitionGroup from './TransitionGroup';
+import type { Props as TransitionProps } from './Transition';
+
+type Props = Omit<TransitionProps, 'children'> & {
+  children: [ReactElement<TransitionProps>, ReactElement<TransitionProps>];
+};
 
 /**
  * The `<ReplaceTransition>` component is a specialized `Transition` component
@@ -14,32 +20,35 @@ import TransitionGroup from './TransitionGroup';
  * </ReplaceTransition>
  * ```
  */
-class ReplaceTransition extends React.Component {
-  handleEnter = (...args) => this.handleLifecycle('onEnter', 0, args);
-  handleEntering = (...args) => this.handleLifecycle('onEntering', 0, args);
-  handleEntered = (...args) => this.handleLifecycle('onEntered', 0, args);
+class ReplaceTransition extends React.Component<Props> {
+  handleEnter = (...args: any) => this.handleLifecycle('onEnter', 0, args);
+  handleEntering = (...args: any) =>
+    this.handleLifecycle('onEntering', 0, args);
+  handleEntered = (...args: any) => this.handleLifecycle('onEntered', 0, args);
 
-  handleExit = (...args) => this.handleLifecycle('onExit', 1, args);
-  handleExiting = (...args) => this.handleLifecycle('onExiting', 1, args);
-  handleExited = (...args) => this.handleLifecycle('onExited', 1, args);
+  handleExit = (...args: any) => this.handleLifecycle('onExit', 1, args);
+  handleExiting = (...args: any) => this.handleLifecycle('onExiting', 1, args);
+  handleExited = (...args: any) => this.handleLifecycle('onExited', 1, args);
 
-  handleLifecycle(handler, idx, originalArgs) {
+  handleLifecycle(handler: any, idx: number, originalArgs: any) {
     const { children } = this.props;
-    const child = React.Children.toArray(children)[idx];
+    // @ts-expect-error FIXME: Type 'string' is not assignable to type 'ReactElement<Props, string | JSXElementConstructor<any>>'.ts(2322)
+    const child: ChildElement = React.Children.toArray(children)[idx];
 
     if (child.props[handler]) child.props[handler](...originalArgs);
+    // @ts-expect-error Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.ts(7053)
     if (this.props[handler]) {
       const maybeNode = child.props.nodeRef
         ? undefined
         : ReactDOM.findDOMNode(this);
-
+      // @ts-expect-error FIXME: Argument of type 'Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement'.ts(2769)
       this.props[handler](maybeNode);
     }
   }
 
   render() {
-    const { children, in: inProp, ...props } = this.props;
-    const [first, second] = React.Children.toArray(children);
+    const { children, in: inProp, ...props }: any = this.props;
+    const [first, second]: any = React.Children.toArray(children);
 
     delete props.onEnter;
     delete props.onEntering;
@@ -68,9 +77,10 @@ class ReplaceTransition extends React.Component {
   }
 }
 
+// @ts-expect-error To make TS migration diffs minimum, I've left propTypes here instead of defining a static property
 ReplaceTransition.propTypes = {
   in: PropTypes.bool.isRequired,
-  children(props, propName) {
+  children(props: any, propName: any) {
     if (React.Children.count(props[propName]) !== 2)
       return new Error(
         `"${propName}" must be exactly two transition components.`