handle nullable prop types correctly

Author: Keyan Zhang

npm-shrinkwrap.json

@@ -21,9 +21,12 @@ var Component = React.createClass({
     ]),
     optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
     optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
+    optionalObjectOfNonOptionalField: React.PropTypes.objectOf(React.PropTypes.number.isRequired),
+    objectOfNonOptionalField: React.PropTypes.objectOf(React.PropTypes.number.isRequired).isRequired,
+    objectOfOptionalField: React.PropTypes.objectOf(React.PropTypes.number).isRequired,
     optionalObjectWithShape: React.PropTypes.shape({
       color: React.PropTypes.string,
-      fontSize: React.PropTypes.number,
+      fontSize: React.PropTypes.number.isRequired,
     }),
     requiredFunc: React.PropTypes.func.isRequired,
     requiredAny: React.PropTypes.any.isRequired,

transforms/__testfixtures__/class-flow1.input.js

@@ -4,22 +4,25 @@ var React = require('react');
 
 class Component extends React.Component {
   props: {
-    optionalArray?: Array<any>,
-    optionalBool?: boolean,
-    optionalFunc?: Function,
-    optionalNumber?: number,
-    optionalObject?: Object,
-    optionalString?: string,
+    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,
+    optionalMessage?: ?Message,
+    optionalEnum?: ?('News' | 'Photos' | 1 | true | null),
+    optionalUnion?: ?(string | number | Message),
+    optionalArrayOf?: ?Array<number>,
+    optionalObjectOf?: ?{[key: string]: ?number,},
+    optionalObjectOfNonOptionalField?: ?{[key: string]: number,},
+    objectOfNonOptionalField: {[key: string]: number,},
+    objectOfOptionalField: {[key: string]: ?number,},
+    optionalObjectWithShape?: ?{
+      color?: ?string,
+      fontSize: number,
     },
     requiredFunc: Function,
     requiredAny: any,
@@ -43,9 +46,12 @@ class Component extends React.Component {
     ]),
     optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
     optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
+    optionalObjectOfNonOptionalField: React.PropTypes.objectOf(React.PropTypes.number.isRequired),
+    objectOfNonOptionalField: React.PropTypes.objectOf(React.PropTypes.number.isRequired).isRequired,
+    objectOfOptionalField: React.PropTypes.objectOf(React.PropTypes.number).isRequired,
     optionalObjectWithShape: React.PropTypes.shape({
       color: React.PropTypes.string,
-      fontSize: React.PropTypes.number,
+      fontSize: React.PropTypes.number.isRequired,
     }),
     requiredFunc: React.PropTypes.func.isRequired,
     requiredAny: React.PropTypes.any.isRequired,

transforms/__testfixtures__/class-flow1.output.js

@@ -22,18 +22,18 @@ class Component extends React.Component {
   props: {
     optionalFuncShortHand?: any,
     optionalNumber?: any,
-    optionalObject?: Object,
+    optionalObject?: ?Object,
     optionalString?: any,
     optionalNode?: any,
     optionalElement?: any,
-    optionalMessage?: Message,
-    optionalEnum?: 'News' | 'Photos' | 1 | true | null,
+    optionalMessage?: ?Message,
+    optionalEnum?: ?('News' | 'Photos' | 1 | true | null),
     optionalUnion?: any,
-    optionalArrayOf?: Array<number>,
-    optionalObjectOf?: {[key: string]: number,},
-    optionalObjectWithShape?: {
-      color?: string,
-      fontSize?: number,
+    optionalArrayOf?: ?Array<number>,
+    optionalObjectOf?: ?{[key: string]: ?number,},
+    optionalObjectWithShape?: ?{
+      color?: ?string,
+      fontSize?: ?number,
     },
     requiredFunc: Function,
     requiredAny: any,

transforms/__testfixtures__/class-flow3.output.js

@@ -9,17 +9,17 @@ const justNeedKeys = {
 
 class Component extends React.Component {
   props: {
-    optionalMessage?: Message,
+    optionalMessage?: ?Message,
     optionalMessageOops?: any,
     optionalEnum?: any,
     optionalEnumOops?: any,
-    optionalUnion?: string | number | Message,
+    optionalUnion?: ?(string | number | Message),
     optionalUnionOops?: any,
     optionalUnionOops2?: any,
-    optionalArrayOf?: Array<number>,
-    optionalObjectOf?: {[key: string]: number,},
-    optionalObjectWithShape?: {
-      color?: string,
+    optionalArrayOf?: ?Array<number>,
+    optionalObjectOf?: ?{[key: string]: ?number,},
+    optionalObjectWithShape?: ?{
+      color?: ?string,
       fontSize?: any,
       name?: any,
     },

transforms/__testfixtures__/class-flow6.output.js

@@ -624,8 +624,14 @@ module.exports = (file, api, options) => {
       type,
       null
     ),
-    objectOf: (type) => j.objectTypeAnnotation([], [
-      j.objectTypeIndexer(j.identifier('key'), j.stringTypeAnnotation(), type)
+    objectOf: (type, isOptional) => j.objectTypeAnnotation([], [
+      j.objectTypeIndexer(
+        j.identifier('key'),
+        j.stringTypeAnnotation(),
+        isOptional && type !== flowAnyType ?
+          j.nullableTypeAnnotation(type) :
+          type
+      )
     ]),
     oneOf: (typeList) => j.unionTypeAnnotation(typeList),
     oneOfType: (typeList) => j.unionTypeAnnotation(typeList),
@@ -677,9 +683,8 @@ module.exports = (file, api, options) => {
         }
         case 'objectOf': {
           const arg = cursor.arguments[0];
-          typeResult = constructor(
-            propTypeToFlowAnnotation(arg)[0]
-          );
+          const [valueType, isOptional] = propTypeToFlowAnnotation(arg);
+          typeResult = constructor(valueType, isOptional);
           break;
         }
         case 'oneOf': {
@@ -715,7 +720,9 @@ module.exports = (file, api, options) => {
               const [valueType, isOptional] = propTypeToFlowAnnotation(typeProp.value);
               flowPropList.push(j.objectTypeProperty(
                 j.identifier(name),
-                valueType,
+                isOptional && valueType !== flowAnyType ?
+                  j.nullableTypeAnnotation(valueType) :
+                  valueType,
                 isOptional
               ));
             });
@@ -751,7 +758,9 @@ module.exports = (file, api, options) => {
       const [valueType, isOptional] = propTypeToFlowAnnotation(typeProp.value);
       typePropertyList.push(j.objectTypeProperty(
         j.identifier(name),
-        valueType,
+        isOptional && valueType !== flowAnyType ?
+          j.nullableTypeAnnotation(valueType) :
+          valueType,
         isOptional
       ));
     });