Enhance jsx-sort-props to allow for non-alphabetically sorted groupings

Is there any interest in including a rule like the following in this plugin?

https://github.com/ericmatthys/eslint-plugin-jsx-grouped-sort-props

This is a rule that allows sorting of jsx props in groups without requiring an alphabetical sort. My motivation was wanting specific props sorted first (e.g. key and ref), then all other non-callback props in any order, then all callback props in any order at the end. The rule allows specific prop names in an array or various pre-configured groups (e.g. html, reserved, callback). If there is a spread, it validates the prop order before and after the spread independently. For the use case above, the configuration would look like:

[
  'key',
  'ref',
  { group: 'other' },
  { group: 'callback' }
]

Valid:

<Button
  ref="btn"
  isLoading={true}
  onClick={onClick}
/>

<Button
  ref="btn"
  onClick={onClick}
  {...props}
  isLoading={true}
/>

Invalid:

<Button
  isLoading={true}
  ref="btn"
  onClick={onClick}
/>

<Button
  ref="btn"
  onClick={onClick}
  isLoading={true}
/>

<Button
  ref="btn"
  {...props}
  onClick={onClick}
  isLoading={true}
/>

[Daniel15]

Sounds like an enhanced version of jsx-sort-props. There’s already a callbacksLast configuration option.

[ljharb]

I’ve rethought my opinion here.

While this would be a possible (feasible) option on jsx-sort-props, I think it would not be a good idea. Enforcing a magic, arbitrary sorting of props that isn’t based on something you can see by looking directly at the prop names would be incredibly confusing, and relying on the autofixer to understand what the “right” thing doesn’t remove that problem.

I think that it’s best that props either be unordered, or, ordered by simple-to-understand rules and categories, which currently include “reserved by react” props like key and ref etc, “alphabetical”, “boolean shorthand”, and “callbacks”. Arguably, this is already too complex.

I’m going to close this for now.