jsx-control-statements

jsx-control-statements copied to clipboard

Just making this to keep track of it, I don't have a complete solution at this stage.

FlowType doesn't like JSX-Control-Statements in two ways - the first is that we're effectively using global types which is easily fixed with a type declaration:

// @flow

type ForType = ReactClass<{each: string, index: string, of: any}>;

declare var For: ForType;

But the problem is the "each" and "index" of the For won't be known to FlowType and it'll not only fail, but also not support type checking which sucks.

Best I have so far is to just declare those variables in the render function with the right type.

Have added flow types to the build, which fixes like 2/3 of this but doesn't quite get us all the way :(.

Without Flowtype support, jsx-control-statements is useless in a project that uses Flowtype, e.g.

<If condition={movie}>
  <div>{movie.name}</div>
</If>

(where movie can null) movie.name will always trigger Flow error.

I am not sure if it possible to solve this in Flowtype.

@AlexGilleran Can we do something to teach flow what If control statement does?

I'm open to suggestions :(.

I opened an issue with a question in flow repo: https://github.com/facebook/flow/issues/4057

@AlexGilleran @apsavin Has there been any progress on this?

Not in a way that helps us:

Flow understands javascript and jsx semantics. This plugin changes it, so the code is not compatible with flow anymore

Which is fair enough, but also :(.

Although maybe https://github.com/facebook/flow/issues/1515 can save us eventually.