fix(vue): import with query (#592)

Author: sapphi-red

packages/plugin-vue/src/index.ts

@@ -9,7 +9,10 @@ import type {
 } from 'vue/compiler-sfc'
 import type * as _compiler from 'vue/compiler-sfc'
 import { computed, shallowRef } from 'vue'
-import { exactRegex } from '@rolldown/pluginutils'
+import {
+  exactRegex,
+  makeIdFiltersToMatchWithQuery,
+} from '@rolldown/pluginutils'
 import { version } from '../package.json'
 import { resolveCompiler } from './compiler'
 import { parseVueRequest } from './utils/query'
@@ -358,7 +361,10 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
       optionsHookIsCalled = true
       ;(plugin.transform as TransformObjectHook).filter = {
         id: {
-          include: [...ensureArray(include.value), /[?&]vue\b/],
+          include: [
+            ...makeIdFiltersToMatchWithQuery(ensureArray(include.value)),
+            /[?&]vue\b/,
+          ],
           exclude: exclude.value,
         },
       }

playground/vue/Main.vue

@@ -11,6 +11,7 @@
   <HmrCircularReference name="test" />
   <TypeProps msg="msg" bar="bar" :id="123" />
   <TypePropsTsx msg="msg" bar="bar" />
+  <WithQuery />
   <Syntax />
   <PreProcessors />
   <PreProcessorsHmr />
@@ -44,6 +45,7 @@
 import { version, defineAsyncComponent } from 'vue'
 import Hmr from './Hmr.vue'
 import HmrTsx from './HmrTsx.vue'
+import WithQuery from './WithQuery.vue?with-query'
 import Syntax from './Syntax.vue'
 import PreProcessors from './PreProcessors.vue'
 import PreProcessorsHmr from './PreProcessorsHmr.vue'

playground/vue/WithQuery.vue

@@ -0,0 +1,8 @@
+<template>
+  <h2>Imported with query</h2>
+  <p class="imported-with-query">{{ foo }}</p>
+</template>
+
+<script setup>
+const foo = 'ok'
+</script>

playground/vue/__tests__/vue.spec.ts

@@ -22,6 +22,10 @@ test('should update', async () => {
   expect(await page.textContent('.hmr-inc')).toMatch('count is 1')
 })
 
+test('import with query should work', async () => {
+  expect(await page.textContent('.imported-with-query')).toMatch('ok')
+})
+
 test('template/script latest syntax support', async () => {
   expect(await page.textContent('.syntax')).toBe('baz')
 })