Point/highlight the caller with jsx/react

[0x00G]

Using react with jsx, when props type are provided to a component(stateless or class base) and that component is called somewhere else, flow-for-vscode successfully highlights source component props, but not the caller.

Running flow on terminal both highlights the caller and source.

Consider this example:

// app.js

import React from 'react'

type AppProps = { syntax: string, framework: string }

export default (props: AppProps) => { // Highlights/draws AppProps
  const { syntax, framework } = props

  return <div>Hello! from { framework } with { syntax }</div>
}

// index.js

import React    from 'react'
import ReactDOM from 'react-dom'

import App from './components/app'

ReactDOM.render(
  <App framework="react" />, // Does not highlight/draw
  document.getElementById('app'),
)

// running $ flow
// =>
  8:   <App framework="react" />,
       ^^^^^^^^^^^^^^^^^^^^^^^^^ React element `App`
  8: export default (props: AppProps) => {
                            ^^^^^^^^ property `syntax`. Property not found in. See: src/components/app.js:8
  8:   <App framework="react" />,
       ^^^^^^^^^^^^^^^^^^^^^^^^^ props of React element `App`

I think it would be better and preferable to highlight caller side, since most of the time problem is initiated on the caller.

[orta]

Aye, this is similar to #48 and #39 / #47

The crux being that the results we get back from flow may need massaging in some sort, because vscode only allows single-site errors. There's more details in the other issues.

[Mayank1791989]

Vscode now supports multi-error diagnostics. So it will work now. Try v1.1.0.