Skip to content

Commit c4f6e48

Browse files
committed
Docs: add configuration guide
1 parent b52333b commit c4f6e48

File tree

1 file changed

+68
-0
lines changed

1 file changed

+68
-0
lines changed

README.md

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,74 @@ export const C = props => {
144144
};
145145
```
146146

147+
## Configuration
148+
149+
### Disabling transformation
150+
151+
Adding to the class a comment including `react-declassify-disable` will disable transformation of that class.
152+
153+
```js
154+
/* react-declassify-disable */
155+
class MyComponent extends React.Component {}
156+
```
157+
158+
Marking the component class as `abstract` or `/** @abstract */` also disables transformation.
159+
160+
### Import style
161+
162+
The codemod follows your import style from the `extends` clause. So
163+
164+
```js
165+
import React from "react";
166+
167+
class MyComponent extends React.Component {}
168+
```
169+
170+
is transformed to
171+
172+
```js
173+
import React from "react";
174+
175+
const MyComponent: React.FC = () => {};
176+
```
177+
178+
whereas
179+
180+
```js
181+
import { Component } from "react";
182+
183+
class MyComponent extends Component {}
184+
```
185+
186+
is transformed to
187+
188+
```js
189+
import { Component, FC } from "react";
190+
191+
const MyComponent: FC = () => {};
192+
```
193+
194+
It cannot be configured to mix these styles. For example it cannot emit `React.FC` for typing while emitting `useState` (not `React.useState`) for hooks.
195+
196+
### Receiving refs
197+
198+
Class components may receive refs; this is to be supported in the future. Once it is implemented, you will be able to add special directives in the component to enable the feature.
199+
200+
### Syntactic styles
201+
202+
This codemod relies on [recast](https://github.com/benjamn/recast) for pretty-printing and sometimes generates code that does not match your preferred style. This is ineviable. For example it does not currently emit parentheses for the arrow function:
203+
204+
```js
205+
const MyComponent: FC = props => {
206+
// ^^^^^ no parentheses
207+
// ...
208+
};
209+
```
210+
211+
We have no control over this choice. Even if it were possible, allowing configurations on styles would make the codemod unnecessarily complex.
212+
213+
If you need to enforce specific styles, use Prettier or ESLint or whatever is your favorite to reformat the code after you apply the transformation.
214+
147215
## Progress
148216

149217
- [x] Convert render function (basic feature)

0 commit comments

Comments
 (0)