}"
`;
-exports[`compiler: v-skip > transform > on component 1`] = `
+exports[`compiler: v-skip > transform > on Teleport 1`] = `
"const _Vue = Vue
return function render(_ctx, _cache) {
with (_ctx) {
- const { resolveComponent: _resolveComponent, resolveSkipComponent: _resolveSkipComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+ const { withCtx: _withCtx, createCommentVNode: _createCommentVNode, Teleport: _Teleport, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+
+ return (_ctx.ok)
+ ? _createCommentVNode("v-skip", true)
+ : (_openBlock(), _createBlock(_Teleport, {
+ key: 1,
+ to: "target"
+ }))
+ }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component with default slot 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+ with (_ctx) {
+ const { withCtx: _withCtx, resolveComponent: _resolveComponent, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createBlock: _createBlock } = _Vue
+
+ const _component_Comp = _resolveComponent("Comp")
+
+ return (_ctx.ok)
+ ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, ["foo"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+ : (_openBlock(), _createBlock(_component_Comp, { key: 1 }, {
+ default: _withCtx(() => ["foo"]),
+ _: 1 /* STABLE */
+ }))
+ }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component with dynamic slot + default slot 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+ with (_ctx) {
+ const { withCtx: _withCtx, resolveComponent: _resolveComponent, resolveSkipComponent: _resolveSkipComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+
+ const _component_Comp = _resolveComponent("Comp")
+
+ return (_openBlock(), _createBlock(_resolveSkipComponent(_ctx.ok, _component_Comp), null, {
+ [_ctx.foo]: _withCtx(() => ["foo"]),
+ default: _withCtx(() => ["default"]),
+ _: 2 /* DYNAMIC */
+ }, 1024 /* DYNAMIC_SLOTS */))
+ }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component with dynamic slot 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+ with (_ctx) {
+ const { withCtx: _withCtx, resolveComponent: _resolveComponent, resolveSkipComponent: _resolveSkipComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+
+ const _component_Comp = _resolveComponent("Comp")
+
+ return (_openBlock(), _createBlock(_resolveSkipComponent(_ctx.ok, _component_Comp), null, {
+ [_ctx.foo]: _withCtx(() => ["foo"]),
+ _: 2 /* DYNAMIC */
+ }, 1024 /* DYNAMIC_SLOTS */))
+ }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component with implicit default slot + v-if 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+ with (_ctx) {
+ const { withCtx: _withCtx, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, Fragment: _Fragment, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent("Comp")
- return (_openBlock(), _createBlock(_resolveSkipComponent(_ctx.ok, _component_Comp)))
+ return (_ctx.ok)
+ ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
+ (_ctx.yes)
+ ? (_openBlock(), _createElementBlock("span", { key: 0 }, "default"))
+ : _createCommentVNode("v-if", true)
+ ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+ : (_openBlock(), _createBlock(_component_Comp, { key: 1 }, {
+ default: _withCtx(() => [
+ (_ctx.yes)
+ ? (_openBlock(), _createElementBlock("span", { key: 0 }, "default"))
+ : _createCommentVNode("v-if", true)
+ ]),
+ _: 1 /* STABLE */
+ }))
+ }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component with multiple implicit slot 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+ with (_ctx) {
+ const { withCtx: _withCtx, createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createBlock: _createBlock } = _Vue
+
+ const _component_Comp = _resolveComponent("Comp")
+
+ return (_ctx.ok)
+ ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
+ _createElementVNode("span"),
+ _createElementVNode("div")
+ ], 64 /* STABLE_FRAGMENT */))
+ : (_openBlock(), _createBlock(_component_Comp, { key: 1 }, {
+ foo: _withCtx(() => ["foo"]),
+ default: _withCtx(() => [
+ _createElementVNode("span"),
+ _createElementVNode("div")
+ ]),
+ _: 1 /* STABLE */
+ }))
+ }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component with multiple named slot 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+ with (_ctx) {
+ const { withCtx: _withCtx, resolveComponent: _resolveComponent, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createBlock: _createBlock } = _Vue
+
+ const _component_Comp = _resolveComponent("Comp")
+
+ return (_ctx.ok)
+ ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, ["default"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+ : (_openBlock(), _createBlock(_component_Comp, { key: 1 }, {
+ default: _withCtx(() => ["default"]),
+ foo: _withCtx(() => ["foo"]),
+ _: 1 /* STABLE */
+ }))
+ }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component with name default slot + v-if 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+ with (_ctx) {
+ const { withCtx: _withCtx, createSlots: _createSlots, resolveComponent: _resolveComponent, resolveSkipComponent: _resolveSkipComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+
+ const _component_Comp = _resolveComponent("Comp")
+
+ return (_openBlock(), _createBlock(_resolveSkipComponent(_ctx.ok, _component_Comp), null, _createSlots({ _: 2 /* DYNAMIC */ }, [
+ (_ctx.yes)
+ ? {
+ name: "default",
+ fn: _withCtx(() => ["default"]),
+ key: "0"
+ }
+ : undefined
+ ]), 1024 /* DYNAMIC_SLOTS */))
+ }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component without slot 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+ with (_ctx) {
+ const { withCtx: _withCtx, createCommentVNode: _createCommentVNode, resolveComponent: _resolveComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+
+ const _component_Comp = _resolveComponent("Comp")
+
+ return (_ctx.ok)
+ ? _createCommentVNode("v-skip", true)
+ : (_openBlock(), _createBlock(_component_Comp, { key: 1 }))
+ }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on dynamic component with default slot 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+ with (_ctx) {
+ const { withCtx: _withCtx, resolveDynamicComponent: _resolveDynamicComponent, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createElementBlock: _createElementBlock } = _Vue
+
+ return (_ctx.ok)
+ ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, ["foo"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+ : (_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.Comp), { key: 1 }, {
+ default: _withCtx(() => ["foo"]),
+ _: 1 /* STABLE */
+ }))
}
}"
`;
-exports[`compiler: v-skip > transform > on dynamic component 1`] = `
+exports[`compiler: v-skip > transform > on dynamic component with dynamic slot 1`] = `
"const _Vue = Vue
return function render(_ctx, _cache) {
with (_ctx) {
- const { renderSlot: _renderSlot, resolveDynamicComponent: _resolveDynamicComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock, resolveSkipComponent: _resolveSkipComponent } = _Vue
+ const { withCtx: _withCtx, resolveDynamicComponent: _resolveDynamicComponent, openBlock: _openBlock, createBlock: _createBlock, resolveSkipComponent: _resolveSkipComponent } = _Vue
return (_openBlock(), _createBlock(_resolveSkipComponent(_ctx.ok, _resolveDynamicComponent(_ctx.Comp)), null, {
- default: _withCtx(() => [
- _renderSlot(_ctx.$slots, "default")
- ]),
- _: 3 /* FORWARDED */
- }))
+ [_ctx.foo]: _withCtx(() => ["foo"]),
+ _: 2 /* DYNAMIC */
+ }, 1024 /* DYNAMIC_SLOTS */))
}
}"
`;
expect(generate(root).code).toMatchSnapshot()
})
- test('on component', () => {
+ test('on component without slot', () => {
+ // equivalent to <Comp v-if="ok"/>
const { root, node } = parseWithSkipTransform(`<Comp v-skip="ok"/>`) as {
root: RootNode
- node: ComponentNode
+ node: SkipNode
}
- expect(node.type).toBe(NodeTypes.ELEMENT)
- expect(node.tagType).toBe(ElementTypes.COMPONENT)
- const codegenNode = node.codegenNode! as VNodeCall
- expect(codegenNode.type).toBe(NodeTypes.VNODE_CALL)
- const vnodeTag = codegenNode.tag as CallExpression
- expect(vnodeTag.type).toBe(NodeTypes.JS_CALL_EXPRESSION)
- expect(vnodeTag.callee).toBe(RESOLVE_SKIP_COMPONENT)
- expect((vnodeTag.arguments[0] as SimpleExpressionNode).content).toBe(
- `_ctx.ok`,
- )
+ expect(node.type).toBe(NodeTypes.SKIP)
+ expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+ expect(node.consequent.type === NodeTypes.JS_CALL_EXPRESSION).toBe(true)
+ expect(node.alternate.children.length).toBe(1)
+ expect(node.alternate.children[0].type).toBe(NodeTypes.ELEMENT)
+ expect((node.alternate.children[0] as ElementNode).tag).toBe(`Comp`)
expect(generate(root).code).toMatchSnapshot()
})
- test.todo('on component with default slot', () => {
+ test('on component with default slot', () => {
const { root, node } = parseWithSkipTransform(
`<Comp v-skip="ok">foo</Comp>`,
- )
+ ) as { root: RootNode; node: SkipNode }
expect(node.type).toBe(NodeTypes.SKIP)
expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
expect((node.consequent as IfBranchNode).children.length).toBe(1)
expect(generate(root).code).toMatchSnapshot()
})
- test.todo('on component with multiple named slot', () => {
+ test('on component with multiple named slot', () => {
const { root, node } = parseWithSkipTransform(
`<Comp v-skip="ok">
<template #default>default</template>
<template #foo>foo</template>
</Comp>`,
- )
+ ) as { root: RootNode; node: SkipNode }
expect(node.type).toBe(NodeTypes.SKIP)
expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
expect((node.consequent as IfBranchNode).children.length).toBe(1)
expect(generate(root).code).toMatchSnapshot()
})
- test.todo('on component with multiple implicit slot', () => {
+ test('on component with multiple implicit slot', () => {
const { root, node } = parseWithSkipTransform(
`<Comp v-skip="ok">
<span/>
<template #foo>foo</template>
<div/>
</Comp>`,
- )
+ ) as { root: RootNode; node: SkipNode }
expect(node.type).toBe(NodeTypes.SKIP)
expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
expect((node.consequent as IfBranchNode).children.length).toBe(2)
expect(generate(root).code).toMatchSnapshot()
})
- test.todo('on component with dynamic slot + default slot', () => {
+ test('on component with name default slot + v-if', () => {
const { root, node } = parseWithSkipTransform(
`<Comp v-skip="ok">
- <template #[foo]>foo</template>
- <template #default>default</template>
+ <template v-if="yes" #default>default</template>
</Comp>`,
+ ) as { root: RootNode; node: ComponentNode }
+ expect(node.type).toBe(NodeTypes.ELEMENT)
+ expect(node.tagType).toBe(ElementTypes.COMPONENT)
+ const codegenNode = node.codegenNode! as VNodeCall
+ expect(codegenNode.type).toBe(NodeTypes.VNODE_CALL)
+ const vnodeTag = codegenNode.tag as CallExpression
+ expect(vnodeTag.type).toBe(NodeTypes.JS_CALL_EXPRESSION)
+ expect(vnodeTag.callee).toBe(RESOLVE_SKIP_COMPONENT)
+ expect((vnodeTag.arguments[0] as SimpleExpressionNode).content).toBe(
+ `_ctx.ok`,
)
+ expect(generate(root).code).toMatchSnapshot()
+ })
+
+ test('on component with implicit default slot + v-if', () => {
+ const { root, node } = parseWithSkipTransform(
+ `<Comp v-skip="ok">
+ <span v-if="yes">default</span>
+ </Comp>`,
+ ) as { root: RootNode; node: SkipNode }
expect(node.type).toBe(NodeTypes.SKIP)
expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
- expect((node.consequent as IfBranchNode).children.length).toBe(1)
- expect((node.consequent as IfBranchNode).children[0].type).toBe(
- NodeTypes.TEXT,
- )
- expect(
- ((node.consequent as IfBranchNode).children[0] as any).content,
- ).toBe(`default`)
- expect(node.alternate.children.length).toBe(1)
- expect((node.alternate.children[0] as ElementNode).tagType).toBe(
- ElementTypes.COMPONENT,
- )
- expect((node.alternate.children[0] as ElementNode).tag).toBe(`Comp`)
expect(generate(root).code).toMatchSnapshot()
})
- test.todo('on component with name default slot + v-if', () => {
+ test('on component with dynamic slot', () => {
const { root, node } = parseWithSkipTransform(
`<Comp v-skip="ok">
- <template v-if="yes" #default>default</template>
+ <template #[foo]>foo</template>
</Comp>`,
+ ) as { root: RootNode; node: ComponentNode }
+ expect(node.type).toBe(NodeTypes.ELEMENT)
+ expect(node.tagType).toBe(ElementTypes.COMPONENT)
+ const codegenNode = node.codegenNode! as VNodeCall
+ expect(codegenNode.type).toBe(NodeTypes.VNODE_CALL)
+ const vnodeTag = codegenNode.tag as CallExpression
+ expect(vnodeTag.type).toBe(NodeTypes.JS_CALL_EXPRESSION)
+ expect(vnodeTag.callee).toBe(RESOLVE_SKIP_COMPONENT)
+ expect((vnodeTag.arguments[0] as SimpleExpressionNode).content).toBe(
+ `_ctx.ok`,
)
- expect(node.type).toBe(NodeTypes.SKIP)
- expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
- expect(node.consequent.type === NodeTypes.JS_CALL_EXPRESSION).toBe(true)
expect(generate(root).code).toMatchSnapshot()
})
- test.todo('on component with implicit default slot + v-if', () => {
+ test('on component with dynamic slot + default slot', () => {
const { root, node } = parseWithSkipTransform(
`<Comp v-skip="ok">
- <span v-if="yes">default</span>
+ <template #[foo]>foo</template>
+ <template #default>default</template>
</Comp>`,
+ ) as { root: RootNode; node: ComponentNode }
+ expect(node.type).toBe(NodeTypes.ELEMENT)
+ expect(node.tagType).toBe(ElementTypes.COMPONENT)
+ const codegenNode = node.codegenNode! as VNodeCall
+ expect(codegenNode.type).toBe(NodeTypes.VNODE_CALL)
+ const vnodeTag = codegenNode.tag as CallExpression
+ expect(vnodeTag.type).toBe(NodeTypes.JS_CALL_EXPRESSION)
+ expect(vnodeTag.callee).toBe(RESOLVE_SKIP_COMPONENT)
+ expect((vnodeTag.arguments[0] as SimpleExpressionNode).content).toBe(
+ `_ctx.ok`,
)
+ expect(generate(root).code).toMatchSnapshot()
+ })
+
+ test('on dynamic component with default slot', () => {
+ const { root, node } = parseWithSkipTransform(
+ `<component :is="Comp" v-skip="ok">foo</component>`,
+ ) as { root: RootNode; node: SkipNode }
expect(node.type).toBe(NodeTypes.SKIP)
expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+ expect((node.consequent as IfBranchNode).children.length).toBe(1)
+ expect((node.consequent as IfBranchNode).children[0].type).toBe(
+ NodeTypes.TEXT,
+ )
+ expect(
+ ((node.consequent as IfBranchNode).children[0] as any).content,
+ ).toBe(`foo`)
+ expect(node.alternate.children.length).toBe(1)
+ expect(node.alternate.children[0].type).toBe(NodeTypes.ELEMENT)
+ expect((node.alternate.children[0] as ElementNode).tag).toBe(`component`)
expect(generate(root).code).toMatchSnapshot()
})
- test('on dynamic component', () => {
+ test('on dynamic component with dynamic slot', () => {
const { root, node } = parseWithSkipTransform(
`<component :is="Comp" v-skip="ok">
- <slot/>
+ <template #[foo]>foo</template>
</component>`,
) as { root: RootNode; node: ComponentNode }
expect(node.type).toBe(NodeTypes.ELEMENT)
expect(generate(root).code).toMatchSnapshot()
})
- test.todo('on Teleport', () => {})
-
- test.todo('built-in components', () => {})
+ test('on Teleport', () => {
+ const { root, node } = parseWithSkipTransform(
+ `<teleport to="target" v-skip="ok"/>`,
+ ) as { root: RootNode; node: SkipNode }
+ expect(node.type).toBe(NodeTypes.SKIP)
+ expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+ expect(node.consequent.type === NodeTypes.JS_CALL_EXPRESSION).toBe(true)
+ expect(node.alternate.children.length).toBe(1)
+ expect(node.alternate.children[0].type).toBe(NodeTypes.ELEMENT)
+ expect((node.alternate.children[0] as ElementNode).tag).toBe(`teleport`)
+ expect(generate(root).code).toMatchSnapshot()
+ })
})
describe('errors', () => {
])
})
+ test('on <template>', () => {
+ const onError = vi.fn()
+ parseWithSkipTransform(`<template v-skip="ok"/>`, { onError })
+ expect(onError.mock.calls[0]).toMatchObject([
+ {
+ code: ErrorCodes.X_V_SKIP_MISPLACED,
+ },
+ ])
+ })
+
test('on <slot>', () => {
const onError = vi.fn()
parseWithSkipTransform(`<slot v-skip="ok"/>`, { onError })
expect(onError.mock.calls[0]).toMatchObject([
{
- code: ErrorCodes.X_V_SKIP_ON_TEMPLATE,
+ code: ErrorCodes.X_V_SKIP_MISPLACED,
},
])
})
- test('on <template>', () => {
+ test('on component without default slot', () => {
const onError = vi.fn()
- parseWithSkipTransform(`<template v-skip="ok"/>`, { onError })
+ parseWithSkipTransform(
+ `<Comp v-skip="ok"><template #foo>foo</template></Comp>`,
+ { onError },
+ )
expect(onError.mock.calls[0]).toMatchObject([
{
- code: ErrorCodes.X_V_SKIP_ON_TEMPLATE,
+ code: ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT,
},
])
})
X_INVALID_EXPRESSION,
X_KEEP_ALIVE_INVALID_CHILDREN,
X_V_SKIP_NO_EXPRESSION,
- X_V_SKIP_ON_TEMPLATE,
+ X_V_SKIP_MISPLACED,
X_V_SKIP_UNEXPECTED_SLOT,
X_V_SKIP_WITH_V_FOR,
[ErrorCodes.X_KEEP_ALIVE_INVALID_CHILDREN]: `<KeepAlive> expects exactly one child component.`,
[ErrorCodes.X_VNODE_HOOKS]: `@vnode-* hooks in templates are no longer supported. Use the vue: prefix instead. For example, @vnode-mounted should be changed to @vue:mounted. @vnode-* hooks support has been removed in 3.4.`,
[ErrorCodes.X_V_SKIP_NO_EXPRESSION]: `v-skip is missing expression.`,
- [ErrorCodes.X_V_SKIP_ON_TEMPLATE]: `v-skip cannot be used on <template> or <slot> tags.`,
+ [ErrorCodes.X_V_SKIP_MISPLACED]: `v-skip can only be used on elements or components.`,
[ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT]: `v-skip requires the component to have a default slot without slot props`,
[ErrorCodes.X_V_SKIP_WITH_V_FOR]: `v-skip with v-for is not supported.`,
NodeTypes,
type SimpleExpressionNode,
type SkipNode,
+ type TemplateChildNode,
type VNodeCall,
createCallExpression,
createConditionalExpression,
ErrorCodes,
RESOLVE_SKIP_COMPONENT,
WITH_MEMO,
+ buildSlots,
createCompilerError,
findDir,
findProp,
- isSlotOutlet,
processExpression,
} from '@vue/compiler-core'
import { createCodegenNodeForBranch } from './vIf'
return processSkip(node, dir, context, (skipNode?: SkipNode) => {
return () => {
const codegenNode = node.codegenNode!
- if (
- node.tagType === ElementTypes.COMPONENT &&
- node.tag !== 'Teleport'
- ) {
+ if (!skipNode) {
if (codegenNode.type === NodeTypes.VNODE_CALL) {
codegenNode.tag = getVNodeTag(
context,
): (() => void) | undefined {
const loc = dir.exp ? dir.exp.loc : node.loc
if (
- (node.type === NodeTypes.ELEMENT && node.tag === 'template') ||
- isSlotOutlet(node)
+ // v-skip is not allowed on <template> or <slot>
+ !(
+ node.type === NodeTypes.ELEMENT &&
+ (node.tagType === ElementTypes.ELEMENT ||
+ node.tagType === ElementTypes.COMPONENT) &&
+ node.tag !== 'template' &&
+ node.tag !== 'slot'
+ )
) {
- context.onError(createCompilerError(ErrorCodes.X_V_SKIP_ON_TEMPLATE, loc))
+ context.onError(createCompilerError(ErrorCodes.X_V_SKIP_MISPLACED, loc))
return
}
if (findDir(node, 'for')) {
context.onError(createCompilerError(ErrorCodes.X_V_SKIP_WITH_V_FOR, loc))
+ return
}
if (!dir.exp || !(dir.exp as SimpleExpressionNode).content.trim()) {
validateBrowserExpression(dir.exp as SimpleExpressionNode, context)
}
- let skipNode: SkipNode | undefined
+ // element will be processed as a skip node
+ // - native element
+ // - teleport, since it has children
+ // - component without dynamic slots
+ let processAsSkipNode = false
+ const isComponent = node.tagType === ElementTypes.COMPONENT
+ let children: TemplateChildNode[] = []
if (
node.tagType === ElementTypes.ELEMENT ||
- (node.tagType === ElementTypes.COMPONENT && node.tag === 'Teleport')
+ (isComponent && node.tag === 'Teleport')
) {
- const children = node.children
+ processAsSkipNode = true
+ children = node.children
+ } else if (isComponent) {
+ const { slots, hasDynamicSlots } = buildSlots(
+ node,
+ context,
+ undefined,
+ true,
+ )
+ // find default slot if not has dynamic slots
+ if (!hasDynamicSlots && slots.type === NodeTypes.JS_OBJECT_EXPRESSION) {
+ processAsSkipNode = true
+ const prop = slots.properties.find(
+ p =>
+ p.type === NodeTypes.JS_PROPERTY &&
+ p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
+ p.key.content === 'default' &&
+ p.value.params === undefined,
+ )
+ if (prop) {
+ children = prop.value.returns as TemplateChildNode[]
+ } else {
+ context.onError(
+ createCompilerError(ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT, loc),
+ )
+ }
+ }
+ }
+
+ let skipNode: SkipNode | undefined
+ if (processAsSkipNode) {
// if children is empty, create comment node
const consequent =
children.length !== 0
test('on component', () => {
expect(compile(`<Comp v-skip="foo"/>`).code).toMatchInlineSnapshot(`
- "const { resolveComponent: _resolveComponent } = require("vue")
+ "const { withCtx: _withCtx, createCommentVNode: _createCommentVNode, resolveComponent: _resolveComponent } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_Comp = _resolveComponent("Comp")
- _push(_ssrRenderSkipComponent(_push, _ctx.foo, _component_Comp, _attrs, null, _parent))
+ if (_ctx.foo) {
+ _createCommentVNode("v-skip", true)
+ } else {
+ _push(_ssrRenderSkipComponent(_push, _ctx.foo, _component_Comp, _attrs, null, _parent))
+ }
}"
`)
})
</component>`,
).code,
).toMatchInlineSnapshot(`
- "const { resolveDynamicComponent: _resolveDynamicComponent, withCtx: _withCtx, renderSlot: _renderSlot, createVNode: _createVNode } = require("vue")
+ "const { withCtx: _withCtx, resolveDynamicComponent: _resolveDynamicComponent, renderSlot: _renderSlot, createVNode: _createVNode } = require("vue")
const { ssrRenderSlot: _ssrRenderSlot, ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
- _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.Comp), _attrs, {
- default: _withCtx((_, _push, _parent, _scopeId) => {
- if (_push) {
- _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId)
- } else {
- return [
- _renderSlot(_ctx.$slots, "default")
- ]
- }
- }),
- _: 3 /* FORWARDED */
- }), _parent)
+ if (_ctx.ok) {
+ _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId)
+ } else {
+ _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.Comp), _attrs, {
+ default: _withCtx((_, _push, _parent, _scopeId) => {
+ if (_push) {
+ _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId)
+ } else {
+ return [
+ _renderSlot(_ctx.$slots, "default")
+ ]
+ }
+ }),
+ _: 3 /* FORWARDED */
+ }), _parent)
+ }
}"
`)
})
<Comp v-skip="ok"><span/></Comp>
`).code,
).toMatchInlineSnapshot(`
- "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode } = require("vue")
+ "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createVNode: _createVNode } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_Comp = _resolveComponent("Comp")
_push(\`<!--[--><div></div>\`)
- _push(_ssrRenderSkipComponent(_push, _ctx.ok, _component_Comp, null, {
- default: _withCtx((_, _push, _parent, _scopeId) => {
- if (_push) {
- _push(\`<span\${_scopeId}></span>\`)
- } else {
- return [
- _createVNode("span")
- ]
- }
- }),
- _: 1 /* STABLE */
- }, _parent))
+ if (_ctx.ok) {
+ _push(\`<span></span>\`)
+ } else {
+ _push(_ssrRenderSkipComponent(_push, _ctx.ok, _component_Comp, null, {
+ default: _withCtx((_, _push, _parent, _scopeId) => {
+ if (_push) {
+ _push(\`<span\${_scopeId}></span>\`)
+ } else {
+ return [
+ _createVNode("span")
+ ]
+ }
+ }),
+ _: 1 /* STABLE */
+ }, _parent))
+ }
_push(\`<!--]-->\`)
}"
`)
projects / thirdparty / vuejs / core.git / commitdiff
