Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[localize-tools] Keep expressions in attribute values for transform mode #2692

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

Merged
augustjk merged 4 commits into from
Apr 1, 2022
Merged

[localize-tools] Keep expressions in attribute values for transform mode #2692

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6af10eb
Prevent subsuming expressions in attr values
augustjk Mar 31, 2022
249912e
Add e2e test
augustjk Mar 31, 2022
6fd6286
Add changeset
augustjk Mar 31, 2022
a905a15
Add more tests
augustjk Apr 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tender-bobcats-greet.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lit/localize-tools': patch
---

Fix issue with placing expressions as html attribute values in transform mode
19 changes: 17 additions & 2 deletions packages/localize-tools/src/modes/transform.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -448,7 +448,7 @@ class Transformer {
'Internal error: string literal cannot be html-tagged'
);
}
return template;
return newTemplate;
Copy link
Member

@aomarks aomarks Mar 31, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops! Do the tests in this PR fail if this is switched back to template? If not, is there a test we could add that would cover it?

Copy link
Member Author

@augustjk augustjk Mar 31, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Upon taking a closer look now, it seems we never enter this code block if a translation does occur because then newTemplate would always be a ts.TemplateLiteral. The only time we enter this block is when we don't have to translate, i.e. generating original locale's version of the source, in which case newTemplate would not have changed from it's original assignment from template here:

lit/packages/localize-tools/src/modes/transform.ts

Line 335 in f78b4cc

let newTemplate = template;

So.. it was technically an oversight but of no consequence, hence none of our existing tests failed. For readability's sake I think keeping newTemplate here still makes sense.

Copy link
Member

@aomarks aomarks Mar 31, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sgtm

}

// We may have ended up with template expressions that can be represented
Expand Down Expand Up @@ -534,7 +534,22 @@ class Transformer {
return true;
};

for (const span of template.templateSpans) {
for (let i = 0; i < template.templateSpans.length; i++) {
const span = template.templateSpans[i];
// A span preceded by `=` can be an attribute so skip subsume and
// keep it as an expression to produce valid lit-html template
// TODO(augustinekim) Consider optimizing to regular quoted string for
// regular html attributes
if (
(i === 0
? template.head.text
: template.templateSpans[i - 1].literal.text
).endsWith('=')
) {
fragments.push(ts.visitNode(span.expression, this.boundVisitNode));
fragments.push(span.literal.text);
continue;
}
let expression = span.expression;
// Can we directly subsume this span?
if (!subsume(expression)) {
Expand Down
72 changes: 72 additions & 0 deletions packages/localize-tools/src/tests/transform.unit.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,6 +353,78 @@ test('msg(string(<b>msg(string)</b>)) translated', () => {
);
});

test('html(msg(string)) with msg as attr value', () => {
Copy link
Member

@aomarks aomarks Mar 31, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you add one with a .bar property attribute, too? Same result, just for completeness.

Copy link
Member Author

@augustjk augustjk Apr 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, and also added additional tests for having multiple attributes in a single template expression so as to test the logic for looking at both the head and the middle.

Copy link
Member

@aomarks aomarks Apr 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

checkTransform(
'html`Hello <b bar=${msg("World", {id: "bar"})}>${"World"}</b>!`;',
'html`Hello <b bar=${"World"}>World</b>!`;'
);
});

test('html(msg(string)) with msg as attr value translated', () => {
checkTransform(
'html`Hello <b bar=${msg("world", {id: "bar"})}>${"World"}</b>!`;',
'html`Hello <b bar=${`Mundo`}>World</b>!`;',
{
messages: [
{
name: 'bar',
contents: ['Mundo'],
},
],
}
);
});

test('html(msg(string)) with multiple msg as attr value', () => {
checkTransform(
'html`<b foo=${msg("Hello", {id: "foo"})}>${"Hello"}</b>' +
'<b bar=${msg("World", {id: "bar"})}>${"World"}</b>!`;',
'html`<b foo=${"Hello"}>Hello</b><b bar=${"World"}>World</b>!`;'
);
});

test('html(msg(string)) with multiple msg as attr value translated', () => {
checkTransform(
'html`<b foo=${msg("Hello", {id: "foo"})}>${"Hello"}</b>' +
'<b bar=${msg("World", {id: "bar"})}>${"World"}</b>!`;',
'html`<b foo=${`Hola`}>Hello</b><b bar=${`Mundo`}>World</b>!`;',
{
messages: [
{
name: 'foo',
contents: ['Hola'],
},
{
name: 'bar',
contents: ['Mundo'],
},
],
}
);
});

test('html(msg(string)) with msg as property attr value', () => {
checkTransform(
'html`Hello <b .bar=${msg("World", {id: "bar"})}>${"World"}</b>!`;',
'html`Hello <b .bar=${"World"}>World</b>!`;'
);
});

test('html(msg(string)) with msg as property attr value translated', () => {
checkTransform(
'html`Hello <b .bar=${msg("World", {id: "bar"})}>${"World"}</b>!`;',
'html`Hello <b .bar=${`Mundo`}>World</b>!`;',
{
messages: [
{
name: 'bar',
contents: ['Mundo'],
},
],
}
);
});

test('import * as litLocalize', () => {
checkTransform(
`
Expand Down
7 changes: 7 additions & 0 deletions packages/localize-tools/testdata/build-transform-xliff/goldens/foo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,3 +79,10 @@ export class MyElement2 extends LitElement {

// Escaped markup characters should remain escaped
msg(html`&lt;Hello<b>&lt;World &amp; Friends&gt;</b>!&gt;`);

// Expressions as attribute values should stay as expressions
html`Hello <b foo=${'World'}>World</b>`;
html`Hello <b foo=${msg('World')}>World</b>`;
html`<b foo=${msg('Hello')}>Hello</b><b bar=${msg('World')}>World</b>`;
html`Hello <b .foo=${'World'}>World</b>`;
html`Hello <b .foo=${msg('World')}>World</b>`;
6 changes: 6 additions & 0 deletions packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/en/foo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,9 @@ export class MyElement2 extends LitElement {
}
// Escaped markup characters should remain escaped
html`&lt;Hello<b>&lt;World &amp; Friends&gt;</b>!&gt;`;
// Expressions as attribute values should stay as expressions
html`Hello <b foo=${'World'}>World</b>`;
html`Hello <b foo=${'World'}>World</b>`;
html`<b foo=${'Hello'}>Hello</b><b bar=${'World'}>World</b>`;
html`Hello <b .foo=${'World'}>World</b>`;
html`Hello <b .foo=${'World'}>World</b>`;
6 changes: 6 additions & 0 deletions packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/es-419/foo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,9 @@ export class MyElement2 extends LitElement {
}
// Escaped markup characters should remain escaped
html`&lt;Hola<b>&lt;Mundo &amp; Amigos&gt;</b>!&gt;`;
// Expressions as attribute values should stay as expressions
html`Hello <b foo=${'World'}>World</b>`;
html`Hello <b foo=${`Mundo`}>World</b>`;
html`<b foo=${'Hello'}>Hello</b><b bar=${`Mundo`}>World</b>`;
html`Hello <b .foo=${'World'}>World</b>`;
html`Hello <b .foo=${`Mundo`}>World</b>`;
6 changes: 6 additions & 0 deletions packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/zh_CN/foo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,9 @@ export class MyElement2 extends LitElement {
}
// Escaped markup characters should remain escaped
html`&lt;Hello<b>&lt;World &amp; Friends&gt;</b>!&gt;`;
// Expressions as attribute values should stay as expressions
html`Hello <b foo=${'World'}>World</b>`;
html`Hello <b foo=${'World'}>World</b>`;
html`<b foo=${'Hello'}>Hello</b><b bar=${'World'}>World</b>`;
html`Hello <b .foo=${'World'}>World</b>`;
html`Hello <b .foo=${'World'}>World</b>`;
7 changes: 7 additions & 0 deletions packages/localize-tools/testdata/build-transform-xliff/input/foo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,3 +79,10 @@ export class MyElement2 extends LitElement {

// Escaped markup characters should remain escaped
msg(html`&lt;Hello<b>&lt;World &amp; Friends&gt;</b>!&gt;`);

// Expressions as attribute values should stay as expressions
html`Hello <b foo=${"World"}>World</b>`;
html`Hello <b foo=${msg("World")}>World</b>`;
html`<b foo=${msg("Hello")}>Hello</b><b bar=${msg("World")}>World</b>`;
html`Hello <b .foo=${"World"}>World</b>`;
html`Hello <b .foo=${msg("World")}>World</b>`;