Maintain relative order of attributes and comments within an ElementNode

(cherry picked from commit 1a54cba)
(cherry picked from commit 8fa7141)

Author: Robert Jackson

packages/@glimmer/syntax/index.ts

@@ -21,6 +21,7 @@ export * from './lib/traversal/visitor';
 export { default as Path } from './lib/traversal/path';
 export { default as Walker } from './lib/traversal/walker';
 export { default as print } from './lib/generation/print';
+export { sortByLoc } from './lib/generation/util';
 
 // errors
 export { default as SyntaxError } from './lib/errors/syntax-error';

packages/@glimmer/syntax/lib/generation/printer.ts

@@ -27,7 +27,7 @@ import {
   Template,
 } from '../types/nodes';
 import { voidMap } from '../parser/tokenizer-event-handlers';
-import { escapeText, escapeAttrValue } from './util';
+import { escapeText, escapeAttrValue, sortByLoc } from './util';
 
 const NON_WHITESPACE = /\S/;
 
@@ -242,23 +242,21 @@ export default class Printer {
 
   OpenElementNode(el: ElementNode): void {
     this.buffer += `<${el.tag}`;
-    if (el.attributes.length) {
-      el.attributes.forEach(attr => {
-        this.buffer += ' ';
-        this.AttrNode(attr);
-      });
-    }
-    if (el.modifiers.length) {
-      el.modifiers.forEach(mod => {
-        this.buffer += ' ';
-        this.ElementModifierStatement(mod);
-      });
-    }
-    if (el.comments.length) {
-      el.comments.forEach(comment => {
-        this.buffer += ' ';
-        this.MustacheCommentStatement(comment);
-      });
+    const parts = [...el.attributes, ...el.modifiers, ...el.comments].sort(sortByLoc);
+
+    for (const part of parts) {
+      this.buffer += ' ';
+      switch (part.type) {
+        case 'AttrNode':
+          this.AttrNode(part);
+          break;
+        case 'ElementModifierStatement':
+          this.ElementModifierStatement(part);
+          break;
+        case 'MustacheCommentStatement':
+          this.MustacheCommentStatement(part);
+          break;
+      }
     }
     if (el.blockParams.length) {
       this.BlockParams(el.blockParams);

packages/@glimmer/syntax/lib/generation/util.ts

@@ -1,3 +1,5 @@
+import * as AST from '../types/nodes';
+
 const enum Char {
   NBSP = 0xa0,
   QUOT = 0x22,
@@ -53,3 +55,32 @@ export function escapeText(text: string) {
   }
   return text;
 }
+
+export function isSynthetic(node: AST.Node): boolean {
+  if (node && node.loc) {
+    return node.loc.source === '(synthetic)';
+  }
+
+  return false;
+}
+
+export function sortByLoc(a: AST.Node, b: AST.Node): -1 | 0 | 1 {
+  // be conservative about the location where a new node is inserted
+  if (isSynthetic(a) || isSynthetic(b)) {
+    return 0;
+  }
+
+  if (a.loc.start.line < b.loc.start.line) {
+    return -1;
+  }
+
+  if (a.loc.start.line === b.loc.start.line && a.loc.start.column < b.loc.start.column) {
+    return -1;
+  }
+
+  if (a.loc.start.line === b.loc.start.line && a.loc.start.column === b.loc.start.column) {
+    return 0;
+  }
+
+  return 1;
+}

packages/@glimmer/syntax/lib/parser/handlebars-node-visitors.ts

@@ -194,6 +194,7 @@ export abstract class HandlebarsNodeVisitors extends Parser {
 
     switch (tokenizer.state) {
       case TokenizerState.beforeAttributeName:
+      case TokenizerState.afterAttributeName:
         this.currentStartTag.comments.push(comment);
         break;
 

packages/@glimmer/syntax/test/generation/print-test.ts

@@ -54,6 +54,9 @@ let templates = [
 
   // unescaped
   '{{{unescaped}}}',
+
+  // Comment in Angle Bracket component
+  '<Foo {{!-- This is a comment --}} attribute></Foo>',
 ];
 
 QUnit.module('[glimmer-syntax] Code generation', function() {

packages/@glimmer/syntax/test/parser-node-test.ts

@@ -538,6 +538,16 @@ test('a Handlebars comment in proper element space', function() {
   );
 });
 
+test('a Handlebars comment after a valueless attribute', function() {
+  let t = '<input foo {{! comment }}>';
+  astEqual(
+    t,
+    b.program([
+      b.element('input', ['attrs', ['foo', '']], ['comments', b.mustacheComment(' comment ')]),
+    ])
+  );
+});
+
 test('a Handlebars comment in invalid element space', function(assert) {
   assert.throws(() => {
     parse('\nbefore <div \n  a{{! some comment }} data-foo="bar"></div> after');