Allow to configure the "custom elements as inline elements" behavior

[cexbrayat]

Description

Hi team! And thank you for your work on js-beautify.

I'm part of the Vue core team, and I'm one of the maintainers of the Vue Test Utils library. We use js-beautify in VTU to make the tested HTML prettier in the output. So for example, you can test something like:

expect(wrapper.html()).toBe(`<div>
  <h1>Hello</h1>
</div>`);  // the `html()` method formats the HTML with js-beautify

There are thousands of tests out there that use this (VTU has 1.3 million downloads per week).

js-beautify v1.14.7 introduced a new behavior in aa82eb9 which is quite breaking for us, as all elements with a dash are now wrapped differently. And VTU uses elements with a -stub suffix when stubbing components, so a test that would usually succeed like:

expect(wrapper.html()).toBe(`<child-stub>
  <h1>Hello</h1>
</child-stub>`);

now fails if we update to v1.14.7 as the output of js-beautify is now <child-stub><h1>Hello</h1></child-stub>.

You can see that a lot of the VTU tests are failing when trying to bump to the new version of js-beautify here.

It would be awesome if we could configure this behavior to disable it and keep the output as it was in VTU, thus avoiding the developers that use VTU having to update all their tests, or us getting stuck on v1.14.6.

A new option like custom_element_as_inline_element (that could be true by default, but that we could switch to false to restore the previous behavior) would be very helpful.

Do you think that can be possible?

[bitwiseman]

PR welcome. It might make sense to reuse the existing inline setting and add the ability to do pattern matching. Up to you.

...

Wait a minute. Before you do any work, could you please show exactly what your input, desired output, and actual output are? From you description it sounds like this could be a bug.

If I go to https://beautifier.io/ and put in:

<child-stub>
    <h1>Hello</h1>
</child-stub>

This input remains unchanged. I'm not sure from your description if that is correct or not...

[cexbrayat]

@bitwiseman I don't think this s a bug, sorry if I wasn't clear

• input:

<div><child-stub><div>hello</div></child-stub></div>

• desired output (actual output of v1.14.6):

<div>
  <child-stub>
    <div>hello</div>
  </child-stub>
</div>

• actual output with v1.14.7:

<div><child-stub>
    <div>hello</div>
  </child-stub></div>

Does that match what you're expecting after landing aa82eb9 ?

Regarding the option, I was leaning towards adding an extra one to make things simple, but I understand your idea. I'll take a look and open a PR with whatever I come up with so we can start a conversation.

[cexbrayat]

@bitwiseman I started a PR introducing a new inline_custom_elements option #2115 Let me know what you think

[Ericlm]

Hello there! I just wanted to point out that as this is a breaking change for VTU, any new version can't be applied, then moderate vulnerability in semver (via editorconfig, see this PR) fixes can't be applied for anyone using VTU.
It would be great if the "old behavior" option was approved, so VTU can again apply any patch versions of js-beautify 🙂.
Thank you!

[bitwiseman]

@Ericlm
I understand the problem. I'll comment on the #2115 .