vitalif-js
/
prettier
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

master
Ika 2018-11-30 09:28:54 +08:00 committed by GitHub
parent 3fcf69a7d5
commit 2247ce1aab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 162 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/language-html/printer-html.js
View File

@ -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;

4
src/language-js/embed.js
View File

@ -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

123
tests/html_angular/__snapshots__/jsfmt.spec.js.snap
View File

@ -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.

12
tests/html_angular/attributes.component.html
View File

@ -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>