Skip to content

Commit 04af950

Browse files
committed
fix(compiler-core): fix v-bind shorthand for component :is
close #10469 close #10471
1 parent 969c5fb commit 04af950

File tree

2 files changed

+33
-5
lines changed

2 files changed

+33
-5
lines changed

packages/compiler-core/__tests__/transforms/transformElement.spec.ts

+18
Original file line numberDiff line numberDiff line change
@@ -1231,6 +1231,24 @@ describe('compiler: element transform', () => {
12311231
})
12321232
})
12331233

1234+
test('dynamic binding shorthand', () => {
1235+
const { node, root } = parseWithBind(`<component :is />`)
1236+
expect(root.helpers).toContain(RESOLVE_DYNAMIC_COMPONENT)
1237+
expect(node).toMatchObject({
1238+
isBlock: true,
1239+
tag: {
1240+
callee: RESOLVE_DYNAMIC_COMPONENT,
1241+
arguments: [
1242+
{
1243+
type: NodeTypes.SIMPLE_EXPRESSION,
1244+
content: 'is',
1245+
isStatic: false,
1246+
},
1247+
],
1248+
},
1249+
})
1250+
})
1251+
12341252
test('is casting', () => {
12351253
const { node, root } = parseWithBind(`<div is="vue:foo" />`)
12361254
expect(root.helpers).toContain(RESOLVE_COMPONENT)

packages/compiler-core/src/transforms/transformElement.ts

+15-5
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ import {
6464
checkCompatEnabled,
6565
isCompatEnabled,
6666
} from '../compat/compatConfig'
67+
import { processExpression } from './transformExpression'
6768

6869
// some directive transforms (e.g. v-model) may return a symbol for runtime
6970
// import, which should be used instead of a resolveDirective call.
@@ -253,7 +254,7 @@ export function resolveComponentType(
253254

254255
// 1. dynamic component
255256
const isExplicitDynamic = isComponentTag(tag)
256-
const isProp = findProp(node, 'is')
257+
const isProp = findProp(node, 'is', false, true /* allow empty */)
257258
if (isProp) {
258259
if (
259260
isExplicitDynamic ||
@@ -263,10 +264,19 @@ export function resolveComponentType(
263264
context,
264265
))
265266
) {
266-
const exp =
267-
isProp.type === NodeTypes.ATTRIBUTE
268-
? isProp.value && createSimpleExpression(isProp.value.content, true)
269-
: isProp.exp
267+
let exp: ExpressionNode | undefined
268+
if (isProp.type === NodeTypes.ATTRIBUTE) {
269+
exp = isProp.value && createSimpleExpression(isProp.value.content, true)
270+
} else {
271+
exp = isProp.exp
272+
if (!exp) {
273+
// #10469 handle :is shorthand
274+
exp = createSimpleExpression(`is`, false, isProp.loc)
275+
if (!__BROWSER__) {
276+
exp = isProp.exp = processExpression(exp, context)
277+
}
278+
}
279+
}
270280
if (exp) {
271281
return createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT), [
272282
exp,

0 commit comments

Comments
 (0)