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

fix(ssr): support dynamic components that resolve to element or vnode

Browse Source 
fix #1508
This commit is contained in:
Evan You
2020-07-06 21:23:29 -04:00
parent d7184c99e6
commit 41db49dfb7
6 changed files with 117 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/compiler-ssr/__tests__/ssrComponent.spec.ts
View File

@@ -20,21 +20,21 @@ describe('ssr: components', () => {
test('dynamic component', () => {
expect(compile(`<component is="foo" prop="b" />`).code)
.toMatchInlineSnapshot(`
"const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
"const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require(\\"vue\\")
const { ssrRenderVNode: _ssrRenderVNode } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(_ssrRenderComponent(_resolveDynamicComponent(\\"foo\\"), _mergeProps({ prop: \\"b\\" }, _attrs), null, _parent))
_ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(\\"foo\\"), _mergeProps({ prop: \\"b\\" }, _attrs), null), _parent)
}"
`)
expect(compile(`<component :is="foo" prop="b" />`).code)
.toMatchInlineSnapshot(`
"const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
"const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require(\\"vue\\")
const { ssrRenderVNode: _ssrRenderVNode } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(_ssrRenderComponent(_resolveDynamicComponent(_ctx.foo), _mergeProps({ prop: \\"b\\" }, _attrs), null, _parent))
_ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.foo), _mergeProps({ prop: \\"b\\" }, _attrs), null), _parent)
}"
`)
})

2
packages/compiler-ssr/src/runtimeHelpers.ts
View File

@@ -1,6 +1,7 @@
import { registerRuntimeHelpers } from '@vue/compiler-dom'
export const SSR_INTERPOLATE = Symbol(`ssrInterpolate`)
export const SSR_RENDER_VNODE = Symbol(`ssrRenderVNode`)
export const SSR_RENDER_COMPONENT = Symbol(`ssrRenderComponent`)
export const SSR_RENDER_SLOT = Symbol(`ssrRenderSlot`)
export const SSR_RENDER_CLASS = Symbol(`ssrRenderClass`)
@@ -18,6 +19,7 @@ export const SSR_RENDER_SUSPENSE = Symbol(`ssrRenderSuspense`)
export const ssrHelpers = {
[SSR_INTERPOLATE]: `ssrInterpolate`,
[SSR_RENDER_VNODE]: `ssrRenderVNode`,
[SSR_RENDER_COMPONENT]: `ssrRenderComponent`,
[SSR_RENDER_SLOT]: `ssrRenderSlot`,
[SSR_RENDER_CLASS]: `ssrRenderClass`,

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

@@ -11,7 +11,6 @@ import {
buildSlots,
FunctionExpression,
TemplateChildNode,
TELEPORT,
createIfStatement,
createSimpleExpression,
getBaseTransformPreset,
@@ -31,9 +30,12 @@ import {
ExpressionNode,
TemplateNode,
SUSPENSE,
TRANSITION_GROUP
TELEPORT,
TRANSITION_GROUP,
CREATE_VNODE,
CallExpression
} from '@vue/compiler-dom'
import { SSR_RENDER_COMPONENT } from '../runtimeHelpers'
import { SSR_RENDER_COMPONENT, SSR_RENDER_VNODE } from '../runtimeHelpers'
import {
SSRTransformContext,
processChildren,
@@ -58,7 +60,10 @@ interface WIPSlotEntry {
vnodeBranch: ReturnStatement
}
const componentTypeMap = new WeakMap<ComponentNode, symbol>()
const componentTypeMap = new WeakMap<
ComponentNode,
string | symbol | CallExpression
>()
// ssr component transform is done in two phases:
// In phase 1. we use `buildSlot` to analyze the children of the component into
@@ -75,8 +80,9 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
}
const component = resolveComponentType(node, context, true /* ssr */)
componentTypeMap.set(node, component)
if (isSymbol(component)) {
componentTypeMap.set(node, component)
if (component === SUSPENSE) {
return ssrTransformSuspense(node, context)
}
@@ -134,10 +140,28 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
? buildSlots(node, context, buildSSRSlotFn).slots
: `null`
node.ssrCodegenNode = createCallExpression(
context.helper(SSR_RENDER_COMPONENT),
[component, props, slots, `_parent`]
)
if (typeof component !== 'string') {
// dynamic component that resolved to a `resolveDynamicComponent` call
// expression - since the reoslved result may be a plain element (string)
// or a VNode, handle it with `renderVNode`.
node.ssrCodegenNode = createCallExpression(
context.helper(SSR_RENDER_VNODE),
[
`_push`,
createCallExpression(context.helper(CREATE_VNODE), [
component,
props,
slots
]),
`_parent`
]
)
} else {
node.ssrCodegenNode = createCallExpression(
context.helper(SSR_RENDER_COMPONENT),
[component, props, slots, `_parent`]
)
}
}
}
@@ -145,9 +169,9 @@ export function ssrProcessComponent(
node: ComponentNode,
context: SSRTransformContext
) {
const component = componentTypeMap.get(node)!
if (!node.ssrCodegenNode) {
// this is a built-in component that fell-through.
const component = componentTypeMap.get(node)!
if (component === TELEPORT) {
return ssrProcessTeleport(node, context)
} else if (component === SUSPENSE) {
@@ -176,7 +200,16 @@ export function ssrProcessComponent(
vnodeBranch
)
}
context.pushStatement(createCallExpression(`_push`, [node.ssrCodegenNode]))
if (typeof component === 'string') {
// static component
context.pushStatement(
createCallExpression(`_push`, [node.ssrCodegenNode])
)
} else {
// dynamic component (`resolveDynamicComponent` call)
// the codegen node is a `renderVNode` call
context.pushStatement(node.ssrCodegenNode)
}
}
}