perf: support only attaching slot scope ids when necessary
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.
This commit is contained in:
@@ -6,7 +6,7 @@ describe('ssr: <slot>', () => {
|
||||
"const { ssrRenderSlot: _ssrRenderSlot } = require(\\"@vue/server-renderer\\")
|
||||
|
||||
return function ssrRender(_ctx, _push, _parent, _attrs) {
|
||||
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, null)
|
||||
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@@ -16,7 +16,7 @@ describe('ssr: <slot>', () => {
|
||||
"const { ssrRenderSlot: _ssrRenderSlot } = require(\\"@vue/server-renderer\\")
|
||||
|
||||
return function ssrRender(_ctx, _push, _parent, _attrs) {
|
||||
_ssrRenderSlot(_ctx.$slots, \\"foo\\", {}, null, _push, _parent, null)
|
||||
_ssrRenderSlot(_ctx.$slots, \\"foo\\", {}, null, _push, _parent)
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@@ -26,7 +26,7 @@ describe('ssr: <slot>', () => {
|
||||
"const { ssrRenderSlot: _ssrRenderSlot } = require(\\"@vue/server-renderer\\")
|
||||
|
||||
return function ssrRender(_ctx, _push, _parent, _attrs) {
|
||||
_ssrRenderSlot(_ctx.$slots, _ctx.bar.baz, {}, null, _push, _parent, null)
|
||||
_ssrRenderSlot(_ctx.$slots, _ctx.bar.baz, {}, null, _push, _parent)
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@@ -40,7 +40,7 @@ describe('ssr: <slot>', () => {
|
||||
_ssrRenderSlot(_ctx.$slots, \\"foo\\", {
|
||||
p: 1,
|
||||
bar: \\"2\\"
|
||||
}, null, _push, _parent, null)
|
||||
}, null, _push, _parent)
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@@ -53,7 +53,7 @@ describe('ssr: <slot>', () => {
|
||||
return function ssrRender(_ctx, _push, _parent, _attrs) {
|
||||
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, () => {
|
||||
_push(\`some \${_ssrInterpolate(_ctx.fallback)} content\`)
|
||||
}, _push, _parent, null)
|
||||
}, _push, _parent)
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@@ -72,6 +72,21 @@ describe('ssr: <slot>', () => {
|
||||
`)
|
||||
})
|
||||
|
||||
test('with scopeId + slotted:false', async () => {
|
||||
expect(
|
||||
compile(`<slot/>`, {
|
||||
scopeId: 'hello',
|
||||
slotted: false
|
||||
}).code
|
||||
).toMatchInlineSnapshot(`
|
||||
"const { ssrRenderSlot: _ssrRenderSlot } = require(\\"@vue/server-renderer\\")
|
||||
|
||||
return function ssrRender(_ctx, _push, _parent, _attrs) {
|
||||
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
|
||||
}"
|
||||
`)
|
||||
})
|
||||
|
||||
test('with forwarded scopeId', async () => {
|
||||
expect(
|
||||
compile(`<Comp><slot/></Comp>`, {
|
||||
@@ -90,7 +105,7 @@ describe('ssr: <slot>', () => {
|
||||
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, \\"hello-s\\" + _scopeId)
|
||||
} else {
|
||||
return [
|
||||
_renderSlot(_ctx.$slots, \\"default\\")
|
||||
_renderSlot(_ctx.$slots, \\"default\\", {}, undefined, true)
|
||||
]
|
||||
}
|
||||
}),
|
||||
|
||||
Reference in New Issue
Block a user