fix(compiler-sfc): check template ref usage, (#12985)

close #12984
vuejs · Dec 7, 2023 · 83d9535 · 83d9535
1 parent 24fcf69
commit 83d9535
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
@@ -1818,6 +1818,8 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor, isTS: boolean) {
  if (value) {
  code += `,${processExp(value, isTS, baseName)}`
  }
+ } else if (name === 'ref') {
+ code += `,${value}`
  }
  }
  },

diff --git a/packages/compiler-sfc/test/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/test/__snapshots__/compileScript.spec.ts.snap
@@ -364,6 +364,20 @@ return { vMyDir }
 })"
 `;
 
+exports[`SFC compile <script setup> > dev mode import usage check > imported ref as template ref 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { aref } from './x'
+ 
+export default /*#__PURE__*/_defineComponent({
+ setup(__props) {
+
+ 
+return { aref }
+}
+
+})"
+`;
+
 exports[`SFC compile <script setup> > dev mode import usage check > js template string interpolations 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { VAR, VAR2, VAR3 } from './x'

diff --git a/packages/compiler-sfc/test/compileScript.spec.ts b/packages/compiler-sfc/test/compileScript.spec.ts
@@ -398,6 +398,19 @@ defineExpose({ foo: 123 })
  assertCode(content)
  })
 
+ test('imported ref as template ref', () => {
+ const { content } = compile(`
+ <script setup lang="ts">
+ import { aref } from './x'
+ </script>
+ <template>
+ <div ref="aref"></div>
+ </template>
+ `)
+ expect(content).toMatch(`return { aref }`)
+ assertCode(content)
+ })
+
  test('vue interpolations', () => {
  const { content } = compile(`
  <script setup lang="ts">