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

dx(compiler-dom): warn on invalid html nesting #10734

Merged
merged 3 commits into from
Apr 22, 2024

Conversation

sxzz
Copy link
Member

@sxzz sxzz commented Apr 18, 2024

According to the HTML spec, <p><div></div></p> is not a valid syntax. However, it functions when utilizing the JS DOM API. Consequently, it operates effectively in Vue runtime but fails with SSR. So I introduced this warning on dev mode.

SSR Demo

@sxzz sxzz marked this pull request as draft April 18, 2024 15:31
Copy link

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 93.8 kB (+3.04 kB) 35.4 kB (+901 B) 31.9 kB (+809 B)
vue.global.prod.js 151 kB (+3.04 kB) 54.7 kB (+910 B) 48.9 kB (+810 B)

Usages

Name Size Gzip Brotli
createApp 53.9 kB (+3.09 kB) 20.9 kB (+988 B) 18.9 kB (+810 B)
createSSRApp 57.2 kB (+3.09 kB) 22.2 kB (+963 B) 20.1 kB (+784 B)
defineCustomElement 56.2 kB (+3.1 kB) 21.6 kB (+985 B) 19.6 kB (+813 B)
overall 67.5 kB (+3.01 kB) 25.8 kB (+888 B) 23.4 kB (+831 B)

@sxzz sxzz marked this pull request as ready for review April 18, 2024 15:50
@sxzz sxzz changed the title dx(compiler-dom): warn if invalid html nesting dx(compiler-dom): warn on invalid html nesting Apr 19, 2024
@yyx990803 yyx990803 merged commit a084df1 into minor Apr 22, 2024
11 checks passed
@yyx990803 yyx990803 deleted the dx/validate-html-nesting branch April 22, 2024 07:03
h4: headings,
h5: headings,
h6: headings,
}
Copy link
Member

Choose a reason for hiding this comment

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

This implementation seems a bit oversimplified which will miss mismatches like p > a > div.

Copy link
Member Author

Choose a reason for hiding this comment

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

You're right, but there's currently no way to retrieve ancestor nodes.

parent: ParentNode | null
// we could use a stack but in practice we've only ever needed two layers up
// so this is more efficient
grandParent: ParentNode | null

@Kennedy242
Copy link

Related issue: #12088

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants