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

augustjk · 2022-03-31T22:51:54Z

No longer subsume expressions into text if they follow a = with the assumption being they are placed as a value of a html attribute, allowing lit-html to parse them properly.

This PR also corrects an oversight from #2405 where we were returning the old template rather than newTemplate if we had a simple string literal after applying translation.

changeset-bot · 2022-03-31T22:51:56Z

🦋 Changeset detected

Latest commit: a905a15

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2022-03-31T22:52:15Z

📊 Tachometer Benchmark Results

Summary

nop-update

lit-html-kitchen-sink: unsure 🔍 -6% - +1% (-1.55ms - +0.25ms)
^{this-change vs tip-of-tree}

render

lit-element-list: unsure 🔍 -3% - +1% (-2.05ms - +0.62ms)
^{this-change vs tip-of-tree}
lit-html-kitchen-sink: unsure 🔍 -4% - +3% (-1.17ms - +0.73ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -3% - +3% (-0.25ms - +0.32ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -2% - +2% (-0.94ms - +0.91ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -2% - +2% (-1.14ms - +1.10ms)
^{this-change vs tip-of-tree}

update

lit-element-list: unsure 🔍 -2% - +1% (-12.72ms - +8.54ms)
^{this-change vs tip-of-tree}
lit-html-kitchen-sink: unsure 🔍 -4% - +3% (-3.11ms - +2.49ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -1% - +3% (-3.68ms - +9.09ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -3% - +2% (-3.21ms - +2.23ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -2% - +2% (-13.20ms - +11.77ms)
^{this-change vs tip-of-tree}

update-reflect

lit-element-list: unsure 🔍 -2% - +1% (-14.54ms - +5.51ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -1% - +2% (-7.59ms - +14.04ms)
^{this-change vs tip-of-tree}

Results

lit-element-list

Browser: chrome-headless 98.0.4758.102
Sample size: 50
Built by: Benchmarks #2645
Commit: 5be2d7e

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	64.30ms - 65.91ms	-	unsure 🔍 -3% - +1% -2.05ms - +0.62ms	faster ✔ 19% - 22% 15.10ms - 17.87ms
tip-of-tree tip-of-tree	64.76ms - 66.89ms	unsure 🔍 -1% - +3% -0.62ms - +2.05ms	-	faster ✔ 18% - 21% 14.22ms - 17.32ms
previous-release previous-release	80.46ms - 82.72ms	slower ❌ 23% - 28% 15.10ms - 17.87ms	slower ❌ 21% - 27% 14.22ms - 17.32ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	623.23ms - 635.76ms	-	unsure 🔍 -2% - +1% -12.72ms - +8.54ms	faster ✔ 8% - 11% 58.08ms - 76.57ms
tip-of-tree tip-of-tree	623.00ms - 640.17ms	unsure 🔍 -1% - +2% -8.54ms - +12.72ms	-	faster ✔ 8% - 11% 54.29ms - 76.19ms
previous-release previous-release	690.03ms - 703.62ms	slower ❌ 9% - 12% 58.08ms - 76.57ms	slower ❌ 8% - 12% 54.29ms - 76.19ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	714.06ms - 726.22ms	-	unsure 🔍 -2% - +1% -14.54ms - +5.51ms	faster ✔ 4% - 6% 29.17ms - 47.50ms
tip-of-tree tip-of-tree	716.68ms - 732.62ms	unsure 🔍 -1% - +2% -5.51ms - +14.54ms	-	faster ✔ 3% - 6% 23.30ms - 44.34ms
previous-release previous-release	751.61ms - 765.34ms	slower ❌ 4% - 7% 29.17ms - 47.50ms	slower ❌ 3% - 6% 23.30ms - 44.34ms	-

lit-html-kitchen-sink

Browser: chrome-headless 98.0.4758.102
Sample size: 30
Built by: Benchmarks #2645
Commit: 5be2d7e

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	27.25ms - 28.63ms	-	unsure 🔍 -4% - +3% -1.17ms - +0.73ms	faster ✔ 14% - 21% 4.55ms - 7.10ms
tip-of-tree tip-of-tree	27.51ms - 28.81ms	unsure 🔍 -3% - +4% -0.73ms - +1.17ms	-	faster ✔ 13% - 20% 4.36ms - 6.86ms
previous-release previous-release	32.70ms - 34.83ms	slower ❌ 16% - 26% 4.55ms - 7.10ms	slower ❌ 15% - 25% 4.36ms - 6.86ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	74.88ms - 78.96ms	-	unsure 🔍 -4% - +3% -3.11ms - +2.49ms	unsure 🔍 -4% - +4% -3.14ms - +2.71ms
tip-of-tree tip-of-tree	75.31ms - 79.15ms	unsure 🔍 -3% - +4% -2.49ms - +3.11ms	-	unsure 🔍 -4% - +4% -2.74ms - +2.94ms
previous-release previous-release	75.04ms - 79.23ms	unsure 🔍 -4% - +4% -2.71ms - +3.14ms	unsure 🔍 -4% - +4% -2.94ms - +2.74ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	23.19ms - 24.46ms	-	unsure 🔍 -6% - +1% -1.55ms - +0.25ms	faster ✔ 11% - 17% 2.88ms - 4.83ms
tip-of-tree tip-of-tree	23.83ms - 25.12ms	unsure 🔍 -1% - +7% -0.25ms - +1.55ms	-	faster ✔ 8% - 15% 2.22ms - 4.19ms
previous-release previous-release	26.93ms - 28.43ms	slower ❌ 12% - 21% 2.88ms - 4.83ms	slower ❌ 9% - 17% 2.22ms - 4.19ms	-

lit-html-repeat

Browser: chrome-headless 98.0.4758.102
Sample size: 30
Built by: Benchmarks #2645
Commit: 5be2d7e

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	9.45ms - 9.88ms	-	unsure 🔍 -3% - +3% -0.25ms - +0.32ms	faster ✔ 10% - 17% 1.11ms - 1.90ms
tip-of-tree tip-of-tree	9.44ms - 9.82ms	unsure 🔍 -3% - +3% -0.32ms - +0.25ms	-	faster ✔ 11% - 17% 1.15ms - 1.93ms
previous-release previous-release	10.83ms - 11.51ms	slower ❌ 11% - 20% 1.11ms - 1.90ms	slower ❌ 12% - 20% 1.15ms - 1.93ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	263.12ms - 273.17ms	-	unsure 🔍 -1% - +3% -3.68ms - +9.09ms	faster ✔ 28% - 31% 107.90ms - 121.04ms
tip-of-tree tip-of-tree	261.50ms - 269.38ms	unsure 🔍 -3% - +1% -9.09ms - +3.68ms	-	faster ✔ 29% - 32% 111.38ms - 122.97ms
previous-release previous-release	378.38ms - 386.86ms	slower ❌ 40% - 46% 107.90ms - 121.04ms	slower ❌ 41% - 47% 111.38ms - 122.97ms	-

lit-html-template-heavy

Browser: chrome-headless 98.0.4758.102
Sample size: 50
Built by: Benchmarks #2645
Commit: 5be2d7e

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	47.39ms - 48.71ms	-	unsure 🔍 -2% - +2% -0.94ms - +0.91ms	faster ✔ 15% - 20% 8.57ms - 11.75ms
tip-of-tree tip-of-tree	47.42ms - 48.71ms	unsure 🔍 -2% - +2% -0.91ms - +0.94ms	-	faster ✔ 15% - 20% 8.56ms - 11.73ms
previous-release previous-release	56.76ms - 59.66ms	slower ❌ 18% - 25% 8.57ms - 11.75ms	slower ❌ 18% - 25% 8.56ms - 11.73ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	99.31ms - 103.51ms	-	unsure 🔍 -3% - +2% -3.21ms - +2.23ms	faster ✔ 13% - 18% 15.86ms - 22.16ms
tip-of-tree tip-of-tree	100.17ms - 103.63ms	unsure 🔍 -2% - +3% -2.23ms - +3.21ms	-	faster ✔ 13% - 18% 15.60ms - 21.44ms
previous-release previous-release	118.07ms - 122.77ms	slower ❌ 15% - 22% 15.86ms - 22.16ms	slower ❌ 15% - 21% 15.60ms - 21.44ms	-

reactive-element-list

Browser: chrome-headless 98.0.4758.102
Sample size: 50
Built by: Benchmarks #2645
Commit: 5be2d7e

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	47.13ms - 48.56ms	-	unsure 🔍 -2% - +2% -1.14ms - +1.10ms	unsure 🔍 -1% - +3% -0.49ms - +1.34ms
tip-of-tree tip-of-tree	47.01ms - 48.72ms	unsure 🔍 -2% - +2% -1.10ms - +1.14ms	-	unsure 🔍 -1% - +3% -0.58ms - +1.47ms
previous-release previous-release	46.86ms - 47.99ms	unsure 🔍 -3% - +1% -1.34ms - +0.49ms	unsure 🔍 -3% - +1% -1.47ms - +0.58ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	648.48ms - 665.93ms	-	unsure 🔍 -2% - +2% -13.20ms - +11.77ms	unsure 🔍 -1% - +3% -4.85ms - +18.01ms
tip-of-tree tip-of-tree	648.99ms - 666.85ms	unsure 🔍 -2% - +2% -11.77ms - +13.20ms	-	unsure 🔍 -1% - +3% -4.29ms - +18.89ms
previous-release previous-release	643.23ms - 658.01ms	unsure 🔍 -3% - +1% -18.01ms - +4.85ms	unsure 🔍 -3% - +1% -18.89ms - +4.29ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	749.12ms - 765.28ms	-	unsure 🔍 -1% - +2% -7.59ms - +14.04ms	unsure 🔍 -1% - +2% -8.11ms - +16.06ms
tip-of-tree tip-of-tree	746.79ms - 761.17ms	unsure 🔍 -2% - +1% -14.04ms - +7.59ms	-	unsure 🔍 -1% - +2% -10.76ms - +12.26ms
previous-release previous-release	744.24ms - 762.22ms	unsure 🔍 -2% - +1% -16.06ms - +8.11ms	unsure 🔍 -2% - +1% -12.26ms - +10.76ms	-

_{tachometer-reporter-action v2 for Benchmarks}

aomarks

Awesome! Just a small request for an extra test, and a question.

aomarks · 2022-03-31T22:53:50Z

packages/localize-tools/src/tests/transform.unit.test.ts

  );
 });

+test('html(msg(string)) with msg as attr value', () => {


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

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.

aomarks · 2022-03-31T22:55:04Z

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

        );
      }
-      return template;
+      return newTemplate;


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?

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.

aomarks

Looks great

augustjk added 3 commits March 31, 2022 15:48

Prevent subsuming expressions in attr values

6af10eb

Add e2e test

249912e

Add changeset

6fd6286

augustjk requested a review from aomarks March 31, 2022 22:51

augustjk requested a review from justinfagnani as a code owner March 31, 2022 22:51

aomarks requested changes Mar 31, 2022

View reviewed changes

Add more tests

a905a15

augustjk requested a review from aomarks April 1, 2022 00:05

aomarks approved these changes Apr 1, 2022

View reviewed changes

augustjk merged commit c41a92c into main Apr 1, 2022

augustjk deleted the localize-expr-in-attr branch April 1, 2022 18:24

lit-robot mentioned this pull request Apr 4, 2022

Version Packages #2700

Merged

augustjk mentioned this pull request Feb 12, 2024

lit-localize breaks property passing in transform mode #4544

Open

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

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

Uh oh!

Conversation

augustjk commented Mar 31, 2022

Uh oh!

changeset-bot bot commented Mar 31, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Mar 31, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Tachometer Benchmark Results

Summary

nop-update

render

update

update-reflect

Results

render

update

update-reflect

render

update

nop-update

render

update

render

update

render

update

update-reflect

Uh oh!

aomarks left a comment

Choose a reason for hiding this comment

Uh oh!

aomarks Mar 31, 2022

Choose a reason for hiding this comment

Uh oh!

augustjk Apr 1, 2022

Choose a reason for hiding this comment

Uh oh!

aomarks Apr 1, 2022

Choose a reason for hiding this comment

Uh oh!

aomarks Mar 31, 2022

Choose a reason for hiding this comment

Uh oh!

augustjk Mar 31, 2022

Choose a reason for hiding this comment

Uh oh!

aomarks Mar 31, 2022

Choose a reason for hiding this comment

Uh oh!

aomarks left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot bot commented Mar 31, 2022 •

edited

Loading

github-actions bot commented Mar 31, 2022 •

edited

Loading