Skip to content

[DevTools] Support Flow syntax for named hooks parsing #21793

Closed
#21815
Closed
[DevTools] Support Flow syntax for named hooks parsing#21793
#21815
Assignees
bvaughn
Labels
Component: Developer Tools

Description

@bvaughn
bvaughn
opened on Jul 2, 2021

DevTools tells Babel to parse the source code using "jsx" and "typescript" plug-ins:
https://github.com/facebook/react/blob/ed6c091fe961a3b95e956ebcefe8f152177b1fb7/packages/react-devtools-extensions/src/parseHookNames.js#L446-L462

This will work for some simple usages of Flow, but syntax may diverge and cause the parsing to fail.

Let's scan the source code for a @flow pragma and pass "flow" instead of "typescript" if one is found.

We should also add tests for both Flow and TypeScript to the test component pool:
https://github.com/facebook/react/tree/main/packages/react-devtools-extensions/src/__tests__/__source__

Activity

  1. bvaughn
    added
    Component: Developer Tools
    on Jul 2, 2021

  2. bvaughn commented on Jul 7, 2021

    @bvaughn
    bvaughn
    on Jul 7, 2021
    ContributorAuthor

    I think something as basic as this should work:

    function getBabelPluginsList(originalSourceCode: string): Array<string> {
  const plugin = originalSourceCode.indexOf('@flow') > 0 ? 'flow' : 'typescript';
  return ['jsx', plugin];
}
  3. bvaughn
    self-assigned this
    on Jul 7, 2021
  4. bvaughn
    closed this as completedin #21815on Jul 7, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Component: Developer Tools

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions