billyvg / codemod-proptypes-to-flow Goto Github PK
View Code? Open in Web Editor NEWRemoves React.PropTypes and attempts to transform to flowtypes
License: MIT License
Removes React.PropTypes and attempts to transform to flowtypes
License: MIT License
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;
Before running codemod
const inverse = props => ()
After running coded
const Inverse = props: Props => ()
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.
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.
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(?).
Right now this has to be removed manually.
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?
Right now PropTypes.node gets converted to string | null | React.Element | ...
. Using React.Node
would result in cleaner output.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.