[lit-html] Add MathML support with the math template tag #4637

justinfagnani · 2024-05-02T22:10:17Z

This adds a math template tag to enable writing MathML fragment templates, just like how we have the svg template tag for SVG fragment templates.

The change adds another TemplateResult type for MATHML, and just creates a <math> wrapper element for fragment templates like we do for SVG.

I had to update the @open-wc/testing dependency of the starter kits because 3.x had hard-coded the template result types. 4.x works with the new type. So there is the possibility that that this will break type-checking of other libraries that hard-code the types. Hopefully they can upgrade quickly if they need to. Our policy is to not consider type-only breaks as semver major, so this change is semver minor.

cc @lukewarlow @bkardell 😄

changeset-bot · 2024-05-02T22:10:21Z

🦋 Changeset detected

Latest commit: 3e852c6

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

This PR includes changesets to release 3 packages

Name	Type
lit-html	Minor
lit	Minor
lit-element	Minor

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 · 2024-05-02T22:10:34Z

📊 Tachometer Benchmark Results

Summary

nop-update

this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +6% (-0.15ms - +0.66ms)
^{this-change vs tip-of-tree}

render

this-change: 45.14ms - 47.03ms
this-change, tip-of-tree, previous-release: unsure 🔍 -7% - +0% (-1.35ms - +0.08ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -0% - +3% (-0.10ms - +0.85ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +3% (-0.17ms - +1.01ms)
^{this-change vs tip-of-tree}

update

this-change: 465.45ms - 472.63ms
this-change, tip-of-tree, previous-release: unsure 🔍 -11% - +1% (-4.21ms - +0.54ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -0% - +2% (-0.21ms - +1.29ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -0% - +1% (-2.28ms - +3.46ms)
^{this-change vs tip-of-tree}

update-reflect

this-change: 475.54ms - 480.24ms
this-change, tip-of-tree, previous-release: unsure 🔍 -0% - +1% (-1.10ms - +4.92ms)
^{this-change vs tip-of-tree}

Results

this-change

Browser: chrome-headless 124.0.6367.60
Sample size: 50
Built by: Benchmarks #6240
Commit: 3e852c6

render

Version	Avg time	vs
	45.14ms - 47.03ms	-

update

Version	Avg time	vs
	465.45ms - 472.63ms	-

update-reflect

Version	Avg time	vs
	475.54ms - 480.24ms	-

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

Browser: chrome-headless 124.0.6367.60
Sample size: 30
Built by: Benchmarks #6240
Commit: 3e852c6

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	17.96ms - 18.97ms	-	unsure 🔍 -7% - +0% -1.35ms - +0.08ms	unsure 🔍 -4% - +4% -0.73ms - +0.72ms
tip-of-tree tip-of-tree	18.59ms - 19.61ms	unsure 🔍 -1% - +7% -0.08ms - +1.35ms	-	unsure 🔍 -1% - +7% -0.10ms - +1.36ms
previous-release previous-release	17.95ms - 18.99ms	unsure 🔍 -4% - +4% -0.72ms - +0.73ms	unsure 🔍 -7% - +0% -1.36ms - +0.10ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	35.29ms - 38.52ms	-	unsure 🔍 -11% - +1% -4.21ms - +0.54ms	unsure 🔍 -8% - +5% -2.86ms - +1.81ms
tip-of-tree tip-of-tree	37.00ms - 40.48ms	unsure 🔍 -2% - +12% -0.54ms - +4.21ms	-	unsure 🔍 -3% - +10% -1.12ms - +3.73ms
previous-release previous-release	35.74ms - 39.12ms	unsure 🔍 -5% - +8% -1.81ms - +2.86ms	unsure 🔍 -10% - +3% -3.73ms - +1.12ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	10.80ms - 11.29ms	-	unsure 🔍 -1% - +6% -0.15ms - +0.66ms	unsure 🔍 -0% - +8% +0.01ms - +0.87ms
tip-of-tree tip-of-tree	10.47ms - 11.12ms	unsure 🔍 -6% - +1% -0.66ms - +0.15ms	-	unsure 🔍 -3% - +6% -0.29ms - +0.66ms
previous-release previous-release	10.26ms - 10.96ms	faster ✔ 0% - 8% 0.01ms - 0.87ms	unsure 🔍 -6% - +3% -0.66ms - +0.29ms	-

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

Browser: chrome-headless 124.0.6367.60
Sample size: 50
Built by: Benchmarks #6240
Commit: 3e852c6

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	33.21ms - 33.99ms	-	unsure 🔍 -0% - +3% -0.10ms - +0.85ms	unsure 🔍 -2% - +1% -0.57ms - +0.40ms
tip-of-tree tip-of-tree	32.95ms - 33.50ms	unsure 🔍 -3% - +0% -0.85ms - +0.10ms	-	faster ✔ 0% - 3% 0.06ms - 0.86ms
previous-release previous-release	33.39ms - 33.98ms	unsure 🔍 -1% - +2% -0.40ms - +0.57ms	slower ❌ 0% - 3% 0.06ms - 0.86ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	66.78ms - 68.01ms	-	unsure 🔍 -0% - +2% -0.21ms - +1.29ms	unsure 🔍 -1% - +1% -0.53ms - +0.98ms
tip-of-tree tip-of-tree	66.44ms - 67.28ms	unsure 🔍 -2% - +0% -1.29ms - +0.21ms	-	unsure 🔍 -1% - +0% -0.92ms - +0.29ms
previous-release previous-release	66.73ms - 67.61ms	unsure 🔍 -1% - +1% -0.98ms - +0.53ms	unsure 🔍 -0% - +1% -0.29ms - +0.92ms	-

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

Browser: chrome-headless 124.0.6367.60
Sample size: 50
Built by: Benchmarks #6240
Commit: 3e852c6

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	30.94ms - 31.84ms	-	unsure 🔍 -1% - +3% -0.17ms - +1.01ms	unsure 🔍 -1% - +3% -0.47ms - +0.79ms
tip-of-tree tip-of-tree	30.59ms - 31.34ms	unsure 🔍 -3% - +1% -1.01ms - +0.17ms	-	unsure 🔍 -3% - +1% -0.84ms - +0.32ms
previous-release previous-release	30.79ms - 31.66ms	unsure 🔍 -3% - +1% -0.79ms - +0.47ms	unsure 🔍 -1% - +3% -0.32ms - +0.84ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	474.97ms - 479.22ms	-	unsure 🔍 -0% - +1% -2.28ms - +3.46ms	unsure 🔍 -1% - +0% -3.84ms - +1.99ms
tip-of-tree tip-of-tree	474.57ms - 478.43ms	unsure 🔍 -1% - +0% -3.46ms - +2.28ms	-	unsure 🔍 -1% - +0% -4.29ms - +1.26ms
previous-release previous-release	476.02ms - 480.01ms	unsure 🔍 -0% - +1% -1.99ms - +3.84ms	unsure 🔍 -0% - +1% -1.26ms - +4.29ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	518.76ms - 523.41ms	-	unsure 🔍 -0% - +1% -1.10ms - +4.92ms	unsure 🔍 -0% - +1% -2.11ms - +4.71ms
tip-of-tree tip-of-tree	517.26ms - 521.08ms	unsure 🔍 -1% - +0% -4.92ms - +1.10ms	-	unsure 🔍 -1% - +0% -3.76ms - +2.53ms
previous-release previous-release	517.29ms - 522.28ms	unsure 🔍 -1% - +0% -4.71ms - +2.11ms	unsure 🔍 -0% - +1% -2.53ms - +3.76ms	-

_{tachometer-reporter-action v2 for Benchmarks}

github-actions · 2024-05-02T22:15:12Z

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

packages/lit-html/src/lit-html.ts

augustjk

Non-blocking, but maybe some cursory SSR tests would be nice?
e.g.

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

Line 303 in 56cb2ca

'ChildPart accepts TemplateResult with SVG type': {

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

Line 392 in 56cb2ca

test('svg fragment template', async () => {

Also, should there be an unsafeMath() directive, like unsafeSVG()?

packages/lit-html/src/lit-html.ts

.changeset/beige-lamps-camp.md

Co-authored-by: Augustine Kim <augustinekim@google.com>

justinfagnani · 2024-05-02T23:21:54Z

@augustjk Thanks! I added unsafeMath() and SSR tests

justinfagnani · 2024-05-02T23:25:24Z

There's a small question of the name of the template tag. I chose math because I think it's a lot easier to read and write then mathml.

html, svg, and css are more clear about what their content are than just math, and that might help with built-in language support in tools. For instance, mathml might conceivable trigger XML or even MathML specific highlighting. math might not - though we can highlight it in our tools.

augustjk

Thanks!

Regarding the tag name, I have a preference for mathml as the full name of the markup language, but not strong enough to block. Maybe an online poll on discord or twitter?

If we do change, I suppose the unsafe directive name should change to unsafeMathML too.

justinfagnani · 2024-05-02T23:45:07Z

Regarding the tag name, I have a preference for mathml

Let's ask Discord before merging.

It's not unchangeable at least. Just a couple of byte cost to export two names.

lukewarlow · 2024-05-02T23:51:39Z

Math being the root element name for the MathML namespace makes me lean towards math as the tagged template name too fwiw.

justinfagnani · 2024-05-03T00:03:58Z

Math being the root element name for the MathML namespace makes me lean towards math as the tagged template name too fwiw.

That's a good point. <svg> -> svg, <math> -> math

justinfagnani · 2024-05-03T23:10:57Z

Discord seems to be leaning heavily towards mathml

scripts/check-size.js

Update sizes

augustjk

Change from math to mathml LGTM

[lit-html] Add MathML support with the math template tag

c9d9e7d

justinfagnani requested a review from kevinpschaaf as a code owner May 2, 2024 22:10

Update size checks

87cdafc

lukewarlow reviewed May 2, 2024

View reviewed changes

packages/lit-html/src/lit-html.ts Outdated Show resolved Hide resolved

augustjk reviewed May 2, 2024

View reviewed changes

packages/lit-html/src/lit-html.ts Outdated Show resolved Hide resolved

.changeset/beige-lamps-camp.md Show resolved Hide resolved

justinfagnani and others added 5 commits May 2, 2024 15:32

Update packages/lit-html/src/lit-html.ts

8b1137d

Co-authored-by: Augustine Kim <augustinekim@google.com>

Add unsafeMath directive

89e0f14

Fix grammar

4fc728c

Fix test

9ecde06

Add SSR tests

e0c26df

augustjk approved these changes May 2, 2024

View reviewed changes

justinfagnani added 2 commits May 11, 2024 07:55

Rename unsafeMath to unsafeMathML

9aca70c

Rename math template tag to mathml

c219b9a

justinfagnani commented May 11, 2024

View reviewed changes

scripts/check-size.js Outdated Show resolved Hide resolved

justinfagnani commented May 11, 2024

View reviewed changes

scripts/check-size.js Outdated Show resolved Hide resolved

justinfagnani added 2 commits May 11, 2024 08:43

Apply suggestions from code review

8de7a08

Update sizes

Update changeset to use "mathml"

3e852c6

augustjk approved these changes May 20, 2024

View reviewed changes

augustjk mentioned this pull request May 20, 2024

[docs] Document mathml tag and unsafeMathML directive lit/lit.dev#1336

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[lit-html] Add MathML support with the math template tag #4637

[lit-html] Add MathML support with the math template tag #4637

justinfagnani commented May 2, 2024

changeset-bot bot commented May 2, 2024 •

edited

github-actions bot commented May 2, 2024 •

edited

📊 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

github-actions bot commented May 2, 2024 •

edited

augustjk left a comment

justinfagnani commented May 2, 2024

justinfagnani commented May 2, 2024

augustjk left a comment

justinfagnani commented May 2, 2024

lukewarlow commented May 2, 2024

justinfagnani commented May 3, 2024

justinfagnani commented May 3, 2024

augustjk left a comment

[lit-html] Add MathML support with the math template tag #4637

Are you sure you want to change the base?

[lit-html] Add MathML support with the math template tag #4637

Conversation

justinfagnani commented May 2, 2024

changeset-bot bot commented May 2, 2024 • edited

🦋 Changeset detected

github-actions bot commented May 2, 2024 • edited

📊 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

github-actions bot commented May 2, 2024 • edited

augustjk left a comment

Choose a reason for hiding this comment

justinfagnani commented May 2, 2024

justinfagnani commented May 2, 2024

augustjk left a comment

Choose a reason for hiding this comment

justinfagnani commented May 2, 2024

lukewarlow commented May 2, 2024

justinfagnani commented May 3, 2024

justinfagnani commented May 3, 2024

augustjk left a comment

Choose a reason for hiding this comment

changeset-bot bot commented May 2, 2024 •

edited

github-actions bot commented May 2, 2024 •

edited

github-actions bot commented May 2, 2024 •

edited