Skip to content
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

Added support (without options) for spread arguments with keys #2664

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

machineghost
Copy link

@machineghost machineghost commented Jun 8, 2020

This is just a first step to try and solve: #1753

This is ONLY a request for code review: please do not merge. I just wanted to get feedback on what I have so far before I add in options. Also I wanted to get your thoughts on whether we should have two options or just one.

It seems like we definitely want to guard this new flexibility with some sort of "allow spread keys" option, but then do we want just one, or do we want to allow explicit spread keys:

<Foo {...{ key }} />

separately from implicit ones:

<Foo {...someObjectThatPresumablyHasAKey} />

Hypothetically speaking I could see a dev wanting to allow the former but not the latter ... but maybe that's YAGNI?

…d (ie. ...) arguments with keys to be considered as valid as explicit key attributes

Part of jsx-eslint#1753
@ljharb ljharb marked this pull request as draft June 8, 2020 21:41
Copy link
Member

@ljharb ljharb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll wait to review the rule changes until you've marked the PR as ready for review - but the direction seems fine to me.

@@ -39,6 +39,8 @@ ruleTester.run('jsx-key', rule, {
{code: 'fn()'},
{code: '[1, 2, 3].map(function () {})'},
{code: '<App />;'},
{code: '[1, 2, 3].map(x => <App {...{ key }} />);'},
{code: '[1, 2, 3].map(x => <App {...objectWithKey} />);'},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should fail, i think, unless we want to try to track down objectWithKey and ensure it is an object literal with a hardcoded key property.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll have to confess my ignorance of ESLint here: I didn't realize that latter option was even possible.

I thought we'd either have to blanket allow or deny such spread objects .... and I'd argue there is value in letting a dev say "I use ESLint as a tool to help me catch problems, but I have no problem remembering to put keys in my objects, so I'd prefer ES Lint not bother me with pointless error messages every time I spread an object" :)

But of course, if it's possible to make ESLint do something that would make any dev happy, and only warn about the legitimately problematic cases, that'd be best. Can you point me to any rules that do something similar so I could get an idea how?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When the object is defined in the same file, as a literal, eslint provides the tools to read it as if it was defined inline.

Also, it's often better to wrongly block something than to wrongly allow it.

I'm not sure off the top of my head which rules do similar things; i'd look into our propType detection code.

@@ -39,6 +39,8 @@ ruleTester.run('jsx-key', rule, {
{code: 'fn()'},
{code: '[1, 2, 3].map(function () {})'},
{code: '<App />;'},
{code: '[1, 2, 3].map(x => <App {...{ key }} />);'},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
{code: '[1, 2, 3].map(x => <App {...{ key }} />);'},
{code: '[1, 2, 3].map(x => <App {...{ key }} />);'},
{code: '[1, 2, 3].map(x => <App {...{ key: x.id }} />);'},
{code: '[1, 2, 3].map(x => <App {...{ "key": x.id }} />);'},
{code: '[1, 2, 3].map(x => <App {...{ 'key': x.id }} />);'},
{code: '[1, 2, 3].map(x => <App {...{ ['key']: x.id }} />);'},
{code: '[1, 2, 3].map(x => <App {...{ ["key"]: x.id }} />);'},
{code: '[1, 2, 3].map(x => <App {...{ [`key`]: x.id }} />);'},

@machineghost
Copy link
Author

Since you never responded about the spread stuff I just made it an option, but that can easily change.

@machineghost
Copy link
Author

From the lack of response (one way or the other) here, is it safe to assume that I will need to fork the library if I want this change published (and just in general if I want to see other improvements made to it)?

@ljharb
Copy link
Member

ljharb commented Aug 30, 2020

@machineghost sorry for the delay; what are you still waiting for a response on? I do have a reply here that you haven't replied to yet?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants