[lit-html] Add MathML support with the mathml template tag by justinfagnani · Pull Request #4637 · lit/lit

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

This adds a mathml 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: 2b78f7e

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 🔍 -3% - +7% (-0.27ms - +0.77ms)
^{this-change vs tip-of-tree}

render

this-change: 44.07ms - 46.39ms
this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +5% (-0.19ms - +0.91ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -2% - +1% (-0.57ms - +0.25ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -2% - +1% (-0.69ms - +0.20ms)
^{this-change vs tip-of-tree}

update

this-change: 447.87ms - 459.02ms
this-change, tip-of-tree, previous-release: unsure 🔍 -3% - +9% (-0.97ms - +3.23ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +1% (-0.94ms - +0.70ms)
^{this-change vs tip-of-tree}
this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +0% (-3.11ms - +1.17ms)
^{this-change vs tip-of-tree}

update-reflect

this-change: 453.16ms - 457.74ms
this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +1% (-2.84ms - +3.10ms)
^{this-change vs tip-of-tree}

Results

this-change

Browser: chrome-headless 126.0.6478.126
Sample size: 50
Built by: Benchmarks #6304
Commit: 2b78f7e

render

Version	Avg time	vs
	44.07ms - 46.39ms	-

update

Version	Avg time	vs
	447.87ms - 459.02ms	-

update-reflect

Version	Avg time	vs
	453.16ms - 457.74ms	-

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

Browser: chrome-headless 126.0.6478.126
Sample size: 30
Built by: Benchmarks #6304
Commit: 2b78f7e

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	18.07ms - 18.90ms	-	unsure 🔍 -1% - +5% -0.19ms - +0.91ms	unsure 🔍 -2% - +4% -0.38ms - +0.76ms
tip-of-tree tip-of-tree	17.77ms - 18.48ms	unsure 🔍 -5% - +1% -0.91ms - +0.19ms	-	unsure 🔍 -4% - +2% -0.69ms - +0.35ms
previous-release previous-release	17.91ms - 18.68ms	unsure 🔍 -4% - +2% -0.76ms - +0.38ms	unsure 🔍 -2% - +4% -0.35ms - +0.69ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	34.79ms - 37.75ms	-	unsure 🔍 -3% - +9% -0.97ms - +3.23ms	unsure 🔍 -2% - +9% -0.80ms - +3.08ms
tip-of-tree tip-of-tree	33.66ms - 36.63ms	unsure 🔍 -9% - +3% -3.23ms - +0.97ms	-	unsure 🔍 -6% - +6% -1.93ms - +1.95ms
previous-release previous-release	33.88ms - 36.39ms	unsure 🔍 -8% - +2% -3.08ms - +0.80ms	unsure 🔍 -6% - +6% -1.95ms - +1.93ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	10.70ms - 11.46ms	-	unsure 🔍 -3% - +7% -0.27ms - +0.77ms	unsure 🔍 -3% - +6% -0.33ms - +0.63ms
tip-of-tree tip-of-tree	10.47ms - 11.19ms	unsure 🔍 -7% - +2% -0.77ms - +0.27ms	-	unsure 🔍 -5% - +3% -0.56ms - +0.37ms
previous-release previous-release	10.63ms - 11.22ms	unsure 🔍 -6% - +3% -0.63ms - +0.33ms	unsure 🔍 -3% - +5% -0.37ms - +0.56ms	-

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

Browser: chrome-headless 126.0.6478.126
Sample size: 50
Built by: Benchmarks #6304
Commit: 2b78f7e

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	32.80ms - 33.44ms	-	unsure 🔍 -2% - +1% -0.57ms - +0.25ms	unsure 🔍 -1% - +1% -0.47ms - +0.45ms
tip-of-tree tip-of-tree	33.02ms - 33.54ms	unsure 🔍 -1% - +2% -0.25ms - +0.57ms	-	unsure 🔍 -1% - +2% -0.28ms - +0.57ms
previous-release previous-release	32.79ms - 33.47ms	unsure 🔍 -1% - +1% -0.45ms - +0.47ms	unsure 🔍 -2% - +1% -0.57ms - +0.28ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	64.03ms - 65.08ms	-	unsure 🔍 -1% - +1% -0.94ms - +0.70ms	unsure 🔍 -2% - +1% -1.14ms - +0.78ms
tip-of-tree tip-of-tree	64.05ms - 65.30ms	unsure 🔍 -1% - +1% -0.70ms - +0.94ms	-	unsure 🔍 -2% - +1% -1.08ms - +0.96ms
previous-release previous-release	63.93ms - 65.54ms	unsure 🔍 -1% - +2% -0.78ms - +1.14ms	unsure 🔍 -1% - +2% -0.96ms - +1.08ms	-

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

Browser: chrome-headless 126.0.6478.126
Sample size: 50
Built by: Benchmarks #6304
Commit: 2b78f7e

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	29.56ms - 30.17ms	-	unsure 🔍 -2% - +1% -0.69ms - +0.20ms	unsure 🔍 -3% - +1% -0.81ms - +0.17ms
tip-of-tree tip-of-tree	29.79ms - 30.43ms	unsure 🔍 -1% - +2% -0.20ms - +0.69ms	-	unsure 🔍 -2% - +1% -0.57ms - +0.43ms
previous-release previous-release	29.80ms - 30.57ms	unsure 🔍 -1% - +3% -0.17ms - +0.81ms	unsure 🔍 -1% - +2% -0.43ms - +0.57ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	451.62ms - 454.45ms	-	unsure 🔍 -1% - +0% -3.11ms - +1.17ms	unsure 🔍 -1% - +0% -2.59ms - +1.97ms
tip-of-tree tip-of-tree	452.39ms - 455.61ms	unsure 🔍 -0% - +1% -1.17ms - +3.11ms	-	unsure 🔍 -0% - +1% -1.74ms - +3.07ms
previous-release previous-release	451.55ms - 455.13ms	unsure 🔍 -0% - +1% -1.97ms - +2.59ms	unsure 🔍 -1% - +0% -3.07ms - +1.74ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	490.73ms - 495.03ms	-	unsure 🔍 -1% - +1% -2.84ms - +3.10ms	unsure 🔍 -0% - +1% -2.02ms - +3.34ms
tip-of-tree tip-of-tree	490.70ms - 494.80ms	unsure 🔍 -1% - +1% -3.10ms - +2.84ms	-	unsure 🔍 -0% - +1% -2.07ms - +3.13ms
previous-release previous-release	490.62ms - 493.82ms	unsure 🔍 -1% - +0% -3.34ms - +2.02ms	unsure 🔍 -1% - +0% -3.13ms - +2.07ms	-

_{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

augustjk · 2024-05-28T18:06:07Z

@justinfagnani Do we also need a static version of mathml tag function?

justinfagnani · 2024-07-03T02:03:49Z

@justinfagnani Do we also need a static version of mathml tag function?

done!

[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

Add static mathml tag

9c16667

justinfagnani added 4 commits July 2, 2024 18:47

Merge branch 'main' into mathml

6c81e6d

Update package-lock

fabb7bb

Fix chai import

f1058fb

Update check-size script

2b78f7e

justinfagnani merged commit feccc1b into main Jul 3, 2024

justinfagnani deleted the mathml branch July 3, 2024 02:22

justinfagnani changed the title ~~[lit-html] Add MathML support with the math template tag~~ [lit-html] Add MathML support with the mathml template tag Jul 3, 2024

JosefJezek mentioned this pull request Jul 26, 2024

Support for Lit shikijs/shiki#725

Closed

4 tasks

lit-robot mentioned this pull request Jul 31, 2024

Version Packages #4718

Merged

augustjk mentioned this pull request Aug 1, 2024

[chore] Update expected sizes #4720

Merged

Conversation

justinfagnani commented May 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented May 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented May 2, 2024 • 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 May 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

augustjk left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

justinfagnani commented May 2, 2024

Uh oh!

justinfagnani commented May 2, 2024

Uh oh!

augustjk left a comment

Choose a reason for hiding this comment

Uh oh!

justinfagnani commented May 2, 2024

Uh oh!

lukewarlow commented May 2, 2024

Uh oh!

justinfagnani commented May 3, 2024

Uh oh!

justinfagnani commented May 3, 2024

Uh oh!

Uh oh!

Uh oh!

augustjk left a comment

Choose a reason for hiding this comment

Uh oh!

augustjk commented May 28, 2024

Uh oh!

justinfagnani commented Jul 3, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

justinfagnani commented May 2, 2024 •

edited

Loading

changeset-bot bot commented May 2, 2024 •

edited

Loading

github-actions bot commented May 2, 2024 •

edited

Loading

github-actions bot commented May 2, 2024 •

edited

Loading