ArnaudBarre / eslint-plugin-react-refresh

Validate that your components can safely be updated with Fast Refresh
MIT License
219 stars 15 forks source link

Add `createContextMethods` option #55

Open SeokminHong opened 1 month ago

SeokminHong commented 1 month ago

This allows users to specify custom context-creating methods, in addition to the default createContext from React.

{
  "rules": {
    "react-refresh/only-export-components": ["error", {
      "createContextMethods": ["createMyContext"]
    }]
  }
}
import { createMyContext } from './utils';

export const MyComponent = () => <div />;
// error
export const MyContext = createMyContext();

Related: #54

SeokminHong commented 3 weeks ago

I'm open to this option! What is your reason to wrap the createContext method?

Sorry for late response 🙏

One use case for this is Radix UI, which uses a custom createContext method to prevent useContext from being called outside its intended scope.

https://github.com/radix-ui/primitives/blob/74b182b401c8ca0fa5b66a5a9a47f507bb3d5adc/packages/react/context/src/createContext.tsx

My team also uses similar methods, so I'd like to allow contexts created using these approaches.

ArnaudBarre commented 3 weeks ago

Thanks for the update.

I'm still unsure on how this pattern from Radix impact source code in project that use it. Do you have an example? (I've not used Radix yet).

So you also have files that have factories that create the useContext and Provider together? I'm a bit afraid that this leads to bad HMR experience. Can you provide a small example like what a simple UserContext would look like?