fix(handlebars): Use quotes from config in AttrNode (#6377)

CHANGELOG.unreleased.md

@@ -679,6 +679,22 @@ const fooooooooooooooo: SomeThing<
 const fooooooooooooooo: SomeThing<boolean> = looooooooooooooooooooooooooooooongNameFunc();
 ```
 
+#### Handlebars: Fix --single-quote option on html attributes ([#6377] by [@dcyriller])
+
+Previously, the flag was not applied on html attributes.
+
+<!-- prettier-ignore-->
+```hbs
+// Input
+<div class="a-class-name"></div>
+
+// Prettier (stable with the option --single-quote)
+<div class="a-class-name"></div>
+
+// Prettier (master with the option --single-quote)
+<div class='a-class-name'></div>
+````
+
 [#5910]: https://github.com/prettier/prettier/pull/5910
 [#6186]: https://github.com/prettier/prettier/pull/6186
 [#6206]: https://github.com/prettier/prettier/pull/6206
@@ -703,6 +719,7 @@ const fooooooooooooooo: SomeThing<boolean> = looooooooooooooooooooooooooooooongN
 [#6506]: https://github.com/prettier/prettier/pull/6506
 [#6514]: https://github.com/prettier/prettier/pull/6514
 [#6467]: https://github.com/prettier/prettier/pull/6467
+[#6377]: https://github.com/prettier/prettier/pull/6377
 [@duailibe]: https://github.com/duailibe
 [@gavinjoyce]: https://github.com/gavinjoyce
 [@sosukesuzuki]: https://github.com/sosukesuzuki
@@ -710,3 +727,4 @@ const fooooooooooooooo: SomeThing<boolean> = looooooooooooooooooooooooooooooongN
 [@jounqin]: https://github.com/JounQin
 [@bakkot]: https://gibhub.com/bakkot
 [@thorn0]: https://github.com/thorn0
+[@dcyriller]: https://github.com/dcyriller

src/language-handlebars/printer-glimmer.js

@@ -195,8 +195,9 @@ function print(path, options, print) {
       if (isText && n.value.loc.start.column === n.value.loc.end.column) {
         return concat([n.name]);
       }
-      const quote = isText ? '"' : "";
+      const value = path.call(print, "value");
-      return concat([n.name, "=", quote, path.call(print, "value"), quote]);
+      const quotedValue = isText ? printStringLiteral(value, options) : value;
+      return concat([n.name, "=", quotedValue]);
     }
     case "ConcatStatement": {
       return concat([

tests/handlebars-attr-node/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`brackets.hbs 1`] = `
+====================================options=====================================
+parsers: ["glimmer"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div title='My title'></div>
+<div title="My title"></div>
+<div title='My "title"'></div>
+<div title="My other 'title'"></div>
+
+=====================================output=====================================
+<div title="My title"></div>
+<div title="My title"></div>
+<div title='My "title"'></div>
+<div title="My other 'title'"></div>
+================================================================================
+`;
+
+exports[`brackets.hbs 2`] = `
+====================================options=====================================
+parsers: ["glimmer"]
+printWidth: 80
+singleQuote: true
+                                                                                | printWidth
+=====================================input======================================
+<div title='My title'></div>
+<div title="My title"></div>
+<div title='My "title"'></div>
+<div title="My other 'title'"></div>
+
+=====================================output=====================================
+<div title='My title'></div>
+<div title='My title'></div>
+<div title='My "title"'></div>
+<div title="My other 'title'"></div>
+================================================================================
+`;

tests/handlebars-attr-node/brackets.hbs

@@ -0,0 +1,4 @@
+<div title='My title'></div>
+<div title="My title"></div>
+<div title='My "title"'></div>
+<div title="My other 'title'"></div>

tests/handlebars-attr-node/jsfmt.spec.js

@@ -0,0 +1,2 @@
+run_spec(__dirname, ["glimmer"]);
+run_spec(__dirname, ["glimmer"], { singleQuote: true });

tests/handlebars-basics/__snapshots__/jsfmt.spec.js.snap

@@ -51,12 +51,12 @@ singleQuote: true
 <div class="{{hello}} {{world}}"></div>
 
 =====================================output=====================================
-<script id="entry-template" type="text/x-handlebars-template">
+<script id='entry-template' type='text/x-handlebars-template'>
-  <div class="entry">
+  <div class='entry'>
     <h1>
       {{title}}
     </h1>
-    <div class="body">
+    <div class='body'>
       {{body}}
     </div>
   </div>
@@ -161,7 +161,7 @@ singleQuote: true
 <div ...attributes>Hello</div>
 
 =====================================output=====================================
-<UserGreeting @name="Ricardo" @greeting="Olá" />
+<UserGreeting @name='Ricardo' @greeting='Olá' />
 {{@greeting}}
 ,
 {{@name}}
@@ -172,18 +172,18 @@ singleQuote: true
   />
 </div>
 <Form as |f|>
-  <f.input @title="hello" />
+  <f.input @title='hello' />
   <f.input>
     hello
   </f.input>
 </Form>
-<this.label @title="hello" />
+<this.label @title='hello' />
 <button onclick={{action next}}>
   Next
 </button>
-<button disabled class="disabled"></button>
+<button disabled class='disabled'></button>
-<button disabled="disabled" class="disabled"></button>
+<button disabled='disabled' class='disabled'></button>
-<img alt="" />
+<img alt='' />
 <div ...attributes>
   Hello
 </div>
@@ -288,14 +288,14 @@ singleQuote: true
 </div>
 
 =====================================output=====================================
-<div class="entry">
+<div class='entry'>
   <h1>
     {{title}}
   </h1>
   <h2>
     By {{author.name}}
   </h2>
-  <div class="body">
+  <div class='body'>
     {{body}}
   </div>
 </div>

tests/handlebars-block-statement/__snapshots__/jsfmt.spec.js.snap

@@ -337,7 +337,7 @@ singleQuote: true
 </div>
 
 =====================================output=====================================
-<div id="comments">
+<div id='comments'>
   {{#each comments}}
     <h2>
       <a href="/posts/{{permalink}}#{{id}}">

tests/handlebars-concat-statement/__snapshots__/jsfmt.spec.js.snap

@@ -113,6 +113,6 @@ singleQuote: true
 <div class="class-i {{myClass}}class-j"></div>
 <div class="class-k {{myClass}} class-l"></div>
 <div class="class-m {{myClass}} class-n {{myClass}}class-o"></div>
-<div class="class-p  class-q"></div>
+<div class='class-p  class-q'></div>
 ================================================================================
 `;

tests/handlebars-element-node/__snapshots__/jsfmt.spec.js.snap

@@ -120,7 +120,7 @@ singleQuote: true
 <img />
 
 =====================================output=====================================
-<div class="attribute" {{modifier}} {{! comment}}>
+<div class='attribute' {{modifier}} {{! comment}}>
   Hello
 </div>
 <div>