feat: MathML support

[sto3psl]

Implements support for MathML elements in Vue.

Mathematical Markup Language (MathML) is an XML-based language for describing mathematical notation.

Similar to SVG, MathML requires a different namespace when creating elements in the browser. My changes update the widely used isSVG bool into an enum, supporting SVG, MathML and of course HTML. I mostly copied the SVG related code and adapted it for MathML.

This is the first time I'm contributing to a larger project. I'd be very happy about any feedback and suggestions!

Related Issue: #7820

[sxzz]

It's a breaking change to Vue, right? Can we avoid it?

Maybe we can change API isSVG?: boolean to namespace?: boolean | 'svg' | 'mathml'. If namespace is true then fallback to svg.

[sto3psl]

It's a breaking change to Vue, right? Can we avoid it?

Maybe we can change API isSVG?: boolean to namespace?: boolean | 'svg' | 'mathml'. If namespace is true then fallback to svg.

I don't think so, since this is only internal code. As far as I can tell, no public APIs have changed. Please correct me if I'm wrong.

[sxzz]

I don't think so, since this is only internal code. As far as I can tell, no public APIs have changed. Please correct me if I'm wrong.

It's a public API definitely.

[sto3psl]

I don't think so, since this is only internal code. As far as I can tell, no public APIs have changed. Please correct me if I'm wrong.

It's a public API definitely.

I just saw that, too! Thanks for checking. Will change it to boolean | 'svg' | 'mathml' | undefined.

[sto3psl]

Not sure why ci / unit-test fails. It works fine for me locally and the tests pass.

[sxzz]

@sto3psl It only fails when running on a single thread. Try GITHUB_ACTIONS=1 pnpm run test-unit locally.

[sxzz]

I pushed a commit to fix unit tests. Please don't forget to pull before committing

[sto3psl]

@sxzz I implemented the backwards compat and reused the type everywhere. Added a comment too that will show up in Intellisense if one wonders why that union type is a bit weird 😄.

[sto3psl]

I checked why the ecosystem-ci fails for a lot of suits and it's the same reason a lot of core tests failed here first.

Warning
MathMLElement is not defined

It looks like JSDOM doesn't provide MathMLElement as global. I worked around it by stubbing it with Vitest. Is there anything I can do about this?

[sxzz]

MathMLElement API is introduced in Chrome > 109, so we should do some checks to ensure it's compatible with all ES6 browsers. typeof MathMLElement === 'function' && el instanceof MathMLElement

[sto3psl]

@sxzz I added the guard for missing MathMLElements and normalized the type in app.mount. I didn't find other public APIs, do you know of any? After checking the Vue docs, the 2nd and 3rd argument to app.mount aren't even documented (which is fine in my opinion).

[sxzz]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result
naive-ui	❌ failure
nuxt	❌ failure
pinia	✅ success
router	✅ success
test-utils	✅ success
vant	✅ success
vite-plugin-vue	✅ success
vitepress	✅ success
vue-macros	✅ success
vuetify	✅ success
vueuse	✅ success

[sto3psl]

Seems like Nuxt doesn't like the bundle size increase and naive-ui seems unrelated(?)

[sto3psl]

@sxzz @sodatea is there a chance that this change might land in Vue 3.3?

[sxzz]

@sto3psl Yes I think so!

[sto3psl]

Since 3.3 is in beta now it would be amazing if this feature could land as well! What do you think @yyx990803?

[sto3psl]

Hey! Is there anything I can do to get this merged?

It would be so nice to have proper MathML support in a future Vue version.

[sxzz]

See #9249 (comment)

I think we should also treat MathML tags as "late added tags"

[sto3psl]

@sxzz sure I can do that once the mentioned PR has landed.

Is there any plan to reset the new tag list with am major update in the future?

I assume that these won't stay new forever.

Do people that have vue components with reserved names get a runtime warning?