feat(compiler-sfc): avoid exposing imports not used in template
close #3183
This commit is contained in:
parent
db3f57a392
commit
5a3ccfd914
@ -204,6 +204,22 @@ return { x }
|
|||||||
}"
|
}"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`SFC compile <script setup> imports imports not used in <template> should not be exposed 1`] = `
|
||||||
|
"import { defineComponent as _defineComponent } from 'vue'
|
||||||
|
import { FooBar, FooBaz, FooQux, vMyDir, x, y } from './x'
|
||||||
|
|
||||||
|
export default _defineComponent({
|
||||||
|
setup(__props, { expose }) {
|
||||||
|
expose()
|
||||||
|
|
||||||
|
const fooBar: FooBar = 1
|
||||||
|
|
||||||
|
return { fooBar, FooBaz, FooQux, vMyDir, x }
|
||||||
|
}
|
||||||
|
|
||||||
|
})"
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`SFC compile <script setup> imports should allow defineProps/Emit at the start of imports 1`] = `
|
exports[`SFC compile <script setup> imports should allow defineProps/Emit at the start of imports 1`] = `
|
||||||
"import { ref } from 'vue'
|
"import { ref } from 'vue'
|
||||||
|
|
||||||
|
@ -209,6 +209,25 @@ defineExpose({ foo: 123 })
|
|||||||
content.lastIndexOf(`import { x }`)
|
content.lastIndexOf(`import { x }`)
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
test('imports not used in <template> should not be exposed', () => {
|
||||||
|
const { content } = compile(`
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { FooBar, FooBaz, FooQux, vMyDir, x, y } from './x'
|
||||||
|
const fooBar: FooBar = 1
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<FooBaz v-my-dir>{{ x }} {{ yy }}</FooBaz>
|
||||||
|
<foo-qux/>
|
||||||
|
</template>
|
||||||
|
`)
|
||||||
|
assertCode(content)
|
||||||
|
// FooBaz: used as PascalCase component
|
||||||
|
// FooQux: used as kebab-case component
|
||||||
|
// vMyDir: used as directive v-my-dir
|
||||||
|
// x: used in interpolation
|
||||||
|
expect(content).toMatch(`return { fooBar, FooBaz, FooQux, vMyDir, x }`)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('inlineTemplate mode', () => {
|
describe('inlineTemplate mode', () => {
|
||||||
|
@ -12,7 +12,11 @@ import {
|
|||||||
TextRange
|
TextRange
|
||||||
} from './parse'
|
} from './parse'
|
||||||
import { parse as _parse, ParserOptions, ParserPlugin } from '@babel/parser'
|
import { parse as _parse, ParserOptions, ParserPlugin } from '@babel/parser'
|
||||||
import { babelParserDefaultPlugins, generateCodeFrame } from '@vue/shared'
|
import {
|
||||||
|
babelParserDefaultPlugins,
|
||||||
|
generateCodeFrame,
|
||||||
|
hyphenate
|
||||||
|
} from '@vue/shared'
|
||||||
import {
|
import {
|
||||||
Node,
|
Node,
|
||||||
Declaration,
|
Declaration,
|
||||||
@ -105,6 +109,7 @@ interface ImportBinding {
|
|||||||
source: string
|
source: string
|
||||||
rangeNode: Node
|
rangeNode: Node
|
||||||
isFromSetup: boolean
|
isFromSetup: boolean
|
||||||
|
isUsedInTemplate: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
interface VariableBinding {
|
interface VariableBinding {
|
||||||
@ -312,12 +317,21 @@ export function compileScript(
|
|||||||
if (source === 'vue' && imported) {
|
if (source === 'vue' && imported) {
|
||||||
userImportAlias[imported] = local
|
userImportAlias[imported] = local
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let isUsedInTemplate = true
|
||||||
|
if (sfc.template && !sfc.template.src) {
|
||||||
|
isUsedInTemplate = new RegExp(
|
||||||
|
`\\b(?:${local}|${hyphenate(local)})\\b`
|
||||||
|
).test(sfc.template.content)
|
||||||
|
}
|
||||||
|
|
||||||
userImports[local] = {
|
userImports[local] = {
|
||||||
isType,
|
isType,
|
||||||
imported: imported || 'default',
|
imported: imported || 'default',
|
||||||
source,
|
source,
|
||||||
rangeNode,
|
rangeNode,
|
||||||
isFromSetup
|
isFromSetup,
|
||||||
|
isUsedInTemplate
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1279,7 +1293,7 @@ export function compileScript(
|
|||||||
// return bindings from setup
|
// return bindings from setup
|
||||||
const allBindings: Record<string, any> = { ...setupBindings }
|
const allBindings: Record<string, any> = { ...setupBindings }
|
||||||
for (const key in userImports) {
|
for (const key in userImports) {
|
||||||
if (!userImports[key].isType) {
|
if (!userImports[key].isType && userImports[key].isUsedInTemplate) {
|
||||||
allBindings[key] = true
|
allBindings[key] = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user