theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: fix implementation of SFC :slotted id handling

Browse Source 
fix #2892
This commit is contained in:
Evan You
2021-03-05 11:10:06 -05:00
parent cc975c1292
commit aea88c3280
36 changed files with 723 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
View File

@@ -10,13 +10,11 @@ describe('ssr: scopeId', () => {
mode: 'module'
}).code
).toMatchInlineSnapshot(`
"import { withScopeId as _withScopeId } from \\"vue\\"
import { ssrRenderAttrs as _ssrRenderAttrs } from \\"@vue/server-renderer\\"
const _withId = /*#__PURE__*/_withScopeId(\\"data-v-xxxxxxx\\")
"import { ssrRenderAttrs as _ssrRenderAttrs } from \\"@vue/server-renderer\\"
export const ssrRender = /*#__PURE__*/_withId((_ctx, _push, _parent, _attrs) => {
export function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
})"
}"
`)
})
@@ -28,15 +26,14 @@ describe('ssr: scopeId', () => {
mode: 'module'
}).code
).toMatchInlineSnapshot(`
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode, withScopeId as _withScopeId } from \\"vue\\"
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from \\"@vue/server-renderer\\"
const _withId = /*#__PURE__*/_withScopeId(\\"data-v-xxxxxxx\\")
export const ssrRender = /*#__PURE__*/_withId((_ctx, _push, _parent, _attrs) => {
export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withId((_, _push, _parent, _scopeId) => {
default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) {
_push(\`foo\`)
} else {
@@ -47,7 +44,7 @@ describe('ssr: scopeId', () => {
}),
_: 1 /* STABLE */
}, _parent))
})"
}"
`)
})
@@ -58,15 +55,14 @@ describe('ssr: scopeId', () => {
mode: 'module'
}).code
).toMatchInlineSnapshot(`
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, withScopeId as _withScopeId } from \\"vue\\"
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from \\"@vue/server-renderer\\"
const _withId = /*#__PURE__*/_withScopeId(\\"data-v-xxxxxxx\\")
export const ssrRender = /*#__PURE__*/_withId((_ctx, _push, _parent, _attrs) => {
export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withId((_, _push, _parent, _scopeId) => {
default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) {
_push(\`<span data-v-xxxxxxx\${_scopeId}>hello</span>\`)
} else {
@@ -77,7 +73,7 @@ describe('ssr: scopeId', () => {
}),
_: 1 /* STABLE */
}, _parent))
})"
}"
`)
})
@@ -88,20 +84,19 @@ describe('ssr: scopeId', () => {
mode: 'module'
}).code
).toMatchInlineSnapshot(`
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, withScopeId as _withScopeId } from \\"vue\\"
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from \\"@vue/server-renderer\\"
const _withId = /*#__PURE__*/_withScopeId(\\"data-v-xxxxxxx\\")
export const ssrRender = /*#__PURE__*/_withId((_ctx, _push, _parent, _attrs) => {
export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_bar = _resolveComponent(\\"bar\\")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withId((_, _push, _parent, _scopeId) => {
default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) {
_push(\`<span data-v-xxxxxxx\${_scopeId}>hello</span>\`)
_push(_ssrRenderComponent(_component_bar, null, {
default: _withId((_, _push, _parent, _scopeId) => {
default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) {
_push(\`<span data-v-xxxxxxx\${_scopeId}></span>\`)
} else {
@@ -111,12 +106,12 @@ describe('ssr: scopeId', () => {
}
}),
_: 1 /* STABLE */
}, _parent))
}, _parent, _scopeId))
} else {
return [
_createVNode(\\"span\\", null, \\"hello\\"),
_createVNode(_component_bar, null, {
default: _withId(() => [
default: _withCtx(() => [
_createVNode(\\"span\\")
]),
_: 1 /* STABLE */
@@ -126,7 +121,7 @@ describe('ssr: scopeId', () => {
}),
_: 1 /* STABLE */
}, _parent))
})"
}"
`)
})
})

52
packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
View File

@@ -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)
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, null)
}"
`)
})
@@ -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)
_ssrRenderSlot(_ctx.$slots, \\"foo\\", {}, null, _push, _parent, null)
}"
`)
})
@@ -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)
_ssrRenderSlot(_ctx.$slots, _ctx.bar.baz, {}, null, _push, _parent, null)
}"
`)
})
@@ -40,7 +40,7 @@ describe('ssr: <slot>', () => {
_ssrRenderSlot(_ctx.$slots, \\"foo\\", {
p: 1,
bar: \\"2\\"
}, null, _push, _parent)
}, null, _push, _parent, null)
}"
`)
})
@@ -53,7 +53,49 @@ describe('ssr: <slot>', () => {
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, () => {
_push(\`some \${_ssrInterpolate(_ctx.fallback)} content\`)
}, _push, _parent)
}, _push, _parent, null)
}"
`)
})
test('with scopeId', async () => {
expect(
compile(`<slot/>`, {
scopeId: 'hello'
}).code
).toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, \\"hello-s\\")
}"
`)
})
test('with forwarded scopeId', async () => {
expect(
compile(`<Comp><slot/></Comp>`, {
scopeId: 'hello'
}).code
).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderSlot: _renderSlot } = require(\\"vue\\")
const { ssrRenderSlot: _ssrRenderSlot, ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_Comp = _resolveComponent(\\"Comp\\")
_push(_ssrRenderComponent(_component_Comp, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) {
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, \\"hello-s\\" + _scopeId)
} else {
return [
_renderSlot(_ctx.$slots, \\"default\\")
]
}
}),
_: 3 /* FORWARDED */
}, _parent))
}"
`)
})

6
packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
View File

@@ -203,6 +203,12 @@ export function ssrProcessComponent(
vnodeBranch
)
}
// component is inside a slot, inherit slot scope Id
if (context.withSlotScopeId) {
node.ssrCodegenNode!.arguments.push(`_scopeId`)
}
if (typeof component === 'string') {
// static component
context.pushStatement(

15
packages/compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts
View File

@@ -21,9 +21,11 @@ export const ssrTransformSlotOutlet: NodeTransform = (node, context) => {
`_ctx.$slots`,
slotName,
slotProps || `{}`,
`null`, // fallback content placeholder.
// fallback content placeholder. will be replaced in the process phase
`null`,
`_push`,
`_parent`
`_parent`,
context.scopeId ? `"${context.scopeId}-s"` : `null`
]
)
}
@@ -34,6 +36,7 @@ export function ssrProcessSlotOutlet(
context: SSRTransformContext
) {
const renderCall = node.ssrCodegenNode!
// has fallback content
if (node.children.length) {
const fallbackRenderFn = createFunctionExpression([])
@@ -41,5 +44,13 @@ export function ssrProcessSlotOutlet(
// _renderSlot(slots, name, props, fallback, ...)
renderCall.arguments[3] = fallbackRenderFn
}
// Forwarded <slot/>. Add slot scope id
if (context.withSlotScopeId) {
const scopeId = renderCall.arguments[6] as string
renderCall.arguments[6] =
scopeId === `null` ? `_scopeId` : `${scopeId} + _scopeId`
}
context.pushStatement(node.ssrCodegenNode!)
}