microsoft/tslint-microsoft-contrib

Display functional component name in react-no-dangerous-html

feimosi opened this issue · 4 comments

feimosi commented

Bug Report

  • tslint-microsoft-contrib version: 6.2.0
  • TSLint version: 5.18.0
  • TypeScript version: 3.5.3
  • Running TSLint via: CLI

TypeScript code being linted

export default function Reply({ reply }: Props) {
  return (
    <div className="Reply">
	  ...
      <span
        dangerouslySetInnerHTML={ {
          __html: reply.content
        } }
      />
      ...
    </div>
  );
}

with tslint.json configuration:

{
...
    "react-no-dangerous-html": [true, [{
    	"file": "src/common/Reply/Reply.tsx",
	    "method": "<unknown>",
	    "comment": "Approved"
	}]],
...
}

Actual behavior

Linter outputs:

> Invalid call to dangerouslySetInnerHTML in method "<unknown>".

Expected behavior

Would be great to specify function (component) name if method is not available. That would also address having multiple functions in a single file.

ChaiWithJai commented

Hey, @JoshuaKGoldberg we met a few months back at TS NYC. Would love to take a crack at this if no one is currently working on this.

  • ❤️1
JoshuaKGoldberg commented

Oh hi @JBhagat841, good to hear from you! 🙌

Sure, it looks like nobody is tackling this so far. It looks like you'd want to traverse up the AST from the complaint method until you find a function that either has a name or is in a variable with a name.

By the way, it's good to keep palantir/tslint#4534 in mind. We're adhering to that schedule here and will absolutely take a look at any PR you send here before November 1st. You might want to focus more efforts on https://typescript-eslint.io soon.

ChaiWithJai commented

Thanks! Will take a look at this later in the week!

  • 🎉1
JoshuaKGoldberg commented

☠️ It's time! ☠️

Per #876, this repository is no longer accepting feature pull requests. TSLint is being deprecated and we recommend you switch to https://typescript-eslint.io.

Thanks for open sourcing with us, everyone!