diff --git a/README.md b/README.md index 1ee6fa0..1fa89d6 100644 --- a/README.md +++ b/README.md @@ -9,9 +9,22 @@ Codemods for everyday work with React. All support Flow, TypeScript, and plain JS. -These codemods are intended to be called from IDE extensions, calling them +Most of these codemods (except for `convertSimpleClassComponentsToFunctions`) are intended to be called from IDE extensions, calling them from the `jscodeshift` CLI wouldn't be worth the effort. +# Table of Contents + + + +- [`wrapWithJSXElement`](#wrapwithjsxelement) +- [`wrapWithChildFunctionElement`](#wrapwithchildfunctionelement) +- [`addProp`](#addprop) +- [`renderConditionally`](#renderconditionally) +- [`wrapWithTernaryConditional`](#wrapwithternaryconditional) +- [`convertSimpleClassComponentsToFunctions`](#convertsimpleclasscomponentstofunctions) + + + # `wrapWithJSXElement` A codemod that wraps selected JSX elements inside a parent JSX element. @@ -292,3 +305,39 @@ const Foo = () => ( # `convertSimpleClassComponentsToFunctions` Converts `React.Component` subclasses with only a `render` method (no lifecycle methods, constructors, or class properties other than `propTypes`, `contextTypes`, `defaultProps`, and no `state` type parameter) into functional components. + +## Example + +### Before + +```ts +import * as React from 'react' +import PropTypes from 'prop-types' +export default class Foo extends React.Component { + static propTypes = { + title: PropTypes.string.isRequired, + } + render(): React.ReactNode | null { + return
{this.props.title}
+ } +} +``` + +### Command + +``` +jscodeshift -t path/to/react-codemorphs/convertSimpleClassComponentsToFunctions.js +``` + +### After + +```ts +import * as React from 'react' +import PropTypes from 'prop-types' +export default function Foo(props: Props): React.ReactNode | null { + return
{props.title}
+} +Foo.propTypes = { + title: PropTypes.string.isRequired, +} +``` diff --git a/test/convertSimpleClassComponentsToFunctions/typescript.ts b/test/convertSimpleClassComponentsToFunctions/typescript.ts index 4656f6f..70675dc 100644 --- a/test/convertSimpleClassComponentsToFunctions/typescript.ts +++ b/test/convertSimpleClassComponentsToFunctions/typescript.ts @@ -5,7 +5,11 @@ export const options = {} export const input = ` import * as React from 'react' +import PropTypes from 'prop-types' export default class Foo extends React.Component { + static propTypes = { + title: PropTypes.string.isRequired, + } render(): React.ReactNode | null { return
{this.props.title}
} @@ -14,7 +18,11 @@ export default class Foo extends React.Component { export const expected = ` import * as React from 'react' +import PropTypes from 'prop-types' export default function Foo(props: Props): React.ReactNode | null { return
{props.title}
} +Foo.propTypes = { + title: PropTypes.string.isRequired, +} `