Styled components false positives (Support curried HOCs)

[jaskp]

Hi, the template-literal form of styled components seems to have been fixed #32, but the object form still causes false positives:

export const Flex = styled('div')({display: 'flex'}) // Warning ❌

We can get halfway there with "customHOCs": ["styled"]

export const Flex = styled('div') // No warning ✅
export const Flex = styled('div')({display: 'flex'}) // Warning ❌

For the purposes of this plugin, I think it would be safe to assume that if you call the result of a "HOC", it should count as a react component.

I believe the correct term for a function like this case of styled is a curried HOC.

[ArnaudBarre]

If you have time, can should check if the alpha works for you?

• npm i eslint-plugin-react-refresh@0.5.0-alpha.0
• Changelog: https://github.com/ArnaudBarre/eslint-plugin-react-refresh/pull/97/files?short_path=06572a9#diff-06572a96a58dc510037d5efa622f9bec8519bc1beab13c9f251e97e657a9d4ed

[jaskp]

If you have time, can should check if the alpha works for you?

• npm i eslint-plugin-react-refresh@0.5.0-alpha.0
• Changelog: https://github.com/ArnaudBarre/eslint-plugin-react-refresh/pull/97/files?short_path=06572a9#diff-06572a96a58dc510037d5efa622f9bec8519bc1beab13c9f251e97e657a9d4ed

0.5.0-alpha.0 works fine with customHOCs, but 0.5.0-alpha.1 seems to be broken with legacy .eslintrc config. Maybe you need to keep the default export?

[ArnaudBarre]

Hum yeah I could keep the old default export untyped to break less people, but I did change the exports formats so I can expose configs as function which provide autocomplete for options

[jaskp]

@ArnaudBarre Why not expose something like this?

export const reactRefresh = {plugin, configs}
export default {
  rules, 
  // Optionally include old non-function configs
  configs: oldConfigs
}

Flat config usage

import {reactRefresh} from 'eslint-plugin-react-refresh'

export default [reactRefresh.configs.vite()]

Legacy config usage

{
 "overrides": [
        {
          "files": ["*.tsx", "*.jsx"],
          "plugins": ["react-refresh"],
          "rules": {"react-refresh/only-export-components": "warn"}
        }
      ]
}

[ArnaudBarre]

Thanks for the suggestion! Done in alpha.2, I will probably make it stable next week!

[jaskp]

@ArnaudBarre Seems like legacy eslint still has problems even with alpha.2, I will try to debug it further.

Btw maybe you shouldn't deprecate the default export, because apparently it has its use even in modern eslint:

If you plan to distribute your plugin as an npm package, make sure that the module that exports the plugin object is the default export of your package. This will enable ESLint to import the plugin when it is specified in the command line in the --plugin option.

(source)

[ArnaudBarre]

Oh thanks for the finding, I dropped the deprecation.

I found the issue for the legacy config, it's because the plugin now ships as ESM. Given how legacy config is not encouraged (need ESLINT_USE_FLAT_CONFIG var env + big verbose warning), I think this is ok. eslint-plugin-unicorn which is very popular ships as ESM, @eslint-react/eslint-plugin too