Implement functionality equivalent to eslint-plugin-react-refresh

[GunseiKPaseri]

from #3 (reply in thread)

react-refresh

react-refresh is an official package of react that provides bundler with a Fast Refresh feature that allows real-time updates of running React apps.
In addition to react-native, next.js, @vitejs/plugin-react and @parcel/runtime-react-refresh are often used behind the scenes in development environments.
It is a so-called hot reload, but it is characterized by the fact that only edited components can be updated minute by minute while maintaining the state.
For more detailed information, please refer to the documentation of each bundler.

• React Native
• next.js
• Remix
• @vitejs/plugin-react
• Gatsby

eslint-plugin-react-refresh

eslint-plugin-react-refresh is a plugin also linked from @vitejs/plugin-react that defines rules to make react-refresh function properly.

One rule, react-refresh/only-export-components, contains the following

• No simultaneous export of components and non components (in JSX)
  • Components are judged based on whether they are PascalCases or not.
    • also need react/jsx-pascal-case
      • useNamingConvention (See ✅ Linter rules from other sources #3 (comment))
  • allowExportNames option
  • allowConstantExport option
• All-uppercase function export is considered an error when not using direct named export (ex const CMS = () => <></>; export { CMS }
  • Error because the confirmation function does not support it. react-refresh works.
• No export * (in JSX)
  • Error because the confirmation function does not support it.
  • noReExportAll in biome
• No anonymous export (in JSX)
  • Anonymous functions are not supported and the value of such states will disappear on update.
    • Reference: Hot Module Replacement | Remix
  • like import/no-anonymous-default-export
  • Worst case scenario, noDefaultExport can be substituted.
• No unexported components (in JSX)

In addition, the following, although not implemented, would be nice to have

• no Class Components
  • like eslint-plugin-react-prefer-function-component

I would like your input on implementing these in Biome.

• Do similar rules exist inside or outside of Biome?
• Can it be more abstract?
• What should naming be like? I'm not good at English😖.

[heyitsarpit]

this is the one plugin blocking me from updating everything to biome right now.

[kikoane]

how do you handle css-in-js ?

[gvillo]

is there an issue ticket for this? it would be awesome to add this

[ematipico]

We don't add tickets unless there's people interested in doing the work, or the maintainers and core contributors can do the work

[GunseiKPaseri]

@ematipico Can I try it?

[ematipico]

Of course! Please create an issue (task) and assign it to you. Feel free to leave any questions in the issue

[GunseiKPaseri]

Thanks! #3560

[GunseiKPaseri]

#3560 has been merged and published!
https://github.com/biomejs/biome/releases/tag/cli%2Fv1.9.2