[localize-tools] Keep expressions in attribute values for transform m…

…ode (#2692)
lit · Apr 1, 2022 · c41a92c · c41a92c
1 parent 171143b
commit c41a92c
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 2 deletions.
diff --git a/.changeset/tender-bobcats-greet.md b/.changeset/tender-bobcats-greet.md
@@ -0,0 +1,5 @@
+---
+'@lit/localize-tools': patch
+---
+
+Fix issue with placing expressions as html attribute values in transform mode
diff --git a/packages/localize-tools/src/modes/transform.ts b/packages/localize-tools/src/modes/transform.ts
@@ -448,7 +448,7 @@ class Transformer {
           'Internal error: string literal cannot be html-tagged'
         );
       }
-      return template;
+      return newTemplate;
     }
 
     // We may have ended up with template expressions that can be represented
@@ -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)) {

diff --git a/packages/localize-tools/src/tests/transform.unit.test.ts b/packages/localize-tools/src/tests/transform.unit.test.ts
@@ -353,6 +353,78 @@ test('msg(string(<b>msg(string)</b>)) translated', () => {
   );
 });
 
+test('html(msg(string)) with msg as 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 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(
     `

diff --git a/packages/localize-tools/testdata/build-transform-xliff/goldens/foo.ts b/packages/localize-tools/testdata/build-transform-xliff/goldens/foo.ts
@@ -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>`;
diff --git a/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/en/foo.js b/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/en/foo.js
@@ -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>`;
diff --git a/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/es-419/foo.js b/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/es-419/foo.js
@@ -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>`;
diff --git a/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/zh_CN/foo.js b/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/zh_CN/foo.js
@@ -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>`;
diff --git a/packages/localize-tools/testdata/build-transform-xliff/input/foo.ts b/packages/localize-tools/testdata/build-transform-xliff/input/foo.ts
@@ -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>`;