diff --git a/README.md b/README.md index f9561dd..6e211ec 100644 --- a/README.md +++ b/README.md @@ -1,49 +1,8 @@ -# codemod-proptypes-to-flow [![Build Status](https://travis-ci.org/billyvg/codemod-proptypes-to-flow.svg?branch=master)](https://travis-ci.org/billyvg/codemod-proptypes-to-flow) [![codecov](https://codecov.io/gh/billyvg/codemod-proptypes-to-flow/branch/master/graph/badge.svg)](https://codecov.io/gh/billyvg/codemod-proptypes-to-flow) - Removes `React.PropTypes` and attempts to transform to [Flow](http://flow.org/). -### Setup & Run - * `npm install -g jscodeshift` - * `git clone https://github.com/billyvg/codemod-proptypes-to-flow` - * `jscodeshift -t codemod-proptypes-to-flow/src/index.js ` - * Use the `-d` option for a dry-run and use `-p` to print the output - for comparison - -#### Options -Behavior of this codemod can be customized by passing options to jscodeshift e.g.: -``` -jscodeshift -t codemod-proptypes-to-flow/src/index.js --flowComment=line -``` - -Following options are accepted: - -##### flowComment -`--flowComment=` - type of flow comment. Defaults to `block`. - -``` ---flowComment=block: /* @flow */ ---flowComment=line: // @flow -``` +Modified for compatability with Oscar style. -##### propsTypeSuffix -`--propsTypeSuffix=` - used to customize the type names generated by the codemod. Provided string will be used alone or appended to Component's name when defining props type. Defaults to `Props`. - -Default: -``` -type Props = {...} -type MyComponentProps = {...} -``` - -With `--propsTypeSuffix=PropsType`: -``` -type PropsType = {...} -type MyComponentPropsType = {...} -``` - -### Not working/Implemented yet - * Custom validators - * `React.createClass` - * Use of importing PropTypes - -### Contributors - * Thanks to [@skovhus](https://github.com/skovhus) for adding support for functional components and modernizing the codebase a bit (a lot) +### Setup & Run + * `npm install -g jscodeshift@0.3.30` (matches package.json in data/) + * `git clone https://github.com/johnmanong/codemod-proptypes-to-flow` + * `jscodeshift -t codemod-proptypes-to-flow/src/index.js --extensions js,jsx ` diff --git a/src/helpers/annotateConstructor.js b/src/helpers/annotateConstructor.js index 81f066a..ab2bb91 100644 --- a/src/helpers/annotateConstructor.js +++ b/src/helpers/annotateConstructor.js @@ -4,16 +4,14 @@ * @param {jscodeshiftApi} j jscodeshift API * @param {Array} body Array of `Node` */ -export default function annotateConstructor(j, body, name = 'Props') { - let constructorIndex; - const typeAnnotation = j.typeAnnotation( - j.genericTypeAnnotation(j.identifier(name), null) - ); +export default function annotateConstructor(j, classNode, name = 'Props') { + const body = classNode.value.body && classNode.value.body.body; + const genericTypeAnnotation = j.genericTypeAnnotation(j.identifier(name), null) + const typeAnnotation = j.typeAnnotation(genericTypeAnnotation); + // Add props to constructor if present body.some((b, i) => { if (b.kind === 'constructor') { - constructorIndex = i + 1; - // first parameter is always props regardless of name if (b.value.params && b.value.params.length) { b.value.params[0].typeAnnotation = typeAnnotation; @@ -22,9 +20,8 @@ export default function annotateConstructor(j, body, name = 'Props') { } }); - body.splice( - constructorIndex, - 0, - j.classProperty(j.identifier('props'), null, typeAnnotation) - ); + // Add type annotation to class + if (classNode.value.superClass && !classNode.value.superTypeParameters) { + classNode.value.superTypeParameters = j.typeParameterInstantiation([genericTypeAnnotation]); + } } diff --git a/src/index.js b/src/index.js index 065f509..3ab4479 100644 --- a/src/index.js +++ b/src/index.js @@ -11,13 +11,13 @@ function addFlowComment(j, ast, options) { if (!containsFlowComment) { switch (options.flowComment) { - case 'line': - comments.unshift(j.commentLine(' @flow')); - break; case 'block': - default: comments.unshift(j.commentBlock(' @flow ')); break; + case 'line': + default: + comments.unshift(j.commentLine(' @flow')); + break; } } @@ -37,7 +37,7 @@ export default function transformer(file, api, rawOptions) { console.warn('Supported options are "block" and "line".'); console.warn('Falling back to default: "block".'); } - options.flowComment = 'block'; + options.flowComment = 'line'; } if (!options.propsTypeSuffix) { options.propsTypeSuffix = 'Props'; diff --git a/src/transformers/es6Classes.js b/src/transformers/es6Classes.js index 0a2a9f3..b4f28a0 100644 --- a/src/transformers/es6Classes.js +++ b/src/transformers/es6Classes.js @@ -49,7 +49,7 @@ export default function transformEs6Classes(ast, j, options) { return; } - annotateConstructor(j, classBody, propIdentifier); + annotateConstructor(j, p, propIdentifier); const index = findIndex(classBody, isStaticPropType); if (typeof index !== 'undefined') { const classProperty = classBody.splice(index, 1).pop();