Flow Types

[philholden]

I have moved over to using Flow types rather than PropTypes. I had a go at using this with Ecology and was surprised to find it worked pretty well my first attempt:

type DropDownBoxPropType = {
  /**
   * Some text
   * @examples 'Hello'
   */
  text: string
}

const DropDownBoxPropType = (text: string) => <div>{text}</div>

Sadly it broke with children:

type DropDownBoxPropType = {
  /**
   * What to do when a user clicks outside DropdownBox
   * @examples () => this.setState({closed: true})
   */
  onClickOutside: () => void,
  /**
   * is the DropdownBox open
   * @examples true, false
   */
  open: boolean,
  /**
   * Contents of DropdownBox
   * @examples <DropdownBox>Hello</Dropdownbox>
   */
  children: React.Element<*>,
}

location.js:24Uncaught SyntaxError: Unexpected token (20:26)
    at r.o.raise (location.js:24)
    at r.u.unexpected (util.js:82)
    at r.o.flowParsePrimaryType (flow.js:552)
    at r.o.flowParsePostfixType (flow.js:557)
    at r.o.flowParsePrefixType (flow.js:573)
    at r.o.flowParseIntersectionType (flow.js:579)
    at r.o.flowParseUnionType (flow.js:589)
    at r.o.flowParseType (flow.js:600)
    at r.o.flowParseTypeParameterInstantiation (flow.js:217)
    at r.o.flowParseGenericType (flow.js:364)

Seems to be an issue for this in react-docgen so I hope it is fixed soon: https://github.com/reactjs/react-docgen/issues/125

The other thing is that propTypes are not showing in the docs, this is because they are in flowType rather than the type prop of the output of docgen. As a hack I just preprocessed the docgen output (before passing to Ecology) and copied the flowType value across to type if type was undefined:

const mapFlowTypes = (doc) => {
  Object.keys(doc.props).forEach(key => {
    if (!doc.props[key].type && doc.props[key].flowType) {
      doc.props[key].type = doc.props[key].flowType
    }
  })
  return doc
}

This worked for the component I was working on but probably not very robust. But it looks like it may not be lots of work to add flowType support. But one thing is sure that because react-docgen has moved forward so much Ecology can do more than the docs claim e.g. handel function components.