feat(angular): support interpolation in attributes (#5573)

prettier · Nov 30, 2018 · 2247ce1 · 2247ce1
1 parent 3fcf69a
commit 2247ce1
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 11 deletions.
diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
@@ -107,7 +107,7 @@ function embed(path, print, textToDoc, options) {
 
       // lit-html: html`<my-element obj=${obj}></my-element>`
       if (
-        /^PRETTIER_PLACEHOLDER_\d+$/.test(
+        /^PRETTIER_HTML_PLACEHOLDER_\d+_IN_JS$/.test(
           options.originalText.slice(
             node.valueSpan.start.offset,
             node.valueSpan.end.offset
@@ -1017,6 +1017,38 @@ function printEmbeddedAttributeValue(node, originalTextToDoc, options) {
         ngTextToDoc(getValue(), { parser: "__ng_directive" })
       );
     }
+
+    const interpolationRegex = /\{\{([\s\S]+?)\}\}/g;
+    const value = getValue();
+    if (interpolationRegex.test(value)) {
+      const parts = [];
+      value.split(interpolationRegex).forEach((part, index) => {
+        if (index % 2 === 0) {
+          parts.push(concat(replaceNewlines(part, literalline)));
+        } else {
+          try {
+            parts.push(
+              group(
+                concat([
+                  "{{",
+                  indent(
+                    concat([
+                      line,
+                      ngTextToDoc(part, { parser: "__ng_interpolation" })
+                    ])
+                  ),
+                  line,
+                  "}}"
+                ])
+              )
+            );
+          } catch (e) {
+            parts.push("{{", concat(replaceNewlines(part, literalline)), "}}");
+          }
+        }
+      });
+      return group(concat(parts));
+    }
   }
 
   return null;

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

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -153,6 +153,18 @@ printWidth: 80
       'btn-warning': (dialog$ | async).level === dialogLevelEnum.WARNING,
       'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER}"
     [stickout]="+toolAssembly.stickoutMm"
+    test='{{ "test" | translate }}'
+    test='foo {{       invalid invalid       }} bar {{       valid       }} baz'
+    test='foo
+
+    {{       invalid
+             invalid       }} 
+
+    bar 
+
+          {{       valid       }} 
+
+    baz'
 ></div>
 
 =====================================output=====================================
@@ -265,6 +277,18 @@ printWidth: 80
     'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER
   }"
   [stickout]="+toolAssembly.stickoutMm"
+  test="{{ 'test' | translate }}"
+  test="foo {{       invalid invalid       }} bar {{ valid }} baz"
+  test="foo
+
+    {{       invalid
+             invalid       }} 
+
+    bar 
+
+          {{ valid }} 
+
+    baz"
 ></div>
 
 ================================================================================
@@ -363,6 +387,18 @@ trailingComma: "es5"
       'btn-warning': (dialog$ | async).level === dialogLevelEnum.WARNING,
       'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER}"
     [stickout]="+toolAssembly.stickoutMm"
+    test='{{ "test" | translate }}'
+    test='foo {{       invalid invalid       }} bar {{       valid       }} baz'
+    test='foo
+
+    {{       invalid
+             invalid       }} 
+
+    bar 
+
+          {{       valid       }} 
+
+    baz'
 ></div>
 
 =====================================output=====================================
@@ -475,6 +511,18 @@ trailingComma: "es5"
     'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER
   }"
   [stickout]="+toolAssembly.stickoutMm"
+  test="{{ 'test' | translate }}"
+  test="foo {{       invalid invalid       }} bar {{ valid }} baz"
+  test="foo
+
+    {{       invalid
+             invalid       }} 
+
+    bar 
+
+          {{ valid }} 
+
+    baz"
 ></div>
 
 ================================================================================
@@ -572,6 +620,18 @@ printWidth: 1
       'btn-warning': (dialog$ | async).level === dialogLevelEnum.WARNING,
       'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER}"
     [stickout]="+toolAssembly.stickoutMm"
+    test='{{ "test" | translate }}'
+    test='foo {{       invalid invalid       }} bar {{       valid       }} baz'
+    test='foo
+
+    {{       invalid
+             invalid       }} 
+
+    bar 
+
+          {{       valid       }} 
+
+    baz'
 ></div>
 
 =====================================output=====================================
@@ -911,6 +971,25 @@ printWidth: 1
   [stickout]="
     +toolAssembly.stickoutMm
   "
+  test="{{
+    'test'
+      | translate
+  }}"
+  test="foo {{       invalid invalid       }} bar {{
+    valid
+  }} baz"
+  test="foo
+
+    {{       invalid
+             invalid       }} 
+
+    bar 
+
+          {{
+    valid
+  }} 
+
+    baz"
 ></div>
 
 ================================================================================
@@ -1009,6 +1088,18 @@ printWidth: 80
       'btn-warning': (dialog$ | async).level === dialogLevelEnum.WARNING,
       'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER}"
     [stickout]="+toolAssembly.stickoutMm"
+    test='{{ "test" | translate }}'
+    test='foo {{       invalid invalid       }} bar {{       valid       }} baz'
+    test='foo
+
+    {{       invalid
+             invalid       }} 
+
+    bar 
+
+          {{       valid       }} 
+
+    baz'
 ></div>
 
 =====================================output=====================================
@@ -1121,6 +1212,18 @@ printWidth: 80
     'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER
   }"
   [stickout]="+toolAssembly.stickoutMm"
+  test="{{ 'test' | translate }}"
+  test="foo {{       invalid invalid       }} bar {{ valid }} baz"
+  test="foo
+
+    {{       invalid
+             invalid       }} 
+
+    bar 
+
+          {{ valid }} 
+
+    baz"
 ></div>
 
 ================================================================================
@@ -3355,7 +3458,7 @@ can be found in the LICENSE file at http://angular.io/license
 
 <p>My current hero is {{ currentHero.name }}</p>
 
-<h3>{{ title }} <img src="{{heroImageUrl}}" style="height:30px" /></h3>
+<h3>{{ title }} <img src="{{ heroImageUrl }}" style="height:30px" /></h3>
 
 <!-- "The sum of 1 + 1 is 2" -->
 <p>The sum of 1 + 1 is {{ 1 + 1 }}</p>
@@ -3504,7 +3607,7 @@ can be found in the LICENSE file at http://angular.io/license
 <div *ngIf="false"><app-hero-detail hero="currentHero"></app-hero-detail></div>
 <app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
 
-<p><img src="{{heroImageUrl}}" /> is the <i>interpolated</i> image.</p>
+<p><img src="{{ heroImageUrl }}" /> is the <i>interpolated</i> image.</p>
 <p><img [src]="heroImageUrl" /> is the <i>property bound</i> image.</p>
 
 <p>
@@ -4846,7 +4949,7 @@ can be found in the LICENSE file at http://angular.io/license
 
 <p>My current hero is {{ currentHero.name }}</p>
 
-<h3>{{ title }} <img src="{{heroImageUrl}}" style="height:30px" /></h3>
+<h3>{{ title }} <img src="{{ heroImageUrl }}" style="height:30px" /></h3>
 
 <!-- "The sum of 1 + 1 is 2" -->
 <p>The sum of 1 + 1 is {{ 1 + 1 }}</p>
@@ -4995,7 +5098,7 @@ can be found in the LICENSE file at http://angular.io/license
 <div *ngIf="false"><app-hero-detail hero="currentHero"></app-hero-detail></div>
 <app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
 
-<p><img src="{{heroImageUrl}}" /> is the <i>interpolated</i> image.</p>
+<p><img src="{{ heroImageUrl }}" /> is the <i>interpolated</i> image.</p>
 <p><img [src]="heroImageUrl" /> is the <i>property bound</i> image.</p>
 
 <p>
@@ -6475,7 +6578,9 @@ can be found in the LICENSE file at http://angular.io/license
     title
   }}
   <img
-    src="{{heroImageUrl}}"
+    src="{{
+      heroImageUrl
+    }}"
     style="height:30px"
   />
 </h3>
@@ -7038,7 +7143,9 @@ can be found in the LICENSE file at http://angular.io/license
 
 <p>
   <img
-    src="{{heroImageUrl}}"
+    src="{{
+      heroImageUrl
+    }}"
   />
   is
   the
@@ -9768,7 +9875,7 @@ can be found in the LICENSE file at http://angular.io/license
 
 <h3>
   {{ title }}
-  <img src="{{heroImageUrl}}" style="height:30px" />
+  <img src="{{ heroImageUrl }}" style="height:30px" />
 </h3>
 
 <!-- "The sum of 1 + 1 is 2" -->
@@ -9944,7 +10051,7 @@ can be found in the LICENSE file at http://angular.io/license
 <app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
 
 <p>
-  <img src="{{heroImageUrl}}" />
+  <img src="{{ heroImageUrl }}" />
   is the
   <i>interpolated</i>
   image.

diff --git a/tests/html_angular/attributes.component.html b/tests/html_angular/attributes.component.html
@@ -84,4 +84,16 @@
       'btn-warning': (dialog$ | async).level === dialogLevelEnum.WARNING,
       'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER}"
     [stickout]="+toolAssembly.stickoutMm"
+    test='{{ "test" | translate }}'
+    test='foo {{       invalid invalid       }} bar {{       valid       }} baz'
+    test='foo
+    
+    {{       invalid
+             invalid       }} 
+    
+    bar 
+    
+          {{       valid       }} 
+    
+    baz'
 ></div>