More lenient jsx-no-multiline-js rule

[adidahiya]

I think the rule should be lenient about these kinds of multiline expressions because they don't hinder readability too much:

update: we should also add more exemptions:

• allow-function-call to ignore function call expressions
• allow-literal to ignore checking object and array literals
• allow-element to ignore JSX elements

[markwongsk]

How lenient do you think it should be? Should we just allow object literals, or do you think this should allow things like

popoverProps={this.computePopoverProps({
    popoverClassName: "docs-dropdown-ramen-popover",
})}

Also, this rule currently doesn't care about spread attributes, eg

<Dropdown {...{
    items: mocks.groups(),
    placeholder: "Ramen joint",
}} />

but that's probably a separate issue.

[piotrwitek]

@adidahiya @markwongsk this is hanging for quite some time, can we push for this change?

I really need this configurability and I think that disable for object literals is enough for a start.
Checking tslint conventions suggested name might be: "ignore-object-literal"

[adidahiya]

@markwongsk I guess we could break down the use cases into "be lenient on multiline functions / lambdas" and "be lenient on object or array literals". so this rule could have two new options: ignore-functions and ignore-literals

@piotrwitek open to PRs, as always :)

[MiguelMadero]

Would it be a simpler distinction between JS statements and expressions? It seems like multline expressions (object literals, ternary, function calls, etc) make more sense than multiple statements.

[adidahiya]

@MiguelMadero eh, that wouldn't really solve my use case because so much of JS syntax is a valid expression. My primary motivation for using this rule was to ban multiline ternarys and function calls (primarily .map, since it's used to generate lists)

// bad
<div className={
    someComplicatedCondition
        ? "positive-case"
        : "positive-case"}
    otherProp={true}
/>

// bad
<div>
    {this.props.foo.map((f) => {
        return <span>{f}</span>;
    })}
</div>

I could imagine another option here for stylistic preference, however, ignore-conditional-expressions, to allow multiline ternarys like in my first example ^

[pingshunhuang]

@adidahiya Could you please recommend a way for the 2 cases you gave above. I got this rules triggered a lot and I'm not sure how to improve them. Thanks.

[petrdanecek]

Is there any plan or update about this topic?

[adidahiya]

Closing due to deprecation, see #210