mirror of https://github.com/vuejs/core.git
test: split import usage check tests into dedicated file
This commit is contained in:
Evan You
parent
f787337b47
commit
63c3e621ce
|
|
@ -639,190 +639,6 @@ return { foo, bar, baz, y, z }
|
|||
}"
|
||||
`;
|
||||
|
||||
exports[`SFC compile <script setup> > dev mode import usage check > TS annotations 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { Foo, Bar, Baz, Qux, Fred } from './x'
|
||||
const a = 1
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
function b() {}
|
||||
|
||||
return { a, b, get Baz() { return Baz } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`SFC compile <script setup> > dev mode import usage check > attribute expressions 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { bar, baz } from './x'
|
||||
const cond = true
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { cond, get bar() { return bar }, get baz() { return baz } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`SFC compile <script setup> > dev mode import usage check > components 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { FooBar, FooBaz, FooQux, foo } from './x'
|
||||
const fooBar: FooBar = 1
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { fooBar, get FooBaz() { return FooBaz }, get FooQux() { return FooQux }, get foo() { return foo } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`SFC compile <script setup> > dev mode import usage check > directive 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { vMyDir } from './x'
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { get vMyDir() { return vMyDir } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`SFC compile <script setup> > dev mode import usage check > dynamic arguments 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { FooBar, foo, bar, unused, baz } from './x'
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { get FooBar() { return FooBar }, get foo() { return foo }, get bar() { return bar }, get baz() { return baz } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`SFC compile <script setup> > dev mode import usage check > js template string interpolations 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { VAR, VAR2, VAR3 } from './x'
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { get VAR() { return VAR }, get VAR3() { return VAR3 } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`SFC compile <script setup> > dev mode import usage check > last tag 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { FooBaz, Last } from './x'
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { get FooBaz() { return FooBaz }, get Last() { return Last } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`SFC compile <script setup> > dev mode import usage check > property access (whitespace) 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { Foo, Bar, Baz } from './foo'
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { get Foo() { return Foo } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`SFC compile <script setup> > dev mode import usage check > property access 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { Foo, Bar, Baz } from './foo'
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { get Foo() { return Foo } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`SFC compile <script setup> > dev mode import usage check > spread operator 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { Foo, Bar, Baz } from './foo'
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { get Foo() { return Foo } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`SFC compile <script setup> > dev mode import usage check > template ref 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { foo, bar, Baz } from './foo'
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`SFC compile <script setup> > dev mode import usage check > vue interpolations 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { x, y, z, x$y } from './x'
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`SFC compile <script setup> > errors > should allow defineProps/Emit() referencing imported binding 1`] = `
|
||||
"import { bar } from './bar'
|
||||
|
||||
|
|
|
|||
|
|
@ -339,227 +339,6 @@ describe('SFC compile <script setup>', () => {
|
|||
})
|
||||
})
|
||||
|
||||
// in dev mode, declared bindings are returned as an object from setup()
|
||||
// when using TS, users may import types which should not be returned as
|
||||
// values, so we need to check import usage in the template to determine
|
||||
// what to be returned.
|
||||
describe('dev mode import usage check', () => {
|
||||
test('components', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { FooBar, FooBaz, FooQux, foo } from './x'
|
||||
const fooBar: FooBar = 1
|
||||
</script>
|
||||
<template>
|
||||
<FooBaz></FooBaz>
|
||||
<foo-qux/>
|
||||
<foo/>
|
||||
FooBar
|
||||
</template>
|
||||
`)
|
||||
// FooBar: should not be matched by plain text or incorrect case
|
||||
// FooBaz: used as PascalCase component
|
||||
// FooQux: used as kebab-case component
|
||||
// foo: lowercase component
|
||||
expect(content).toMatch(
|
||||
`return { fooBar, get FooBaz() { return FooBaz }, ` +
|
||||
`get FooQux() { return FooQux }, get foo() { return foo } }`,
|
||||
)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
test('directive', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { vMyDir } from './x'
|
||||
</script>
|
||||
<template>
|
||||
<div v-my-dir></div>
|
||||
</template>
|
||||
`)
|
||||
expect(content).toMatch(`return { get vMyDir() { return vMyDir } }`)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
test('dynamic arguments', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { FooBar, foo, bar, unused, baz } from './x'
|
||||
</script>
|
||||
<template>
|
||||
<FooBar #[foo.slotName] />
|
||||
<FooBar #unused />
|
||||
<div :[bar.attrName]="15"></div>
|
||||
<div unused="unused"></div>
|
||||
<div #[\`item:\${baz.key}\`]="{ value }"></div>
|
||||
</template>
|
||||
`)
|
||||
expect(content).toMatch(
|
||||
`return { get FooBar() { return FooBar }, get foo() { return foo }, ` +
|
||||
`get bar() { return bar }, get baz() { return baz } }`,
|
||||
)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
// https://github.com/vuejs/core/issues/4599
|
||||
test('attribute expressions', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { bar, baz } from './x'
|
||||
const cond = true
|
||||
</script>
|
||||
<template>
|
||||
<div :class="[cond ? '' : bar(), 'default']" :style="baz"></div>
|
||||
</template>
|
||||
`)
|
||||
expect(content).toMatch(
|
||||
`return { cond, get bar() { return bar }, get baz() { return baz } }`,
|
||||
)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
test('vue interpolations', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { x, y, z, x$y } from './x'
|
||||
</script>
|
||||
<template>
|
||||
<div :id="z + 'y'">{{ x }} {{ yy }} {{ x$y }}</div>
|
||||
</template>
|
||||
`)
|
||||
// x: used in interpolation
|
||||
// y: should not be matched by {{ yy }} or 'y' in binding exps
|
||||
// x$y: #4274 should escape special chars when creating Regex
|
||||
expect(content).toMatch(
|
||||
`return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }`,
|
||||
)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
// #4340 interpolations in template strings
|
||||
test('js template string interpolations', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { VAR, VAR2, VAR3 } from './x'
|
||||
</script>
|
||||
<template>
|
||||
{{ \`\${VAR}VAR2\${VAR3}\` }}
|
||||
</template>
|
||||
`)
|
||||
// VAR2 should not be matched
|
||||
expect(content).toMatch(
|
||||
`return { get VAR() { return VAR }, get VAR3() { return VAR3 } }`,
|
||||
)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
// edge case: last tag in template
|
||||
test('last tag', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { FooBaz, Last } from './x'
|
||||
</script>
|
||||
<template>
|
||||
<FooBaz></FooBaz>
|
||||
<Last/>
|
||||
</template>
|
||||
`)
|
||||
expect(content).toMatch(
|
||||
`return { get FooBaz() { return FooBaz }, get Last() { return Last } }`,
|
||||
)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
test('TS annotations', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { Foo, Bar, Baz, Qux, Fred } from './x'
|
||||
const a = 1
|
||||
function b() {}
|
||||
</script>
|
||||
<template>
|
||||
{{ a as Foo }}
|
||||
{{ b<Bar>() }}
|
||||
{{ Baz }}
|
||||
<Comp v-slot="{ data }: Qux">{{ data }}</Comp>
|
||||
<div v-for="{ z = x as Qux } in list as Fred"/>
|
||||
</template>
|
||||
`)
|
||||
expect(content).toMatch(`return { a, b, get Baz() { return Baz } }`)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
// vuejs/vue#12591
|
||||
test('v-on inline statement', () => {
|
||||
// should not error
|
||||
compile(`
|
||||
<script setup lang="ts">
|
||||
import { foo } from './foo'
|
||||
</script>
|
||||
<template>
|
||||
<div @click="$emit('update:a');"></div>
|
||||
</template>
|
||||
`)
|
||||
})
|
||||
|
||||
test('template ref', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { foo, bar, Baz } from './foo'
|
||||
</script>
|
||||
<template>
|
||||
<div ref="foo"></div>
|
||||
<div ref=""></div>
|
||||
<Baz ref="bar" />
|
||||
</template>
|
||||
`)
|
||||
expect(content).toMatch(
|
||||
'return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }',
|
||||
)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
// https://github.com/nuxt/nuxt/issues/22416
|
||||
test('property access', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { Foo, Bar, Baz } from './foo'
|
||||
</script>
|
||||
<template>
|
||||
<div>{{ Foo.Bar.Baz }}</div>
|
||||
</template>
|
||||
`)
|
||||
expect(content).toMatch('return { get Foo() { return Foo } }')
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
test('spread operator', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { Foo, Bar, Baz } from './foo'
|
||||
</script>
|
||||
<template>
|
||||
<div v-bind="{ ...Foo.Bar.Baz }"></div>
|
||||
</template>
|
||||
`)
|
||||
expect(content).toMatch('return { get Foo() { return Foo } }')
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
test('property access (whitespace)', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { Foo, Bar, Baz } from './foo'
|
||||
</script>
|
||||
<template>
|
||||
<div>{{ Foo . Bar . Baz }}</div>
|
||||
</template>
|
||||
`)
|
||||
expect(content).toMatch('return { get Foo() { return Foo } }')
|
||||
assertCode(content)
|
||||
})
|
||||
})
|
||||
|
||||
describe('inlineTemplate mode', () => {
|
||||
test('should work', () => {
|
||||
const { content } = compile(
|
||||
|
|
|
|||
|
|
@ -0,0 +1,185 @@
|
|||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`TS annotations 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { Foo, Bar, Baz, Qux, Fred } from './x'
|
||||
const a = 1
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
function b() {}
|
||||
|
||||
return { a, b, get Baz() { return Baz } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`attribute expressions 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { bar, baz } from './x'
|
||||
const cond = true
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { cond, get bar() { return bar }, get baz() { return baz } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`components 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { FooBar, FooBaz, FooQux, foo } from './x'
|
||||
const fooBar: FooBar = 1
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { fooBar, get FooBaz() { return FooBaz }, get FooQux() { return FooQux }, get foo() { return foo } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`directive 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { vMyDir } from './x'
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { get vMyDir() { return vMyDir } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`dynamic arguments 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { FooBar, foo, bar, unused, baz } from './x'
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { get FooBar() { return FooBar }, get foo() { return foo }, get bar() { return bar }, get baz() { return baz } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`js template string interpolations 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { VAR, VAR2, VAR3 } from './x'
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { get VAR() { return VAR }, get VAR3() { return VAR3 } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`last tag 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { FooBaz, Last } from './x'
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { get FooBaz() { return FooBaz }, get Last() { return Last } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`property access (whitespace) 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { Foo, Bar, Baz } from './foo'
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { get Foo() { return Foo } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`property access 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { Foo, Bar, Baz } from './foo'
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { get Foo() { return Foo } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`spread operator 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { Foo, Bar, Baz } from './foo'
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { get Foo() { return Foo } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`template ref 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { foo, bar, Baz } from './foo'
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`vue interpolations 1`] = `
|
||||
"import { defineComponent as _defineComponent } from 'vue'
|
||||
import { x, y, z, x$y } from './x'
|
||||
|
||||
export default /*#__PURE__*/_defineComponent({
|
||||
setup(__props, { expose: __expose }) {
|
||||
__expose();
|
||||
|
||||
|
||||
return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
import { assertCode, compileSFCScript as compile } from '../utils'
|
||||
|
||||
// in dev mode, declared bindings are returned as an object from setup()
|
||||
// when using TS, users may import types which should not be returned as
|
||||
// values, so we need to check import usage in the template to determine
|
||||
// what to be returned.
|
||||
|
||||
test('components', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { FooBar, FooBaz, FooQux, foo } from './x'
|
||||
const fooBar: FooBar = 1
|
||||
</script>
|
||||
<template>
|
||||
<FooBaz></FooBaz>
|
||||
<foo-qux/>
|
||||
<foo/>
|
||||
FooBar
|
||||
</template>
|
||||
`)
|
||||
// FooBar: should not be matched by plain text or incorrect case
|
||||
// FooBaz: used as PascalCase component
|
||||
// FooQux: used as kebab-case component
|
||||
// foo: lowercase component
|
||||
expect(content).toMatch(
|
||||
`return { fooBar, get FooBaz() { return FooBaz }, ` +
|
||||
`get FooQux() { return FooQux }, get foo() { return foo } }`,
|
||||
)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
test('directive', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { vMyDir } from './x'
|
||||
</script>
|
||||
<template>
|
||||
<div v-my-dir></div>
|
||||
</template>
|
||||
`)
|
||||
expect(content).toMatch(`return { get vMyDir() { return vMyDir } }`)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
test('dynamic arguments', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { FooBar, foo, bar, unused, baz } from './x'
|
||||
</script>
|
||||
<template>
|
||||
<FooBar #[foo.slotName] />
|
||||
<FooBar #unused />
|
||||
<div :[bar.attrName]="15"></div>
|
||||
<div unused="unused"></div>
|
||||
<div #[\`item:\${baz.key}\`]="{ value }"></div>
|
||||
</template>
|
||||
`)
|
||||
expect(content).toMatch(
|
||||
`return { get FooBar() { return FooBar }, get foo() { return foo }, ` +
|
||||
`get bar() { return bar }, get baz() { return baz } }`,
|
||||
)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
// https://github.com/vuejs/core/issues/4599
|
||||
test('attribute expressions', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { bar, baz } from './x'
|
||||
const cond = true
|
||||
</script>
|
||||
<template>
|
||||
<div :class="[cond ? '' : bar(), 'default']" :style="baz"></div>
|
||||
</template>
|
||||
`)
|
||||
expect(content).toMatch(
|
||||
`return { cond, get bar() { return bar }, get baz() { return baz } }`,
|
||||
)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
test('vue interpolations', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { x, y, z, x$y } from './x'
|
||||
</script>
|
||||
<template>
|
||||
<div :id="z + 'y'">{{ x }} {{ yy }} {{ x$y }}</div>
|
||||
</template>
|
||||
`)
|
||||
// x: used in interpolation
|
||||
// y: should not be matched by {{ yy }} or 'y' in binding exps
|
||||
// x$y: #4274 should escape special chars when creating Regex
|
||||
expect(content).toMatch(
|
||||
`return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }`,
|
||||
)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
// #4340 interpolations in template strings
|
||||
test('js template string interpolations', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { VAR, VAR2, VAR3 } from './x'
|
||||
</script>
|
||||
<template>
|
||||
{{ \`\${VAR}VAR2\${VAR3}\` }}
|
||||
</template>
|
||||
`)
|
||||
// VAR2 should not be matched
|
||||
expect(content).toMatch(
|
||||
`return { get VAR() { return VAR }, get VAR3() { return VAR3 } }`,
|
||||
)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
// edge case: last tag in template
|
||||
test('last tag', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { FooBaz, Last } from './x'
|
||||
</script>
|
||||
<template>
|
||||
<FooBaz></FooBaz>
|
||||
<Last/>
|
||||
</template>
|
||||
`)
|
||||
expect(content).toMatch(
|
||||
`return { get FooBaz() { return FooBaz }, get Last() { return Last } }`,
|
||||
)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
test('TS annotations', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { Foo, Bar, Baz, Qux, Fred } from './x'
|
||||
const a = 1
|
||||
function b() {}
|
||||
</script>
|
||||
<template>
|
||||
{{ a as Foo }}
|
||||
{{ b<Bar>() }}
|
||||
{{ Baz }}
|
||||
<Comp v-slot="{ data }: Qux">{{ data }}</Comp>
|
||||
<div v-for="{ z = x as Qux } in list as Fred"/>
|
||||
</template>
|
||||
`)
|
||||
expect(content).toMatch(`return { a, b, get Baz() { return Baz } }`)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
// vuejs/vue#12591
|
||||
test('v-on inline statement', () => {
|
||||
// should not error
|
||||
compile(`
|
||||
<script setup lang="ts">
|
||||
import { foo } from './foo'
|
||||
</script>
|
||||
<template>
|
||||
<div @click="$emit('update:a');"></div>
|
||||
</template>
|
||||
`)
|
||||
})
|
||||
|
||||
test('template ref', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { foo, bar, Baz } from './foo'
|
||||
</script>
|
||||
<template>
|
||||
<div ref="foo"></div>
|
||||
<div ref=""></div>
|
||||
<Baz ref="bar" />
|
||||
</template>
|
||||
`)
|
||||
expect(content).toMatch(
|
||||
'return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }',
|
||||
)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
// https://github.com/nuxt/nuxt/issues/22416
|
||||
test('property access', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { Foo, Bar, Baz } from './foo'
|
||||
</script>
|
||||
<template>
|
||||
<div>{{ Foo.Bar.Baz }}</div>
|
||||
</template>
|
||||
`)
|
||||
expect(content).toMatch('return { get Foo() { return Foo } }')
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
test('spread operator', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { Foo, Bar, Baz } from './foo'
|
||||
</script>
|
||||
<template>
|
||||
<div v-bind="{ ...Foo.Bar.Baz }"></div>
|
||||
</template>
|
||||
`)
|
||||
expect(content).toMatch('return { get Foo() { return Foo } }')
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
test('property access (whitespace)', () => {
|
||||
const { content } = compile(`
|
||||
<script setup lang="ts">
|
||||
import { Foo, Bar, Baz } from './foo'
|
||||
</script>
|
||||
<template>
|
||||
<div>{{ Foo . Bar . Baz }}</div>
|
||||
</template>
|
||||
`)
|
||||
expect(content).toMatch('return { get Foo() { return Foo } }')
|
||||
assertCode(content)
|
||||
})
|
||||
Loading…
Reference in New Issue