fix(compiler): avoid namespace collisions when transforming template refs in inline...

fix #6964

diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
index 43bd2589df1a2719d6ae41ee62b72377d40e5955..06fd2e12b1907c34e388ad69f7353a452f4a8004 100644 (file)
--- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
@@ -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" />`, {

diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 7b53b24822c8180502c7208b1239cbe9f8d10cf6..57f84f9f750e01840ca435189568e997be68d9a4 100644 (file)
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -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"