billyvg / codemod-proptypes-to-flow Goto Github PK

View Code? Open in Web Editor NEW

162.0 162.0 28.0 139 KB

Removes React.PropTypes and attempts to transform to flowtypes

License: MIT License

JavaScript 100.00%

codemod-proptypes-to-flow's Introduction

Hi there 👋

codemod-proptypes-to-flow's People

Contributors

Stargazers

Watchers

codemod-proptypes-to-flow's Issues

Publish to npm

Problem with props deconstructing and functional component returning expression

Trying to mod this file:

// @flow
import React, { PropTypes } from 'react';
const MyComponent = ({ hello }) => <div>{hello}</div>;
MyComponent.propTypes = {
    hello: PropTypes.string.isRequired,
};
export default MyComponent;

Gives a Transformation error

TypeError: Cannot read property 'unshift' of undefined
    at insertTypeIdentifierInFunction (/Users/penso/Dev/codemod-proptypes-to-flow/src/transformers/functional.js:51:5)
    at NodePath.<anonymous> (/Users/penso/Dev/codemod-proptypes-to-flow/src/transformers/functional.js:90:7)
    at __paths.forEach (/Users/penso/.npm-packages/lib/node_modules/jscodeshift/dist/Collection.js:76:36)
    at Array.forEach (native)
    at Collection.forEach (/Users/penso/.npm-packages/lib/node_modules/jscodeshift/dist/Collection.js:75:18)
    at /Users/penso/Dev/codemod-proptypes-to-flow/src/transformers/functional.js:87:6
    at Array.forEach (native)
    at transformFunctionalComponents (/Users/penso/Dev/codemod-proptypes-to-flow/src/transformers/functional.js:68:14)
    at transformer (/Users/penso/Dev/codemod-proptypes-to-flow/src/index.js:30:35)

but changing the file to

// @flow
import React, { PropTypes } from 'react';
const MyComponent = props => <div>{props.hello}</div>;
MyComponent.propTypes = {
    hello: PropTypes.string.isRequired,
};
export default MyComponent;

works as expected (PropTypes import remaining is expected to not be handled, according to readme), i.e.

// @flow
import React, { PropTypes } from 'react';
export type Props = { hello: string };
const MyComponent = props: Props => <div>{props.hello}</div>;
export default MyComponent;

Error while converting es6 code with no brackets surrounding arguments.

Before running codemod
const inverse = props => ()

After running coded
const Inverse = props: Props => ()

Error: 0 does not match field "value": string of type StringLiteralTypeAnnotation

jscodeshift -t codemod-proptypes-to-flow/src/index.js react-infinite-calendar/src/Calendar/index.js
Processing 1 files...
Spawning 1 workers...
Sending 1 files to free worker...
 ERR react-infinite-calendar/src/Calendar/index.js Transformation error
Error: 0 does not match field "value": string of type StringLiteralTypeAnnotation
    at addParam (/ast-types/lib/types.js:565:23)
    at /ast-types/lib/types.js:594:21
    at Array.forEach (<anonymous>)
    at Function.builder [as stringLiteralTypeAnnotation] (/ast-types/lib/types.js:592:30)
    at propTypeToFlowType (codemod-proptypes-to-flow/src/helpers/propTypeToFlowType.js:88:21)
    at codemod-proptypes-to-flow/src/helpers/propTypeToFlowType.js:127:47
    at Array.map (<anonymous>)
    at propTypeToFlowType (codemod-proptypes-to-flow/src/helpers/propTypeToFlowType.js:127:36)
    at codemod-proptypes-to-flow/src/helpers/propTypeToFlowType.js:122:11
    at Array.map (<anonymous>)
All done.

https://github.com/clauderic/react-infinite-calendar

Support destructuring inside function declaration

Currently the codemod produces

const FooComponent = (props: Props) => {
  const { myProp } = props;

from

const FooComponent = ({ myProp }) => {

It'd be awesome if it could keep the destructuring within the () instead of breaking them out.

Flow props are now a generic type

In the latest versions of flow, proptypes are no longer a class property when using es6 classes, eg.

export type Props = {
  foo: number
}

class MyComponent extends React.Component {
  props: Props
}

Instead React.Component is a generic type, and it expects the props to be passed into that instead:

export type Props = {
  foo: number
}

class MyComponent extends React.Component<Props> {
}

The codemod is currently doing the former, but I suspect it should be either updated to do the latter, or have a flag that lets it do either depending on the flow version(?).

Remove `PropTypes` import automatically

Right now this has to be removed manually.

Source control build.sh output

Hi there,

It'd be really convenient to have the artifact built by build.sh source controlled. Otherwise, I have to build myself after cloning. There were also some weird permissions issues on build.sh. Had to +x in order to run.

Perhaps there's a git hook you can use to run the build task prior to merging to master?

Use React.Node for PropTypes.node

Right now PropTypes.node gets converted to string | null | React.Element | .... Using React.Node would result in cleaner output.

Comments in propTypes when using `export default MyComponent ...` syntax aren't placed correctly

import React from 'react';

export default class Test extends React.Component {
  static propTypes = {
    /**
     * block comment
     */
    optionalArray: React.PropTypes.array,
  };
}

gets transformed to:

import React from 'react';

export type Props = { optionalArray?: /**
 * block comment
 */
Array<any> };

export default class Test extends React.Component {
  props: Props;
}

You can see that the comment block should be above the optionalArray key instead of being inline with it. Like so:

export type Props = { 
  /**
   * block comment
   */
  optionalArray?: Array<any>
};

If you remove the export default, it works as expected.

billyvg / codemod-proptypes-to-flow Goto Github PK

codemod-proptypes-to-flow's Introduction

Hi there 👋

codemod-proptypes-to-flow's People

Contributors

Stargazers

Watchers

Forkers

codemod-proptypes-to-flow's Issues

Recommend Projects

Recommend Topics

Recommend Org