Skip to content
This repository has been archived by the owner on Aug 31, 2023. It is now read-only.

feat(rome_js_formatter): Conditional JSX Chain layout #3150

Merged
merged 3 commits into from
Sep 2, 2022

Conversation

MichaReiser
Copy link
Contributor

@MichaReiser MichaReiser commented Sep 2, 2022

This PR implements Prettier's conditional JSX chain layout.

abcdefgh ? (
    <Element>
        <Sub />
        <Sub />
    </Element>
) : (
    <Element2>
        <Sub />
        <Sub />
    </Element2>
);

That parenthesizes the consequent and alternate except for null, undefined, and nested conditionals in the alternate.

This PR further removes the Default implementation from JsFormatOptions because passing a SourceType that matches with the type of the AST is mandatory to get correct formatting results.

Tests

I verified the prettier snapshots and added our own tests to cover the exceptions of null, undefined and nested alternates that don't get parenthesized.

Average compatibility: 85.41 -> 85.53
Compatible lines: 83.70 -> 83.95

It's expected for the tests to fail until #3149 is merged

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Sep 2, 2022

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 33bab16
Status: ✅  Deploy successful!
Preview URL: https://78239f50.tools-8rn.pages.dev
Branch Preview URL: https://feat-jsx-conditional.tools-8rn.pages.dev

View logs

@MichaReiser MichaReiser changed the title feat(rome_js_formatter): Format JSX tags and attributes (without chil… feat(rome_js_formatter): Conditional JSX Chain layout Sep 2, 2022
@MichaReiser MichaReiser added the A-Formatter Area: formatter label Sep 2, 2022
@MichaReiser MichaReiser added this to the 0.9.0 milestone Sep 2, 2022
/// Gets passed through from the root to the consequent and alternate of [JsConditionalExpression]s.
///
/// Doesn't apply for [TsConditionalType].
jsx_chain: ConditionalJsxChain,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I had to create a new FormatJsAnyConditionalRule so that it's possible to pass option values without cluttering the JsAnyConditional node. The reason for this is that it's necessary to know if a JsxTagExpression appears in any of the parent conditional expressions.

Checking this for every conditional is expensive, so we only check it at the root and then pass the information down to the consequent and alternate formatting.

/// : c
/// ).member
/// ```
fn should_extra_indent(
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I only moved this method from the impl JsAnyConditional to implement it on the rule instead.

@MichaReiser MichaReiser marked this pull request as ready for review September 2, 2022 10:30
@MichaReiser MichaReiser requested a review from a team September 2, 2022 10:30
Base automatically changed from feat/jsx-formatting to main September 2, 2022 12:40
This PR implements Prettier's conditional JSX chain layout.

```
abcdefgh ? (
	<Element>
		<Sub />
		<Sub />
	</Element>
) : (
	<Element2>
		<Sub />
		<Sub />
	</Element2>
);
```

That parenthesizes the `consequent` and `alternate` except for `null`, `undefined`, and nested conditionals in the alternate.

This PR further removes the `Default` implementation from `JsFormatOptions` because passing a `SourceType` that matches with the type of the AST is mandatory to get correct formatting results.

## Tests

I verified the prettier snapshots and added our own tests to cover the exceptions of `null`, `undefined` and nested alternates that don't get parenthesized.
@netlify
Copy link

netlify bot commented Sep 2, 2022

Deploy Preview for rometools canceled.

Name Link
🔨 Latest commit 33bab16
🔍 Latest deploy log https://app.netlify.com/sites/rometools/deploys/631204304f2b5f0009e15fd5

@MichaReiser MichaReiser temporarily deployed to aws September 2, 2022 12:41 Inactive
@MichaReiser MichaReiser mentioned this pull request Sep 2, 2022
17 tasks
@github-actions
Copy link

github-actions bot commented Sep 2, 2022

@github-actions
Copy link

github-actions bot commented Sep 2, 2022

Parser conformance results on ubuntu-latest

js/262

Test result main count This PR count Difference
Total 45879 45879 0
Passed 44939 44939 0
Failed 940 940 0
Panics 0 0 0
Coverage 97.95% 97.95% 0.00%

jsx/babel

Test result main count This PR count Difference
Total 39 39 0
Passed 36 36 0
Failed 3 3 0
Panics 0 0 0
Coverage 92.31% 92.31% 0.00%

symbols/microsoft

Test result main count This PR count Difference
Total 5946 5946 0
Passed 1621 1621 0
Failed 4325 4325 0
Panics 0 0 0
Coverage 27.26% 27.26% 0.00%

ts/babel

Test result main count This PR count Difference
Total 588 588 0
Passed 519 519 0
Failed 69 69 0
Panics 0 0 0
Coverage 88.27% 88.27% 0.00%

ts/microsoft

Test result main count This PR count Difference
Total 16257 16257 0
Passed 12397 12397 0
Failed 3860 3860 0
Panics 0 0 0
Coverage 76.26% 76.26% 0.00%

@MichaReiser MichaReiser temporarily deployed to aws September 2, 2022 13:07 Inactive
@MichaReiser MichaReiser temporarily deployed to aws September 2, 2022 13:25 Inactive
@MichaReiser MichaReiser merged commit 220904f into main Sep 2, 2022
@MichaReiser MichaReiser deleted the feat/jsx-conditional branch September 2, 2022 13:53
ematipico added a commit that referenced this pull request Sep 5, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
A-Formatter Area: formatter
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

2 participants