fix(rome_js_formatter): comments in closing JSX elements

[Conaclos]

Summary

This is a tentative to fix #4243.
This is blocking the update of prettier snapshots #4234.

I copied the code from closing_fragment.rs because the formatting is correct for fragments:

<></ /* block1 */ // test
>;

is correctly formatted to:

<></
	/* block1 */
	// test
>;

Unfortunately this has no effect:

<a></ /* block1 */ // test
a>;

still produces the following error:

$ cargo test

---- formatter::jsx_module::specs::jsx::comments_jsx stdout ----
thread 'formatter::jsx_module::specs::jsx::comments_jsx' panicked at 'formatter output had syntax errors where input had none:
comments.jsx:3:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  ✖ expected `<` but instead the file ends
  
    1 │ <a><//* block1 */ // test
    2 │ a>;
  > 3 │ 
      │ 
  
  ℹ the file ends here
  
    1 │ <a><//* block1 */ // test
    2 │ a>;
  > 3 │ 
      │ 

Test Plan

Test included

Documentation

No change

• The PR requires documentation
• I will create a new PR to update the documentation

[netlify]

✅ Deploy Preview for docs-rometools canceled.

Built without sensitive environment variables

Name	Link
🔨 Latest commit	05510cc
🔍 Latest deploy log	https://app.netlify.com/sites/docs-rometools/deploys/6402456c93be470008188e2f

[ematipico]

cc @MichaReiser that worked on source maps and comments

[MichaReiser]

I recommend reading prettier's source code to understand their formatting (and how it may have changed)

[Conaclos]

I recommend reading prettier's source code to understand their formatting (and how it may have changed)

I already have an idea for addressing the issue.

My current problem is with the Rome code base. I cannot understand why my piece of code fails.
I certainly have some misunderstanding about comment handling in the formatter.

In the following code, /* comment */ is a trailing comment of /.

<a></ /* comment */a>

I think so that it was also a dangling comment of the entire JsxClosingElement </ /* comment */a>.
However, this seems not be the case?
Is there a way to collect all comments inside the node?

[MichaReiser]

In the following code, /* comment */ is a trailing comment of /.

/* comment */ is a leading comment of the a node in this example because it is right before the node a starts. The comments module explains the comments handling in detail.

Our JavaScript formatter also uses an extensive list of custom-rules to place comments (same as prettier).

The way I like to approach comments related issues is to log the comments inside the test.

let syntax = SourceType::jsx();
let tree = parse("<a></ /* block1 */ // test\na>;", syntax);

let formatted = format_node(JsFormatOptions::new(syntax), &tree.syntax()).unwrap();

dbg!(&formatted.context().comments());

That helps me understand if the comments are associated with the correct nodes. You may want to compare the output with Prettier using their playground.

[Conaclos]

@MichaReiser
Thanks for the tips :)
I will take another look.

/* comment */ is a leading comment of the a node in this example because it is right before the node a starts.

In the rome playground, /* comment */ is a trailing trivia of /...
This could be a bug?

EDIT: I see: it is a trailing comment of / in the CST. However, the formatter made it a leading comment of the node a.

[Conaclos]

The fix is not ideal. However, this removes one of the issues that block the update of prettier snapshots.

[MichaReiser]

How does this approach compare to prettier's handling? What do you consider non-ideal with this solution?

[Conaclos]

How does this approach compare to prettier's handling? What do you consider non-ideal with this solution?

In prettier the following code:

<a></ /* block1 */ // test
a>;

is formatted to:

<a></
  /* block1 */ // test
  a
>;

While the current fix outputs:

<a></
/* block1 */ // test
  a
>;

EDIT: it is now fixed :)

[Conaclos]

@MichaReiser I managed to match prettier output :)

It was harder than I thought to understand the formatter logic.

[ematipico]

Amazing work @Conaclos !!!

It was harder than I thought to understand the formatter logic.

Yeah dealing with the formatter is not a easy task!