theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(sfc): support referenced types for defineEmits

Browse Source
This commit is contained in:
Evan You
2021-06-28 16:03:27 -04:00
parent afdd2f2835
commit 2973b6c30a
3 changed files with 236 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -746,10 +746,111 @@ return { a, b, c, d, x }
}"
`;
exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (exported interface) 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
export interface Emits { (e: 'foo' | 'bar'): void }
export default _defineComponent({
emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
setup(__props, { expose, emit }: { emit: ({ (e: 'foo' | 'bar'): void }), expose: any, slots: any, attrs: any }) {
expose()
return { emit }
}
})"
`;
exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (exported type alias) 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
export type Emits = { (e: 'foo' | 'bar'): void }
export default _defineComponent({
emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
setup(__props, { expose, emit }: { emit: ({ (e: 'foo' | 'bar'): void }), expose: any, slots: any, attrs: any }) {
expose()
return { emit }
}
})"
`;
exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (interface) 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
interface Emits { (e: 'foo' | 'bar'): void }
export default _defineComponent({
emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
setup(__props, { expose, emit }: { emit: ({ (e: 'foo' | 'bar'): void }), expose: any, slots: any, attrs: any }) {
expose()
return { emit }
}
})"
`;
exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (referenced exported function type) 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
export type Emits = (e: 'foo' | 'bar') => void
export default _defineComponent({
emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
setup(__props, { expose, emit }: { emit: ((e: 'foo' | 'bar') => void), expose: any, slots: any, attrs: any }) {
expose()
return { emit }
}
})"
`;
exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (referenced function type) 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
type Emits = (e: 'foo' | 'bar') => void
export default _defineComponent({
emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
setup(__props, { expose, emit }: { emit: ((e: 'foo' | 'bar') => void), expose: any, slots: any, attrs: any }) {
expose()
return { emit }
}
})"
`;
exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (type alias) 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
type Emits = { (e: 'foo' | 'bar'): void }
export default _defineComponent({
emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
setup(__props, { expose, emit }: { emit: ({ (e: 'foo' | 'bar'): void }), expose: any, slots: any, attrs: any }) {
expose()
return { emit }
}
})"
`;
exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (type literal w/ call signatures) 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
export default _defineComponent({
emits: [\\"foo\\", \\"bar\\", \\"baz\\"] as unknown as undefined,
setup(__props, { expose, emit }: { emit: ({(e: 'foo' | 'bar'): void; (e: 'baz', id: number): void;}), expose: any, slots: any, attrs: any }) {
@@ -766,7 +867,6 @@ return { emit }
exports[`SFC compile <script setup> with TypeScript defineEmits w/ type 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
export default _defineComponent({
emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
setup(__props, { expose, emit }: { emit: ((e: 'foo' | 'bar') => void), expose: any, slots: any, attrs: any }) {
@@ -839,8 +939,7 @@ return { }
exports[`SFC compile <script setup> with TypeScript defineProps w/ type 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
interface Test {}
interface Test {}
type Alias = number[]
@@ -927,7 +1026,6 @@ return { }
exports[`SFC compile <script setup> with TypeScript defineProps/Emit w/ runtime options 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
export default _defineComponent({
props: { foo: String },
emits: ['a', 'b'],

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

@@ -19,7 +19,6 @@ describe('SFC compile <script setup>', () => {
test('defineProps()', () => {
const { content, bindings } = compile(`
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
foo: String
})
@@ -51,7 +50,6 @@ const bar = 1
test('defineProps w/ external definition', () => {
const { content } = compile(`
<script setup>
import { defineProps } from 'vue'
import { propsModel } from './props'
const props = defineProps(propsModel)
</script>
@@ -64,7 +62,6 @@ const bar = 1
test('defineEmit() (deprecated)', () => {
const { content, bindings } = compile(`
<script setup>
import { defineEmit } from 'vue'
const myEmit = defineEmit(['foo', 'bar'])
</script>
`)
@@ -84,7 +81,6 @@ const myEmit = defineEmit(['foo', 'bar'])
test('defineEmits()', () => {
const { content, bindings } = compile(`
<script setup>
import { defineEmits } from 'vue'
const myEmit = defineEmits(['foo', 'bar'])
</script>
`)
@@ -104,7 +100,6 @@ const myEmit = defineEmits(['foo', 'bar'])
test('defineExpose()', () => {
const { content } = compile(`
<script setup>
import { defineExpose } from 'vue'
defineExpose({ foo: 123 })
</script>
`)
@@ -170,7 +165,7 @@ defineExpose({ foo: 123 })
test('should allow defineProps/Emit at the start of imports', () => {
assertCode(
compile(`<script setup>
import { defineProps, defineEmits, ref } from 'vue'
import { ref } from 'vue'
defineProps(['foo'])
defineEmits(['bar'])
const r = ref(0)
@@ -233,7 +228,6 @@ defineExpose({ foo: 123 })
const { content } = compile(
`
<script setup>
import { defineExpose } from 'vue'
const count = ref(0)
defineExpose({ count })
</script>
@@ -494,7 +488,6 @@ defineExpose({ foo: 123 })
test('defineProps/Emit w/ runtime options', () => {
const { content } = compile(`
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
const props = defineProps({ foo: String })
const emit = defineEmits(['a', 'b'])
</script>
@@ -509,7 +502,6 @@ const emit = defineEmits(['a', 'b'])
test('defineProps w/ type', () => {
const { content, bindings } = compile(`
<script setup lang="ts">
import { defineProps } from 'vue'
interface Test {}
type Alias = number[]
@@ -699,7 +691,6 @@ const emit = defineEmits(['a', 'b'])
test('defineEmits w/ type', () => {
const { content } = compile(`
<script setup lang="ts">
import { defineEmits } from 'vue'
const emit = defineEmits<(e: 'foo' | 'bar') => void>()
</script>
`)
@@ -713,7 +704,6 @@ const emit = defineEmits(['a', 'b'])
expect(() =>
compile(`
<script setup lang="ts">
import { defineEmits } from 'vue'
const emit = defineEmits<${type}>()
</script>
`)
@@ -724,7 +714,6 @@ const emit = defineEmits(['a', 'b'])
const type = `{(e: 'foo' | 'bar'): void; (e: 'baz', id: number): void;}`
const { content } = compile(`
<script setup lang="ts">
import { defineEmits } from 'vue'
const emit = defineEmits<${type}>()
</script>
`)
@@ -734,6 +723,78 @@ const emit = defineEmits(['a', 'b'])
`emits: ["foo", "bar", "baz"] as unknown as undefined`
)
})
test('defineEmits w/ type (interface)', () => {
const { content } = compile(`
<script setup lang="ts">
interface Emits { (e: 'foo' | 'bar'): void }
const emit = defineEmits<Emits>()
</script>
`)
assertCode(content)
expect(content).toMatch(`emit: ({ (e: 'foo' | 'bar'): void }),`)
expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
})
test('defineEmits w/ type (exported interface)', () => {
const { content } = compile(`
<script setup lang="ts">
export interface Emits { (e: 'foo' | 'bar'): void }
const emit = defineEmits<Emits>()
</script>
`)
assertCode(content)
expect(content).toMatch(`emit: ({ (e: 'foo' | 'bar'): void }),`)
expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
})
test('defineEmits w/ type (type alias)', () => {
const { content } = compile(`
<script setup lang="ts">
type Emits = { (e: 'foo' | 'bar'): void }
const emit = defineEmits<Emits>()
</script>
`)
assertCode(content)
expect(content).toMatch(`emit: ({ (e: 'foo' | 'bar'): void }),`)
expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
})
test('defineEmits w/ type (exported type alias)', () => {
const { content } = compile(`
<script setup lang="ts">
export type Emits = { (e: 'foo' | 'bar'): void }
const emit = defineEmits<Emits>()
</script>
`)
assertCode(content)
expect(content).toMatch(`emit: ({ (e: 'foo' | 'bar'): void }),`)
expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
})
test('defineEmits w/ type (referenced function type)', () => {
const { content } = compile(`
<script setup lang="ts">
type Emits = (e: 'foo' | 'bar') => void
const emit = defineEmits<Emits>()
</script>
`)
assertCode(content)
expect(content).toMatch(`emit: ((e: 'foo' | 'bar') => void),`)
expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
})
test('defineEmits w/ type (referenced exported function type)', () => {
const { content } = compile(`
<script setup lang="ts">
export type Emits = (e: 'foo' | 'bar') => void
const emit = defineEmits<Emits>()
</script>
`)
assertCode(content)
expect(content).toMatch(`emit: ((e: 'foo' | 'bar') => void),`)
expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
})
})
describe('async/await detection', () => {
@@ -1052,7 +1113,6 @@ const emit = defineEmits(['a', 'b'])
expect(() => {
compile(`<script setup lang="ts">
import { defineEmits } from 'vue'
defineEmits<{}>({})
</script>`)
}).toThrow(`cannot accept both type and non-type arguments`)
@@ -1061,7 +1121,6 @@ const emit = defineEmits(['a', 'b'])
test('defineProps/Emit() referencing local var', () => {
expect(() =>
compile(`<script setup>
import { defineProps } from 'vue'
const bar = 1
defineProps({
foo: {
@@ -1073,7 +1132,6 @@ const emit = defineEmits(['a', 'b'])
expect(() =>
compile(`<script setup>
import { defineEmits } from 'vue'
const bar = 'hello'
defineEmits([bar])
</script>`)
@@ -1083,7 +1141,6 @@ const emit = defineEmits(['a', 'b'])
test('defineProps/Emit() referencing ref declarations', () => {
expect(() =>
compile(`<script setup>
import { defineProps } from 'vue'
ref: bar = 1
defineProps({
bar
@@ -1093,7 +1150,6 @@ const emit = defineEmits(['a', 'b'])
expect(() =>
compile(`<script setup>
import { defineEmits } from 'vue'
ref: bar = 1
defineEmits({
bar
@@ -1105,7 +1161,6 @@ const emit = defineEmits(['a', 'b'])
test('should allow defineProps/Emit() referencing scope var', () => {
assertCode(
compile(`<script setup>
import { defineProps, defineEmits } from 'vue'
const bar = 1
defineProps({
foo: {
@@ -1122,7 +1177,6 @@ const emit = defineEmits(['a', 'b'])
test('should allow defineProps/Emit() referencing imported binding', () => {
assertCode(
compile(`<script setup>
import { defineProps, defineEmits } from 'vue'
import { bar } from './bar'
defineProps({
foo: {
@@ -1361,7 +1415,7 @@ describe('SFC analyze <script> bindings', () => {
it('works for script setup', () => {
const { bindings } = compile(`
<script setup>
import { defineProps, ref as r } from 'vue'
import { ref as r } from 'vue'
defineProps({
foo: String
})