Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(angular): support interpolation in attributes #5573

Merged
merged 5 commits into from Nov 30, 2018
Merged

feat(angular): support interpolation in attributes #5573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
29f0e38
test: add tests
ikatyang Nov 28, 2018
73242c0
refactor
ikatyang Nov 28, 2018
41c49e3
test: add tests
ikatyang Nov 28, 2018
d5d9d3f
feat(angular): support interpolation in attributes
ikatyang Nov 28, 2018
dd62e8c
Merge branch 'master' into feat/angular/intepolation-in-attr
ikatyang Nov 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
34 changes: 33 additions & 1 deletion src/language-html/printer-html.js
View file
Open in desktop
Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/language-js/embed.js
View file
Open in desktop
Expand Up @@ -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
Expand Down
123 changes: 115 additions & 8 deletions tests/html_angular/__snapshots__/jsfmt.spec.js.snap
View file
Open in desktop
Expand Up @@ -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=====================================
Expand Down Expand Up @@ -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>

================================================================================
Expand Down Expand Up @@ -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=====================================
Expand Down Expand Up @@ -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>

================================================================================
Expand Down Expand Up @@ -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=====================================
Expand Down Expand Up @@ -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>

================================================================================
Expand Down Expand Up @@ -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=====================================
Expand Down Expand Up @@ -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>

================================================================================
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -7038,7 +7143,9 @@ can be found in the LICENSE file at http://angular.io/license

<p>
<img
src="{{heroImageUrl}}"
src="{{
heroImageUrl
}}"
/>
is
the
Expand Down Expand Up @@ -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" -->
Expand Down Expand Up @@ -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.
Expand Down
12 changes: 12 additions & 0 deletions tests/html_angular/attributes.component.html
View file
Open in desktop
Expand Up @@ -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>