Merge pull request #2115 from cexbrayat/feat/2113-inline-custom-elements-behavior

Add option to disable custom elements inlining

Author: bitwiseman

Diff for: README.md

@@ -371,6 +371,7 @@ HTML Beautifier Options:
   -M, --wrap-attributes-min-attrs    Minimum number of html tag attributes for force wrap attribute options [2]
   -i, --wrap-attributes-indent-size  Indent wrapped attributes to after N characters [indent-size] (ignored if wrap-attributes is "aligned")
   -d, --inline                       List of tags to be considered inline tags
+  --inline_custom_elements           Inline custom elements [true]
   -U, --unformatted                  List of tags (defaults to inline) that should not be reformatted
   -T, --content_unformatted          List of tags (defaults to pre) whose content should not be reformatted
   -E, --extra_liners                 List of tags (defaults to [head,body,/html] that should have an extra newline before them.

Diff for: js/src/cli.js

@@ -116,6 +116,7 @@ var path = require('path'),
         // HTML-only
         "max_char": Number, // obsolete since 1.3.5
         "inline": [String, Array],
+        "inline_custom_elements": [Boolean],
         "unformatted": [String, Array],
         "content_unformatted": [String, Array],
         "indent_inner_html": [Boolean],
@@ -168,6 +169,7 @@ var path = require('path'),
         "i": ["--wrap_attributes_indent_size"],
         "W": ["--max_char"], // obsolete since 1.3.5
         "d": ["--inline"],
+        // no shorthand for "inline_custom_elements"
         "U": ["--unformatted"],
         "T": ["--content_unformatted"],
         "I": ["--indent_inner_html"],

Diff for: js/src/html/beautifier.js

@@ -656,7 +656,7 @@ Beautifier.prototype._get_tag_open_token = function(raw_token) { //function to g
 
   parser_token.is_unformatted = !parser_token.tag_complete && in_array(parser_token.tag_check, this._options.unformatted);
   parser_token.is_content_unformatted = !parser_token.is_empty_element && in_array(parser_token.tag_check, this._options.content_unformatted);
-  parser_token.is_inline_element = in_array(parser_token.tag_name, this._options.inline) || parser_token.tag_name.includes("-") || parser_token.tag_start_char === '{';
+  parser_token.is_inline_element = in_array(parser_token.tag_name, this._options.inline) || (this._options.inline_custom_elements && parser_token.tag_name.includes("-")) || parser_token.tag_start_char === '{';
 
   return parser_token;
 };

Diff for: js/src/html/options.js

@@ -61,6 +61,7 @@ function Options(options) {
     // obsolete inline tags
     'acronym', 'big', 'strike', 'tt'
   ]);
+  this.inline_custom_elements = this._get_boolean('inline_custom_elements', true);
   this.void_elements = this._get_array('void_elements', [
     // HTLM void elements - aka self-closing tags - aka singletons
     // https://www.w3.org/html/wg/drafts/html/master/syntax.html#void-elements

Diff for: test/data/html/tests.js

@@ -3813,6 +3813,32 @@ exports.test_data = {
         '</span>'
       ]
     }]
+  }, {
+    name: "Disables custom elements inlining with inline_custom_elements=false",
+    description: "https://github.com/beautify-web/js-beautify/issues/2113",
+    options: [
+      { name: "inline_custom_elements", value: "false" }
+    ],
+    tests: [{
+      input: [
+        '<span>',
+        '    <span>',
+        '        <span>The time for this result is 1:02</span',
+        '        ><time-dot>.</time-dot',
+        '        ><time-decimals>27</time-decimals>',
+        '    </span>',
+        '</span>'
+      ],
+      output: [
+        '<span>',
+        '    <span>',
+        '        <span>The time for this result is 1:02</span>',
+        '        <time-dot>.</time-dot>',
+        '        <time-decimals>27</time-decimals>',
+        '    </span>',
+        '</span>'
+      ]
+    }]
   }, {
     name: "New Test Suite"
   }]