Make props with infered default types from `.defaultProps` optional?

[magicmark]

Hi! Apologies if this has already been raised, but when we add default types to a component as such:

// @flow

import React from 'react';

type Props = {
    a: string,
    b: string,
};

const Foo = (props: Props) => <div>Hello World! {props.a} {props.b}</div>;

Foo.defaultProps = {
    a: 'foo',
    b: 'bar',
};

export default Foo;

This implies that any props that are in defaultProps are optional.

However react-docgen still sees them as "required": true:

$ node_modules/.bin/react-docgen src/components/Foo/Foo.js | jq .
{
  "description": "",
  "methods": [],
  "props": {
    "a": {
      "flowType": {
        "name": "string"
      },
      "required": true,
      "description": "",
      "defaultValue": {
        "value": "'foo'",
        "computed": false
      }
    },
    "b": {
      "flowType": {
        "name": "string"
      },
      "required": true,
      "description": "",
      "defaultValue": {
        "value": "'bar'",
        "computed": false
      }
    }
  }
}

(using react-docgen@3.0.0-beta8)

Thanks!

[fkling]

How does flow behave when type checking this component? Does it take default props into account?

[magicmark]

@fkling flow (0.56.0) shows the following

$ node_modules/.bin/flow gen-flow-files Foo.js
// @flow

import React from "react";
declare export default function(props: {a: string, b: string}): $Exact<{+key: string | number | null, +props: mixed /* UNEXPECTED TYPE: EvalT */, +ref: any, +type: ElementType}>;

This problem shows up when we show our component on styleguidist (which uses react-docgen): https://i.imgur.com/6u1GrRR.png

[fkling]

OK.... the output doesn't tell me much but I tried it on https://flow.org/try and flow doesn't complain about missing props when they have default values, so yeah, we should mark them as optional.

[adityavohra7]

@fkling, given that the handlers listed here run independently of each other, would it make sense to have a handler that runs last that "combines" the effects on the documentation object produced by all the previous handlers? This handler could be used for things like documentation validation, or "inference" type documentation (ex. if we have a prop which has a defaultProp defined, and its Flow type is a required type, the documentation should reflect that the prop is optional, to be in accordance with Flow's inference).

And on a somewhat related note, what is the expected behavior of react-docgen if, for some reason, a component has both prop type and flow type definitions, and they happen to conflict? The order in which these handlers run would start to matter then right?

[danez]

This was done in #227