jsx-sort-props: custom sort order for specific props

[seanblonien]

The sort props rule is fantastic for consistency, but I'm wondering if it's possible to order props besides just alphabetically or by the given booleans in the current rule options.

Use case is with MaterialUI components.

Current behavior sorting alphabetically

<Grid item className={someClass} lg={3} md={4} sm={6} xl={2} xs={12}>
    ...
</Grid>

Desired behavior:

<Grid item xs={12} sm={6} md={4} lg={3} xl={2} className={someClass}>
    ...
</Grid>

The first one is confusing and really hard to scan because it's not in the intuitive order of MUI breakpoints.

lg={3} md={4} sm={6} xl={2} xs={12} when scanning left to right is very hard to parse at a glance, I would have to jump around when reading the props starting at the end, then middle, then left of center, then beginning, and back to the other end to fully understand what the breakpoints are up to

xs={12} sm={6} md={4} lg={3} xl={2}, on the other, I can easily scan and simply see how this a responsive grid with expanding columns as the screen size increases across the breakpoints.

Quite simply, is there a way to enforce left to right ordering for a set of props?

Hopefully I'm missing something, because this type of sorting seems even more common a use case than alphabetical (because how a word sorts usually has nothing to do with the semantic grouping of related props).

[ljharb]

No, there isn't.

If we allowed an arbitrary ordering, it would be very difficult to make it efficiently autofixable, and, it would be incredibly confusing for developers, who'd have to memorize a different "magic spell" ordering for each component.

If MUI wanted breakpoints to be kept together, or ordered, it seems like it'd probably take them as an object rather than as flat props.

[seanblonien]

Hm I see, so the arbitrary ordering would be difficult because you'd have to, worst case, sort the props N^2 times (where N is the custom props you), or what is the concern exactly? Maybe I should just learn ESLint parsing and see why this is for myself...

Regardless, I'll take your point: maybe "ordering" and "sorting" isn't the right idea, but maybe "grouping" is. Would a "grouping" of a set of props in a particular order be possible?

What if we ignore how xs sm md lg xl is placed relative to other props, and just say "if any of these 5 props are present, group them together in this deterministic order." Is that more feasible?

To your other point, MUI 5 does allow for breakpoints to be kept together in a single object ever since they've introduced their sx prop, but, it still seems like the top-level prop passing is a pattern all over their documentation for how to do multi-breakpoint Grids, and MUI 4, which a lot of enterprises are using (my clients included), are using this flat prop pattern.

The problem with saying a single-object prop interface is better than a flat-prop interface is that it sounds like too much of an opinion, and isn't a good enough reason to justify not having a flat-prop grouping option at all (if it's possible). I think we can all have our preference on how React components are built and how its props are exposed, but I thought eslint rules, like this one, exist to purposely allow you to define your own ruleset for how the code is organized, in this case how props are sorted/grouped. Like couldn't this just be another option to the rule, and we leave it up to the consumers of the rule whether or not they implement their single-object prop vs flat-pop components? Seems too dismissive to blame the flat-prop pattern outright

[ljharb]

I'm not saying a single prop is better than a flat one - flat props are usually better! and yes, that would be an opinion.

I'm saying that prop ordering is currently only enforceable alphabetically, as far as I'm aware, so if the designers of that API wanted them sorted, they'd have designed it accordingly.

I can see the feasibility (schema-wise) of providing an option that specified "groups", and any prop in the group would have to match the ordering of the provided group relative to each other (iow, the group wouldn't have any particular sorting, but within the group, it would be sorted). If you want to take a crack at an implementation, please be my guest :-)

[golopot]

I am interested in this features!

Quite simply, is there a way to enforce left to right ordering for a set of props?

The schema can define a partial order like:

'jsx-sort-props': [2, {
  orders: [
    {
      component: "Gird"
      orders: ["xs", "sm", "md", "lg", "xl", "*"], 
    }
  ]
}]

This means the "xs" must be placed before "sm", "md", ..., and any other props.

[quantizor]

It'd be great to be able to simply add a prop or two dynamically to RESERVED_PROPS_LIST. The use case I'm currently trying to make autofixable is for xstyled the text prop is meant to come before other styling props. Just would like a convenient way to make sure it stays at the top of the prop list.