Flow type annotations interfere with Extract Component in normal JS files.

[zfzackfrost]

We are not using Typescript but are using Flow instead. It appears that Glean tries process Flow type annotations that are also valid Typescript. In these cases it displays an error like the following:

unknown node of type "TSTypeCastExpression" with constructor "Node"

For instance, trying to run glean on the following throws code from our web app causes Extract Component to fail:

<React.Fragment key={subcat}>
    <StyledNavLinkSubLevel1 className={classNames({'active': subcatActive})} 
        href="#" 
        onClick={() => this.handleSubCatClick(((subcat: any): UbBlogCitySubCategory))}
    >
        {subCategoriesObj[subcat]}
    </StyledNavLinkSubLevel1>
    <StyledNav tag="nav">
        {links}
    </StyledNav>
</React.Fragment>

However, when the Flow type annotation (inside the onClick binding, if you missed it :smile: ) is taken out, it works as expected. So this code extracts with Glean correctly:

<React.Fragment key={subcat}>
    <StyledNavLinkSubLevel1 className={classNames({'active': subcatActive})} 
        href="#" 
        onClick={() => this.handleSubCatClick(subcat)}
    >
        {subCategoriesObj[subcat]}
    </StyledNavLinkSubLevel1>
    <StyledNav tag="nav">
        {links}
    </StyledNav>
</React.Fragment>

I'm pretty sure this isn't the expected behavior.

-- Zack Frost

[borislit]

@zfzackfrost currently there is no official Flow support. Is that kind of annotation valid for TS?

[zfzackfrost]

@zfzackfrost currently there is no official Flow support. Is that kind of annotation valid for TS?

@borislit Not that exactly. But the the code itself is the same, in terms of characters. I'm not as familiar with Typescript as I am with flow, but I know that this part of the syntax:

(variable: type)

appears in Typescript functions. My hunch is that Glean is trying to parse Typescript annotations, even in normal JS files.