Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: MathML support #7836

Merged
merged 14 commits into from
Dec 8, 2023
Merged

feat: MathML support #7836

merged 14 commits into from
Dec 8, 2023

Conversation

sto3psl
Copy link
Contributor

@sto3psl sto3psl commented Mar 6, 2023

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

Copy link
Member

@sxzz sxzz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Contributor Author

sto3psl commented Mar 6, 2023

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.

packages/runtime-dom/src/index.ts Outdated Show resolved Hide resolved
packages/runtime-dom/src/index.ts Outdated Show resolved Hide resolved
packages/runtime-core/src/renderer.ts Outdated Show resolved Hide resolved
packages/runtime-core/src/renderer.ts Outdated Show resolved Hide resolved
packages/runtime-core/src/compat/global.ts Outdated Show resolved Hide resolved
@sxzz

This comment was marked as outdated.

@vue-bot

This comment was marked as outdated.

@sxzz
Copy link
Member

sxzz commented Mar 6, 2023

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.

image

It's a public API definitely.

@sto3psl
Copy link
Contributor Author

sto3psl commented Mar 6, 2023

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.

image

It's a public API definitely.

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

@sto3psl
Copy link
Contributor Author

sto3psl commented Mar 6, 2023

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

@sxzz
Copy link
Member

sxzz commented Mar 6, 2023

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

@sxzz sxzz force-pushed the main branch 2 times, most recently from 0325357 to 22fc04a Compare March 6, 2023 13:46
@sxzz
Copy link
Member

sxzz commented Mar 6, 2023

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

@sto3psl
Copy link
Contributor Author

sto3psl commented Mar 6, 2023

@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 😄.

Display union type with backwards compatibility

@sto3psl
Copy link
Contributor Author

sto3psl commented Mar 6, 2023

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
Copy link
Member

sxzz commented Mar 7, 2023

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

packages/runtime-core/src/renderer.ts Outdated Show resolved Hide resolved
packages/runtime-core/src/apiCreateApp.ts Outdated Show resolved Hide resolved
@sto3psl
Copy link
Contributor Author

sto3psl commented Mar 7, 2023

@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 sxzz requested a review from haoqunjiang March 7, 2023 07:57
packages/runtime-core/src/apiCreateApp.ts Outdated Show resolved Hide resolved
packages/runtime-core/src/components/Teleport.ts Outdated Show resolved Hide resolved
packages/runtime-core/src/components/Teleport.ts Outdated Show resolved Hide resolved
@LinusBorg LinusBorg linked an issue Mar 8, 2023 that may be closed by this pull request
@sxzz
Copy link
Member

sxzz commented Mar 23, 2023

/ecosystem-ci run

@vue-bot
Copy link
Contributor

vue-bot commented Mar 23, 2023

📝 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
Copy link
Contributor Author

sto3psl commented Mar 23, 2023

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

@sto3psl
Copy link
Contributor Author

sto3psl commented Mar 27, 2023

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

@sxzz
Copy link
Member

sxzz commented Mar 29, 2023

@sto3psl Yes I think so!

@sxzz sxzz requested a review from yyx990803 March 29, 2023 11:05
@sto3psl
Copy link
Contributor Author

sto3psl commented Apr 28, 2023

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

@sto3psl
Copy link
Contributor Author

sto3psl commented May 24, 2023

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 sxzz added the ready to merge The PR is ready to be merged. label Jun 10, 2023
@sxzz
Copy link
Member

sxzz commented Oct 29, 2023

See #9249 (comment)

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

@sto3psl
Copy link
Contributor Author

sto3psl commented Oct 31, 2023

@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?

@yyx990803 yyx990803 merged commit d42b6ba into vuejs:minor Dec 8, 2023
4 of 6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ready to merge The PR is ready to be merged. version: minor
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Vue doesn't support rendering MathML
6 participants