Skip to content

Commit cdd4922

Browse files
authoredFeb 17, 2025··
fix(plugin-vue): support external import URLs for monorepos (#524)
1 parent 15c0eb0 commit cdd4922

14 files changed

+102
-0
lines changed
 

‎packages/plugin-vue/src/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -387,6 +387,10 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
387387
getTempSrcDescriptor(filename, query)
388388
: getDescriptor(filename, options.value)!
389389

390+
if (query.src) {
391+
this.addWatchFile(filename)
392+
}
393+
390394
if (query.type === 'template') {
391395
return transformTemplateAsModule(
392396
code,
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<style src="/#external/src-import/style.css" scoped></style>
2+
<style src="/#external/src-import/style2.css" scoped></style>
3+
<template src="./template.html"></template>
4+
<script src="./script.ts"></script>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.one {
2+
background: yellow;
3+
}
4+
5+
.two {
6+
border: solid 1px red;
7+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { defineComponent } from 'vue'
2+
import SrcImportStyle from './srcImportStyle.vue'
3+
import SrcImportStyle2 from './srcImportStyle2.vue'
4+
import SrcImportModuleStyle from './srcImportModuleStyle.vue'
5+
import SrcImportModuleStyle2 from './srcImportModuleStyle2.vue'
6+
7+
export default defineComponent({
8+
components: {
9+
SrcImportStyle,
10+
SrcImportStyle2,
11+
SrcImportModuleStyle,
12+
SrcImportModuleStyle2,
13+
},
14+
setup() {
15+
return {
16+
msg: 'hello from script src!',
17+
}
18+
},
19+
})
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<template>
2+
<div :class="$style.one">src for import css module</div>
3+
</template>
4+
<style lang="scss" module src="/#external/src-import/css.module.css" />
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<template>
2+
<div :class="$style.two">src for import css module</div>
3+
</template>
4+
<style lang="scss" module src="/#external/src-import/css.module.css" />
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<style src="/#external/src-import/style.css" scoped></style>
2+
<template>
3+
<div class="src-imports-script">{{ msg }}</div>
4+
</template>
5+
<script setup>
6+
const msg = 'hello from component A!'
7+
</script>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<style src="/#external/src-import/style2.css" scoped></style>
2+
<template>
3+
<div class="src-imports-style">This should be tan</div>
4+
</template>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.external-src-imports-style {
2+
color: tan;
3+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.external-src-imports-script {
2+
color: #0088ff;
3+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<h2>External SFC Src Imports</h2>
2+
<div class="external-src-imports-script">{{ msg }}</div>
3+
<div class="external-src-imports-style">This should be tan</div>
4+
<SrcImportStyle></SrcImportStyle>
5+
<SrcImportStyle2></SrcImportStyle2>
6+
<SrcImportModuleStyle></SrcImportModuleStyle>
7+
<SrcImportModuleStyle2></SrcImportModuleStyle2>

‎playground/vue/Main.vue

+2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<Assets />
1919
<CustomBlock />
2020
<SrcImport />
21+
<ExternalSrcImport />
2122
<Slotted>
2223
<div class="slotted">this should be red</div>
2324
</Slotted>
@@ -48,6 +49,7 @@ import CssModules from './CssModules.vue'
4849
import Assets from './Assets.vue'
4950
import CustomBlock from './CustomBlock.vue'
5051
import SrcImport from './src-import/SrcImport.vue'
52+
import ExternalSrcImport from '#external/src-import/SrcImport.vue'
5153
import Slotted from './Slotted.vue'
5254
import ScanDep from './ScanDep.vue'
5355
import TsImport from './TsImport.vue'

‎playground/vue/__tests__/vue.spec.ts

+32
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,38 @@ describe('src imports', () => {
280280
})
281281
})
282282

283+
describe('external src imports', () => {
284+
test('script src with ts', async () => {
285+
expect(await page.textContent('.external-src-imports-script')).toMatch(
286+
'hello from script src',
287+
)
288+
editFile('../vue-external/src-import/script.ts', (code) =>
289+
code.replace('hello from script src', 'updated'),
290+
)
291+
await untilUpdated(
292+
() => page.textContent('.external-src-imports-script'),
293+
'updated',
294+
)
295+
})
296+
297+
test('style src', async () => {
298+
const el = await page.$('.external-src-imports-style')
299+
expect(await getColor(el)).toBe('tan')
300+
editFile('../vue-external/src-import/style.css', (code) =>
301+
code.replace('color: tan', 'color: red'),
302+
)
303+
await untilUpdated(() => getColor(el), 'red')
304+
})
305+
306+
test('template src import hmr', async () => {
307+
const el = await page.$('.external-src-imports-style')
308+
editFile('../vue-external/src-import/template.html', (code) =>
309+
code.replace('should be tan', 'should be red'),
310+
)
311+
await untilUpdated(() => el.textContent(), 'should be red')
312+
})
313+
})
314+
283315
describe('custom blocks', () => {
284316
test('should work', async () => {
285317
expect(await page.textContent('.custom-block')).toMatch('こんにちは')

‎playground/vue/vite.config.ts

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ export default defineConfig({
88
alias: {
99
'/@': __dirname,
1010
'@': __dirname,
11+
'#external': resolve(__dirname, '../vue-external'),
12+
'/#external': resolve(__dirname, '../vue-external'),
1113
},
1214
},
1315
plugins: [

0 commit comments

Comments
 (0)
Please sign in to comment.