fix(html-in-js): do not add quotes for interpolation-only attributes (#…

…5544)
prettier · Nov 25, 2018 · b6a04ab · b6a04ab
1 parent c788842
commit b6a04ab
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 3 deletions.
diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
@@ -101,6 +101,18 @@ function embed(path, print, textToDoc, options) {
         break;
       }
 
+      // lit-html: html`<my-element obj=${obj}></my-element>`
+      if (
+        /^PRETTIER_PLACEHOLDER_\d+$/.test(
+          options.originalText.slice(
+            node.valueSpan.start.offset,
+            node.valueSpan.end.offset
+          )
+        )
+      ) {
+        return concat([node.rawName, "=", node.value]);
+      }
+
       const embeddedAttributeValueDoc = printEmbeddedAttributeValue(
         node,
         (code, opts) =>

diff --git a/src/language-js/embed.js b/src/language-js/embed.js
@@ -567,10 +567,9 @@ function isHtml(path) {
 function printHtmlTemplateLiteral(path, print, textToDoc, parser) {
   const node = path.getValue();
 
-  const placeholderPattern =
-    "prettierhtmlplaceholder(\\d+)redlohecalplmthreitterp";
+  const placeholderPattern = "PRETTIER_PLACEHOLDER_(\\d+)";
   const placeholders = node.expressions.map(
-    (_, i) => `prettierhtmlplaceholder${i}redlohecalplmthreitterp`
+    (_, i) => `PRETTIER_PLACEHOLDER_${i}`
   );
 
   const text = node.quasis

diff --git a/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap
@@ -47,6 +47,8 @@ const someHtml1 = html\`<div       > hello \${world} </div     >\`;
 const someHtml2 = /* HTML */ \`<div      > hello \${world} </div     >\`;
 
 html\`\`
+
+html\`<my-element obj=\${obj}></my-element>\`;
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 import { LitElement, html } from "@polymer/lit-element";
 
@@ -86,4 +88,8 @@ const someHtml2 = /* HTML */ \`
 
 html\`\`;
 
+html\`
+  <my-element obj=\${obj}></my-element>
+\`;
+
 `;
diff --git a/tests/multiparser_js_html/lit-html.js b/tests/multiparser_js_html/lit-html.js
@@ -44,3 +44,5 @@ const someHtml1 = html`<div       > hello ${world} </div     >`;
 const someHtml2 = /* HTML */ `<div      > hello ${world} </div     >`;
 
 html``
+
+html`<my-element obj=${obj}></my-element>`;