Does not work when encounter function component with decorator

[liby]

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/

[gndelia]

Hi @liby ! Thanks for pointing out these scenarios. Indeed, this seems similar to using a HOC function, which I haven't considered, so it's something that's not working as expected.

PRs are welcome if you want to give it a shot 😃 , otherwise, I'll look into it at some point during the weekend or the next week.

[liby]

Hi @gndelia, first of all, thank you for the script, it really helped me with most of my problems.

PRs are welcome if you want to give it a shot

I had thought the problem would be easy to fix and provide you with a PR when it was done. But in reality, I only partially solved the problem, for the rest I didn't find a solution, for now, so I had to submit an issue in the code base, mainly because I personally don't know much about AST related issues, but I will continue to follow up on this issue, and it would be great if you could take a look at this issue sometime.

Have a nice day!

[gndelia]

I'm glad this small script has been useful for you 🎉 yeah, AST can be tricky, there are soo many scenarios and possible ways to describe similar code that's complex to consider all the cases. If you manage to solve the problem and submit a PR, I'll look at it as soon as possible, but if you can't I'll try to address it during the next week.

You too have a nice day!

[gndelia]

Let's test this 😅

@all-contributors please add @liby for bug

edit: it worked 🚀 it also included "tests" due to the first sentence lol. I'll add the rest once I merge your PR

[allcontributors]

@gndelia

I've put up a pull request to add @liby! 🎉

[gndelia]

Point 1 and 3 are solved in #16 - Point 2 is pending

[gndelia]

Point 2 solved in #21