Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(compiler-core):Avoid props conflicts when transforming ref #6975

Merged
merged 12 commits into from Nov 9, 2022
Merged
Expand Up @@ -1063,6 +1063,32 @@ describe('compiler: element transform', () => {
})
})

test('script setup inline mode template ref (binding does not exist but props with the same name exist)', () => {
const { node } = parseWithElementTransform(`<input ref="msg"/>`, {
inline: true,
bindingMetadata: {
msg: BindingTypes.PROPS,
ref: BindingTypes.SETUP_CONST
}
})
expect(node.props).toMatchObject({
type: NodeTypes.JS_OBJECT_EXPRESSION,
properties: [
{
type: NodeTypes.JS_PROPERTY,
key: {
content: 'ref',
isStatic: true
},
value: {
content: 'msg',
isStatic: true
}
}
]
})
})

test('HYDRATE_EVENTS', () => {
// ignore click events (has dedicated fast path)
const { node } = parseWithElementTransform(`<div @click="foo" />`, {
Expand Down
26 changes: 14 additions & 12 deletions packages/compiler-core/src/transforms/transformElement.ts
Expand Up @@ -497,19 +497,21 @@ export function buildProps(
// in inline mode there is no setupState object, so we can't use string
// keys to set the ref. Instead, we need to transform it to pass the
// actual ref instead.
if (
!__BROWSER__ &&
value &&
context.inline &&
context.bindingMetadata[value.content]
) {
isStatic = false
properties.push(
createObjectProperty(
createSimpleExpression('ref_key', true),
createSimpleExpression(value.content, true, value.loc)
if (!__BROWSER__ && value && context.inline) {
const binding = context.bindingMetadata[value.content]
if (
binding === BindingTypes.SETUP_LET ||
binding === BindingTypes.SETUP_REF ||
binding === BindingTypes.SETUP_MAYBE_REF
) {
isStatic = false
properties.push(
createObjectProperty(
createSimpleExpression('ref_key', true),
createSimpleExpression(value.content, true, value.loc)
)
)
)
}
}
}
// skip is on <component>, or is="vue:xxx"
Expand Down