mirror of https://github.com/vuejs/core.git
fix(ssr): avoid merging style generated by vShow into
This commit is contained in:
parent
201936f9a3
commit
059b3cbd17
|
@ -33,6 +33,44 @@ describe('ssr: v-show', () => {
|
|||
`)
|
||||
})
|
||||
|
||||
test('with component', () => {
|
||||
expect(
|
||||
compileWithWrapper(`<Foo :style="{color:'red'}" v-show="foo"/>`).code,
|
||||
).toMatchInlineSnapshot(`
|
||||
"const { resolveComponent: _resolveComponent } = require("vue")
|
||||
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
|
||||
|
||||
return function ssrRender(_ctx, _push, _parent, _attrs) {
|
||||
const _component_Foo = _resolveComponent("Foo")
|
||||
|
||||
_push(\`<div\${_ssrRenderAttrs(_attrs)}>\`)
|
||||
_push(_ssrRenderComponent(_component_Foo, { style: {color:'red'} }, null, _parent, '', {
|
||||
style: (_ctx.foo) ? null : { display: "none" }
|
||||
}))
|
||||
_push(\`</div>\`)
|
||||
}"
|
||||
`)
|
||||
})
|
||||
|
||||
test('with dynamic component', () => {
|
||||
expect(
|
||||
compileWithWrapper(
|
||||
`<component is="Foo" :style="{color:'red'}" v-show="foo"/>`,
|
||||
).code,
|
||||
).toMatchInlineSnapshot(`
|
||||
"const { resolveDynamicComponent: _resolveDynamicComponent, createVNode: _createVNode } = require("vue")
|
||||
const { ssrRenderVNode: _ssrRenderVNode, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
|
||||
|
||||
return function ssrRender(_ctx, _push, _parent, _attrs) {
|
||||
_push(\`<div\${_ssrRenderAttrs(_attrs)}>\`)
|
||||
_ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent("Foo"), { style: {color:'red'} }, null), _parent, '', {
|
||||
style: (_ctx.foo) ? null : { display: "none" }
|
||||
})
|
||||
_push(\`</div>\`)
|
||||
}"
|
||||
`)
|
||||
})
|
||||
|
||||
test('with static style', () => {
|
||||
expect(compileWithWrapper(`<div style="color:red" v-show="foo"/>`).code)
|
||||
.toMatchInlineSnapshot(`
|
||||
|
|
|
@ -30,6 +30,7 @@ import {
|
|||
createCallExpression,
|
||||
createFunctionExpression,
|
||||
createIfStatement,
|
||||
createObjectExpression,
|
||||
createReturnStatement,
|
||||
createRoot,
|
||||
createSimpleExpression,
|
||||
|
@ -134,6 +135,17 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
|
|||
})
|
||||
}
|
||||
|
||||
let vShowExp
|
||||
const vShowDir = node.props.find(
|
||||
p => p.type === NodeTypes.DIRECTIVE && p.name === 'show',
|
||||
) as DirectiveNode | undefined
|
||||
if (vShowDir) {
|
||||
node.props = node.props.filter(p => p !== vShowDir)
|
||||
const directiveTransform = context.directiveTransforms['show']
|
||||
const { props } = directiveTransform!(vShowDir, node, context)
|
||||
vShowExp = createObjectExpression(props)
|
||||
}
|
||||
|
||||
let propsExp: string | JSChildNode = `null`
|
||||
if (node.props.length) {
|
||||
// note we are not passing ssr: true here because for components, v-on
|
||||
|
@ -180,22 +192,31 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
|
|||
// dynamic component that resolved to a `resolveDynamicComponent` call
|
||||
// expression - since the resolved result may be a plain element (string)
|
||||
// or a VNode, handle it with `renderVNode`.
|
||||
const args: (string | JSChildNode)[] = [
|
||||
`_push`,
|
||||
createCallExpression(context.helper(CREATE_VNODE), [
|
||||
component,
|
||||
propsExp,
|
||||
slots,
|
||||
]),
|
||||
`_parent`,
|
||||
]
|
||||
if (vShowExp) args.push(`''`, vShowExp)
|
||||
node.ssrCodegenNode = createCallExpression(
|
||||
context.helper(SSR_RENDER_VNODE),
|
||||
[
|
||||
`_push`,
|
||||
createCallExpression(context.helper(CREATE_VNODE), [
|
||||
component,
|
||||
propsExp,
|
||||
slots,
|
||||
]),
|
||||
`_parent`,
|
||||
],
|
||||
args,
|
||||
)
|
||||
} else {
|
||||
const args: (string | JSChildNode)[] = [
|
||||
component,
|
||||
propsExp,
|
||||
slots,
|
||||
`_parent`,
|
||||
]
|
||||
if (vShowExp) args.push(`''`, vShowExp)
|
||||
node.ssrCodegenNode = createCallExpression(
|
||||
context.helper(SSR_RENDER_COMPONENT),
|
||||
[component, propsExp, slots, `_parent`],
|
||||
args,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -92,6 +92,7 @@ export function renderComponentVNode(
|
|||
vnode: VNode,
|
||||
parentComponent: ComponentInternalInstance | null = null,
|
||||
slotScopeId?: string,
|
||||
vShowValue?: Props | null,
|
||||
): SSRBuffer | Promise<SSRBuffer> {
|
||||
const instance = (vnode.component = createComponentInstance(
|
||||
vnode,
|
||||
|
@ -116,15 +117,18 @@ export function renderComponentVNode(
|
|||
})
|
||||
// Note: error display is already done by the wrapped lifecycle hook function.
|
||||
.catch(NOOP)
|
||||
return p.then(() => renderComponentSubTree(instance, slotScopeId))
|
||||
return p.then(() =>
|
||||
renderComponentSubTree(instance, slotScopeId, vShowValue),
|
||||
)
|
||||
} else {
|
||||
return renderComponentSubTree(instance, slotScopeId)
|
||||
return renderComponentSubTree(instance, slotScopeId, vShowValue)
|
||||
}
|
||||
}
|
||||
|
||||
function renderComponentSubTree(
|
||||
instance: ComponentInternalInstance,
|
||||
slotScopeId?: string,
|
||||
vShowValue?: Props | null,
|
||||
): SSRBuffer | Promise<SSRBuffer> {
|
||||
if (__DEV__) pushWarningContext(instance.vnode)
|
||||
const comp = instance.type as Component
|
||||
|
@ -186,6 +190,11 @@ function renderComponentSubTree(
|
|||
}
|
||||
}
|
||||
|
||||
if (vShowValue) {
|
||||
if (attrs) attrs = mergeProps(attrs, vShowValue)
|
||||
else attrs = vShowValue
|
||||
}
|
||||
|
||||
// set current rendering instance for asset resolution
|
||||
const prev = setCurrentRenderingInstance(instance)
|
||||
try {
|
||||
|
@ -225,6 +234,7 @@ export function renderVNode(
|
|||
vnode: VNode,
|
||||
parentComponent: ComponentInternalInstance,
|
||||
slotScopeId?: string,
|
||||
vShowValue?: Props | null,
|
||||
): void {
|
||||
const { type, shapeFlag, children, dirs, props } = vnode
|
||||
if (dirs) {
|
||||
|
@ -263,7 +273,9 @@ export function renderVNode(
|
|||
if (shapeFlag & ShapeFlags.ELEMENT) {
|
||||
renderElementVNode(push, vnode, parentComponent, slotScopeId)
|
||||
} else if (shapeFlag & ShapeFlags.COMPONENT) {
|
||||
push(renderComponentVNode(vnode, parentComponent, slotScopeId))
|
||||
push(
|
||||
renderComponentVNode(vnode, parentComponent, slotScopeId, vShowValue),
|
||||
)
|
||||
} else if (shapeFlag & ShapeFlags.TELEPORT) {
|
||||
renderTeleportVNode(push, vnode, parentComponent, slotScopeId)
|
||||
} else if (shapeFlag & ShapeFlags.SUSPENSE) {
|
||||
|
|
Loading…
Reference in New Issue