Release: 1.15.2

Author: GitHub Action

js/lib/beautifier.js

@@ -1615,6 +1615,10 @@ TemplatablePattern.prototype.__set_templated_pattern = function() {
   if (!this._disabled.handlebars) {
     items.push(this.__patterns.handlebars._starting_pattern.source);
   }
+  if (!this._disabled.angular) {
+    // Handlebars ('{{' and '}}') are also special tokens in Angular)
+    items.push(this.__patterns.handlebars._starting_pattern.source);
+  }
   if (!this._disabled.erb) {
     items.push(this.__patterns.erb._starting_pattern.source);
   }
@@ -2040,7 +2044,7 @@ Beautifier.prototype.beautify = function() {
     type: ''
   };
 
-  var last_tag_token = new TagOpenParserToken();
+  var last_tag_token = new TagOpenParserToken(this._options);
 
   var printer = new Printer(this._options, baseIndentString);
   var tokens = new Tokenizer(source_text, this._options).tokenize();
@@ -2363,7 +2367,7 @@ Beautifier.prototype._handle_tag_open = function(printer, raw_token, last_tag_to
   return parser_token;
 };
 
-var TagOpenParserToken = function(parent, raw_token) {
+var TagOpenParserToken = function(options, parent, raw_token) {
   this.parent = parent || null;
   this.text = '';
   this.type = 'TK_TAG_OPEN';
@@ -2430,13 +2434,14 @@ var TagOpenParserToken = function(parent, raw_token) {
     }
 
     // handlebars tags that don't start with # or ^ are single_tags, and so also start and end.
+    // if they start with # or ^, they are still considered single tags if indenting of handlebars is set to false
     this.is_end_tag = this.is_end_tag ||
-      (this.tag_start_char === '{' && (this.text.length < 3 || (/[^#\^]/.test(this.text.charAt(handlebar_starts)))));
+      (this.tag_start_char === '{' && (!options.indent_handlebars || this.text.length < 3 || (/[^#\^]/.test(this.text.charAt(handlebar_starts)))));
   }
 };
 
 Beautifier.prototype._get_tag_open_token = function(raw_token) { //function to get a full tag and parse its type
-  var parser_token = new TagOpenParserToken(this._tag_stack.get_parser_token(), raw_token);
+  var parser_token = new TagOpenParserToken(this._options, this._tag_stack.get_parser_token(), raw_token);
 
   parser_token.alignment_size = this._options.wrap_attributes_indent_size;
 
@@ -2903,6 +2908,7 @@ Tokenizer.prototype._get_next_token = function(previous_token, open_token) { //
   token = token || this._read_open_handlebars(c, open_token);
   token = token || this._read_attribute(c, previous_token, open_token);
   token = token || this._read_close(c, open_token);
+  token = token || this._read_script_and_style(c, previous_token);
   token = token || this._read_control_flows(c, open_token);
   token = token || this._read_raw_content(c, previous_token, open_token);
   token = token || this._read_content_word(c, open_token);
@@ -2988,8 +2994,8 @@ Tokenizer.prototype._read_open_handlebars = function(c, open_token) {
   var resulting_string = null;
   var token = null;
   if (!open_token || open_token.type === TOKEN.CONTROL_FLOW_OPEN) {
-    if (this._options.indent_handlebars && c === '{' && this._input.peek(1) === '{') {
-      if (this._input.peek(2) === '!') {
+    if ((this._options.templating.includes('angular') || this._options.indent_handlebars) && c === '{' && this._input.peek(1) === '{') {
+      if (this._options.indent_handlebars && this._input.peek(2) === '!') {
         resulting_string = this.__patterns.handlebars_comment.read();
         resulting_string = resulting_string || this.__patterns.handlebars.read();
         token = this._create_token(TOKEN.COMMENT, resulting_string);
@@ -3005,8 +3011,8 @@ Tokenizer.prototype._read_open_handlebars = function(c, open_token) {
 Tokenizer.prototype._read_control_flows = function(c, open_token) {
   var resulting_string = '';
   var token = null;
-  // Only check for control flows if angular templating is set AND indenting is set
-  if (!this._options.templating.includes('angular') || !this._options.indent_handlebars) {
+  // Only check for control flows if angular templating is set
+  if (!this._options.templating.includes('angular')) {
     return token;
   }
 
@@ -3099,14 +3105,29 @@ Tokenizer.prototype._is_content_unformatted = function(tag_name) {
       this._options.unformatted.indexOf(tag_name) !== -1);
 };
 
-
 Tokenizer.prototype._read_raw_content = function(c, previous_token, open_token) { // jshint unused:false
   var resulting_string = '';
   if (open_token && open_token.text[0] === '{') {
     resulting_string = this.__patterns.handlebars_raw_close.read();
   } else if (previous_token.type === TOKEN.TAG_CLOSE &&
     previous_token.opened.text[0] === '<' && previous_token.text[0] !== '/') {
     // ^^ empty tag has no content 
+    var tag_name = previous_token.opened.text.substr(1).toLowerCase();
+    if (this._is_content_unformatted(tag_name)) {
+
+      resulting_string = this._input.readUntil(new RegExp('</' + tag_name + '[\\n\\r\\t ]*?>', 'ig'));
+    }
+  }
+
+  if (resulting_string) {
+    return this._create_token(TOKEN.TEXT, resulting_string);
+  }
+
+  return null;
+};
+
+Tokenizer.prototype._read_script_and_style = function(c, previous_token) { // jshint unused:false 
+  if (previous_token.type === TOKEN.TAG_CLOSE && previous_token.opened.text[0] === '<' && previous_token.text[0] !== '/') {
     var tag_name = previous_token.opened.text.substr(1).toLowerCase();
     if (tag_name === 'script' || tag_name === 'style') {
       // Script and style tags are allowed to have comments wrapping their content
@@ -3116,17 +3137,12 @@ Tokenizer.prototype._read_raw_content = function(c, previous_token, open_token)
         token.type = TOKEN.TEXT;
         return token;
       }
-      resulting_string = this._input.readUntil(new RegExp('</' + tag_name + '[\\n\\r\\t ]*?>', 'ig'));
-    } else if (this._is_content_unformatted(tag_name)) {
-
-      resulting_string = this._input.readUntil(new RegExp('</' + tag_name + '[\\n\\r\\t ]*?>', 'ig'));
+      var resulting_string = this._input.readUntil(new RegExp('</' + tag_name + '[\\n\\r\\t ]*?>', 'ig'));
+      if (resulting_string) {
+        return this._create_token(TOKEN.TEXT, resulting_string);
+      }
     }
   }
-
-  if (resulting_string) {
-    return this._create_token(TOKEN.TEXT, resulting_string);
-  }
-
   return null;
 };
 
@@ -3144,6 +3160,7 @@ Tokenizer.prototype._read_content_word = function(c, open_token) {
   if (resulting_string) {
     return this._create_token(TOKEN.TEXT, resulting_string);
   }
+  return null;
 };
 
 module.exports.Tokenizer = Tokenizer;

js/lib/beautifier.js.map

@@ -3912,6 +3912,10 @@ TemplatablePattern.prototype.__set_templated_pattern = function() {
   if (!this._disabled.handlebars) {
     items.push(this.__patterns.handlebars._starting_pattern.source);
   }
+  if (!this._disabled.angular) {
+    // Handlebars ('{{' and '}}') are also special tokens in Angular)
+    items.push(this.__patterns.handlebars._starting_pattern.source);
+  }
   if (!this._disabled.erb) {
     items.push(this.__patterns.erb._starting_pattern.source);
   }

js/lib/beautifier.min.js

@@ -9364,7 +9364,7 @@ function run_html_tests(test_obj, Urlencoded, js_beautify, html_beautify, css_be
         // Indenting angular control flow with default indent size
         reset_options();
         set_name('Indenting angular control flow with default indent size');
-        opts.templating = 'angular, handlebars';
+        opts.templating = 'angular';
         bth(
             '@if (a > b) {\n' +
             '{{a}} is greater than {{b}}\n' +
@@ -9664,28 +9664,61 @@ function run_html_tests(test_obj, Urlencoded, js_beautify, html_beautify, css_be
             '            max-width: 100%;\n' +
             '        }\n' +
             '    }\n' +
-            '</style>',
-            //  -- output --
+            '</style>');
+        
+        // CSS @media, the inside of <script> tag and control flows should be indented correctly
+        test_fragment(
+            '<head>\n' +
             '<style type="text/css">\n' +
             '@media only screen and (min-width:480px) {\n' +
-            '        .mj-column-per-100\n' +
-            '        {\n' +
-            '        width:\n' +
-            '        100%\n' +
-            '        !important;\n' +
-            '        max-width:\n' +
-            '        100%;\n' +
+            '.mj-column-per-100 {\n' +
+            'width: 100% !important;\n' +
+            'max-width: 100%;\n' +
             '}\n' +
-            '    }\n' +
-            '</style>');
+            '}\n' +
+            '</style>\n' +
+            '<script>\n' +
+            'if(someExpression) {\n' +
+            'callFunc();\n' +
+            '}\n' +
+            '</script>\n' +
+            '</head>\n' +
+            '<body>\n' +
+            '<div>\n' +
+            '@if(someOtherExpression) {\n' +
+            'Text\n' +
+            '}\n' +
+            '</div>\n' +
+            '</body>',
+            //  -- output --
+            '<head>\n' +
+            '    <style type="text/css">\n' +
+            '        @media only screen and (min-width:480px) {\n' +
+            '            .mj-column-per-100 {\n' +
+            '                width: 100% !important;\n' +
+            '                max-width: 100%;\n' +
+            '            }\n' +
+            '        }\n' +
+            '    </style>\n' +
+            '    <script>\n' +
+            '        if (someExpression) {\n' +
+            '            callFunc();\n' +
+            '        }\n' +
+            '    </script>\n' +
+            '</head>\n' +
+            '<body>\n' +
+            '    <div>\n' +
+            '        @if(someOtherExpression) {\n' +
+            '            Text\n' +
+            '        }\n' +
+            '    </div>\n' +
+            '</body>');
 
 
         //============================================================
-        // No indenting for angular control flow should be done if indent_handlebars is false
+        // No indenting for angular control flow should be done if angular templating is not set
         reset_options();
-        set_name('No indenting for angular control flow should be done if indent_handlebars is false');
-        opts.templating = 'angular, handlebars';
-        opts.indent_handlebars = false;
+        set_name('No indenting for angular control flow should be done if angular templating is not set');
         bth(
             '@if (a > b) {\n' +
             '{{a}} is greater than {{b}}\n' +

js/lib/beautifier.min.js.map

@@ -84,9 +84,9 @@ def unicode_char(value):
         bt('"\\x41\\x42\\x43\\x01"', '"\\x41\\x42\\x43\\x01"')
         bt('"\\u2022"', '"\\u2022"')
         bt('"\\u{2022}"', '"\\u{2022}"')
-        bt('a = /\s+/')
+        bt('a = /\\s+/')
         #bt('a = /\\x41/','a = /A/')
-        bt('"\\u2022";a = /\s+/;"\\x41\\x42\\x43\\x01".match(/\\x41/);','"\\u2022";\na = /\s+/;\n"\\x41\\x42\\x43\\x01".match(/\\x41/);')
+        bt('"\\u2022";a = /\\s+/;"\\x41\\x42\\x43\\x01".match(/\\x41/);','"\\u2022";\na = /\\s+/;\n"\\x41\\x42\\x43\\x01".match(/\\x41/);')
 
         test_fragment('"\\x41\\x42\\x01\\x43"')
         test_fragment('"\\x41\\x42\\u0001\\x43"')
@@ -110,7 +110,7 @@ def unicode_char(value):
         test_fragment('"\\u0072\\u016B\\u0137\\u012B\\u0074\\u0069\\u0073"', six.u('"\u0072\u016B\u0137\u012B\u0074\u0069\u0073"'))
         test_fragment('"\\u{0072}\\u{016B}\\u{110000}\\u{137}\\u012B\\x74\\u{0000069}\\u{073}"', six.u('"\u0072\u016B\\u{110000}\u0137\u012B\u0074\u0069\u0073"'))
 
-        bt('a = /\s+/')
+        bt('a = /\\s+/')
         test_fragment('"\\x22\\x27",\'\\x22\\x27\',"\\x5c",\'\\x5c\',"\\xff","unicode \\u0000 \\u0022 \\u0027 \\u005c \\uffff"',
            '"\\"\\\'", \'\\"\\\'\', "\\\\", \'\\\\\', "\\xff", "unicode \\u0000 \\" \\\' \\\\ ' + unicode_char(0xffff) + '"')