// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: transition > basic 1`] = `
-"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, createComponent as _createComponent, template as _template } from 'vue';
+"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
const t0 = _template("<h1>foo</h1>")
export function render(_ctx) {
const n1 = _createComponent(_VaporTransition, { persisted: () => ("") }, {
- "default": () => {
+ "default": _withVaporCtx(() => {
const n0 = t0()
_applyVShow(n0, () => (_ctx.show))
return n0
- }
+ })
}, true)
return n1
}"
`;
exports[`compiler: transition > inject persisted when child has v-show 1`] = `
-"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, createComponent as _createComponent, template as _template } from 'vue';
+"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n1 = _createComponent(_VaporTransition, { persisted: () => ("") }, {
- "default": () => {
+ "default": _withVaporCtx(() => {
const n0 = t0()
_applyVShow(n0, () => (_ctx.ok))
return n0
- }
+ })
}, true)
return n1
}"
`;
exports[`compiler: transition > the v-if/else-if/else branches in Transition should ignore comments 1`] = `
-"import { VaporTransition as _VaporTransition, setInsertionState as _setInsertionState, createIf as _createIf, createComponent as _createComponent, template as _template } from 'vue';
+"import { VaporTransition as _VaporTransition, setInsertionState as _setInsertionState, createIf as _createIf, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
const t0 = _template("<div>hey</div>")
const t1 = _template("<p></p>")
const t2 = _template("<div></div>")
export function render(_ctx) {
const n16 = _createComponent(_VaporTransition, null, {
- "default": () => {
+ "default": _withVaporCtx(() => {
const n0 = _createIf(() => (_ctx.a), () => {
const n2 = t0()
n2.$key = 2
return n14
}))
return [n0, n3, n7]
- }
+ })
}, true)
return n16
}"
`;
exports[`compiler: transition > v-show + appear 1`] = `
-"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, createComponent as _createComponent, template as _template } from 'vue';
+"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
const t0 = _template("<h1>foo</h1>")
export function render(_ctx) {
appear: () => (""),
persisted: () => ("")
}, {
- "default": () => {
+ "default": _withVaporCtx(() => {
const n0 = t0()
deferredApplyVShows.push(() => _applyVShow(n0, () => (_ctx.show)))
return n0
- }
+ })
}, true)
deferredApplyVShows.forEach(fn => fn())
return n1
`;
exports[`compiler: transition > work with dynamic keyed children 1`] = `
-"import { VaporTransition as _VaporTransition, createKeyedFragment as _createKeyedFragment, createComponent as _createComponent, template as _template } from 'vue';
+"import { VaporTransition as _VaporTransition, createKeyedFragment as _createKeyedFragment, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
const t0 = _template("<h1>foo</h1>")
export function render(_ctx) {
const n1 = _createComponent(_VaporTransition, null, {
- "default": () => {
+ "default": _withVaporCtx(() => {
return _createKeyedFragment(() => _ctx.key, () => {
const n0 = t0()
n0.$key = _ctx.key
return n0
})
- }
+ })
}, true)
return n1
}"
`;
exports[`compiler: transition > work with v-if 1`] = `
-"import { VaporTransition as _VaporTransition, createIf as _createIf, createComponent as _createComponent, template as _template } from 'vue';
+"import { VaporTransition as _VaporTransition, createIf as _createIf, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
const t0 = _template("<h1>foo</h1>")
export function render(_ctx) {
const n3 = _createComponent(_VaporTransition, null, {
- "default": () => {
+ "default": _withVaporCtx(() => {
const n0 = _createIf(() => (_ctx.show), () => {
const n2 = t0()
n2.$key = 2
return n2
})
return n0
- }
+ })
}, true)
return n3
}"
`;
exports[`compiler: transform slot > forwarded slots > <slot w/ nested component> 1`] = `
-"import { forwardedSlotCreator as _forwardedSlotCreator, resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+"import { resolveComponent as _resolveComponent, createSlot as _createSlot, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
export function render(_ctx) {
- const _createForwardedSlot = _forwardedSlotCreator()
const _component_Comp = _resolveComponent("Comp")
const n2 = _createComponentWithFallback(_component_Comp, null, {
"default": _withVaporCtx(() => {
const n1 = _createComponentWithFallback(_component_Comp, null, {
"default": _withVaporCtx(() => {
- const n0 = _createForwardedSlot("default", null)
+ const n0 = _createSlot("default", null)
return n0
})
})
`;
exports[`compiler: transform slot > forwarded slots > <slot> tag only 1`] = `
-"import { forwardedSlotCreator as _forwardedSlotCreator, resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+"import { resolveComponent as _resolveComponent, createSlot as _createSlot, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
export function render(_ctx) {
- const _createForwardedSlot = _forwardedSlotCreator()
const _component_Comp = _resolveComponent("Comp")
const n1 = _createComponentWithFallback(_component_Comp, null, {
"default": _withVaporCtx(() => {
- const n0 = _createForwardedSlot("default", null)
+ const n0 = _createSlot("default", null)
return n0
})
}, true)
`;
exports[`compiler: transform slot > forwarded slots > <slot> tag w/ template 1`] = `
-"import { forwardedSlotCreator as _forwardedSlotCreator, resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+"import { resolveComponent as _resolveComponent, createSlot as _createSlot, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
export function render(_ctx) {
- const _createForwardedSlot = _forwardedSlotCreator()
const _component_Comp = _resolveComponent("Comp")
const n2 = _createComponentWithFallback(_component_Comp, null, {
"default": _withVaporCtx(() => {
- const n0 = _createForwardedSlot("default", null)
+ const n0 = _createSlot("default", null)
return n0
})
}, true)
`;
exports[`compiler: transform slot > forwarded slots > <slot> tag w/ v-for 1`] = `
-"import { forwardedSlotCreator as _forwardedSlotCreator, resolveComponent as _resolveComponent, createFor as _createFor, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+"import { resolveComponent as _resolveComponent, createSlot as _createSlot, createFor as _createFor, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
export function render(_ctx) {
- const _createForwardedSlot = _forwardedSlotCreator()
const _component_Comp = _resolveComponent("Comp")
const n3 = _createComponentWithFallback(_component_Comp, null, {
"default": _withVaporCtx(() => {
const n0 = _createFor(() => (_ctx.b), (_for_item0) => {
- const n2 = _createForwardedSlot("default", null)
+ const n2 = _createSlot("default", null)
return n2
})
return n0
`;
exports[`compiler: transform slot > forwarded slots > <slot> tag w/ v-if 1`] = `
-"import { forwardedSlotCreator as _forwardedSlotCreator, resolveComponent as _resolveComponent, createIf as _createIf, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+"import { resolveComponent as _resolveComponent, createSlot as _createSlot, createIf as _createIf, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
export function render(_ctx) {
- const _createForwardedSlot = _forwardedSlotCreator()
const _component_Comp = _resolveComponent("Comp")
const n3 = _createComponentWithFallback(_component_Comp, null, {
"default": _withVaporCtx(() => {
const n0 = _createIf(() => (_ctx.ok), () => {
- const n2 = _createForwardedSlot("default", null)
+ const n2 = _createSlot("default", null)
return n2
})
return n0
genCall,
} from './generators/utils'
import { setTemplateRefIdent } from './generators/templateRef'
-import { createForwardedSlotIdent } from './generators/slotOutlet'
export type CodegenOptions = Omit<BaseCodegenOptions, 'optimizeImports'>
`const ${setTemplateRefIdent} = ${context.helper('createTemplateRefSetter')}()`,
)
}
- if (ir.hasForwardedSlot) {
- push(
- NEWLINE,
- `const ${createForwardedSlotIdent} = ${context.helper('forwardedSlotCreator')}()`,
- )
- }
push(...genBlockContent(ir.block, context, true))
push(INDENT_END, NEWLINE)
import { genDirectiveModifiers, genDirectivesForElement } from './directive'
import { genBlock } from './block'
import { genModelHandler } from './vModel'
-import { isBuiltInComponent } from '../utils'
+import { isBuiltInComponent, isTransitionTag } from '../utils'
export function genCreateComponent(
operation: CreateComponentIRNode,
let depth: number | undefined
const { props, key, node } = oper
const idsOfProps = new Set<string>()
-
if (props) {
rawProps = props.content
if ((isDestructureAssignment = !!props.ast)) {
]
}
- if (node.type === NodeTypes.ELEMENT && !isBuiltInComponent(node.tag)) {
+ if (
+ node.type === NodeTypes.ELEMENT &&
+ (!isBuiltInComponent(node.tag) || isTransitionTag(node.tag))
+ ) {
// wrap with withVaporCtx to ensure correct currentInstance inside slot
blockFn = [`${context.helper('withVaporCtx')}(`, ...blockFn, `)`]
}
import { type CodeFragment, NEWLINE, buildCodeFragment, genCall } from './utils'
import { genRawProps } from './component'
-export const createForwardedSlotIdent = `_createForwardedSlot`
-
export function genSlotOutlet(
oper: SlotOutletIRNode,
context: CodegenContext,
): CodeFragment[] {
const { helper } = context
- const { id, name, fallback, forwarded, noSlotted } = oper
+ const { id, name, fallback, noSlotted } = oper
const [frag, push] = buildCodeFragment()
const nameExpr = name.isStatic
NEWLINE,
`const n${id} = `,
...genCall(
- forwarded ? createForwardedSlotIdent : helper('createSlot'),
+ helper('createSlot'),
nameExpr,
genRawProps(oper.props, context) || 'null',
fallbackArg,
directive: Set<string>
block: BlockIRNode
hasTemplateRef: boolean
- hasForwardedSlot: boolean
}
export interface IfIRNode extends BaseIRNode {
name: SimpleExpressionNode
props: IRProps[]
fallback?: BlockIRNode
- forwarded?: boolean
noSlotted?: boolean
parent?: number
anchor?: number
inVOnce: boolean = false
inVFor: number = 0
- inSlot: boolean = false
-
comment: CommentNode[] = []
component: Set<string> = this.ir.component
directive: Set<string> = this.ir.directive
directive: new Set(),
block: newBlock(node),
hasTemplateRef: false,
- hasForwardedSlot: false,
}
const context = new TransformContext(ir, node, options)
}
return () => {
- if (context.inSlot) context.ir.hasForwardedSlot = true
exitBlock && exitBlock()
context.dynamic.operation = {
type: IRNodeTypes.SLOT_OUTLET_NODE,
name: slotName,
props: irProps,
fallback,
- forwarded: context.inSlot,
noSlotted: !!(context.options.scopeId && !context.options.slotted),
}
}
block.dynamic.needsKey = true
}
const exitBlock = context.enterBlock(block)
- context.inSlot = true
- return [
- block,
- () => {
- context.inSlot = false
- exitBlock()
- },
- ]
+ return [block, exitBlock]
}
function isNonWhitespaceContent(node: TemplateChildNode): boolean {
createSlot,
createVaporApp,
defineVaporComponent,
- forwardedSlotCreator,
insert,
prepend,
renderEffect,
setInsertionState,
template,
vaporInteropPlugin,
+ withVaporCtx,
} from '../src'
import {
type Ref,
})
const Parent = defineVaporComponent({
setup() {
- const createForwardedSlot = forwardedSlotCreator()
const n2 = createComponent(
Child,
null,
{
- foo: () => {
- return createForwardedSlot('foo', null)
- },
+ foo: withVaporCtx(() => {
+ return createSlot('foo', null)
+ }),
},
true,
)
})
const Parent = defineVaporComponent({
setup() {
- const createForwardedSlot = forwardedSlotCreator()
const n2 = createComponent(Child, null, {
- foo: () => {
- const n0 = createForwardedSlot('foo', null)
+ foo: withVaporCtx(() => {
+ const n0 = createSlot('foo', null)
return n0
- },
+ }),
})
const n3 = createSlot('default', null)
return [n2, n3]
const Parent = defineVaporComponent({
setup() {
- const createForwardedSlot = forwardedSlotCreator()
const n2 = createComponent(Child, null, {
- default: () => {
- const n0 = createForwardedSlot('default', null, () => {
+ default: withVaporCtx(() => {
+ const n0 = createSlot('default', null, () => {
return template('<!-- <div></div> -->')()
})
return n0
- },
+ }),
})
return n2
},
const show = ref(false)
const Parent = defineVaporComponent({
setup() {
- const createForwardedSlot = forwardedSlotCreator()
const n2 = createComponent(Child, null, {
- default: () => {
- const n0 = createForwardedSlot('default', null, () => {
+ default: withVaporCtx(() => {
+ const n0 = createSlot('default', null, () => {
const n2 = createIf(
() => show.value,
() => {
return n2
})
return n0
- },
+ }),
})
return n2
},
const items = ref<number[]>([])
const Parent = defineVaporComponent({
setup() {
- const createForwardedSlot = forwardedSlotCreator()
const n2 = createComponent(Child, null, {
- default: () => {
- const n0 = createForwardedSlot('default', null, () => {
+ default: withVaporCtx(() => {
+ const n0 = createSlot('default', null, () => {
const n2 = createFor(
() => items.value,
for_item0 => {
return n2
})
return n0
- },
+ }),
})
return n2
},
) => {
return defineVaporComponent({
setup() {
- const createForwardedSlot = forwardedSlotCreator()
const n2 = createComponent(
targetComponent,
null,
{
- foo: () => {
+ foo: withVaporCtx(() => {
return fallbackText
- ? createForwardedSlot('foo', null, () => {
+ ? createSlot('foo', null, () => {
const n2 = template(`<div>${fallbackText}</div>`)()
return n2
})
- : createForwardedSlot('foo', null)
- },
+ : createSlot('foo', null)
+ }),
},
true,
)
createDynamicComponent,
createSlot,
defineVaporComponent,
- forwardedSlotCreator,
setInsertionState,
template,
vaporInteropPlugin,
const n0 = template('<div parent></div>')()
const n1 = createComponent(Child2)
return [n0, n1]
- }) as any,
+ }),
},
true,
)
// <div><slot/></div>
const n1 = template('<div wrapper></div>', true)() as any
setInsertionState(n1)
- createSlot('default', null, undefined, undefined, true /* noSlotted */)
+ createSlot('default', null, undefined, true /* noSlotted */)
return n1
},
})
__scopeId: 'slotted',
setup() {
// <Wrapper><slot/></Wrapper>
- const _createForwardedSlot = forwardedSlotCreator()
const n1 = createComponent(
Wrapper,
null,
{
default: withVaporCtx(() => {
- const n0 = _createForwardedSlot('default', null)
+ const n0 = createSlot('default', null)
return n0
- }) as any,
+ }),
},
true,
)
{
default: withVaporCtx(() => {
return template('<div root></div>')()
- }) as any,
+ }),
},
true,
)
const n0 = template('<div vapor-parent></div>')()
const n1 = createComponent(VdomChild)
return [n0, n1]
- }) as any,
+ }),
},
true,
)
}
}
-export function withVaporCtx(fn: Function): Function {
+export function withVaporCtx(fn: Function): BlockFn {
const instance = currentInstance as VaporComponentInstance
return (...args: any[]) => {
const prev = setCurrentInstance(instance)
}
}
-export function forwardedSlotCreator(): (
- name: string | (() => string),
- rawProps?: LooseRawProps | null,
- fallback?: VaporSlot,
-) => Block {
- const instance = currentInstance as VaporComponentInstance
- return (name, rawProps, fallback) =>
- createSlot(name, rawProps, fallback, instance, false /* noSlotted */)
-}
-
export function createSlot(
name: string | (() => string),
rawProps?: LooseRawProps | null,
fallback?: VaporSlot,
- i?: VaporComponentInstance,
noSlotted?: boolean,
): Block {
const _insertionParent = insertionParent
const _isLastInsertion = isLastInsertion
if (!isHydrating) resetInsertionState()
- const instance = i || (currentInstance as VaporComponentInstance)
+ const instance = currentInstance as VaporComponentInstance
const rawSlots = instance.rawSlots
const slotProps = rawProps
? new Proxy(rawProps, rawPropsProxyHandlers)
isVaporComponent,
} from './component'
export { renderEffect } from './renderEffect'
-export {
- createSlot,
- forwardedSlotCreator,
- withVaporCtx,
-} from './componentSlots'
+export { createSlot, withVaporCtx } from './componentSlots'
export { template } from './dom/template'
export { createTextNode, child, nthChild, next, txt } from './dom/node'
export {
projects / thirdparty / vuejs / core.git / commitdiff
