[Feature] Option to Tag all functions with a displayName even if they aren't TypeScript-annotated

[fbartho]

Currently, it looks like this plugin/transform only looks to see if the function is defined with a type-annotation

const ThisComponentWorks: FunctionComponent = (props:any) => <React.Fragment/>;

const ThisComponentDoesNotWork = (props:any) => <React.Fragment/>;

It would be awesome if I could add a configuration option to this babel plugin:

{
  "addDisplayNameToLooseFunctionsInPathsMatching": [
     "^src/*",
  ]
}

(I'm open to suggestions about the name of the option / how we configure this option)

We could make it stricter by saying the file must import React for this path matching to be enabled? -- Also we could declare that this feature only applies to "top-level" function definitions?

Some further config options that we could add with this feature.

mustImportReact: false | true (default: false),
topLevelOnly: false | true (default: false)

-- Basically, the plugin as currently written is "strict" that a functional component must be annotated via TypeScript -- We do use TypeScript but we don't require our Functional Components be annotated in this way in our codebase.

Any thoughts?

[donaldpipowitch]

I'd like to keep the "strict" mode as you call it the default one. I think it's a good practice and helps a lot of other tools as well and also the code completion:

But I can imagine it not for everyone. If you can come up with a merge request to provide such a functionality, I'm happy to add this.

What about this API:

{
  // this is the current behavior and would still be the default
  smartNaming?: false;

  // if true, it will treat every
  // - top level function
  // - written with a capital character at the start
  // - in a file which imports React
  // as a functional component
  smartNaming: true;

  // if needed in a future iteration one could customize this further
  smartNaming: {
    // with that any top level function written with a capital character at the start
    // would be treated as a functional component
    optionalReactImport: true;
  }
}

[fbartho]

This proposal seems pretty good! All my use-cases are captured in your suggestion.