[labs/ssr] Make attribute handling case-insensitive #3977

augustjk · 2023-06-23T22:31:48Z

Fixes #3972

ssr-dom-shim was updated so all attribute methods lowercase the name as the browser does.

LitElementRenderer now also lowercases the attribute name when calling attributeToProperty with it.

changeset-bot · 2023-06-23T22:31:52Z

🦋 Changeset detected

Latest commit: a34c1ca

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-06-23T22:32:15Z

📊 Tachometer Benchmark Results

Summary

nop-update

lit-html-kitchen-sink: unsure 🔍 -13% - +4% (-3.56ms - +1.02ms)
^{this-change vs tip-of-tree}

render

lit-element-list: 78.50ms - 82.67ms
lit-html-kitchen-sink: unsure 🔍 -9% - +5% (-3.10ms - +1.58ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -5% - +1% (-0.58ms - +0.15ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -4% - +1% (-2.43ms - +0.35ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -4% - +0% (-2.09ms - +0.16ms)
^{this-change vs tip-of-tree}

update

lit-element-list: 878.27ms - 892.29ms
lit-html-kitchen-sink: unsure 🔍 -7% - +4% (-6.68ms - +3.54ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -5% - +3% (-16.00ms - +8.85ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -1% - +2% (-1.52ms - +2.15ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -1% - +1% (-7.52ms - +10.28ms)
^{this-change vs tip-of-tree}

update-reflect

lit-element-list: 824.47ms - 836.09ms
reactive-element-list: unsure 🔍 -1% - +1% (-10.65ms - +5.97ms)
^{this-change vs tip-of-tree}

Results

lit-element-list

Browser: chrome-headless 114.0.5735.133
Sample size: 50
Built by: Benchmarks #4972
Commit: cf25f6e

render

Version	Avg time	vs
	78.50ms - 82.67ms	-

update

Version	Avg time	vs
	878.27ms - 892.29ms	-

update-reflect

Version	Avg time	vs
	824.47ms - 836.09ms	-

lit-html-kitchen-sink

Browser: chrome-headless 114.0.5735.133
Sample size: 30
Built by: Benchmarks #4972
Commit: cf25f6e

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	31.73ms - 35.21ms	-	unsure 🔍 -9% - +5% -3.10ms - +1.58ms	faster ✔ 0% - 14% 0.01ms - 5.25ms
tip-of-tree tip-of-tree	32.66ms - 35.80ms	unsure 🔍 -5% - +9% -1.58ms - +3.10ms	-	unsure 🔍 -12% - +2% -4.38ms - +0.64ms
previous-release previous-release	34.15ms - 38.06ms	unsure 🔍 -0% - +16% +0.01ms - +5.25ms	unsure 🔍 -2% - +13% -0.64ms - +4.38ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	88.04ms - 93.76ms	-	unsure 🔍 -7% - +4% -6.68ms - +3.54ms	unsure 🔍 -3% - +7% -2.34ms - +6.07ms
tip-of-tree tip-of-tree	88.24ms - 96.71ms	unsure 🔍 -4% - +7% -3.54ms - +6.68ms	-	unsure 🔍 -2% - +10% -1.80ms - +8.67ms
previous-release previous-release	85.96ms - 92.12ms	unsure 🔍 -7% - +3% -6.07ms - +2.34ms	unsure 🔍 -9% - +2% -8.67ms - +1.80ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	23.47ms - 26.37ms	-	unsure 🔍 -13% - +4% -3.56ms - +1.02ms	unsure 🔍 -11% - +5% -2.88ms - +1.29ms
tip-of-tree tip-of-tree	24.42ms - 27.96ms	unsure 🔍 -4% - +14% -1.02ms - +3.56ms	-	unsure 🔍 -7% - +11% -1.84ms - +2.80ms
previous-release previous-release	24.22ms - 27.21ms	unsure 🔍 -5% - +12% -1.29ms - +2.88ms	unsure 🔍 -11% - +7% -2.80ms - +1.84ms	-

lit-html-repeat

Browser: chrome-headless 114.0.5735.133
Sample size: 30
Built by: Benchmarks #4972
Commit: cf25f6e

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	11.13ms - 11.63ms	-	unsure 🔍 -5% - +1% -0.58ms - +0.15ms	unsure 🔍 -2% - +4% -0.18ms - +0.49ms
tip-of-tree tip-of-tree	11.33ms - 11.86ms	unsure 🔍 -1% - +5% -0.15ms - +0.58ms	-	slower ❌ 0% - 6% 0.02ms - 0.71ms
previous-release previous-release	11.00ms - 11.46ms	unsure 🔍 -4% - +2% -0.49ms - +0.18ms	faster ✔ 0% - 6% 0.02ms - 0.71ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	327.42ms - 345.77ms	-	unsure 🔍 -5% - +3% -16.00ms - +8.85ms	unsure 🔍 -4% - +3% -11.93ms - +11.27ms
tip-of-tree tip-of-tree	331.80ms - 348.54ms	unsure 🔍 -3% - +5% -8.85ms - +16.00ms	-	unsure 🔍 -2% - +4% -7.73ms - +14.23ms
previous-release previous-release	329.82ms - 344.02ms	unsure 🔍 -3% - +4% -11.27ms - +11.93ms	unsure 🔍 -4% - +2% -14.23ms - +7.73ms	-

lit-html-template-heavy

Browser: chrome-headless 114.0.5735.133
Sample size: 50
Built by: Benchmarks #4972
Commit: cf25f6e

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	57.42ms - 59.27ms	-	unsure 🔍 -4% - +1% -2.43ms - +0.35ms	unsure 🔍 -4% - +3% -2.20ms - +1.55ms
tip-of-tree tip-of-tree	58.35ms - 60.42ms	unsure 🔍 -1% - +4% -0.35ms - +2.43ms	-	unsure 🔍 -2% - +5% -1.21ms - +2.65ms
previous-release previous-release	57.04ms - 60.30ms	unsure 🔍 -3% - +4% -1.55ms - +2.20ms	unsure 🔍 -4% - +2% -2.65ms - +1.21ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	124.17ms - 126.44ms	-	unsure 🔍 -1% - +2% -1.52ms - +2.15ms	unsure 🔍 -1% - +1% -1.35ms - +1.49ms
tip-of-tree tip-of-tree	123.55ms - 126.43ms	unsure 🔍 -2% - +1% -2.15ms - +1.52ms	-	unsure 🔍 -2% - +1% -1.92ms - +1.43ms
previous-release previous-release	124.39ms - 126.08ms	unsure 🔍 -1% - +1% -1.49ms - +1.35ms	unsure 🔍 -1% - +2% -1.43ms - +1.92ms	-

reactive-element-list

Browser: chrome-headless 114.0.5735.133
Sample size: 50
Built by: Benchmarks #4972
Commit: cf25f6e

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	49.52ms - 51.26ms	-	unsure 🔍 -4% - +0% -2.09ms - +0.16ms	unsure 🔍 -3% - +1% -1.65ms - +0.65ms
tip-of-tree tip-of-tree	50.64ms - 52.07ms	unsure 🔍 -0% - +4% -0.16ms - +2.09ms	-	unsure 🔍 -1% - +3% -0.58ms - +1.51ms
previous-release previous-release	50.13ms - 51.64ms	unsure 🔍 -1% - +3% -0.65ms - +1.65ms	unsure 🔍 -3% - +1% -1.51ms - +0.58ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	883.03ms - 895.89ms	-	unsure 🔍 -1% - +1% -7.52ms - +10.28ms	unsure 🔍 -1% - +1% -6.21ms - +10.83ms
tip-of-tree tip-of-tree	881.93ms - 894.23ms	unsure 🔍 -1% - +1% -10.28ms - +7.52ms	-	unsure 🔍 -1% - +1% -7.38ms - +9.24ms
previous-release previous-release	881.56ms - 892.74ms	unsure 🔍 -1% - +1% -10.83ms - +6.21ms	unsure 🔍 -1% - +1% -9.24ms - +7.38ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	856.80ms - 866.93ms	-	unsure 🔍 -1% - +1% -10.65ms - +5.97ms	unsure 🔍 -1% - +1% -10.49ms - +5.95ms
tip-of-tree tip-of-tree	857.62ms - 870.79ms	unsure 🔍 -1% - +1% -5.97ms - +10.65ms	-	unsure 🔍 -1% - +1% -9.16ms - +9.30ms
previous-release previous-release	857.67ms - 870.60ms	unsure 🔍 -1% - +1% -5.95ms - +10.49ms	unsure 🔍 -1% - +1% -9.30ms - +9.16ms	-

_{tachometer-reporter-action v2 for Benchmarks}

augustjk · 2023-06-23T23:03:19Z

#3978 fixes the breaking test in the pipeline.

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

augustjk · 2023-06-26T20:46:37Z

#3978 fixes the breaking test in the pipeline.

Rebased to bring this in and local tests are now passing.

packages/labs/ssr/src/lib/lit-element-renderer.ts

AndrewJakubowicz

Great!

AndrewJakubowicz

Thanks for addressing feedback!

augustjk · 2023-06-27T20:17:43Z

Discussed offline with @AndrewJakubowicz about whether lowercasing all attributes is the right thing to do since SVG elements in the browser are case-sensitive. Marking this as draft while we consider this.

augustjk · 2023-06-30T00:13:39Z

Updated to not modify ssr-dom-shim, just the element renderer. #3972 (comment)

Approach changed significantly from original review.

.changeset/new-news-count.md

AndrewJakubowicz · 2023-06-30T00:31:35Z

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

    };
  },

+  'LitElement: Attribute binding (mixed case)': () => {


Is it possible to add a test case where attribute casing is preserved? E.g. svg element in a render template?

Edit: A test that would have been broken by the DOM shim changes - but not this change.

I added it separately as a unit test that makes sure the rendered markup has attribute casing preserved. How the browser handles that is up to the browser.

I do have a suspicion that something isn't quite right in how lit-html handles this in the browser.

What is making you suspect something?

I tried some combinations in the playground and found inconsistent results. I'll investigate and document in a separate issue. :)

packages/labs/ssr/src/test/lib/render-lit_test.ts

augustjk requested review from AndrewJakubowicz and justinfagnani June 23, 2023 22:31

augustjk requested a review from kevinpschaaf as a code owner June 23, 2023 22:31

augustjk mentioned this pull request Jun 23, 2023

[labs/react] Only add suppressHydrationWarning prop in the client #3978

Merged

AndrewJakubowicz reviewed Jun 23, 2023

View reviewed changes

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

augustjk added 4 commits June 26, 2023 13:32

Handle mixed case attributes

0a9148f

Add test for mixed case attributes

db3d720

Add changeset

f2154fd

Lowercase attribute in assertion for consistency

39e5261

augustjk force-pushed the ssr-dom-shim-attr branch from a68eaaa to 39e5261 Compare June 26, 2023 20:32

AndrewJakubowicz reviewed Jun 27, 2023

View reviewed changes

packages/labs/ssr/src/lib/lit-element-renderer.ts Outdated Show resolved Hide resolved

AndrewJakubowicz approved these changes Jun 27, 2023

View reviewed changes

AndrewJakubowicz previously approved these changes Jun 27, 2023

View reviewed changes

augustjk marked this pull request as draft June 27, 2023 20:15

AndrewJakubowicz self-requested a review June 27, 2023 20:26

Only lowercase attribute names in element renderer

2ab5453

augustjk force-pushed the ssr-dom-shim-attr branch from a696750 to 2ab5453 Compare June 30, 2023 00:11

augustjk marked this pull request as ready for review June 30, 2023 00:12

AndrewJakubowicz reviewed Jun 30, 2023

View reviewed changes

.changeset/new-news-count.md Outdated Show resolved Hide resolved

Update changelog wording

9bc6ef1

AndrewJakubowicz reviewed Jun 30, 2023

View reviewed changes

Add test to make sure casing is preserved

a34c1ca

AndrewJakubowicz approved these changes Jun 30, 2023

View reviewed changes

packages/labs/ssr/src/test/lib/render-lit_test.ts Show resolved Hide resolved

augustjk merged commit a2366a3 into main Jun 30, 2023

augustjk deleted the ssr-dom-shim-attr branch June 30, 2023 21:25

lit-robot mentioned this pull request Jul 5, 2023

Version Packages #3990

Merged

[labs/ssr] Make attribute handling case-insensitive #3977

[labs/ssr] Make attribute handling case-insensitive #3977

Uh oh!

Conversation

augustjk commented Jun 23, 2023

Uh oh!

changeset-bot bot commented Jun 23, 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 Jun 23, 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

render

update

update-reflect

Uh oh!

augustjk commented Jun 23, 2023

Uh oh!

Uh oh!

augustjk commented Jun 26, 2023

Uh oh!

Uh oh!

AndrewJakubowicz left a comment

Choose a reason for hiding this comment

Uh oh!

AndrewJakubowicz left a comment

Choose a reason for hiding this comment

Uh oh!

augustjk commented Jun 27, 2023

Uh oh!

augustjk commented Jun 30, 2023

Uh oh!

Uh oh!

AndrewJakubowicz Jun 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

augustjk Jun 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AndrewJakubowicz Jun 30, 2023

Choose a reason for hiding this comment

Uh oh!

augustjk Jun 30, 2023

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 Jun 23, 2023 •

edited

Loading

github-actions bot commented Jun 23, 2023 •

edited

Loading

AndrewJakubowicz Jun 30, 2023 •

edited

Loading

augustjk Jun 30, 2023 •

edited

Loading