test: split import usage check tests into dedicated file

packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap

@@ -639,190 +639,6 @@ return { foo, bar, baz, y, z }
 }"
 `;
 
-exports[`SFC compile <script setup> > dev mode import usage check > TS annotations 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { Foo, Bar, Baz, Qux, Fred } from './x'
-        const a = 1
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        function b() {}
-        
-return { a, b, get Baz() { return Baz } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > attribute expressions 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { bar, baz } from './x'
-        const cond = true
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        
-return { cond, get bar() { return bar }, get baz() { return baz } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > components 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { FooBar, FooBaz, FooQux, foo } from './x'
-        const fooBar: FooBar = 1
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        
-return { fooBar, get FooBaz() { return FooBaz }, get FooQux() { return FooQux }, get foo() { return foo } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > directive 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { vMyDir } from './x'
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        
-return { get vMyDir() { return vMyDir } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > dynamic arguments 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { FooBar, foo, bar, unused, baz } from './x'
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        
-return { get FooBar() { return FooBar }, get foo() { return foo }, get bar() { return bar }, get baz() { return baz } }
-}
-
-})"
-`;
-
-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'
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        
-return { get VAR() { return VAR }, get VAR3() { return VAR3 } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > last tag 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { FooBaz, Last } from './x'
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        
-return { get FooBaz() { return FooBaz }, get Last() { return Last } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > property access (whitespace) 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { Foo, Bar, Baz } from './foo'
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-          
-return { get Foo() { return Foo } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > property access 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { Foo, Bar, Baz } from './foo'
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-          
-return { get Foo() { return Foo } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > spread operator 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { Foo, Bar, Baz } from './foo'
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-          
-return { get Foo() { return Foo } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > template ref 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { foo, bar, Baz } from './foo'
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-          
-return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > vue interpolations 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { x, y, z, x$y } from './x'
-      
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-      
-return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }
-}
-
-})"
-`;
-
 exports[`SFC compile <script setup> > errors > should allow defineProps/Emit() referencing imported binding 1`] = `
 "import { bar } from './bar'
         

packages/compiler-sfc/__tests__/compileScript.spec.ts

@@ -339,227 +339,6 @@ describe('SFC compile <script setup>', () => {
     })
   })
 
-  // in dev mode, declared bindings are returned as an object from setup()
-  // when using TS, users may import types which should not be returned as
-  // values, so we need to check import usage in the template to determine
-  // what to be returned.
-  describe('dev mode import usage check', () => {
-    test('components', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { FooBar, FooBaz, FooQux, foo } from './x'
-        const fooBar: FooBar = 1
-        </script>
-        <template>
-          <FooBaz></FooBaz>
-          <foo-qux/>
-          <foo/>
-          FooBar
-        </template>
-        `)
-      // FooBar: should not be matched by plain text or incorrect case
-      // FooBaz: used as PascalCase component
-      // FooQux: used as kebab-case component
-      // foo: lowercase component
-      expect(content).toMatch(
-        `return { fooBar, get FooBaz() { return FooBaz }, ` +
-          `get FooQux() { return FooQux }, get foo() { return foo } }`,
-      )
-      assertCode(content)
-    })
-
-    test('directive', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { vMyDir } from './x'
-        </script>
-        <template>
-          <div v-my-dir></div>
-        </template>
-        `)
-      expect(content).toMatch(`return { get vMyDir() { return vMyDir } }`)
-      assertCode(content)
-    })
-
-    test('dynamic arguments', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { FooBar, foo, bar, unused, baz } from './x'
-        </script>
-        <template>
-          <FooBar #[foo.slotName] />
-          <FooBar #unused />
-          <div :[bar.attrName]="15"></div>
-          <div unused="unused"></div>
-          <div #[\`item:\${baz.key}\`]="{ value }"></div>
-        </template>
-        `)
-      expect(content).toMatch(
-        `return { get FooBar() { return FooBar }, get foo() { return foo }, ` +
-          `get bar() { return bar }, get baz() { return baz } }`,
-      )
-      assertCode(content)
-    })
-
-    // https://github.com/vuejs/core/issues/4599
-    test('attribute expressions', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { bar, baz } from './x'
-        const cond = true
-        </script>
-        <template>
-          <div :class="[cond ? '' : bar(), 'default']" :style="baz"></div>
-        </template>
-        `)
-      expect(content).toMatch(
-        `return { cond, get bar() { return bar }, get baz() { return baz } }`,
-      )
-      assertCode(content)
-    })
-
-    test('vue interpolations', () => {
-      const { content } = compile(`
-      <script setup lang="ts">
-      import { x, y, z, x$y } from './x'
-      </script>
-      <template>
-        <div :id="z + 'y'">{{ x }} {{ yy }} {{ x$y }}</div>
-      </template>
-      `)
-      // x: used in interpolation
-      // y: should not be matched by {{ yy }} or 'y' in binding exps
-      // x$y: #4274 should escape special chars when creating Regex
-      expect(content).toMatch(
-        `return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }`,
-      )
-      assertCode(content)
-    })
-
-    // #4340 interpolations in template strings
-    test('js template string interpolations', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { VAR, VAR2, VAR3 } from './x'
-        </script>
-        <template>
-          {{ \`\${VAR}VAR2\${VAR3}\` }}
-        </template>
-        `)
-      // VAR2 should not be matched
-      expect(content).toMatch(
-        `return { get VAR() { return VAR }, get VAR3() { return VAR3 } }`,
-      )
-      assertCode(content)
-    })
-
-    // edge case: last tag in template
-    test('last tag', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { FooBaz, Last } from './x'
-        </script>
-        <template>
-          <FooBaz></FooBaz>
-          <Last/>
-        </template>
-        `)
-      expect(content).toMatch(
-        `return { get FooBaz() { return FooBaz }, get Last() { return Last } }`,
-      )
-      assertCode(content)
-    })
-
-    test('TS annotations', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { Foo, Bar, Baz, Qux, Fred } from './x'
-        const a = 1
-        function b() {}
-        </script>
-        <template>
-          {{ a as Foo }}
-          {{ b<Bar>() }}
-          {{ Baz }}
-          <Comp v-slot="{ data }: Qux">{{ data }}</Comp>
-          <div v-for="{ z = x as Qux } in list as Fred"/>
-        </template>
-        `)
-      expect(content).toMatch(`return { a, b, get Baz() { return Baz } }`)
-      assertCode(content)
-    })
-
-    // vuejs/vue#12591
-    test('v-on inline statement', () => {
-      // should not error
-      compile(`
-      <script setup lang="ts">
-        import { foo } from './foo'
-      </script>
-      <template>
-        <div @click="$emit('update:a');"></div>
-      </template>
-      `)
-    })
-
-    test('template ref', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-          import { foo, bar, Baz } from './foo'
-        </script>
-        <template>
-          <div ref="foo"></div>
-          <div ref=""></div>
-          <Baz ref="bar" />
-        </template>
-        `)
-      expect(content).toMatch(
-        'return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }',
-      )
-      assertCode(content)
-    })
-
-    // https://github.com/nuxt/nuxt/issues/22416
-    test('property access', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-          import { Foo, Bar, Baz } from './foo'
-        </script>
-        <template>
-          <div>{{ Foo.Bar.Baz }}</div>
-        </template>
-        `)
-      expect(content).toMatch('return { get Foo() { return Foo } }')
-      assertCode(content)
-    })
-
-    test('spread operator', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-          import { Foo, Bar, Baz } from './foo'
-        </script>
-        <template>
-          <div v-bind="{ ...Foo.Bar.Baz }"></div>
-        </template>
-        `)
-      expect(content).toMatch('return { get Foo() { return Foo } }')
-      assertCode(content)
-    })
-
-    test('property access (whitespace)', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-          import { Foo, Bar, Baz } from './foo'
-        </script>
-        <template>
-          <div>{{ Foo . Bar . Baz }}</div>
-        </template>
-        `)
-      expect(content).toMatch('return { get Foo() { return Foo } }')
-      assertCode(content)
-    })
-  })
-
   describe('inlineTemplate mode', () => {
     test('should work', () => {
       const { content } = compile(

packages/compiler-sfc/__tests__/compileScript/__snapshots__/importUsageCheck.spec.ts.snap

@@ -0,0 +1,185 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TS annotations 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { Foo, Bar, Baz, Qux, Fred } from './x'
+    const a = 1
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    function b() {}
+    
+return { a, b, get Baz() { return Baz } }
+}
+
+})"
+`;
+
+exports[`attribute expressions 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { bar, baz } from './x'
+    const cond = true
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    
+return { cond, get bar() { return bar }, get baz() { return baz } }
+}
+
+})"
+`;
+
+exports[`components 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { FooBar, FooBaz, FooQux, foo } from './x'
+    const fooBar: FooBar = 1
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    
+return { fooBar, get FooBaz() { return FooBaz }, get FooQux() { return FooQux }, get foo() { return foo } }
+}
+
+})"
+`;
+
+exports[`directive 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { vMyDir } from './x'
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    
+return { get vMyDir() { return vMyDir } }
+}
+
+})"
+`;
+
+exports[`dynamic arguments 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { FooBar, foo, bar, unused, baz } from './x'
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    
+return { get FooBar() { return FooBar }, get foo() { return foo }, get bar() { return bar }, get baz() { return baz } }
+}
+
+})"
+`;
+
+exports[`js template string interpolations 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { VAR, VAR2, VAR3 } from './x'
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    
+return { get VAR() { return VAR }, get VAR3() { return VAR3 } }
+}
+
+})"
+`;
+
+exports[`last tag 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { FooBaz, Last } from './x'
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    
+return { get FooBaz() { return FooBaz }, get Last() { return Last } }
+}
+
+})"
+`;
+
+exports[`property access (whitespace) 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { Foo, Bar, Baz } from './foo'
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+return { get Foo() { return Foo } }
+}
+
+})"
+`;
+
+exports[`property access 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { Foo, Bar, Baz } from './foo'
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+return { get Foo() { return Foo } }
+}
+
+})"
+`;
+
+exports[`spread operator 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { Foo, Bar, Baz } from './foo'
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+return { get Foo() { return Foo } }
+}
+
+})"
+`;
+
+exports[`template ref 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { foo, bar, Baz } from './foo'
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }
+}
+
+})"
+`;
+
+exports[`vue interpolations 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { x, y, z, x$y } from './x'
+  
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+  
+return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }
+}
+
+})"
+`;

packages/compiler-sfc/__tests__/compileScript/importUsageCheck.spec.ts

@@ -0,0 +1,221 @@
+import { assertCode, compileSFCScript as compile } from '../utils'
+
+// in dev mode, declared bindings are returned as an object from setup()
+// when using TS, users may import types which should not be returned as
+// values, so we need to check import usage in the template to determine
+// what to be returned.
+
+test('components', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { FooBar, FooBaz, FooQux, foo } from './x'
+    const fooBar: FooBar = 1
+    </script>
+    <template>
+      <FooBaz></FooBaz>
+      <foo-qux/>
+      <foo/>
+      FooBar
+    </template>
+    `)
+  // FooBar: should not be matched by plain text or incorrect case
+  // FooBaz: used as PascalCase component
+  // FooQux: used as kebab-case component
+  // foo: lowercase component
+  expect(content).toMatch(
+    `return { fooBar, get FooBaz() { return FooBaz }, ` +
+      `get FooQux() { return FooQux }, get foo() { return foo } }`,
+  )
+  assertCode(content)
+})
+
+test('directive', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { vMyDir } from './x'
+    </script>
+    <template>
+      <div v-my-dir></div>
+    </template>
+    `)
+  expect(content).toMatch(`return { get vMyDir() { return vMyDir } }`)
+  assertCode(content)
+})
+
+test('dynamic arguments', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { FooBar, foo, bar, unused, baz } from './x'
+    </script>
+    <template>
+      <FooBar #[foo.slotName] />
+      <FooBar #unused />
+      <div :[bar.attrName]="15"></div>
+      <div unused="unused"></div>
+      <div #[\`item:\${baz.key}\`]="{ value }"></div>
+    </template>
+    `)
+  expect(content).toMatch(
+    `return { get FooBar() { return FooBar }, get foo() { return foo }, ` +
+      `get bar() { return bar }, get baz() { return baz } }`,
+  )
+  assertCode(content)
+})
+
+// https://github.com/vuejs/core/issues/4599
+test('attribute expressions', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { bar, baz } from './x'
+    const cond = true
+    </script>
+    <template>
+      <div :class="[cond ? '' : bar(), 'default']" :style="baz"></div>
+    </template>
+    `)
+  expect(content).toMatch(
+    `return { cond, get bar() { return bar }, get baz() { return baz } }`,
+  )
+  assertCode(content)
+})
+
+test('vue interpolations', () => {
+  const { content } = compile(`
+  <script setup lang="ts">
+  import { x, y, z, x$y } from './x'
+  </script>
+  <template>
+    <div :id="z + 'y'">{{ x }} {{ yy }} {{ x$y }}</div>
+  </template>
+  `)
+  // x: used in interpolation
+  // y: should not be matched by {{ yy }} or 'y' in binding exps
+  // x$y: #4274 should escape special chars when creating Regex
+  expect(content).toMatch(
+    `return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }`,
+  )
+  assertCode(content)
+})
+
+// #4340 interpolations in template strings
+test('js template string interpolations', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { VAR, VAR2, VAR3 } from './x'
+    </script>
+    <template>
+      {{ \`\${VAR}VAR2\${VAR3}\` }}
+    </template>
+    `)
+  // VAR2 should not be matched
+  expect(content).toMatch(
+    `return { get VAR() { return VAR }, get VAR3() { return VAR3 } }`,
+  )
+  assertCode(content)
+})
+
+// edge case: last tag in template
+test('last tag', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { FooBaz, Last } from './x'
+    </script>
+    <template>
+      <FooBaz></FooBaz>
+      <Last/>
+    </template>
+    `)
+  expect(content).toMatch(
+    `return { get FooBaz() { return FooBaz }, get Last() { return Last } }`,
+  )
+  assertCode(content)
+})
+
+test('TS annotations', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { Foo, Bar, Baz, Qux, Fred } from './x'
+    const a = 1
+    function b() {}
+    </script>
+    <template>
+      {{ a as Foo }}
+      {{ b<Bar>() }}
+      {{ Baz }}
+      <Comp v-slot="{ data }: Qux">{{ data }}</Comp>
+      <div v-for="{ z = x as Qux } in list as Fred"/>
+    </template>
+    `)
+  expect(content).toMatch(`return { a, b, get Baz() { return Baz } }`)
+  assertCode(content)
+})
+
+// vuejs/vue#12591
+test('v-on inline statement', () => {
+  // should not error
+  compile(`
+  <script setup lang="ts">
+    import { foo } from './foo'
+  </script>
+  <template>
+    <div @click="$emit('update:a');"></div>
+  </template>
+  `)
+})
+
+test('template ref', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+      import { foo, bar, Baz } from './foo'
+    </script>
+    <template>
+      <div ref="foo"></div>
+      <div ref=""></div>
+      <Baz ref="bar" />
+    </template>
+    `)
+  expect(content).toMatch(
+    'return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }',
+  )
+  assertCode(content)
+})
+
+// https://github.com/nuxt/nuxt/issues/22416
+test('property access', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+      import { Foo, Bar, Baz } from './foo'
+    </script>
+    <template>
+      <div>{{ Foo.Bar.Baz }}</div>
+    </template>
+    `)
+  expect(content).toMatch('return { get Foo() { return Foo } }')
+  assertCode(content)
+})
+
+test('spread operator', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+      import { Foo, Bar, Baz } from './foo'
+    </script>
+    <template>
+      <div v-bind="{ ...Foo.Bar.Baz }"></div>
+    </template>
+    `)
+  expect(content).toMatch('return { get Foo() { return Foo } }')
+  assertCode(content)
+})
+
+test('property access (whitespace)', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+      import { Foo, Bar, Baz } from './foo'
+    </script>
+    <template>
+      <div>{{ Foo . Bar . Baz }}</div>
+    </template>
+    `)
+  expect(content).toMatch('return { get Foo() { return Foo } }')
+  assertCode(content)
+})