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

fix(scope-manager): incorrect reference for this within a jsx identifier #4535

Merged
merged 3 commits into from Mar 18, 2022
Merged

fix(scope-manager): incorrect reference for this within a jsx identifier #4535

merged 3 commits into from Mar 18, 2022

Conversation

juank1809
Copy link
Contributor

PR Checklist

Overview

Currently when a JSX Identifier has name="this" is treated like a variable. This PR will ignore the JSXIdentifier when its name is "this" and thus not referencing it

@nx-cloud
Copy link

nx-cloud bot commented Feb 10, 2022

☁️ Nx Cloud Report

CI ran the following commands for commit 6b9bbdc. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch


✅ Successfully ran 48 targets

Sent with 💌 from NxCloud.

@typescript-eslint
Copy link
Contributor

Thanks for the PR, @juank1809!

typescript-eslint is a 100% community driven project, and we are incredibly grateful that you are contributing to that community.

The core maintainers work on this in their personal time, so please understand that it may not be possible for them to review your work immediately.

Thanks again!


🙏 Please, if you or your company is finding typescript-eslint valuable, help us sustain the project by sponsoring it transparently on https://opencollective.com/typescript-eslint. As a thank you, your profile/company logo will be added to our main README which receives thousands of unique visitors per day.

@netlify
Copy link

netlify bot commented Feb 10, 2022

❌ Deploy Preview for typescript-eslint failed.

🔨 Explore the source changes: 6b9bbdc

🔍 Inspect the deploy log: https://app.netlify.com/sites/typescript-eslint/deploys/62196b83fb4c76000789d0dd

@bradzacher bradzacher added the bug Something isn't working label Feb 10, 2022
Copy link
Member

@bradzacher bradzacher left a comment

Choose a reason for hiding this comment

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

thanks for putting this fix up!

This is almost correct!
If we inspect the output from the TS and babel JSX transforms, we can see that another case we need to handle is when this is by itself:

import React from 'react';

class Hello extends React.Component<{tag: () => JSX.Element}> {
  inline() {
    return [
        <this.props.tag />,
        <this />,
    ];
  }
}

ts playground
babel playground

So we need to handle the more generic case of when the JSXIdentifier has the .name of "this"

@bradzacher bradzacher added the awaiting response Issues waiting for a reply from the OP or another party label Feb 10, 2022
@codecov
Copy link

codecov bot commented Feb 10, 2022

Codecov Report

Merging #4535 (6b9bbdc) into main (d4768c0) will increase coverage by 5.47%.
The diff coverage is 66.66%.

@@            Coverage Diff             @@
##             main    #4535      +/-   ##
==========================================
+ Coverage   86.97%   92.45%   +5.47%     
==========================================
  Files           5      330     +325     
  Lines         215    10600   +10385     
  Branches       60     3053    +2993     
==========================================
+ Hits          187     9800    +9613     
- Misses         22      555     +533     
- Partials        6      245     +239     
Flag Coverage Δ
unittest 92.45% <66.66%> (+5.47%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
...ackages/scope-manager/src/referencer/Referencer.ts 95.93% <66.66%> (ø)
packages/scope-manager/src/lib/lib.ts 100.00% <0.00%> (ø)
packages/eslint-plugin/src/rules/no-misused-new.ts 100.00% <0.00%> (ø)
packages/scope-manager/src/lib/esnext.string.ts 100.00% <0.00%> (ø)
packages/eslint-plugin/src/rules/no-unsafe-call.ts 100.00% <0.00%> (ø)
packages/eslint-plugin/src/rules/await-thenable.ts 100.00% <0.00%> (ø)
packages/scope-manager/src/scope/ClassScope.ts 100.00% <0.00%> (ø)
packages/eslint-plugin/src/configs/recommended.ts 100.00% <0.00%> (ø)
packages/utils/src/ast-utils/misc.ts 66.66% <0.00%> (ø)
packages/eslint-plugin/src/rules/semi.ts 92.85% <0.00%> (ø)
... and 316 more

Copy link
Member

@JoshuaKGoldberg JoshuaKGoldberg left a comment

Choose a reason for hiding this comment

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

Codecov is right - the change seems great at first glance but we can really review once there are tests please 🤗

Let me know if it's not clear how to add them and I can write something up.

@bradzacher
Copy link
Member

I should probably add this to the docs.
You can add tests for this by adding some .tsx files in this folder:
https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/scope-manager/tests/fixtures/jsx

And then you can run the test using

$ cd packages/scope-manager
$ yarn jest fixtures.test -u

This will generate a corresponding .shot file for each .tsx file you add - the contents of which is the scope tree!

Copy link
Member

@bradzacher bradzacher left a comment

Choose a reason for hiding this comment

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

snapshot is looking good - no dangling references to this in the analysis which is perfect!


I think you can simplify this a little by moving this logic into the JSXIdentifier selector and have it in one place.

JSXIdentifier is only valid in the following positions:

  • JSXOpeningElement.name (which is analysed)
  • JSXClosingElement.name (not analysed at all)
  • JSXMemberExpression.property (not analysed at all)
  • JSXMemberExpression.object (analysed only in a JSXOpeningElement.name)
  • JSXNamespacedName.name (not analysed at all)
  • JSXNamespacedName.namespace (analysed only in a JSXOpeningElement.name)

So by my reckoning this should be safe to just do within JSXIdentifier!

Otherwise this LGTM

Copy link
Member

@bradzacher bradzacher left a comment

Choose a reason for hiding this comment

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

LGTM!

@bradzacher bradzacher removed the awaiting response Issues waiting for a reply from the OP or another party label Mar 18, 2022
@bradzacher bradzacher merged commit dd49280 into typescript-eslint:main Mar 18, 2022
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 24, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Reference incorrectly created for this within a JSXIdentifier
3 participants