root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(compiler-sfc): fix dynamic directive arguments usage check for slots (#9495) 

close #9493
This commit is contained in:
edison 2023-11-06 17:46:48 +08:00 committed by GitHub
parent 462aeb3b60
commit b39fa1f815
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -696,14 +696,14 @@ return { get vMyDir() { return vMyDir } }
exports[`SFC compile <script setup> > dev mode import usage check > dynamic arguments 1`] = ` exports[`SFC compile <script setup> > dev mode import usage check > dynamic arguments 1`] = `
"import { defineComponent as _defineComponent } from 'vue' "import { defineComponent as _defineComponent } from 'vue'
import { FooBar, foo, bar, unused } from './x' import { FooBar, foo, bar, unused, baz } from './x'
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
setup(__props, { expose: __expose }) { setup(__props, { expose: __expose }) {
__expose(); __expose();
return { get FooBar() { return FooBar }, get foo() { return foo }, get bar() { return bar } } return { get FooBar() { return FooBar }, get foo() { return foo }, get bar() { return bar }, get baz() { return baz } }
} }
})" })"

5
packages/compiler-sfc/__tests__/compileScript.spec.ts
View File

@ -376,18 +376,19 @@ describe('SFC compile <script setup>', () => {
test('dynamic arguments', () => { test('dynamic arguments', () => {
const { content } = compile(` const { content } = compile(`
<script setup lang="ts"> <script setup lang="ts">
import { FooBar, foo, bar, unused } from './x' import { FooBar, foo, bar, unused, baz } from './x'
</script> </script>
<template> <template>
<FooBar #[foo.slotName] /> <FooBar #[foo.slotName] />
<FooBar #unused /> <FooBar #unused />
<div :[bar.attrName]="15"></div> <div :[bar.attrName]="15"></div>
<div unused="unused"></div> <div unused="unused"></div>
<div #[\`item:\${baz.key}\`]="{ value }"></div>
</template> </template>
`) `)
expect(content).toMatch( expect(content).toMatch(
`return { get FooBar() { return FooBar }, get foo() { return foo }, ` + `return { get FooBar() { return FooBar }, get foo() { return foo }, ` +
`get bar() { return bar } }` `get bar() { return bar }, get baz() { return baz } }`
) )
assertCode(content) assertCode(content)
}) })

8
packages/compiler-sfc/src/script/importUsageCheck.ts
View File

@ -50,12 +50,14 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
if (!isBuiltInDirective(prop.name)) { if (!isBuiltInDirective(prop.name)) {
code += `,v${capitalize(camelize(prop.name))}` code += `,v${capitalize(camelize(prop.name))}`
} }
// process dynamic directive arguments
if (prop.arg && !(prop.arg as SimpleExpressionNode).isStatic) { if (prop.arg && !(prop.arg as SimpleExpressionNode).isStatic) {
code += `,${processExp( code += `,${stripStrings(
(prop.arg as SimpleExpressionNode).content, (prop.arg as SimpleExpressionNode).content
prop.name
)}` )}`
} }
if (prop.exp) { if (prop.exp) {
code += `,${processExp( code += `,${processExp(
(prop.exp as SimpleExpressionNode).content, (prop.exp as SimpleExpressionNode).content,