Slot scope id refactor #3374
Merged
Slot scope id refactor #3374
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This is done by adding the `slotted: false` option to: - compiler-dom - compiler-ssr - compiler-sfc (forwarded to template compiler) At runtime, only slotted component will render slot fragments with slot scope Ids. For SSR, only slotted component will add slot scope Ids to rendered slot content. This should improve both runtime performance and reduce SSR rendered markup size. Note: requires SFC tooling (e.g. `vue-loader` and `vite`) to pass on the `slotted` option from the SFC descriptoer to the `compileTemplate` call.
Size report
|
yyx990803
force-pushed
the
slot-scope-id-refactor
branch
from
2706502 to
21a8dbd
Compare
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.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is a big refactor regarding SFC scoped ID for
:slottedselectors. The original goal was to fix #2892, however in the process I realized the previous:slottedimplementation was seriously flawed which led to this massive refactor. It does not contain any breaking behavior, however due to how substantial it is, it's submitted as a PR to explicitly document the internal changes.Compiler-generated code for scope ID is in general simplified. Instead of generating a
withIdhelper and wrapping every slot function with it,withCtxis now used in all cases. Tracking the slot's owner component also tracks its scope id so there no need to use different helpers anymore.New slotted scope ID handling:
Compiler-generate slot outlets (i.e.
<slot/>) now generate code that passes an additional boolean argument torenderSlot. This boolean argument indicates whether the current template belongs to an SFC that also has:slottedselectors.When rendering the slot fragment, if the owner component uses
:slotted, the fragment vnode gets assigned aslotScopeIdsarray.In the patch phase, when encountering a fragment with non-null
slotScopeIds, we now know this is a slot whose content needs the slotted scope attributes (data-v-xxxxxxxx-s).This does require passing down
slotScopeIdsas an argument through almost all renderer functions, similar toisSVGandoptimized. I did try refactoring it to a context instead, however the patch context refactor is very risky: it broke e2e test cases while passing all unit tests, and the end bundle size got bigger, so I ended up sticking with the argument passing.SSR handling of scope ID is updated accordingly.
Optimization: slot scope IDs only need to be applied if the component actually uses
:slottedstyles.@vue/compiler-domand@vue/compiler-ssrnow both accepted aslottedoption. This option istrueby default to retain backwards compatibility.@vue/compiler-sfcSFCDescriptornow exposes aslottedproperty which indicates whether the component uses:slottedstyles.compileTemplatenow accepts aslottedoption which is passed on to@vue/compiler-domand@vue/compiler-ssr. Higher level tools (e.g.viteorvue-loader) should be updated to pass the descriptor'sslottedproperty tocompileTemplateto enable the optimization.