Skip to content

Commit

Permalink
feat(sfc): support referenced types for defineEmits
Browse files Browse the repository at this point in the history
  • Loading branch information
@yyx990803
yyx990803 committed Jun 28, 2021
1 parent afdd2f2 commit 2973b6c
Show file tree
Hide file tree
Showing 3 changed files with 236 additions and 76 deletions.
108 changes: 103 additions & 5 deletions packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -746,10 +746,111 @@ return { a, b, c, d, x }
}"
`;
exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (type literal w/ call signatures) 1`] = `
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 }) {
Expand All @@ -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 }) {
Expand Down Expand Up @@ -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[]
Expand Down Expand Up @@ -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'],
Expand Down
94 changes: 74 additions & 20 deletions packages/compiler-sfc/__tests__/compileScript.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
})
Expand Down Expand Up @@ -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>
Expand All @@ -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>
`)
Expand All @@ -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>
`)
Expand All @@ -104,7 +100,6 @@ const myEmit = defineEmits(['foo', 'bar'])
test('defineExpose()', () => {
const { content } = compile(`
<script setup>
import { defineExpose } from 'vue'
defineExpose({ foo: 123 })
</script>
`)
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -233,7 +228,6 @@ defineExpose({ foo: 123 })
const { content } = compile(
`
<script setup>
import { defineExpose } from 'vue'
const count = ref(0)
defineExpose({ count })
</script>
Expand Down Expand Up @@ -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>
Expand All @@ -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[]
Expand Down Expand Up @@ -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>
`)
Expand All @@ -713,7 +704,6 @@ const emit = defineEmits(['a', 'b'])
expect(() =>
compile(`
<script setup lang="ts">
import { defineEmits } from 'vue'
const emit = defineEmits<${type}>()
</script>
`)
Expand All @@ -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>
`)
Expand All @@ -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', () => {
Expand Down Expand Up @@ -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`)
Expand All @@ -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: {
Expand All @@ -1073,7 +1132,6 @@ const emit = defineEmits(['a', 'b'])

expect(() =>
compile(`<script setup>
import { defineEmits } from 'vue'
const bar = 'hello'
defineEmits([bar])
</script>`)
Expand All @@ -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
Expand All @@ -1093,7 +1150,6 @@ const emit = defineEmits(['a', 'b'])

expect(() =>
compile(`<script setup>
import { defineEmits } from 'vue'
ref: bar = 1
defineEmits({
bar
Expand All @@ -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: {
Expand All @@ -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: {
Expand Down Expand Up @@ -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
})
Expand Down
Loading

0 comments on commit 2973b6c

Please sign in to comment.