new rule: enforce simple TSX attributes

[HamletDRC]

new rule: enforce simple TSX attributes

Among the things that you should allow in tsx attributes:

• variables
• properties
• method invocations
• binary expressions on constants ( className={ "container" + "whatever" }
• binary expressions with a single constant ( className={ "container" + myClassName }

Things to avoid:

• ternary expressions
• complex binary expressions ( className = { someName + '-' + someOtherName } )

[noamyogev84]

Hi @JoshuaKGoldberg.
Can you share some code pointers for this one?

[JoshuaKGoldberg]

Hey @noamyogev84, glad to see you're interested!

#543 is a good example of what you'll want to add:

• New rule under src/
• Corresponding new test file under src/tests
• New entry in README.md describing the rule
• New line in tslint.json enabling the rule locally

The recommended_ruleset.js and tslint-warnings.csv should be auto-generated by some tasks within grunt all once you have a passing build.

As for creating the new rule, it looks like you'd want to find all nodes of type JsxAttributes and check whether their immediate children are something simple (CallExpression, StringLiteral, etc.) or complicated (ConditionalExpression, etc.). I'm a fan of https://ts-ast-viewer.com/ - it gives angry red squigglies right now for some JSX-y behavior, but still says the right list of nodes.

Let me know if that's not the right or not enough information to go off of!

[noamyogev84]

@JoshuaKGoldberg Thanks man! I'm starting to explore it.

[noamyogev84]

Hi @JoshuaKGoldberg
I think that maybe something is missing.
I can't shake this warning: Warning: A rule was found that is not enabled on the project: simple-attribute Use --force to continue. when trying to run grunt all after creating a new rule and doing all mentioned steps.

Any help?

[JoshuaKGoldberg]

Absolutely! That complaint comes from validation that every rule has a documentation area in README.md. You'll need to add a new row in the table of rules.

Does that fix it for you?

[noamyogev84]

Hi @JoshuaKGoldberg . Can you please look at my PR?
I had some weird issues with the unit tests.

1. The test runner always starts from the second test. can you please help with that?
2. I had to include an import react statement in my unit tests script, for my rule to be hit. why is that?

Thanks!

[JoshuaKGoldberg]

always starts from the second test

I'm not seeing that. Travis is running the first test: https://travis-ci.org/Microsoft/tslint-microsoft-contrib/jobs/450301500

  useSimpleAttributeRule
    ✓ if this rule is out then first check doesnt work
    ✓ should fail if only attribute initializer is a complex binary expression
...

had to include an import react

That's intentional and good 😊 in order to write the JSX syntax, there needs to exist some global "factory" to create the elements. <div /> will be roughly compiled to React.createElement("div"). That's why we have "jsx": "react" in our tsconfig.jsons.