[ssr] Replace escape-html dependency with our own version #2346

aomarks · 2021-12-08T21:14:38Z

The escape-html package is not an ES module, and it's a pretty trivial function to just write ourselves. See https://unpkg.com/browse/[email protected]/index.js for reference. This new implementation should have the exact same output.

Advantages: getting rid of the only non-esm dependency helps with running SSR in deno and service-workers, and drops our dependency surface area and package size.

Fixes #1998

changeset-bot · 2021-12-08T21:14:41Z

🦋 Changeset detected

Latest commit: 9dc4372

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 · 2021-12-08T21:15:05Z

📊 Tachometer Benchmark Results

Summary

nop-update

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

render

lit-element-list: unsure 🔍 -1% - +0% (-0.71ms - +0.34ms)
^{this-change vs tip-of-tree}
lit-html-kitchen-sink: unsure 🔍 -1% - +1% (-0.35ms - +0.17ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -2% - +1% (-0.29ms - +0.16ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -3% - +1% (-1.75ms - +0.35ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -1% - +2% (-0.42ms - +0.85ms)
^{this-change vs tip-of-tree}

update

lit-element-list: unsure 🔍 -1% - +1% (-3.33ms - +3.32ms)
^{this-change vs tip-of-tree}
lit-html-kitchen-sink: unsure 🔍 -3% - +2% (-2.02ms - +1.22ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -0% - +2% (-0.59ms - +4.37ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: faster ✔ 0% - 2% (0.05ms - 1.65ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -1% - +1% (-4.42ms - +5.00ms)
^{this-change vs tip-of-tree}

update-reflect

lit-element-list: unsure 🔍 -1% - +0% (-5.30ms - +2.60ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -0% - +1% (-3.57ms - +10.05ms)
^{this-change vs tip-of-tree}

Results

lit-element-list

Browser: chrome-headless 96.0.4664.45
Sample size: 50
Built by: Benchmarks #2123
Commit: a8b082b

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	71.34ms - 72.02ms	-	unsure 🔍 -1% - +0% -0.71ms - +0.34ms	faster ✔ 21% - 25% 19.42ms - 23.62ms
tip-of-tree tip-of-tree	71.47ms - 72.26ms	unsure 🔍 -0% - +1% -0.34ms - +0.71ms	-	faster ✔ 21% - 25% 19.22ms - 23.45ms
previous-release previous-release	91.13ms - 95.28ms	slower ❌ 27% - 33% 19.42ms - 23.62ms	slower ❌ 27% - 33% 19.22ms - 23.45ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	634.62ms - 639.41ms	-	unsure 🔍 -1% - +1% -3.33ms - +3.32ms	faster ✔ 7% - 8% 49.45ms - 57.93ms
tip-of-tree tip-of-tree	634.71ms - 639.33ms	unsure 🔍 -1% - +1% -3.32ms - +3.33ms	-	faster ✔ 7% - 8% 49.50ms - 57.88ms
previous-release previous-release	687.21ms - 694.20ms	slower ❌ 8% - 9% 49.45ms - 57.93ms	slower ❌ 8% - 9% 49.50ms - 57.88ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	701.27ms - 706.79ms	-	unsure 🔍 -1% - +0% -5.30ms - +2.60ms	faster ✔ 4% - 5% 27.81ms - 36.97ms
tip-of-tree tip-of-tree	702.55ms - 708.20ms	unsure 🔍 -0% - +1% -2.60ms - +5.30ms	-	faster ✔ 4% - 5% 26.43ms - 35.67ms
previous-release previous-release	732.77ms - 740.08ms	slower ❌ 4% - 5% 27.81ms - 36.97ms	slower ❌ 4% - 5% 26.43ms - 35.67ms	-

lit-html-kitchen-sink

Browser: chrome-headless 96.0.4664.45
Sample size: 30
Built by: Benchmarks #2123
Commit: a8b082b

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	28.66ms - 28.95ms	-	unsure 🔍 -1% - +1% -0.35ms - +0.17ms	faster ✔ 15% - 18% 5.03ms - 6.40ms
tip-of-tree tip-of-tree	28.67ms - 29.11ms	unsure 🔍 -1% - +1% -0.17ms - +0.35ms	-	faster ✔ 15% - 18% 4.92ms - 6.34ms
previous-release previous-release	33.85ms - 35.19ms	slower ❌ 17% - 22% 5.03ms - 6.40ms	slower ❌ 17% - 22% 4.92ms - 6.34ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	78.12ms - 80.61ms	-	unsure 🔍 -3% - +2% -2.02ms - +1.22ms	unsure 🔍 -6% - +0% -5.20ms - +0.08ms
tip-of-tree tip-of-tree	78.73ms - 80.80ms	unsure 🔍 -2% - +3% -1.22ms - +2.02ms	-	unsure 🔍 -6% - +0% -4.71ms - +0.39ms
previous-release previous-release	79.59ms - 84.26ms	unsure 🔍 -0% - +7% -0.08ms - +5.20ms	unsure 🔍 -1% - +6% -0.39ms - +4.71ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	24.25ms - 24.54ms	-	unsure 🔍 -1% - +1% -0.24ms - +0.29ms	faster ✔ 13% - 15% 3.55ms - 4.32ms
tip-of-tree tip-of-tree	24.15ms - 24.59ms	unsure 🔍 -1% - +1% -0.29ms - +0.24ms	-	faster ✔ 13% - 15% 3.54ms - 4.38ms
previous-release previous-release	27.98ms - 28.68ms	slower ❌ 15% - 18% 3.55ms - 4.32ms	slower ❌ 14% - 18% 3.54ms - 4.38ms	-

lit-html-repeat

Browser: chrome-headless 96.0.4664.45
Sample size: 30
Built by: Benchmarks #2123
Commit: a8b082b

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	11.45ms - 11.78ms	-	unsure 🔍 -2% - +1% -0.29ms - +0.16ms	faster ✔ 6% - 9% 0.75ms - 1.09ms
tip-of-tree tip-of-tree	11.53ms - 11.83ms	unsure 🔍 -1% - +2% -0.16ms - +0.29ms	-	faster ✔ 6% - 8% 0.70ms - 1.01ms
previous-release previous-release	12.49ms - 12.58ms	slower ❌ 6% - 10% 0.75ms - 1.09ms	slower ❌ 6% - 9% 0.70ms - 1.01ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	278.55ms - 282.32ms	-	unsure 🔍 -0% - +2% -0.59ms - +4.37ms	faster ✔ 28% - 30% 110.85ms - 118.02ms
tip-of-tree tip-of-tree	276.93ms - 280.16ms	unsure 🔍 -2% - +0% -4.37ms - +0.59ms	-	faster ✔ 29% - 30% 112.88ms - 119.78ms
previous-release previous-release	391.82ms - 397.92ms	slower ❌ 39% - 42% 110.85ms - 118.02ms	slower ❌ 40% - 43% 112.88ms - 119.78ms	-

lit-html-template-heavy

Browser: chrome-headless 96.0.4664.45
Sample size: 50
Built by: Benchmarks #2123
Commit: a8b082b

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	51.49ms - 52.23ms	-	unsure 🔍 -3% - +1% -1.75ms - +0.35ms	faster ✔ 16% - 18% 9.93ms - 11.59ms
tip-of-tree tip-of-tree	51.58ms - 53.54ms	unsure 🔍 -1% - +3% -0.35ms - +1.75ms	-	faster ✔ 14% - 18% 8.83ms - 11.30ms
previous-release previous-release	61.88ms - 63.37ms	slower ❌ 19% - 22% 9.93ms - 11.59ms	slower ❌ 17% - 22% 8.83ms - 11.30ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	108.22ms - 109.28ms	-	faster ✔ 0% - 2% 0.05ms - 1.65ms	faster ✔ 12% - 15% 15.10ms - 18.40ms
tip-of-tree tip-of-tree	109.00ms - 110.20ms	slower ❌ 0% - 2% 0.05ms - 1.65ms	-	faster ✔ 11% - 14% 14.23ms - 17.57ms
previous-release previous-release	123.94ms - 127.06ms	slower ❌ 14% - 17% 15.10ms - 18.40ms	slower ❌ 13% - 16% 14.23ms - 17.57ms	-

reactive-element-list

Browser: chrome-headless 96.0.4664.45
Sample size: 50
Built by: Benchmarks #2123
Commit: a8b082b

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	51.51ms - 52.50ms	-	unsure 🔍 -1% - +2% -0.42ms - +0.85ms	unsure 🔍 -1% - +1% -0.77ms - +0.51ms
tip-of-tree tip-of-tree	51.39ms - 52.20ms	unsure 🔍 -2% - +1% -0.85ms - +0.42ms	-	unsure 🔍 -2% - +0% -0.92ms - +0.24ms
previous-release previous-release	51.72ms - 52.55ms	unsure 🔍 -1% - +1% -0.51ms - +0.77ms	unsure 🔍 -0% - +2% -0.24ms - +0.92ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	637.76ms - 643.64ms	-	unsure 🔍 -1% - +1% -4.42ms - +5.00ms	unsure 🔍 -0% - +1% -3.11ms - +5.45ms
tip-of-tree tip-of-tree	636.73ms - 644.10ms	unsure 🔍 -1% - +1% -5.00ms - +4.42ms	-	unsure 🔍 -1% - +1% -3.94ms - +5.71ms
previous-release previous-release	636.42ms - 642.64ms	unsure 🔍 -1% - +0% -5.45ms - +3.11ms	unsure 🔍 -1% - +1% -5.71ms - +3.94ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	729.77ms - 739.02ms	-	unsure 🔍 -0% - +1% -3.57ms - +10.05ms	unsure 🔍 -0% - +1% -3.22ms - +10.12ms
tip-of-tree tip-of-tree	726.16ms - 736.15ms	unsure 🔍 -1% - +0% -10.05ms - +3.57ms	-	unsure 🔍 -1% - +1% -6.72ms - +7.14ms
previous-release previous-release	726.14ms - 735.75ms	unsure 🔍 -1% - +0% -10.12ms - +3.22ms	unsure 🔍 -1% - +1% -7.14ms - +6.72ms	-

_{tachometer-reporter-action v2 for Benchmarks}

justinfagnani · 2021-12-08T22:11:07Z

packages/labs/ssr/src/lib/util/escape-html.ts

+ * Replaces characters which have special meaning in HTML (&<>"') with escaped
+ * HTML entities ("&amp;", "&lt;", etc.).
+ */
+export const escapeHtml = (str: string) =>


Since we use this in quoted attribute value position can we double-check that this is the right escape algorithm for that? I seem to recall there are difference escape requirements in different contexts, but don't know exactly off the top of my head.

Testing locally and some stack overflow posts seem to support this scheme. I do wonder why we need to quote anything except for & and ", though, since it seems that [<>'] should be safe inside an " attribute string.

The spec isn't super precise about this, it seems

https://html.spec.whatwg.org/multipage/syntax.html#attributes-2

Attribute values are a mixture of text and character references, except with the additional restriction that the text cannot contain an ambiguous ampersand.

The definition of text:

Text is allowed inside elements, attribute values, and comments. Extra constraints are placed on what is and what is not allowed in text based on where the text is to be put, as described in the other sections.

But maybe there's another part of the spec I should be looking at.

It's ok. This keeps the current behavior. Just something that crossed my mind with your fallback renderer PR.

AndrewJakubowicz

Missing domain knowledge, but syntactically this LGTM!

Is this code in a tested path?

AndrewJakubowicz · 2021-12-08T22:15:11Z

packages/labs/ssr/src/lib/util/escape-html.ts

+    /[&<>"']/g,
+    (char) => replacements[char as keyof typeof replacements]


This is really elegant.

aomarks · 2021-12-08T23:11:19Z

Is this code in a tested path?

Yep, it's in the code path of most rendering, so it's covered by most tests. Confirmed that breaking the implementation fails some tests.

aomarks requested review from justinfagnani and kevinpschaaf December 8, 2021 21:14

aomarks changed the base branch from main to ssr-deps December 8, 2021 21:18

Base automatically changed from ssr-deps to main December 8, 2021 21:19

Replace escape-html dependency with our own version

9dc4372

aomarks force-pushed the escape-html branch from 88d93b1 to 9dc4372 Compare December 8, 2021 21:19

justinfagnani approved these changes Dec 8, 2021

View reviewed changes

AndrewJakubowicz approved these changes Dec 8, 2021

View reviewed changes

aomarks merged commit 53e6428 into main Dec 8, 2021

aomarks deleted the escape-html branch December 8, 2021 23:11

This was referenced Jan 5, 2022

Version Packages #2375

Closed

Version Packages #2377

Merged

snyk-bot mentioned this pull request Jan 16, 2022

[Snyk] Security upgrade marked from 0.3.12 to 4.0.10 tjenkinson/lit-html#17

Open

tjenkinson mentioned this pull request Sep 30, 2022

[Snyk] Fix for 11 vulnerabilities tjenkinson/lit-html#18

Open

		/[&<>"']/g,
		(char) => replacements[char as keyof typeof replacements]

[ssr] Replace escape-html dependency with our own version #2346

[ssr] Replace escape-html dependency with our own version #2346

Uh oh!

Conversation

aomarks commented Dec 8, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Dec 8, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Dec 8, 2021 • 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!

justinfagnani Dec 8, 2021

Choose a reason for hiding this comment

Uh oh!

aomarks Dec 8, 2021

Choose a reason for hiding this comment

Uh oh!

aomarks Dec 8, 2021

Choose a reason for hiding this comment

Uh oh!

justinfagnani Dec 8, 2021

Choose a reason for hiding this comment

Uh oh!

AndrewJakubowicz left a comment

Choose a reason for hiding this comment

Uh oh!

AndrewJakubowicz Dec 8, 2021

Choose a reason for hiding this comment

Uh oh!

aomarks commented Dec 8, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

aomarks commented Dec 8, 2021 •

edited

Loading

changeset-bot bot commented Dec 8, 2021 •

edited

Loading

github-actions bot commented Dec 8, 2021 •

edited

Loading