-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[New] jsx-sort-props
: add customPropsFirst
to support custom props list for sorting
#3853
base: master
Are you sure you want to change the base?
[New] jsx-sort-props
: add customPropsFirst
to support custom props list for sorting
#3853
Conversation
…s list for sorting
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 tomorrow with resolving your comments and updating tests |
This PR brings a new
customPropsFirst
option forjsx-sort-props
to 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