https://github.com/codemodsquad/react-codemorphs
codemods for everyday work with React
https://github.com/codemodsquad/react-codemorphs
codemods jscodeshift react refactoring
Last synced: 7 months ago
JSON representation
codemods for everyday work with React
- Host: GitHub
- URL: https://github.com/codemodsquad/react-codemorphs
- Owner: codemodsquad
- License: mit
- Created: 2020-01-22T20:30:23.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T05:31:42.000Z (almost 3 years ago)
- Last Synced: 2024-04-14T09:40:42.081Z (over 1 year ago)
- Topics: codemods, jscodeshift, react, refactoring
- Language: TypeScript
- Size: 3.57 MB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-codemorphs
[](https://circleci.com/gh/codemodsquad/react-codemorphs)
[](https://codecov.io/gh/codemodsquad/react-codemorphs)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
[](https://badge.fury.io/js/react-codemorphs)
Codemods for everyday work with React. All support
Flow, TypeScript, and plain JS.
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.
This is intended to be called from IDE extensions, it's too cumbersome to call
from the JSCodeshift CLI.
## Special Options
### `selectionStart` (`number`, **required**)
The start of the selection in the source code. This is used for determining which JSX elements to wrap.
### `selectionEnd` (`number`, **required**)
The end of the selection in the source code. This is used for determining which JSX elements to wrap.
### `name` (`string`, **required**)
The name of the JSX element to wrap with.
## Example
### Before
```tsx
const Foo = () => (
{foo}
{bar}
{baz}
)
```
### Transform
```
jscodeshift -t path/to/react-codemorphs/wrapWithJSXElement.js \
--selectionStart= \
--selectionEnd= \
--name=Test
Foo.ts
```
### After (with formatting)
```tsx
const Foo = () => (
{foo}
{bar}
{baz}
)
```
# `wrapWithChildFunctionElement`
A codemod that wraps a selected JSX element inside a parent JSX element with a child function.
## Special Options
### `selectionStart` (`number`, **required**)
The start of the selection in the source code. This is used for determining which JSX element to wrap.
### `selectionEnd` (`number`, **required**)
The end of the selection in the source code. This is used for determining which JSX element to wrap.
### `name` (`string`, **required**)
The name of the JSX element to wrap with.
## Example
### Before
```tsx
const Foo = () => (
)
```
### Transform
```
jscodeshift -t path/to/react-codemorphs/wrapWithChildFunctionElement.js \
--selectionStart= \
--selectionEnd= \
--name=Test
Foo.ts
```
### After (with formatting)
```tsx
const Foo = () => (
{(): React.ReactNode => }
)
```
# `addProp`
A codemod that adds the identifier under the cursor as a prop to the surrounding component.
Adds a prop type declaration if possible, and binds the identifier via destructuring on `props`
or replaces it with a reference to `props`/`this.props`.
## Special Options
### `selectionStart` (`number`, **required**)
The start of the selection in the source code. This is used for determining which property to add.
### `selectionEnd` (`number`, **required**)
The end of the selection in the source code. This is used for determining which property to add.
### `typeAnnotation` (`string`, **optional**)
The Flow or TypeScript type annotation to use for the property type declaration.
## Example
### Before
Cursor is positioned in the middle of `text` below:
```tsx
import * as React from 'react'
interface Props {}
const Foo = (props: Props) =>
{text}
```
### Transform
```
jscodeshift -t path/to/react-codemorphs/addProp.js \
--selectionStart= \
--selectionEnd= \
--typeAnnotation=string
Foo.ts
```
### After (with formatting)
```tsx
import * as React from 'react'
interface Props {
text: string
}
const Foo = (props: Props) =>
{props.text}
```
# `renderConditionally`
Wraps the selected JSX in `{true && ...}`. If
there are multiple siblings selected, wraps in `{true && ...}`.
If you want to wrap in a ternary conditional like Glean's
"Render Conditionally" refactor, see `wrapWithTernaryConditional`.
## Special Options
### `selectionStart` (`number`, **required**)
The start of the selection in the source code. This is used for determining which JSX elements to wrap.
### `selectionEnd` (`number`, **required**)
The end of the selection in the source code. This is used for determining which JSX elements to wrap.
## Example
### Before
```tsx
const Foo = () => (
{foo} bar
{baz}
)
```
### Transform
```
jscodeshift -t path/to/react-codemorphs/renderConditionally.js \
--selectionStart= \
--selectionEnd= \
Foo.ts
```
### After (with formatting)
```tsx
const Foo = () => (
{true && (
{foo} bar
)}
{baz}
)
```
# `wrapWithTernaryConditional`
Wraps the selected JSX in `{true ? ... : null}`. If
there are multiple siblings selected, wraps in `{true ? ... : null}`.
## Special Options
### `selectionStart` (`number`, **required**)
The start of the selection in the source code. This is used for determining which JSX elements to wrap.
### `selectionEnd` (`number`, **required**)
The end of the selection in the source code. This is used for determining which JSX elements to wrap.
## Example
### Before
```tsx
const Foo = () => (
{foo} bar
{baz}
)
```
### Transform
```
jscodeshift -t path/to/react-codemorphs/wrapWithTernaryConditional.js \
--selectionStart= \
--selectionEnd= \
Foo.ts
```
### After (with formatting)
```tsx
const Foo = () => (
{true ? (
{foo} bar
) : null}
{baz}
)
```
# `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,
}
```