[New] jsx-sort-props: add customPropsFirst to support custom props list for sorting#3853
[New] jsx-sort-props: add customPropsFirst to support custom props list for sorting#3853saimonkat wants to merge 1 commit intojsx-eslint:masterfrom
jsx-sort-props: add customPropsFirst to support custom props list for sorting#3853Conversation
…s list for sorting
ljharb
left a comment
There was a problem hiding this comment.
looks pretty solid for a first start :-)
let's be sure to duplicate a number of the examples that cover the permutations of sort ordering, showing that with a custom props list (of similar examples), the ordering is enforced within that group as well.
|
|
||
| This can only be an array option. | ||
|
|
||
| When `customPropsFirst` is defined, the specified custom props must be listed before all other props, but still respecting the alphabetical order: |
There was a problem hiding this comment.
| When `customPropsFirst` is defined, the specified custom props must be listed before all other props, but still respecting the alphabetical order: | |
| When `customPropsFirst` is defined, the specified custom props must be listed before all other props, but still respecting the configured order within the set of custom props: |
| <Hello className="flex" theme="light" name="John" /> | ||
| ``` | ||
|
|
||
| If both `reservedFirst` and `customPropsFirst` are defined, reserved props are listed first, followed by custom props, and then all other props, but still respecting the alphabetical order: |
There was a problem hiding this comment.
| If both `reservedFirst` and `customPropsFirst` are defined, reserved props are listed first, followed by custom props, and then all other props, but still respecting the alphabetical order: | |
| If both `reservedFirst` and `customPropsFirst` are defined, reserved props are listed first, followed by custom props, and then all other props, but still respecting the configured order within each of those three groups: |
| customPropsFirst: { | ||
| type: ['array', 'boolean'], | ||
| }, |
There was a problem hiding this comment.
true probably shouldn't be an allowed value here - also, the array should be limited to a unique list of strings.
| customPropsFirst: { | |
| type: ['array', 'boolean'], | |
| }, | |
| customPropsFirst: { | |
| oneOf: [ | |
| { | |
| type: 'array', | |
| uniqueItems: true, | |
| items: { type: 'string' }, | |
| }, | |
| { | |
| type: 'boolean', | |
| enum: [false], | |
| }, | |
| ], | |
| }, |
| /** | ||
| * Checks if the `customPropsFirst` option is valid | ||
| * @param {Object} context The context of the rule | ||
| * @param {boolean | string[]} customPropsFirst The `customPropsFirst` option | ||
| * @return {Function | undefined} If an error is detected, a function to generate the error message, otherwise, `undefined` | ||
| */ | ||
| // eslint-disable-next-line consistent-return | ||
| function validateCustomPropsFirstConfig(context, customPropsFirst) { | ||
| if (customPropsFirst) { | ||
| if (Array.isArray(customPropsFirst)) { | ||
| if (customPropsFirst.length === 0) { | ||
| return function Report(decl) { | ||
| report(context, messages.customPropsListIsEmpty, 'customPropsListIsEmpty', { | ||
| node: decl, | ||
| }); | ||
| }; | ||
| } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
this should be handled by the schema, not by the plugin, and can be removed. (also an empty list is fine)
| const customPropsFirst = configuration.customPropsFirst || false; | ||
| const customPropsFirstError = validateCustomPropsFirstConfig(context, customPropsFirst); | ||
| const customPropsList = Array.isArray(customPropsFirst) ? customPropsFirst : []; |
There was a problem hiding this comment.
| const customPropsFirst = configuration.customPropsFirst || false; | |
| const customPropsFirstError = validateCustomPropsFirstConfig(context, customPropsFirst); | |
| const customPropsList = Array.isArray(customPropsFirst) ? customPropsFirst : []; | |
| const customPropsList = configuration.customPropsFirst; |
no need to even ensure it's an array
| if (customPropsFirstError) { | ||
| customPropsFirstError(decl); | ||
| return memo; | ||
| } | ||
|
|
There was a problem hiding this comment.
| if (customPropsFirstError) { | |
| customPropsFirstError(decl); | |
| return memo; | |
| } |
|
Wow @ljharb thank you for such a prompt review and moving forward with my PR, appreciate it I'll get back here soon with resolving your comments and updating tests |
|
This is a feature I really need! |
Hi @oraclian94, thank you for highlighting it! |
This PR brings a new
customPropsFirstoption forjsx-sort-propsto support custom user's props list for sortingRefering to: #3851
Resolving issues: #3175 #3639 #3193
It's my first time writing an ESLint rule option, so please let me know what could be better. Also, this is my first time writing tests. I expect we'll have to write a lot more than I've come up with so far, but let's start with this