[labs/ssr] Fix svg templates getting surrounded by empty svg tags #4298

AndrewJakubowicz · 2023-10-17T22:11:53Z

Context

TemplateResultType.SVG will wrap svg template fragments with an <svg> element on the client so the svg elements get parsed in the svg parser state.
On the server if we do this, it will emit excess wrapping svg elements.

The fix is either, 1. add plucking logic to the server, to pluck out the wrapping svg element. Or, a much simpler change which is treat the svg template exactly the same as the html template.

Test plan

Tested with a unit test and an integration test.

Fixes: #4265

changeset-bot · 2023-10-17T22:11:57Z

🦋 Changeset detected

Latest commit: 93383fa

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

This PR includes changesets to release 1 package

Name	Type
@lit-labs/ssr	Patch

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 · 2023-10-17T22:12:13Z

📊 Tachometer Benchmark Results

Summary

nop-update

this-change, tip-of-tree, previous-release: unsure 🔍 -7% - +1% (-1.17ms - +0.20ms)
^{this-change vs tip-of-tree}

render

this-change: 69.45ms - 73.94ms
this-change, tip-of-tree, previous-release: unsure 🔍 -7% - +3% (-1.83ms - +0.79ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -7% - +0% (-3.56ms - +0.08ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -5% - +2% (-2.23ms - +0.79ms)
^{this-change vs tip-of-tree}

update

this-change: 741.70ms - 759.21ms
this-change, tip-of-tree, previous-release: unsure 🔍 -4% - +3% (-2.66ms - +1.74ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -3% - +2% (-3.09ms - +1.71ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +2% (-8.19ms - +12.60ms)
^{this-change vs tip-of-tree}

update-reflect

this-change: 721.75ms - 735.52ms
this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +1% (-11.38ms - +7.80ms)
^{this-change vs tip-of-tree}

Results

this-change

Browser: chrome-headless 118.0.5993.70
Sample size: 50
Built by: Benchmarks #5680
Commit: 93383fa

render

Version	Avg time	vs
	69.45ms - 73.94ms	-

update

Version	Avg time	vs
	741.70ms - 759.21ms	-

update-reflect

Version	Avg time	vs
	721.75ms - 735.52ms	-

this-change, tip-of-tree, previous-release

Browser: chrome-headless 118.0.5993.70
Sample size: 30
Built by: Benchmarks #5680
Commit: 93383fa

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	25.80ms - 27.66ms	-	unsure 🔍 -7% - +3% -1.83ms - +0.79ms	unsure 🔍 -4% - +5% -1.16ms - +1.36ms
tip-of-tree tip-of-tree	26.33ms - 28.17ms	unsure 🔍 -3% - +7% -0.79ms - +1.83ms	-	unsure 🔍 -2% - +7% -0.64ms - +1.87ms
previous-release previous-release	25.78ms - 27.48ms	unsure 🔍 -5% - +4% -1.36ms - +1.16ms	unsure 🔍 -7% - +2% -1.87ms - +0.64ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	59.86ms - 62.83ms	-	unsure 🔍 -4% - +3% -2.66ms - +1.74ms	unsure 🔍 -5% - +3% -3.03ms - +1.66ms
tip-of-tree tip-of-tree	60.19ms - 63.42ms	unsure 🔍 -3% - +4% -1.74ms - +2.66ms	-	unsure 🔍 -4% - +4% -2.66ms - +2.20ms
previous-release previous-release	60.22ms - 63.84ms	unsure 🔍 -3% - +5% -1.66ms - +3.03ms	unsure 🔍 -4% - +4% -2.20ms - +2.66ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	15.65ms - 16.65ms	-	unsure 🔍 -7% - +1% -1.17ms - +0.20ms	unsure 🔍 -7% - +1% -1.10ms - +0.21ms
tip-of-tree tip-of-tree	16.17ms - 17.10ms	unsure 🔍 -1% - +7% -0.20ms - +1.17ms	-	unsure 🔍 -4% - +4% -0.60ms - +0.67ms
previous-release previous-release	16.17ms - 17.03ms	unsure 🔍 -1% - +7% -0.21ms - +1.10ms	unsure 🔍 -4% - +4% -0.67ms - +0.60ms	-

this-change, tip-of-tree, previous-release

Browser: chrome-headless 118.0.5993.70
Sample size: 50
Built by: Benchmarks #5680
Commit: 93383fa

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	47.88ms - 49.19ms	-	unsure 🔍 -7% - +0% -3.56ms - +0.08ms	unsure 🔍 -4% - +0% -1.79ms - +0.19ms
tip-of-tree tip-of-tree	48.58ms - 51.98ms	unsure 🔍 -0% - +7% -0.08ms - +3.56ms	-	unsure 🔍 -2% - +6% -0.91ms - +2.80ms
previous-release previous-release	48.59ms - 50.08ms	unsure 🔍 -0% - +4% -0.19ms - +1.79ms	unsure 🔍 -6% - +2% -2.80ms - +0.91ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	110.54ms - 113.49ms	-	unsure 🔍 -3% - +2% -3.09ms - +1.71ms	unsure 🔍 -2% - +2% -1.98ms - +2.60ms
tip-of-tree tip-of-tree	110.81ms - 114.59ms	unsure 🔍 -2% - +3% -1.71ms - +3.09ms	-	unsure 🔍 -1% - +3% -1.59ms - +3.57ms
previous-release previous-release	109.96ms - 113.46ms	unsure 🔍 -2% - +2% -2.60ms - +1.98ms	unsure 🔍 -3% - +1% -3.57ms - +1.59ms	-

this-change, tip-of-tree, previous-release

Browser: chrome-headless 118.0.5993.70
Sample size: 50
Built by: Benchmarks #5680
Commit: 93383fa

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	46.64ms - 48.26ms	-	unsure 🔍 -5% - +2% -2.23ms - +0.79ms	unsure 🔍 -3% - +2% -1.61ms - +0.77ms
tip-of-tree tip-of-tree	46.90ms - 49.45ms	unsure 🔍 -2% - +5% -0.79ms - +2.23ms	-	unsure 🔍 -3% - +4% -1.24ms - +1.85ms
previous-release previous-release	47.00ms - 48.75ms	unsure 🔍 -2% - +3% -0.77ms - +1.61ms	unsure 🔍 -4% - +3% -1.85ms - +1.24ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	786.05ms - 801.64ms	-	unsure 🔍 -1% - +2% -8.19ms - +12.60ms	unsure 🔍 -2% - +1% -17.49ms - +7.09ms
tip-of-tree tip-of-tree	784.76ms - 798.52ms	unsure 🔍 -2% - +1% -12.60ms - +8.19ms	-	unsure 🔍 -2% - +1% -19.13ms - +4.33ms
previous-release previous-release	789.55ms - 808.55ms	unsure 🔍 -1% - +2% -7.09ms - +17.49ms	unsure 🔍 -1% - +2% -4.33ms - +19.13ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	775.64ms - 789.74ms	-	unsure 🔍 -1% - +1% -11.38ms - +7.80ms	unsure 🔍 -2% - +1% -14.19ms - +8.93ms
tip-of-tree tip-of-tree	777.99ms - 790.98ms	unsure 🔍 -1% - +1% -7.80ms - +11.38ms	-	unsure 🔍 -2% - +1% -12.07ms - +10.39ms
previous-release previous-release	776.16ms - 794.48ms	unsure 🔍 -1% - +2% -8.93ms - +14.19ms	unsure 🔍 -1% - +2% -10.39ms - +12.07ms	-

_{tachometer-reporter-action v2 for Benchmarks}

github-actions · 2023-10-17T22:13:37Z

The size of lit-html.js and lit-core.min.js are as expected.

augustjk

Thank you!

packages/labs/ssr/src/test/integration/tests/basic.ts

Co-authored-by: Augustine Kim <[email protected]>

AndrewJakubowicz added 2 commits October 17, 2023 15:03

Fix svg templates being excessively wrapped with svg elements.

54a2e98

Fixes: #4265

add changeset

8b0ae66

AndrewJakubowicz requested a review from kevinpschaaf as a code owner October 17, 2023 22:11

AndrewJakubowicz requested a review from augustjk October 17, 2023 22:12

AndrewJakubowicz requested a review from justinfagnani October 17, 2023 22:17

Merge branch 'main' of github.com:lit/lit into ssr-svg

0799754

augustjk approved these changes Oct 17, 2023

View reviewed changes

packages/labs/ssr/src/test/integration/tests/basic.ts Show resolved Hide resolved

Update packages/labs/ssr/src/test/integration/tests/basic.ts

fab4e23

Co-authored-by: Augustine Kim <[email protected]>

AndrewJakubowicz mentioned this pull request Oct 17, 2023

[labs/ssr] svg templates are surrounded with empty <svg></svg> tags when rendered #4265

Closed

Merge branch 'main' into ssr-svg

93383fa

AndrewJakubowicz enabled auto-merge (squash) October 18, 2023 17:11

AndrewJakubowicz merged commit c05767c into main Oct 18, 2023

AndrewJakubowicz deleted the ssr-svg branch October 18, 2023 17:42

This was referenced Oct 27, 2023

Version Packages #4338

Closed

Version Packages #4341

Merged

CxsLucyfer mentioned this pull request Jan 29, 2024

[Snyk] Upgrade @lit/localize-tools from 0.6.3 to 0.7.1 CxsLucyfer/lit#3

Open

[labs/ssr] Fix svg templates getting surrounded by empty svg tags #4298

[labs/ssr] Fix svg templates getting surrounded by empty svg tags #4298

Uh oh!

Conversation

AndrewJakubowicz commented Oct 17, 2023

Context

Test plan

Uh oh!

changeset-bot bot commented Oct 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Oct 17, 2023 • 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

update-reflect

Uh oh!

github-actions bot commented Oct 17, 2023

Uh oh!

augustjk left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot bot commented Oct 17, 2023 •

edited

Loading

github-actions bot commented Oct 17, 2023 •

edited

Loading