<button> with force-expand-multiline formatting bug

[blemaire]

Description

BeautifyJs does not seem to handle elements too well with the force-expand-multiline option enabled.

Input

The code looked like this before beautification:

<button
    class="my-class"
    id="id1"
>
    Button 1
</button>

<button
    class="my-class"
    id="id2"
>
    Button 2
</button>

Expected Output

The code should have looked like this after beautification:

<button
    class="my-class"
    id="id1"
>
    Button 1
</button>

<button
    class="my-class"
    id="id2"
>
    Button 2
</button>

Actual Output

The code actually looked like this after beautification:

<button
    class="my-class"
    id="id1"
>
    Button 1
    </button>

    <button
        class="my-class"
        id="id2"
    >
        Button 2
        </button>

Environment

OS: MacOS

Settings

I'm using all the default values apart from the below:

{
    "wrap-attributes": "force-expand-multiline"
}

[blemaire]

Some changes have occured between the merge of the PR which introduced this feature (#1070) and now meaning this feature is now broken.

The tests for this (at today's date) no longer match the original expected behaviour:
https://github.com/beautify-web/js-beautify/blob/fde05f7e11c3b7ce77a6a8f86a0808d88814a666/js/test/generated/beautify-html-tests.js#L760-L772

The test should be as below:

        opts.wrap_attributes = 'force-expand-multiline';
        opts.wrap_attributes_indent_size = 4;
        opts.wrap_line_length = 80;
        test_fragment('<div  >This is some text</div>', '<div>This is some text</div>');
        test_fragment('<div attr="123"  >This is some text</div>', '<div attr="123">This is some text</div>');
        test_fragment(
            '<div attr0 attr1="123" data-attr2="hello    t here">This is some text</div>',
            //  -- output --
            '<div\n' +
            '    attr0\n' +
            '    attr1="123"\n' +
            '    data-attr2="hello    t here"\n' +
            '>\n' +
            '    This is some text\n' +
            '</div>');

[bitwiseman]

@blemaire
I can repro the issue with the input you provided, so this is definitely a bug.

But I'm not sure I understand your comment about the tests. Looking at the tests in the original PR they look to me like the first code that you list and not what you think they should look like.

[blemaire]

I could be wrong about the tests, the formatting has been changed a lot so somewhat difficult to read. I attempted a fix on this issue but changes are not without many side effects :(

[bitwiseman]

@blemaire Yeah, That is a problem with the html beautifier especially right now.

[ghost]

I am having trouble with getting <buttons> formatted at all.

As an example, for this simple code snippet the formatting (indentation) does not work properly:

<button>
  <span>foo</span>
<p>bar</p>
</button>

But if I change the parent element to a <div> the formatting works:

<div>
  <span>foo</span>
  <p>bar</p>
</div>

This is my config file:

{
  "brace_style": "collapse",
  "break_chained_methods": true,
  "end_with_newline": true,
  "eol": "\n",
  "eval_code": false,
  "indent_char": " ",
  "indent_level": 0,
  "indent_size": 2,
  "indent_with_tabs": false,
  "jslint_happy": false,
  "keep_array_indentation": false,
  "keep_function_indentation": false,
  "unindent_chained_methods": false,
  "max_preserve_newlines": 2,
  "preserve_newlines": true,
  "space_after_anon_function": true,
  "space_before_conditional": true,
  "space_in_empty_paren": false,
  "space_in_paren": false,
  "unescape_strings": false,
  "wrap_line_length": 0,
  "e4x": false,
  "comma_first": false,
  "operator_position": "before-newline",
  "wrap_attributes": "force-aligned"
}

I am using the vscode extension Beautify version 1.3 which in turn uses js-beautify 1.7.5

[bitwiseman]

Looks like this is fixed in 1.8.0-rc6.