The codemod-replace-react-fc-typescript's discuss from gndelia

Does not work when encounter function component with decorator

The script does not work in the following three situations:

1. Function components with `observer` decorator receive parameters: throw error

// before codemod runs
import { observer } from "mobx-react-lite";

type Props = { id: number };
export const MyComponent: React.FC<Props> = observer((props) => {
  return <span>{props.id}</span>
});

// after codemod runs
❯ jscodeshift -t https://raw.githubusercontent.com/gndelia/codemod-replace-react-fc-typescript/main/dist/index.js --extensions=tsx --verbose=2 ./my-component.tsx
Processing 1 files... 
Spawning 1 workers...
Sending 1 files to free worker...
TypeError: Cannot read property 'length' of undefined
    at addPropsTypeToComponentBody (/private/var/folders/ym/1mprqx7x45bdrz5zt253_0nw0000gn/T/jscodeshift202162-41931-4ws4fq.5drs.js:30:42)
    at NodePath.<anonymous> (/private/var/folders/ym/1mprqx7x45bdrz5zt253_0nw0000gn/T/jscodeshift202162-41931-4ws4fq.5drs.js:105:13)
    at /Users/bryan/.nvs/node/14.15.5/x64/lib/node_modules/jscodeshift/src/Collection.js:75:36
    at Array.forEach (<anonymous>)
    at Collection.forEach (/Users/bryan/.nvs/node/14.15.5/x64/lib/node_modules/jscodeshift/src/Collection.js:74:18)
    at exports.default (/private/var/folders/ym/1mprqx7x45bdrz5zt253_0nw0000gn/T/jscodeshift202162-41931-4ws4fq.5drs.js:103:14)
    at /Users/bryan/.nvs/node/14.15.5/x64/lib/node_modules/jscodeshift/src/Worker.js:157:29
    at /Users/bryan/.nvs/node/14.15.5/x64/lib/node_modules/jscodeshift/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
 SKIP ./header.component.tsx
All done. 
Results: 
0 errors
0 unmodified
1 skipped
0 ok
Time elapsed: 1.317seconds

1.1 Function components with `observer` decorator do not receive arguments: work normally

// before codemod runs
import { observer } from "mobx-react-lite";

export const MyComponent: React.FC = observer(() => {
  return <span>Demo</span>
});

// after codemod runs
export const MyComponent = observer(() => {
  return <span>Demo</span>
});

2. When there is intersection types in function component: skip execution

// before codemod runs
import { OtherComponent } from "./other-component";
interface Props {
  text: string;
}
export const MyComponent: React.FC<Props> & {
  OtherComponent: typeof OtherComponent;
} = ({ text }) => <span>{text}</span>;
MyComponent.OtherComponent = OtherComponent;

// after codemod runs
❯  jscodeshift -t https://raw.githubusercontent.com/gndelia/codemod-replace-react-fc-typescript/main/dist/index.js --extensions=tsx --verbose=0 ./my-component.tsx
Processing 1 files...
Spawning 1 workers...
Sending 1 files to free worker...
All done.
Results:
0 errors
0 unmodified
1 skipped
0 ok
Time elapsed: 0.894seconds

3. React.FunctionComponent will be skipped execution

// before codemod runs
export const MyComponent: React.FunctionComponent = () => <span>Demo</span>;

// after codemod runs
❯  jscodeshift -t https://raw.githubusercontent.com/gndelia/codemod-replace-react-fc-typescript/main/dist/index.js --extensions=tsx --verbose=0 ./my-component.tsx
Processing 1 files... 
Spawning 1 workers...
Sending 1 files to free worker...
 SKIP ./main.component.tsx
All done. 
Results: 
0 errors
0 unmodified
1 skipped
0 ok
Time elapsed: 1.300seconds

I tried to modify the script to execute without errors; however, I was unable to add a type definition after the argument while keeping observer().

// before codemod runs
export const MyComponent: React.FC<{ text: string }> = observer(({text}) => <span>{text}</span>)

// after codemod runs
export const MyComponent = observer(({text}) => <span>{text}</span>)

Link to the modified code: https://pastebin.ubuntu.com/p/h5d2gZyWZg/

Add "All contributors" section in the readme

See here

Add option to add children to props

The current behaviour removes React.FC from the component declaration, which has an implicit definition of children, leaving its definition to be set manually in each case. An option could be set to forcefully add { children?: React.ReactNode } as props, which are the value that React.FC offers. It should be an opt-in option

Allow users to run this codemod from npx

The current run command seems to be excessive in complexity. There just should be really one step, something along the lines of

npx codemod-command <FOLDER-YOU-WANT-TO-TRANSFORM> <other-optional-flags>

Do some research on how to implement this - it might require implementing an npm package, perhaps?

Importing "FC" directly is being skipped

I'm trying to run this in my codebase, but it just skips all files without reason. Why would it skip a file?

Can we reverse it?

Interestingly, now that React 18 types have removed the implicit children problem, I want to go the other way, from a function with props typed as an object to React.FunctionalComponent.. How hard would that be?

gndelia / codemod-replace-react-fc-typescript Goto Github PK

codemod-replace-react-fc-typescript's Issues

Does not work when encounter function component with decorator

Add "All contributors" section in the readme

Add option to add children to props

Allow users to run this codemod from npx

Importing "FC" directly is being skipped

Can we reverse it?

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent