WIP flow transformation; switched parser to Flow

Keyan Zhang · Keyan Zhang · commit 5f7b1b2fa6c4 · 2016-06-22T22:06:54.000-07:00
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "jscodeshift": "^0.3.24",
+    "jscodeshift": "^0.3.25",
     "babel-eslint": "^6.0.5",
     "babel-plugin-transform-object-rest-spread": "^6.6.5",
     "babel-preset-es2015": "^6.6.0",
diff --git a/transforms/__testfixtures__/class-proptypes.input.js b/transforms/__testfixtures__/class-proptypes.input.js
@@ -0,0 +1,37 @@
+/* @flow */
+
+var React = require('react');
+
+var Component = React.createClass({
+  propTypes: {
+    optionalArray: React.PropTypes.array,
+    optionalBool: React.PropTypes.bool,
+    optionalFunc: React.PropTypes.func,
+    optionalNumber: React.PropTypes.number,
+    optionalObject: React.PropTypes.object,
+    optionalString: React.PropTypes.string,
+    optionalNode: React.PropTypes.node,
+    optionalElement: React.PropTypes.element,
+    optionalMessage: React.PropTypes.instanceOf(Message),
+    optionalEnum: React.PropTypes.oneOf(['News', 'Photos', 1, true, null]),
+    optionalUnion: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number,
+      React.PropTypes.instanceOf(Message),
+    ]),
+    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
+    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
+    optionalObjectWithShape: React.PropTypes.shape({
+      color: React.PropTypes.string,
+      fontSize: React.PropTypes.number,
+    }),
+    requiredFunc: React.PropTypes.func.isRequired,
+    requiredAny: React.PropTypes.any.isRequired,
+  },
+
+  render: function() {
+    return (
+      <div>type safety</div>
+    );
+  },
+});
diff --git a/transforms/__testfixtures__/class-proptypes.output.js b/transforms/__testfixtures__/class-proptypes.output.js
@@ -0,0 +1,56 @@
+/* @flow */
+
+var React = require('react');
+
+class Component extends React.Component {
+  props: {
+    optionalArray?: Array<any>,
+    optionalBool?: boolean,
+    optionalFunc?: Function,
+    optionalNumber?: number,
+    optionalObject?: Object,
+    optionalString?: string,
+    optionalNode?: any,
+    optionalElement?: any,
+    optionalMessage?: Message,
+    optionalEnum?: 'News' | 'Photos' | 1 | true | null,
+    optionalUnion?: string | number | Message,
+    optionalArrayOf?: Array<number>,
+    optionalObjectOf?: {[key: string]: number},
+    optionalObjectWithShape?: {color: string, fontSize: number},
+    requiredFunc: Function,
+    requiredAny: any,
+  };
+
+  static propTypes = {
+    optionalArray: React.PropTypes.array,
+    optionalBool: React.PropTypes.bool,
+    optionalFunc: React.PropTypes.func,
+    optionalNumber: React.PropTypes.number,
+    optionalObject: React.PropTypes.object,
+    optionalString: React.PropTypes.string,
+    optionalNode: React.PropTypes.node,
+    optionalElement: React.PropTypes.element,
+    optionalMessage: React.PropTypes.instanceOf(Message),
+    optionalEnum: React.PropTypes.oneOf(['News', 'Photos', 1, true, null]),
+    optionalUnion: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number,
+      React.PropTypes.instanceOf(Message),
+    ]),
+    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
+    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
+    optionalObjectWithShape: React.PropTypes.shape({
+      color: React.PropTypes.string,
+      fontSize: React.PropTypes.number,
+    }),
+    requiredFunc: React.PropTypes.func.isRequired,
+    requiredAny: React.PropTypes.any.isRequired,
+  };
+
+  render() {
+    return (
+      <div>type safety</div>
+    );
+  }
+}
diff --git a/transforms/__testfixtures__/class.input.js b/transforms/__testfixtures__/class.input.js
@@ -11,6 +11,7 @@ var MyComponent2 = React.createClass({
     return {a: 1};
   },
   foo: function(): void {
+    const x = (a: Object, b: string): void => {}; // This code cannot be parsed by Babel v5
     pass(this.foo);
     this.forceUpdate();
   },
diff --git a/transforms/__testfixtures__/class.output.js b/transforms/__testfixtures__/class.output.js
@@ -10,6 +10,7 @@ class MyComponent2 extends React.Component {
   static defaultProps = {a: 1};
 
   foo = (): void => {
+    const x = (a: Object, b: string): void => {}; // This code cannot be parsed by Babel v5
     pass(this.foo);
     this.forceUpdate();
   };
diff --git a/transforms/__tests__/class-test.js b/transforms/__tests__/class-test.js
@@ -21,5 +21,6 @@ defineTest(__dirname, 'class', pureMixinAlternativeOption, 'class-test2');
 defineTest(__dirname, 'class', null, 'export-default-class');
 defineTest(__dirname, 'class', pureMixinAlternativeOption, 'class-pure-mixin1');
 defineTest(__dirname, 'class', null, 'class-pure-mixin2');
-defineTest(__dirname, 'class', null, 'class-property-field');
 defineTest(__dirname, 'class', null, 'class-initial-state');
+defineTest(__dirname, 'class', null, 'class-property-field');
+defineTest(__dirname, 'class', { flow: true }, 'class-proptypes');
diff --git a/transforms/class.js b/transforms/class.js
@@ -93,7 +93,7 @@ module.exports = (file, api, options) => {
         !filterDefaultPropsField(prop) &&
         !filterGetInitialStateField(prop) &&
         !isFunctionExpression(prop) &&
-        !isPrimExpression(prop) &&
+        !isPrimProperty(prop) &&
         MIXIN_KEY != prop.key.name
       )
     ));
@@ -154,16 +154,19 @@ module.exports = (file, api, options) => {
     node.value.type === 'FunctionExpression'
   );
 
-  const isPrimExpression = node => (
-    node.key &&
-    node.key.type === 'Identifier' &&
-    node.value && (
-      node.value.type === 'Literal' || ( // TODO this might change in babylon v6
-        node.value.type === 'Identifier' &&
-        node.value.name === 'undefined'
-    ))
+  const isPrimProperty = prop => (
+    prop.key &&
+    prop.key.type === 'Identifier' &&
+    prop.value &&
+    isPrimExpression(prop.value)
   );
 
+  const isPrimExpression = node => (
+    node.type === 'Literal' || ( // TODO this might change in babylon v6
+      node.type === 'Identifier' &&
+      node.name === 'undefined'
+  ));
+
   // Collects `childContextTypes`, `contextTypes`, `displayName`, and `propTypes`;
   // simplifies `getDefaultProps` or converts it to an IIFE;
   // and collects everything else in the `statics` property object.
@@ -188,7 +191,7 @@ module.exports = (file, api, options) => {
     .filter(prop =>
       !(filterDefaultPropsField(prop) || filterGetInitialStateField(prop))
     )
-    .filter(prop => isFunctionExpression(prop) || isPrimExpression(prop));
+    .filter(prop => isFunctionExpression(prop) || isPrimProperty(prop));
 
   const findRequirePathAndBinding = (moduleName) => {
     let result = null;
@@ -211,7 +214,7 @@ module.exports = (file, api, options) => {
       importStatement.forEach(path => {
         result = {
           path,
-          binding: path.value.specifiers[0].local.name,
+          binding: path.value.specifiers[0].id.name,
         };
       });
     } else if (requireStatement.size()) {
@@ -391,6 +394,169 @@ module.exports = (file, api, options) => {
       false
     ), prop);
 
+  // ---------------------------------------------------------------------------
+  // Flow!
+
+  const flowAnyType = j.anyTypeAnnotation();
+
+  const literalToFlowType = node => {
+    switch (typeof node.value) {
+      case 'string':
+        return j.stringLiteralTypeAnnotation(node.value, node.raw);
+      case 'number':
+        return j.numberLiteralTypeAnnotation(node.value, node.raw);
+      case 'boolean':
+        return j.booleanLiteralTypeAnnotation(node.value, node.raw);
+      case 'object':
+        return j.nullLiteralTypeAnnotation();
+      default:
+        return flowAnyType; // meh
+    }
+  };
+
+  const propTypeToFlowMapping = {
+    // prim types
+    any: flowAnyType,
+    array: j.genericTypeAnnotation(
+      j.identifier('Array'),
+      j.typeParameterInstantiation([flowAnyType])
+    ),
+    bool: j.booleanTypeAnnotation(),
+    element: flowAnyType,
+    func: j.genericTypeAnnotation(
+      j.identifier('Function'),
+      null
+    ),
+    node: flowAnyType,
+    number: j.numberTypeAnnotation(),
+    object: j.genericTypeAnnotation(
+      j.identifier('Object'),
+      null
+    ),
+    string: j.stringTypeAnnotation(),
+
+    // type classes
+    arrayOf: (type) => j.genericTypeAnnotation(
+      j.identifier('Array'),
+      j.typeParameterInstantiation([type])
+    ),
+    instanceOf: (type) => j.genericTypeAnnotation(
+      type,
+      null
+    ),
+    objectOf: (type) => j.objectTypeAnnotation(
+      [],
+      [j.objectTypeIndexer(j.identifier('key'), j.stringTypeAnnotation(), type)],
+      []
+    ),
+    oneOf: (typeList) => j.unionTypeAnnotation(typeList),
+    oneOfType: (typeList) => j.unionTypeAnnotation(typeList),
+  };
+
+  const propTypeToFlowAnnotation = val => {
+    let cursor = val;
+    let isOptional = true;
+    let typeResult = flowAnyType;
+
+    if (
+      cursor.type === 'MemberExpression' &&
+      cursor.property.type === 'Identifier' &&
+      cursor.property.name === 'isRequired'
+    ) {
+      isOptional = false;
+      cursor = cursor.object;
+    }
+
+    if (
+      cursor.type === 'CallExpression'
+    ) {
+      switch (cursor.callee.property.name) {
+        case 'arrayOf': {
+          const arg = cursor.arguments[0];
+          const constructor = propTypeToFlowMapping['arrayOf'];
+          typeResult = constructor(
+            propTypeToFlowAnnotation(arg)[0]
+          );
+          break;
+        }
+        case 'instanceOf': {
+          const arg = cursor.arguments[0];
+          if (arg.type !== 'Identifier') {
+            typeResult = flowAnyType;
+            break;
+          }
+
+          const constructor = propTypeToFlowMapping['instanceOf'];
+          typeResult = constructor(arg);
+          break;
+        }
+        case 'objectOf': {
+          const arg = cursor.arguments[0];
+          const constructor = propTypeToFlowMapping['objectOf'];
+          typeResult = constructor(
+            propTypeToFlowAnnotation(arg)[0]
+          );
+          break;
+        }
+        case 'oneOf': {
+          const argList = cursor.arguments[0].elements;
+          if (!argList.every(node => node.type === 'Literal')) {
+            typeResult = flowAnyType;
+            break;
+          }
+          const constructor = propTypeToFlowMapping['oneOf'];
+          typeResult = constructor(
+            argList.map(literalToFlowType)
+          );
+          break;
+        }
+        case 'oneOfType': {
+          const argList = cursor.arguments[0].elements;
+          const constructor = propTypeToFlowMapping['oneOfType'];
+          typeResult = constructor(
+            argList.map(arg => propTypeToFlowAnnotation(arg)[0])
+          );
+          break;
+        }
+        case 'shape': { // TODO
+
+        }
+      }
+    } else if (
+      cursor.type === 'MemberExpression' &&
+      cursor.property.type === 'Identifier'
+    ) {
+      typeResult = propTypeToFlowMapping[cursor.property.name] || flowAnyType;
+    }
+
+    return [typeResult, isOptional];
+  };
+
+  const createFlowAnnotationsFromPropTypesProperties = (prop) => {
+    const typeProperty = [];
+
+    if (!prop) {
+      return typeProperty;
+    }
+
+    prop.value.properties.forEach(typeProp => {
+      const name = typeProp.key.name;
+      const [valueType, isOptional] = propTypeToFlowAnnotation(typeProp.value);
+      typeProperty.push(j.objectTypeProperty(
+        j.identifier(name),
+        valueType,
+        isOptional
+      ));
+    });
+
+    return j.classProperty(
+      j.identifier('props'),
+      null,
+      j.typeAnnotation(j.objectTypeAnnotation(typeProperty)),
+      false
+    );
+  };
+
   // if there's no `getInitialState` or the `getInitialState` function is simple
   // (i.e., it's just a return statement) then we don't need a constructor.
   // we can simply lift `state = {...}` as a property initializer.
@@ -428,7 +594,7 @@ module.exports = (file, api, options) => {
     }
 
     const propertiesAndMethods = rawProperties.map(prop => {
-      if (isPrimExpression(prop)) {
+      if (isPrimProperty(prop)) {
         return createClassProperty(prop);
       } else if (AUTOBIND_IGNORE_KEYS[prop.key.name]) {
         return createMethodDefinition(prop);
@@ -437,10 +603,17 @@ module.exports = (file, api, options) => {
       return createArrowProperty(prop);
     });
 
+    const flowPropsAnnotation = options['flow'] ?
+      createFlowAnnotationsFromPropTypesProperties(
+        staticProperties.find((path) => path.key.name === 'propTypes')
+      ) :
+      [];
+
     return withComments(j.classDeclaration(
       name ? j.identifier(name) : null,
       j.classBody(
         [].concat(
+          flowPropsAnnotation,
           staticProperties,
           maybeConstructor,
           initialStateProperty,
@@ -516,7 +689,7 @@ module.exports = (file, api, options) => {
     // Ignore import bindings
     .filter(identifierPath => !(
       path.value.type === 'ImportDeclaration' &&
-      path.value.specifiers.some(specifier => specifier.local === identifierPath.value)
+      path.value.specifiers.some(specifier => specifier.id === identifierPath.value)
     ))
     // Ignore properties in MemberExpressions
     .filter(identifierPath => {
@@ -618,3 +791,5 @@ module.exports = (file, api, options) => {
 
   return null;
 };
+
+module.exports.parser = 'flow';
diff --git a/transforms/utils/ReactUtils.js b/transforms/utils/ReactUtils.js
