[Fizz] Support special HTML/SVG/MathML tags to suspend #21113
Merged
+475
−59
Conversation
The table modes are special in that its children can't be created outside a table context so we need the segment container to be wrapped in a table.
It works the same otherwise. It's just that this context needs to outlive the task so that I can use it when writing the segment.
These can be used in any parent. At least outside IE11. Not sure yet what happens in IE11 to these. Not sure if these are bad for perf since they're special nodes.
This allows us to insert the correct wrappers when streaming into an existing non-HTML tree.
|
Comparing: 556644e...91e035e Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: Expand to show
|
|
Woah. I haven’t even thought of this as a possible problem. |
|
There are other tags that are technically not allowed but they do work in that they're not ignored inside a div. As far as I could tell by testing a bunch of tags. |
|
The HTML parsing spec is accurate to what real browsers do, I believe, and in React’s validateDOMNesting I attempted to boil down the problematic cases (only the ones that would cause parsing issues). And IE11 doesn’t support template – I imagine you’re still trying to support it? |
|
Yea I've been using the validation code as a quick reference along with the spec. Easier to read. :) I left a comment about IE11 in one of the commits. One thing I wasn't sure about is what it actually does though and whether it'll work for our purposes. We don't actually use its runtime features where it's child nodes go into this separate thing. It's only a leaf. That should work at least for the common case in IE11 since browsers do parse unknown tags in most contexts. It might not work in special contexts though. The question is how common will that combination be and what actually happens because it might not be the same as the spec. I haven't tested. |
sebmarkbage
merged commit 32d6f39
into
facebook:master
35 checks passed
35 checks passed
ci/circleci: yarn_test--r=stable --env=development --persistent
Your tests passed on CircleCI!
Details
ci/circleci: yarn_test--r=www-classic --env=development --variant
Your tests passed on CircleCI!
Details
ci/circleci: yarn_test--r=www-classic --env=production --variant
Your tests passed on CircleCI!
Details
ci/circleci: yarn_test--r=www-modern --env=development --variant
Your tests passed on CircleCI!
Details
ci/circleci: yarn_test--r=www-modern --env=production --variant
Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_build---project=devtools -r=experimental
Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_build--r=experimental --env=development
Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_build--r=experimental --env=production
Your tests passed on CircleCI!
Details
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
When we write a new segment to be inserted by script, the parent needs to be a certain tag so that the children get the correct namespace. Additionally, table tags are ignored by the parser unless they're inside a table. So I needed to encode those specially.
I needed access to the insertion mode in the writing phase which is after a Task is complete. So I opted to just always store the formatContext on the Segment instead of the Task.
We allow the root of the stream to be non-HTML and in that case we don't know what namespace we're already in. So we allow that to be passed as an option now using namespaceURI. I tried to be clever and use custom elements that work in either environment but there are really two ways to stream into the root that makes this tricky.
<svg>shell .... rest-of-stream... end-of-fileor<svg>shell</svg>... rest-of-stream ... end-of-fileSo I caved and just added a root option instead. Probably good for warnings etc. anyway.Additionally we insert dummy leaf nodes in two cases. Either as placeholders or to identify text fallbacks. These nodes needs to be allowed in the parent. Interestingly in
<colgroup>there's only one tag other than<col>that's allowed and that's<template>. I switched these dummy leaf nodes to<template>instead because that works in every context. I'm not sure if that might have other negative performance considerations. We do have access to the parent context now so we could switch these tags based on the parent.Notably, we don't use
<template>as intended. I.e. we still don't use them as container wrappers. Because our purpose is to move these nodes, not clone them. They also don't automatically let us switch namespaces. So it's not better for us.cc @nickbalestra