foo: ({ list }, _push, _parent, _scopeId) => {
if (_push) {
if (_ctx.ok) {
- _push(\`<div\${_scopeId}><!---->\`)
+ _push(\`<div\${_scopeId}>\`)
_ssrRenderList(list, (i) => {
_push(\`<span\${_scopeId}></span>\`)
})
- _push(\`<!----></div>\`)
+ _push(\`</div>\`)
} else {
_push(\`<!---->\`)
}
bar: ({ ok }, _push, _parent, _scopeId) => {
if (_push) {
if (ok) {
- _push(\`<div\${_scopeId}><!---->\`)
+ _push(\`<div\${_scopeId}>\`)
_ssrRenderList(_ctx.list, (i) => {
_push(\`<span\${_scopeId}></span>\`)
})
- _push(\`<!----></div>\`)
+ _push(\`</div>\`)
} else {
_push(\`<!---->\`)
}
.toMatchInlineSnapshot(`
"
return function ssrRender(_ctx, _push, _parent) {
- _push(\`<!----><div></div><!---->\`)
+ _push(\`<div></div>\`)
}"
`)
.toMatchInlineSnapshot(`
"
return function ssrRender(_ctx, _push, _parent) {
- _push(\`<!----><div></div><!---->\`)
+ _push(\`<div></div>\`)
}"
`)
})
"const { ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
- _push(\`<!---->\`)
_ssrRenderList(_ctx.list, (i) => {
_push(\`<div></div>\`)
})
- _push(\`<!---->\`)
}"
`)
})
"const { ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
- _push(\`<!---->\`)
_ssrRenderList(_ctx.list, (i) => {
_push(\`<div>foo<span>bar</span></div>\`)
})
- _push(\`<!---->\`)
}"
`)
})
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
- _push(\`<!---->\`)
_ssrRenderList(_ctx.list, (row, i) => {
- _push(\`<div><!---->\`)
+ _push(\`<div>\`)
_ssrRenderList(row, (j) => {
_push(\`<div>\${
_ssrInterpolate(i)
_ssrInterpolate(j)
}</div>\`)
})
- _push(\`<!----></div>\`)
+ _push(\`</div>\`)
})
- _push(\`<!---->\`)
}"
`)
})
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
- _push(\`<!---->\`)
_ssrRenderList(_ctx.list, (i) => {
- _push(\`<!---->\${_ssrInterpolate(i)}<!---->\`)
+ _push(\`\${_ssrInterpolate(i)}\`)
})
- _push(\`<!---->\`)
}"
`)
})
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
- _push(\`<!---->\`)
_ssrRenderList(_ctx.list, (i) => {
_push(\`<span>\${_ssrInterpolate(i)}</span>\`)
})
- _push(\`<!---->\`)
}"
`)
})
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
- _push(\`<!---->\`)
_ssrRenderList(_ctx.list, (i) => {
- _push(\`<!----><span>\${
+ _push(\`<span>\${
_ssrInterpolate(i)
}</span><span>\${
_ssrInterpolate(i + 1)
- }</span><!---->\`)
+ }</span>\`)
})
- _push(\`<!---->\`)
}"
`)
})
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
- _push(\`<!---->\`)
_ssrRenderList(_ctx.list, ({ foo }, index) => {
_push(\`<div>\${_ssrInterpolate(foo + _ctx.bar + index)}</div>\`)
})
- _push(\`<!---->\`)
}"
`)
})
"
return function ssrRender(_ctx, _push, _parent) {
if (_ctx.foo) {
- _push(\`<!---->hello<!---->\`)
+ _push(\`hello\`)
} else {
_push(\`<!---->\`)
}
"
return function ssrRender(_ctx, _push, _parent) {
if (_ctx.foo) {
- _push(\`<!----><div>hi</div><div>ho</div><!---->\`)
+ _push(\`<div>hi</div><div>ho</div>\`)
} else {
_push(\`<!---->\`)
}
return function ssrRender(_ctx, _push, _parent) {
if (_ctx.foo) {
- _push(\`<!---->\`)
_ssrRenderList(_ctx.list, (i) => {
_push(\`<div></div>\`)
})
- _push(\`<!---->\`)
} else {
_push(\`<!---->\`)
}
"
return function ssrRender(_ctx, _push, _parent) {
if (_ctx.foo) {
- _push(\`<!----><div>hi</div><div>ho</div><!---->\`)
+ _push(\`<div>hi</div><div>ho</div>\`)
} else {
_push(\`<div></div>\`)
}
ElementTypes,
createBlockStatement,
CompilerOptions,
- isText,
IfStatement,
CallExpression
} from '@vue/compiler-dom'
export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
const context = createSSRTransformContext(ast, options)
- const isFragment =
- ast.children.length > 1 && ast.children.some(c => !isText(c))
- processChildren(ast.children, context, isFragment)
+ processChildren(ast.children, context)
ast.codegenNode = createBlockStatement(context.body)
// Finalize helpers.
export function processChildren(
children: TemplateChildNode[],
- context: SSRTransformContext,
- asFragment = false
+ context: SSRTransformContext
) {
- if (asFragment) {
- context.pushStringPart(`<!---->`)
- }
for (let i = 0; i < children.length; i++) {
const child = children[i]
if (child.type === NodeTypes.ELEMENT) {
ssrProcessFor(child, context)
}
}
- if (asFragment) {
- context.pushStringPart(`<!---->`)
- }
}
export function processChildrenAsStatement(
children: TemplateChildNode[],
parentContext: SSRTransformContext,
- asFragment = false,
withSlotScopeId = parentContext.withSlotScopeId
): BlockStatement {
const childContext = createChildContext(parentContext, withSlotScopeId)
- processChildren(children, childContext, asFragment)
+ processChildren(children, childContext)
return createBlockStatement(childContext.body)
}
FunctionExpression,
TemplateChildNode,
PORTAL,
- SUSPENSE,
- TRANSITION_GROUP,
createIfStatement,
createSimpleExpression,
getBaseTransformPreset,
// this is a built-in component that fell-through.
// just render its children.
const component = componentTypeMap.get(node)!
-
if (component === PORTAL) {
return ssrProcessPortal(node, context)
}
-
- const needFragmentWrapper =
- component === SUSPENSE || component === TRANSITION_GROUP
- processChildren(node.children, context, needFragmentWrapper)
+ processChildren(node.children, context)
} else {
// finish up slot function expressions from the 1st pass.
const wipEntries = wipMap.get(node) || []
processChildrenAsStatement(
children,
context,
- false,
true /* withSlotScopeId */
),
vnodeBranch
processFor,
createCallExpression,
createFunctionExpression,
- createForLoopParams,
- NodeTypes
+ createForLoopParams
} from '@vue/compiler-dom'
import {
SSRTransformContext,
// This is called during the 2nd transform pass to construct the SSR-sepcific
// codegen nodes.
export function ssrProcessFor(node: ForNode, context: SSRTransformContext) {
- const needFragmentWrapper =
- node.children.length !== 1 || node.children[0].type !== NodeTypes.ELEMENT
const renderLoop = createFunctionExpression(
createForLoopParams(node.parseResult)
)
- renderLoop.body = processChildrenAsStatement(
- node.children,
- context,
- needFragmentWrapper
- )
-
- // v-for always renders a fragment
- context.pushStringPart(`<!---->`)
+ renderLoop.body = processChildrenAsStatement(node.children, context)
context.pushStatement(
createCallExpression(context.helper(SSR_RENDER_LIST), [
node.source,
renderLoop
])
)
- context.pushStringPart(`<!---->`)
}
IfNode,
createIfStatement,
createBlockStatement,
- createCallExpression,
- IfBranchNode,
- BlockStatement,
- NodeTypes
+ createCallExpression
} from '@vue/compiler-dom'
import {
SSRTransformContext,
const [rootBranch] = node.branches
const ifStatement = createIfStatement(
rootBranch.condition!,
- processIfBranch(rootBranch, context)
+ processChildrenAsStatement(rootBranch.children, context)
)
context.pushStatement(ifStatement)
let currentIf = ifStatement
for (let i = 1; i < node.branches.length; i++) {
const branch = node.branches[i]
- const branchBlockStatement = processIfBranch(branch, context)
+ const branchBlockStatement = processChildrenAsStatement(
+ branch.children,
+ context
+ )
if (branch.condition) {
// else-if
currentIf = currentIf.alternate = createIfStatement(
])
}
}
-
-function processIfBranch(
- branch: IfBranchNode,
- context: SSRTransformContext
-): BlockStatement {
- const { children } = branch
- const needFragmentWrapper =
- (children.length !== 1 || children[0].type !== NodeTypes.ELEMENT) &&
- // optimize away nested fragments when the only child is a ForNode
- !(children.length === 1 && children[0].type === NodeTypes.FOR)
- return processChildrenAsStatement(children, context, needFragmentWrapper)
-}
}
} as any
- expect(renderToString(h(Root))).toBe(`<!---->1112<!---->`)
+ expect(renderToString(h(Root))).toBe(`1112`)
})
test('lifecycle', async () => {
defineComponent,
Portal,
Text,
- Fragment,
ref,
nextTick,
TestElement,
const target = nodeOps.createElement('div')
const root = nodeOps.createElement('div')
- const Comp = defineComponent(() => () =>
- h(Fragment, [
- h(Portal, { target }, h('div', 'teleported')),
- h('div', 'root')
- ])
- )
+ const Comp = defineComponent(() => () => [
+ h(Portal, { target }, h('div', 'teleported')),
+ h('div', 'root')
+ ])
render(h(Comp), root)
expect(serializeInner(root)).toMatchSnapshot()
const target = ref(targetA)
const root = nodeOps.createElement('div')
- const Comp = defineComponent(() => () =>
- h(Fragment, [
- h(Portal, { target: target.value }, h('div', 'teleported')),
- h('div', 'root')
- ])
- )
+ const Comp = defineComponent(() => () => [
+ h(Portal, { target: target.value }, h('div', 'teleported')),
+ h('div', 'root')
+ ])
render(h(Comp), root)
expect(serializeInner(root)).toMatchSnapshot()
await deps[0]
await nextTick()
expect(serializeInner(root)).toBe(
- `<!----><div>async outer</div><div>fallback inner</div><!---->`
+ `<div>async outer</div><div>fallback inner</div>`
)
expect(calls).toEqual([`outer mounted`])
await Promise.all(deps)
await nextTick()
expect(serializeInner(root)).toBe(
- `<!----><div>async outer</div><div>async inner</div><!---->`
+ `<div>async outer</div><div>async inner</div>`
)
expect(calls).toEqual([`outer mounted`, `inner mounted`])
})
await Promise.all(deps)
await nextTick()
expect(serializeInner(root)).toBe(
- `<!----><div>async outer</div><div>async inner</div><!---->`
+ `<div>async outer</div><div>async inner</div>`
)
expect(calls).toEqual([`inner mounted`, `outer mounted`])
})
await deps[3]
await nextTick()
expect(serializeInner(root)).toBe(
- `<!----><div>nested fallback</div><div>root async</div><!---->`
+ `<div>nested fallback</div><div>root async</div>`
)
expect(calls).toEqual([0, 1, 3])
await Promise.all(deps)
await nextTick()
expect(serializeInner(root)).toBe(
- `<!----><div>nested changed</div><div>root async</div><!---->`
+ `<div>nested changed</div><div>root async</div>`
)
expect(calls).toEqual([0, 1, 3, 2])
msg.value = 'nested changed again'
await nextTick()
expect(serializeInner(root)).toBe(
- `<!----><div>nested changed again</div><div>root async</div><!---->`
+ `<div>nested changed again</div><div>root async</div>`
)
})
await deps[0]
await nextTick()
- expect(serializeInner(root)).toBe(`<!----><div>Child A</div><!----><!---->`)
+ expect(serializeInner(root)).toBe(`<div>Child A</div><!---->`)
toggle.value = true
await nextTick()
await deps[1]
await nextTick()
- expect(serializeInner(root)).toBe(
- `<!----><div>Child A</div><div>Child B</div><!---->`
- )
+ expect(serializeInner(root)).toBe(`<div>Child A</div><div>Child B</div>`)
})
test.todo('portal inside suspense')
exports[`renderer: portal should update children 3`] = `"teleported"`;
-exports[`renderer: portal should update target 1`] = `"<!----><!--[object Object]--><div>root</div><!---->"`;
+exports[`renderer: portal should update target 1`] = `"<!--portal--><div>root</div>"`;
exports[`renderer: portal should update target 2`] = `"<div>teleported</div>"`;
exports[`renderer: portal should update target 3`] = `""`;
-exports[`renderer: portal should update target 4`] = `"<!----><!--[object Object]--><div>root</div><!---->"`;
+exports[`renderer: portal should update target 4`] = `"<!--portal--><div>root</div>"`;
exports[`renderer: portal should update target 5`] = `""`;
exports[`renderer: portal should update target 6`] = `"<div>teleported</div>"`;
-exports[`renderer: portal should work 1`] = `"<!----><!--[object Object]--><div>root</div><!---->"`;
+exports[`renderer: portal should work 1`] = `"<!--portal--><div>root</div>"`;
exports[`renderer: portal should work 2`] = `"<div>teleported</div>"`;
createRecord(parentId, Parent)
render(h(Parent), root)
- expect(serializeInner(root)).toBe(`<div>0<!---->0<!----></div>`)
+ expect(serializeInner(root)).toBe(`<div>00</div>`)
// Perform some state change. This change should be preserved after the
// re-render!
triggerEvent(root.children[0] as TestElement, 'click')
await nextTick()
- expect(serializeInner(root)).toBe(`<div>1<!---->1<!----></div>`)
+ expect(serializeInner(root)).toBe(`<div>11</div>`)
// Update text while preserving state
rerender(
`<div @click="count++">{{ count }}!<Child>{{ count }}</Child></div>`
)
)
- expect(serializeInner(root)).toBe(`<div>1!<!---->1<!----></div>`)
+ expect(serializeInner(root)).toBe(`<div>1!1</div>`)
// Should force child update on slot content change
rerender(
`<div @click="count++">{{ count }}!<Child>{{ count }}!</Child></div>`
)
)
- expect(serializeInner(root)).toBe(`<div>1!<!---->1!<!----></div>`)
+ expect(serializeInner(root)).toBe(`<div>1!1!</div>`)
// Should force update element children despite block optimization
rerender(
</div>`
)
)
- expect(serializeInner(root)).toBe(
- `<div>1<span>1</span><!---->1!<!----></div>`
- )
+ expect(serializeInner(root)).toBe(`<div>1<span>1</span>1!</div>`)
// Should force update child slot elements
rerender(
</div>`
)
)
- expect(serializeInner(root)).toBe(`<div><!----><span>1</span><!----></div>`)
+ expect(serializeInner(root)).toBe(`<div><span>1</span></div>`)
})
test('reload', async () => {
render(h(Parent), root)
expect(`Extraneous non-props attributes`).not.toHaveBeenWarned()
- expect(root.innerHTML).toBe(
- `<!----><div></div><div class="parent"></div><!---->`
- )
+ expect(root.innerHTML).toBe(`<div></div><div class="parent"></div>`)
})
it('should not warn when context.attrs is used during render', () => {
render(h(Parent), root)
expect(`Extraneous non-props attributes`).not.toHaveBeenWarned()
- expect(root.innerHTML).toBe(
- `<!----><div></div><div class="parent"></div><!---->`
- )
+ expect(root.innerHTML).toBe(`<div></div><div class="parent"></div>`)
})
})
const root = nodeOps.createElement('div')
render(h(App), root)
- expect(serializeInner(root)).toBe(`<!----><div>one</div>two<!---->`)
+ expect(serializeInner(root)).toBe(`<div>one</div>two`)
expect(root.children.length).toBe(4)
expect(root.children[0]).toMatchObject({
- type: NodeTypes.COMMENT
+ type: NodeTypes.TEXT,
+ text: ''
})
expect(root.children[1]).toMatchObject({
type: NodeTypes.ELEMENT,
text: 'two'
})
expect(root.children[3]).toMatchObject({
- type: NodeTypes.COMMENT
+ type: NodeTypes.TEXT,
+ text: ''
})
})
const root = nodeOps.createElement('div')
render(h('div', [h(Fragment, [h('div', 'one'), 'two'])]), root)
const parent = root.children[0] as TestElement
- expect(serializeInner(parent)).toBe(`<!----><div>one</div>two<!---->`)
+ expect(serializeInner(parent)).toBe(`<div>one</div>two`)
})
it('patch fragment children (manual, keyed)', () => {
h(Fragment, [h('div', { key: 1 }, 'one'), h('div', { key: 2 }, 'two')]),
root
)
- expect(serializeInner(root)).toBe(
- `<!----><div>one</div><div>two</div><!---->`
- )
+ expect(serializeInner(root)).toBe(`<div>one</div><div>two</div>`)
resetOps()
render(
h(Fragment, [h('div', { key: 2 }, 'two'), h('div', { key: 1 }, 'one')]),
root
)
- expect(serializeInner(root)).toBe(
- `<!----><div>two</div><div>one</div><!---->`
- )
+ expect(serializeInner(root)).toBe(`<div>two</div><div>one</div>`)
const ops = dumpOps()
// should be moving nodes instead of re-creating or patching them
expect(ops).toMatchObject([
it('patch fragment children (manual, unkeyed)', () => {
const root = nodeOps.createElement('div')
render(h(Fragment, [h('div', 'one'), h('div', 'two')]), root)
- expect(serializeInner(root)).toBe(
- `<!----><div>one</div><div>two</div><!---->`
- )
+ expect(serializeInner(root)).toBe(`<div>one</div><div>two</div>`)
resetOps()
render(h(Fragment, [h('div', 'two'), h('div', 'one')]), root)
- expect(serializeInner(root)).toBe(
- `<!----><div>two</div><div>one</div><!---->`
- )
+ expect(serializeInner(root)).toBe(`<div>two</div><div>one</div>`)
const ops = dumpOps()
// should be patching nodes instead of moving or re-creating them
expect(ops).toMatchObject([
),
root
)
- expect(serializeInner(root)).toBe(`<!----><div>one</div>two<!---->`)
+ expect(serializeInner(root)).toBe(`<div>one</div>two`)
render(
createVNode(
),
root
)
- expect(serializeInner(root)).toBe(`<!----><div>foo</div>barbaz<!---->`)
+ expect(serializeInner(root)).toBe(`<div>foo</div>barbaz`)
})
it('patch fragment children (compiler generated, keyed)', () => {
),
root
)
- expect(serializeInner(root)).toBe(
- `<!----><div>one</div><div>two</div><!---->`
- )
+ expect(serializeInner(root)).toBe(`<div>one</div><div>two</div>`)
resetOps()
render(
),
root
)
- expect(serializeInner(root)).toBe(
- `<!----><div>two</div><div>one</div><!---->`
- )
+ expect(serializeInner(root)).toBe(`<div>two</div><div>one</div>`)
const ops = dumpOps()
// should be moving nodes instead of re-creating or patching them
expect(ops).toMatchObject([
root
)
expect(serializeInner(root)).toBe(
- `<div><div>outer</div><!----><div>one</div><div>two</div><!----></div>`
+ `<div><div>outer</div><div>one</div><div>two</div></div>`
)
resetOps()
root
)
expect(serializeInner(root)).toBe(
- `<div><
!----><div>two</div><div>one</div><!----><div>outer</div></div>`
+ `<div><
div>two</div><div>one</div><div>outer</div></div>`
)
const ops = dumpOps()
// should be moving nodes instead of re-creating them
// 2. move entire fragment, including anchors
// not the most efficient move, but this case is super rare
// and optimizing for this special case complicates the algo quite a bit
- { type: NodeOpTypes.INSERT, targetNode: { type: 'comment' } },
+ { type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } },
{ type: NodeOpTypes.INSERT, targetNode: { type: 'element' } },
{ type: NodeOpTypes.INSERT, targetNode: { type: 'element' } },
- { type: NodeOpTypes.INSERT, targetNode: { type: 'comment' } }
+ { type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } }
])
})
root
)
expect(serializeInner(root)).toBe(
- `<!----><div>outer</div><!----><div>one</div><div>two</div><!----><!---->`
+ `<div>outer</div><div>one</div><div>two</div>`
)
resetOps()
root
)
expect(serializeInner(root)).toBe(
- `<!----><!----><div>two</div><div>one</div><!----><div>outer</div><!---->`
+ `<div>two</div><div>one</div><div>outer</div>`
)
const ops = dumpOps()
// should be moving nodes instead of re-creating them
expect(ops).toMatchObject([
{ type: NodeOpTypes.INSERT, targetNode: { type: 'element' } },
- { type: NodeOpTypes.INSERT, targetNode: { type: 'comment' } },
+ { type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } },
{ type: NodeOpTypes.INSERT, targetNode: { type: 'element' } },
{ type: NodeOpTypes.INSERT, targetNode: { type: 'element' } },
- { type: NodeOpTypes.INSERT, targetNode: { type: 'comment' } }
+ { type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } }
])
// should properly remove nested fragments
// passed in via arguments.
export function createHydrationFunctions({
mt: mountComponent,
- o: { patchProp }
+ o: { patchProp, createText }
}: RendererInternals<Node, Element>) {
const hydrate: RootHydrateFunction = (vnode, container) => {
if (__DEV__ && !container.hasChildNodes()) {
node: Node,
vnode: VNode,
parentComponent: ComponentInternalInstance | null = null
- ): Node | null | undefined => {
+ ): Node | null => {
const { type, shapeFlag } = vnode
vnode.el = node
switch (type) {
case Static:
return node.nextSibling
case Fragment:
- const anchor = (vnode.anchor = hydrateChildren(
- node.nextSibling,
+ const parent = node.parentNode!
+ parent.insertBefore((vnode.el = createText('')), node)
+ const next = hydrateChildren(
+ node,
vnode.children as VNode[],
parentComponent
- )!)
- // TODO handle potential hydration error if fragment didn't get
- // back anchor as expected.
- return anchor.nextSibling
+ )
+ parent.insertBefore((vnode.anchor = createText('')), next)
+ return next
default:
if (shapeFlag & ShapeFlags.ELEMENT) {
return hydrateElement(node as Element, vnode, parentComponent)
} else if (__DEV__) {
warn('Invalid HostVNode type:', type, `(${typeof type})`)
}
+ return null
}
}
}
const hydrateChildren = (
- node: Node | null | undefined,
+ node: Node | null,
vnodes: VNode[],
parentComponent: ComponentInternalInstance | null
- ): Node | null | undefined => {
+ ): Node | null => {
for (let i = 0; node != null && i < vnodes.length; i++) {
// TODO can skip normalizeVNode in optimized mode
// (need hint on rendered markup?)
pbc: PatchBlockChildrenFn<HostNode, HostElement>
n: NextFn<HostNode, HostElement>
o: RendererOptions<HostNode, HostElement>
- c: ProcessTextOrCommentFn<HostNode, HostElement>
}
// These functions are created inside a closure and therefore their types cannot
}
}
- let devFragmentID = 0
-
const processFragment = (
n1: HostVNode | null,
n2: HostVNode,
isSVG: boolean,
optimized: boolean
) => {
- const showID = __DEV__ && !__TEST__
- const fragmentStartAnchor = (n2.el = n1
- ? n1.el
- : hostCreateComment(showID ? `fragment-${devFragmentID}-start` : ''))!
- const fragmentEndAnchor = (n2.anchor = n1
- ? n1.anchor
- : hostCreateComment(showID ? `fragment-${devFragmentID}-end` : ''))!
+ const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''))!
+ const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText(''))!
let { patchFlag, dynamicChildren } = n2
if (patchFlag > 0) {
}
if (n1 == null) {
- if (showID) {
- devFragmentID++
- }
hostInsert(fragmentStartAnchor, container, anchor)
hostInsert(fragmentEndAnchor, container, anchor)
// a fragment can only have array children
pc: patchChildren,
pbc: patchBlockChildren,
n: getNextHostNode,
- c: processCommentNode,
o: options
}
)
).toBe(
`<div>parent<div class="child">` +
- `<!----><span>from slot</span><!---->` +
+ `<span>from slot</span>` +
`</div></div>`
)
}
})
)
- ).toBe(`<div>parent<div class="child"><!---->fallback<!----></div></div>`)
+ ).toBe(`<div>parent<div class="child">fallback</div></div>`)
})
test('nested components with vnode slots', async () => {
)
).toBe(
`<div>parent<div class="child">` +
- `<!----><span>from slot</span><!---->` +
+ `<span>from slot</span>` +
`</div></div>`
)
})
expect(await renderToString(app)).toBe(
`<div>parent<div class="child">` +
- `<!----><span>from slot</span><!---->` +
+ `<span>from slot</span>` +
`</div></div>`
)
})
createCommentVNode('qux')
])
)
- ).toBe(
- `<div>foo<span>bar</span><!----><span>baz</span><!----><!--qux--></div>`
- )
+ ).toBe(`<div>foo<span>bar</span><span>baz</span><!--qux--></div>`)
})
test('void elements', async () => {
parentComponent: ComponentInternalInstance
) {
const slotFn = slots[slotName]
- // template-compiled slots are always rendered as fragments
- push(`<!---->`)
if (slotFn) {
if (slotFn.length > 1) {
// only ssr-optimized slot fns accept more than 1 arguments
} else if (fallbackRenderFn) {
fallbackRenderFn()
}
- push(`<!---->`)
}
push(children ? `<!--${children}-->` : `<!---->`)
break
case Fragment:
- push(`<!---->`)
renderVNodeChildren(push, children as VNodeArrayChildren, parentComponent)
- push(`<!---->`)
break
default:
if (shapeFlag & ShapeFlags.ELEMENT) {
projects / thirdparty / vuejs / core.git / commitdiff
