fix(plugin-vue): support external import URLs for monorepos (#524)

Author: Kolobok12309

packages/plugin-vue/src/index.ts

@@ -387,6 +387,10 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
             getTempSrcDescriptor(filename, query)
           : getDescriptor(filename, options.value)!
 
+        if (query.src) {
+          this.addWatchFile(filename)
+        }
+
         if (query.type === 'template') {
           return transformTemplateAsModule(
             code,

playground/vue-external/src-import/SrcImport.vue

@@ -0,0 +1,4 @@
+<style src="/#external/src-import/style.css" scoped></style>
+<style src="/#external/src-import/style2.css" scoped></style>
+<template src="./template.html"></template>
+<script src="./script.ts"></script>

playground/vue-external/src-import/css.module.css

@@ -0,0 +1,7 @@
+.one {
+  background: yellow;
+}
+
+.two {
+  border: solid 1px red;
+}

playground/vue-external/src-import/script.ts

@@ -0,0 +1,19 @@
+import { defineComponent } from 'vue'
+import SrcImportStyle from './srcImportStyle.vue'
+import SrcImportStyle2 from './srcImportStyle2.vue'
+import SrcImportModuleStyle from './srcImportModuleStyle.vue'
+import SrcImportModuleStyle2 from './srcImportModuleStyle2.vue'
+
+export default defineComponent({
+  components: {
+    SrcImportStyle,
+    SrcImportStyle2,
+    SrcImportModuleStyle,
+    SrcImportModuleStyle2,
+  },
+  setup() {
+    return {
+      msg: 'hello from script src!',
+    }
+  },
+})

playground/vue-external/src-import/srcImportModuleStyle.vue

@@ -0,0 +1,4 @@
+<template>
+  <div :class="$style.one">src for import css module</div>
+</template>
+<style lang="scss" module src="/#external/src-import/css.module.css" />

playground/vue-external/src-import/srcImportModuleStyle2.vue

@@ -0,0 +1,4 @@
+<template>
+  <div :class="$style.two">src for import css module</div>
+</template>
+<style lang="scss" module src="/#external/src-import/css.module.css" />

playground/vue-external/src-import/srcImportStyle.vue

@@ -0,0 +1,7 @@
+<style src="/#external/src-import/style.css" scoped></style>
+<template>
+  <div class="src-imports-script">{{ msg }}</div>
+</template>
+<script setup>
+const msg = 'hello from component A!'
+</script>

playground/vue-external/src-import/srcImportStyle2.vue

@@ -0,0 +1,4 @@
+<style src="/#external/src-import/style2.css" scoped></style>
+<template>
+  <div class="src-imports-style">This should be tan</div>
+</template>

playground/vue-external/src-import/style.css

@@ -0,0 +1,3 @@
+.external-src-imports-style {
+  color: tan;
+}

playground/vue-external/src-import/style2.css

@@ -0,0 +1,3 @@
+.external-src-imports-script {
+  color: #0088ff;
+}

playground/vue-external/src-import/template.html

@@ -0,0 +1,7 @@
+<h2>External SFC Src Imports</h2>
+<div class="external-src-imports-script">{{ msg }}</div>
+<div class="external-src-imports-style">This should be tan</div>
+<SrcImportStyle></SrcImportStyle>
+<SrcImportStyle2></SrcImportStyle2>
+<SrcImportModuleStyle></SrcImportModuleStyle>
+<SrcImportModuleStyle2></SrcImportModuleStyle2>

playground/vue/Main.vue

@@ -18,6 +18,7 @@
   <Assets />
   <CustomBlock />
   <SrcImport />
+  <ExternalSrcImport />
   <Slotted>
     <div class="slotted">this should be red</div>
   </Slotted>
@@ -48,6 +49,7 @@ import CssModules from './CssModules.vue'
 import Assets from './Assets.vue'
 import CustomBlock from './CustomBlock.vue'
 import SrcImport from './src-import/SrcImport.vue'
+import ExternalSrcImport from '#external/src-import/SrcImport.vue'
 import Slotted from './Slotted.vue'
 import ScanDep from './ScanDep.vue'
 import TsImport from './TsImport.vue'

playground/vue/__tests__/vue.spec.ts

@@ -280,6 +280,38 @@ describe('src imports', () => {
   })
 })
 
+describe('external src imports', () => {
+  test('script src with ts', async () => {
+    expect(await page.textContent('.external-src-imports-script')).toMatch(
+      'hello from script src',
+    )
+    editFile('../vue-external/src-import/script.ts', (code) =>
+      code.replace('hello from script src', 'updated'),
+    )
+    await untilUpdated(
+      () => page.textContent('.external-src-imports-script'),
+      'updated',
+    )
+  })
+
+  test('style src', async () => {
+    const el = await page.$('.external-src-imports-style')
+    expect(await getColor(el)).toBe('tan')
+    editFile('../vue-external/src-import/style.css', (code) =>
+      code.replace('color: tan', 'color: red'),
+    )
+    await untilUpdated(() => getColor(el), 'red')
+  })
+
+  test('template src import hmr', async () => {
+    const el = await page.$('.external-src-imports-style')
+    editFile('../vue-external/src-import/template.html', (code) =>
+      code.replace('should be tan', 'should be red'),
+    )
+    await untilUpdated(() => el.textContent(), 'should be red')
+  })
+})
+
 describe('custom blocks', () => {
   test('should work', async () => {
     expect(await page.textContent('.custom-block')).toMatch('こんにちは')

playground/vue/vite.config.ts

@@ -8,6 +8,8 @@ export default defineConfig({
     alias: {
       '/@': __dirname,
       '@': __dirname,
+      '#external': resolve(__dirname, '../vue-external'),
+      '/#external': resolve(__dirname, '../vue-external'),
     },
   },
   plugins: [