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

feat(sfc): add defineEmits and deprecate defineEmit (#3725)

Browse Source
This commit is contained in:
Eduardo San Martin Morote 2021-06-22 21:02:56 +02:00 committed by GitHub
parent 6b6d566861
commit a137da8a9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 102 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,7 +54,7 @@ return { a }
}" }"
`; `;
exports[`SFC compile <script setup> defineEmit() 1`] = ` exports[`SFC compile <script setup> defineEmits() 1`] = `
"export default { "export default {
expose: [], expose: [],
emits: ['foo', 'bar'], emits: ['foo', 'bar'],
@ -720,7 +720,7 @@ return { a, b, c, d, x }
}" }"
`; `;
exports[`SFC compile <script setup> with TypeScript defineEmit w/ type (type literal w/ call signatures) 1`] = ` exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (type literal w/ call signatures) 1`] = `
"import { defineComponent as _defineComponent } from 'vue' "import { defineComponent as _defineComponent } from 'vue'
@ -741,7 +741,7 @@ return { emit }
})" })"
`; `;
exports[`SFC compile <script setup> with TypeScript defineEmit w/ type 1`] = ` exports[`SFC compile <script setup> with TypeScript defineEmits w/ type 1`] = `
"import { defineComponent as _defineComponent } from 'vue' "import { defineComponent as _defineComponent } from 'vue'

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

@ -49,7 +49,7 @@ const bar = 1
},`) },`)
}) })
test('defineEmit()', () => { test('defineEmit() (deprecated)', () => {
const { content, bindings } = compile(` const { content, bindings } = compile(`
<script setup> <script setup>
import { defineEmit } from 'vue' import { defineEmit } from 'vue'
@ -61,7 +61,28 @@ const myEmit = defineEmit(['foo', 'bar'])
myEmit: BindingTypes.SETUP_CONST myEmit: BindingTypes.SETUP_CONST
}) })
// should remove defineOptions import and call // should remove defineOptions import and call
expect(content).not.toMatch('defineEmit') expect(content).not.toMatch(/defineEmits?/)
// should generate correct setup signature
expect(content).toMatch(`setup(__props, { emit: myEmit }) {`)
// should include context options in default export
expect(content).toMatch(`export default {
expose: [],
emits: ['foo', 'bar'],`)
})
test('defineEmits()', () => {
const { content, bindings } = compile(`
<script setup>
import { defineEmits } from 'vue'
const myEmit = defineEmits(['foo', 'bar'])
</script>
`)
assertCode(content)
expect(bindings).toStrictEqual({
myEmit: BindingTypes.SETUP_CONST
})
// should remove defineOptions import and call
expect(content).not.toMatch('defineEmits')
// should generate correct setup signature // should generate correct setup signature
expect(content).toMatch(`setup(__props, { emit: myEmit }) {`) expect(content).toMatch(`setup(__props, { emit: myEmit }) {`)
// should include context options in default export // should include context options in default export
@ -145,9 +166,9 @@ const myEmit = defineEmit(['foo', 'bar'])
test('should allow defineProps/Emit at the start of imports', () => { test('should allow defineProps/Emit at the start of imports', () => {
assertCode( assertCode(
compile(`<script setup> compile(`<script setup>
import { defineProps, defineEmit, ref } from 'vue' import { defineProps, defineEmits, ref } from 'vue'
defineProps(['foo']) defineProps(['foo'])
defineEmit(['bar']) defineEmits(['bar'])
const r = ref(0) const r = ref(0)
</script>`).content </script>`).content
) )
@ -450,9 +471,9 @@ const myEmit = defineEmit(['foo', 'bar'])
test('defineProps/Emit w/ runtime options', () => { test('defineProps/Emit w/ runtime options', () => {
const { content } = compile(` const { content } = compile(`
<script setup lang="ts"> <script setup lang="ts">
import { defineProps, defineEmit } from 'vue' import { defineProps, defineEmits } from 'vue'
const props = defineProps({ foo: String }) const props = defineProps({ foo: String })
const emit = defineEmit(['a', 'b']) const emit = defineEmits(['a', 'b'])
</script> </script>
`) `)
assertCode(content) assertCode(content)
@ -549,11 +570,11 @@ const emit = defineEmit(['a', 'b'])
}) })
}) })
test('defineEmit w/ type', () => { test('defineEmits w/ type', () => {
const { content } = compile(` const { content } = compile(`
<script setup lang="ts"> <script setup lang="ts">
import { defineEmit } from 'vue' import { defineEmits } from 'vue'
const emit = defineEmit<(e: 'foo' | 'bar') => void>() const emit = defineEmits<(e: 'foo' | 'bar') => void>()
</script> </script>
`) `)
assertCode(content) assertCode(content)
@ -561,24 +582,24 @@ const emit = defineEmit(['a', 'b'])
expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`) expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
}) })
test('defineEmit w/ type (union)', () => { test('defineEmits w/ type (union)', () => {
const type = `((e: 'foo' | 'bar') => void) | ((e: 'baz', id: number) => void)` const type = `((e: 'foo' | 'bar') => void) | ((e: 'baz', id: number) => void)`
expect(() => expect(() =>
compile(` compile(`
<script setup lang="ts"> <script setup lang="ts">
import { defineEmit } from 'vue' import { defineEmits } from 'vue'
const emit = defineEmit<${type}>() const emit = defineEmits<${type}>()
</script> </script>
`) `)
).toThrow() ).toThrow()
}) })
test('defineEmit w/ type (type literal w/ call signatures)', () => { test('defineEmits w/ type (type literal w/ call signatures)', () => {
const type = `{(e: 'foo' | 'bar'): void; (e: 'baz', id: number): void;}` const type = `{(e: 'foo' | 'bar'): void; (e: 'baz', id: number): void;}`
const { content } = compile(` const { content } = compile(`
<script setup lang="ts"> <script setup lang="ts">
import { defineEmit } from 'vue' import { defineEmits } from 'vue'
const emit = defineEmit<${type}>() const emit = defineEmits<${type}>()
</script> </script>
`) `)
assertCode(content) assertCode(content)
@ -906,8 +927,8 @@ const emit = defineEmit(['a', 'b'])
expect(() => { expect(() => {
compile(`<script setup lang="ts"> compile(`<script setup lang="ts">
import { defineEmit } from 'vue' import { defineEmits } from 'vue'
defineEmit<{}>({}) defineEmits<{}>({})
</script>`) </script>`)
}).toThrow(`cannot accept both type and non-type arguments`) }).toThrow(`cannot accept both type and non-type arguments`)
}) })
@ -927,9 +948,9 @@ const emit = defineEmit(['a', 'b'])
expect(() => expect(() =>
compile(`<script setup> compile(`<script setup>
import { defineEmit } from 'vue' import { defineEmits } from 'vue'
const bar = 'hello' const bar = 'hello'
defineEmit([bar]) defineEmits([bar])
</script>`) </script>`)
).toThrow(`cannot reference locally declared variables`) ).toThrow(`cannot reference locally declared variables`)
}) })
@ -947,9 +968,9 @@ const emit = defineEmit(['a', 'b'])
expect(() => expect(() =>
compile(`<script setup> compile(`<script setup>
import { defineEmit } from 'vue' import { defineEmits } from 'vue'
ref: bar = 1 ref: bar = 1
defineEmit({ defineEmits({
bar bar
}) })
</script>`) </script>`)
@ -959,14 +980,14 @@ const emit = defineEmit(['a', 'b'])
test('should allow defineProps/Emit() referencing scope var', () => { test('should allow defineProps/Emit() referencing scope var', () => {
assertCode( assertCode(
compile(`<script setup> compile(`<script setup>
import { defineProps, defineEmit } from 'vue' import { defineProps, defineEmits } from 'vue'
const bar = 1 const bar = 1
defineProps({ defineProps({
foo: { foo: {
default: bar => bar + 1 default: bar => bar + 1
} }
}) })
defineEmit({ defineEmits({
foo: bar => bar > 1 foo: bar => bar > 1
}) })
</script>`).content </script>`).content
@ -976,14 +997,14 @@ const emit = defineEmit(['a', 'b'])
test('should allow defineProps/Emit() referencing imported binding', () => { test('should allow defineProps/Emit() referencing imported binding', () => {
assertCode( assertCode(
compile(`<script setup> compile(`<script setup>
import { defineProps, defineEmit } from 'vue' import { defineProps, defineEmits } from 'vue'
import { bar } from './bar' import { bar } from './bar'
defineProps({ defineProps({
foo: { foo: {
default: () => bar default: () => bar
} }
}) })
defineEmit({ defineEmits({
foo: () => bar > 1 foo: () => bar > 1
}) })
</script>`).content </script>`).content

27
packages/compiler-sfc/src/compileScript.ts
View File

@ -36,6 +36,7 @@ import { rewriteDefault } from './rewriteDefault'
const DEFINE_PROPS = 'defineProps' const DEFINE_PROPS = 'defineProps'
const DEFINE_EMIT = 'defineEmit' const DEFINE_EMIT = 'defineEmit'
const DEFINE_EMITS = 'defineEmits'
export interface SFCScriptCompileOptions { export interface SFCScriptCompileOptions {
/** /**
@ -286,10 +287,10 @@ export function compileScript(
return false return false
} }
function processDefineEmit(node: Node): boolean { function processDefineEmits(node: Node): boolean {
if (isCallOf(node, DEFINE_EMIT)) { if (isCallOf(node, DEFINE_EMIT) || isCallOf(node, DEFINE_EMITS)) {
if (hasDefineEmitCall) { if (hasDefineEmitCall) {
error(`duplicate ${DEFINE_EMIT}() call`, node) error(`duplicate ${DEFINE_EMITS}() call`, node)
} }
hasDefineEmitCall = true hasDefineEmitCall = true
emitRuntimeDecl = node.arguments[0] emitRuntimeDecl = node.arguments[0]
@ -309,7 +310,7 @@ export function compileScript(
emitTypeDecl = typeArg emitTypeDecl = typeArg
} else { } else {
error( error(
`type argument passed to ${DEFINE_EMIT}() must be a function type ` + `type argument passed to ${DEFINE_EMITS}() must be a function type ` +
`or a literal type with call signatures.`, `or a literal type with call signatures.`,
typeArg typeArg
) )
@ -627,7 +628,9 @@ export function compileScript(
const existing = userImports[local] const existing = userImports[local]
if ( if (
source === 'vue' && source === 'vue' &&
(imported === DEFINE_PROPS || imported === DEFINE_EMIT) (imported === DEFINE_PROPS ||
imported === DEFINE_EMIT ||
imported === DEFINE_EMITS)
) { ) {
removeSpecifier(i) removeSpecifier(i)
} else if (existing) { } else if (existing) {
@ -651,11 +654,11 @@ export function compileScript(
} }
} }
// process `defineProps` and `defineEmit` calls // process `defineProps` and `defineEmit(s)` calls
if ( if (
node.type === 'ExpressionStatement' && node.type === 'ExpressionStatement' &&
(processDefineProps(node.expression) || (processDefineProps(node.expression) ||
processDefineEmit(node.expression)) processDefineEmits(node.expression))
) { ) {
s.remove(node.start! + startOffset, node.end! + startOffset) s.remove(node.start! + startOffset, node.end! + startOffset)
} }
@ -669,14 +672,14 @@ export function compileScript(
decl.id.end! decl.id.end!
) )
} }
const isDefineEmit = processDefineEmit(decl.init) const isDefineEmits = processDefineEmits(decl.init)
if (isDefineEmit) { if (isDefineEmits) {
emitIdentifier = scriptSetup.content.slice( emitIdentifier = scriptSetup.content.slice(
decl.id.start!, decl.id.start!,
decl.id.end! decl.id.end!
) )
} }
if (isDefineProps || isDefineEmit) if (isDefineProps || isDefineEmits)
if (node.declarations.length === 1) { if (node.declarations.length === 1) {
s.remove(node.start! + startOffset, node.end! + startOffset) s.remove(node.start! + startOffset, node.end! + startOffset)
} else { } else {
@ -1040,7 +1043,9 @@ function walkDeclaration(
for (const { id, init } of node.declarations) { for (const { id, init } of node.declarations) {
const isDefineCall = !!( const isDefineCall = !!(
isConst && isConst &&
(isCallOf(init, DEFINE_PROPS) || isCallOf(init, DEFINE_EMIT)) (isCallOf(init, DEFINE_PROPS) ||
isCallOf(init, DEFINE_EMIT) ||
isCallOf(init, DEFINE_EMITS))
) )
if (id.type === 'Identifier') { if (id.type === 'Identifier') {
let bindingType let bindingType

6
packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
View File

@ -5,15 +5,15 @@ import {
render, render,
SetupContext SetupContext
} from '@vue/runtime-test' } from '@vue/runtime-test'
import { defineEmit, defineProps, useContext } from '../src/apiSetupHelpers' import { defineEmits, defineProps, useContext } from '../src/apiSetupHelpers'
describe('SFC <script setup> helpers', () => { describe('SFC <script setup> helpers', () => {
test('should warn runtime usage', () => { test('should warn runtime usage', () => {
defineProps() defineProps()
expect(`defineProps() is a compiler-hint`).toHaveBeenWarned() expect(`defineProps() is a compiler-hint`).toHaveBeenWarned()
defineEmit() defineEmits()
expect(`defineEmit() is a compiler-hint`).toHaveBeenWarned() expect(`defineEmits() is a compiler-hint`).toHaveBeenWarned()
}) })
test('useContext (no args)', () => { test('useContext (no args)', () => {

11
packages/runtime-core/src/apiSetupHelpers.ts
View File

@ -38,17 +38,17 @@ export function defineProps() {
return null as any return null as any
} }
export function defineEmit< export function defineEmits<
TypeEmit = undefined, TypeEmit = undefined,
E extends EmitsOptions = EmitsOptions, E extends EmitsOptions = EmitsOptions,
EE extends string = string, EE extends string = string,
InferredEmit = EmitFn<E> InferredEmit = EmitFn<E>
>(emitOptions?: E | EE[]): TypeEmit extends undefined ? InferredEmit : TypeEmit >(emitOptions?: E | EE[]): TypeEmit extends undefined ? InferredEmit : TypeEmit
// implementation // implementation
export function defineEmit() { export function defineEmits() {
if (__DEV__) { if (__DEV__) {
warn( warn(
`defineEmit() is a compiler-hint helper that is only usable inside ` + `defineEmits() is a compiler-hint helper that is only usable inside ` +
`<script setup> of a single file component. Its arguments should be ` + `<script setup> of a single file component. Its arguments should be ` +
`compiled away and passing it at runtime has no effect.` `compiled away and passing it at runtime has no effect.`
) )
@ -56,6 +56,11 @@ export function defineEmit() {
return null as any return null as any
} }
/**
* @deprecated use `defineEmits` instead.
*/
export const defineEmit = defineEmits
export function useContext(): SetupContext { export function useContext(): SetupContext {
const i = getCurrentInstance()! const i = getCurrentInstance()!
if (__DEV__ && !i) { if (__DEV__ && !i) {

7
packages/runtime-core/src/index.ts
View File

@ -44,7 +44,12 @@ export { provide, inject } from './apiInject'
export { nextTick } from './scheduler' export { nextTick } from './scheduler'
export { defineComponent } from './apiDefineComponent' export { defineComponent } from './apiDefineComponent'
export { defineAsyncComponent } from './apiAsyncComponent' export { defineAsyncComponent } from './apiAsyncComponent'
export { defineProps, defineEmit, useContext } from './apiSetupHelpers' export {
defineProps,
defineEmits,
defineEmit,
useContext
} from './apiSetupHelpers'
// Advanced API ---------------------------------------------------------------- // Advanced API ----------------------------------------------------------------

4
packages/sfc-playground/src/codemirror/CodeMirror.vue
View File

@ -3,7 +3,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, defineProps, defineEmit, watchEffect } from 'vue' import { ref, onMounted, defineProps, defineEmits, watchEffect } from 'vue'
import { debounce } from '../utils' import { debounce } from '../utils'
import CodeMirror from './codemirror' import CodeMirror from './codemirror'
@ -24,7 +24,7 @@ const props = defineProps({
} }
}) })
const emit = defineEmit<(e: 'change', value: string) => void>() const emit = defineEmits<(e: 'change', value: string) => void>()
onMounted(() => { onMounted(() => {
const addonOptions = { const addonOptions = {

24
test-dts/setupHelpers.test-d.ts
View File

@ -2,6 +2,7 @@ import {
expectType, expectType,
defineProps, defineProps,
defineEmit, defineEmit,
defineEmits,
useContext, useContext,
Slots, Slots,
describe describe
@ -49,8 +50,8 @@ describe('defineProps w/ runtime declaration', () => {
props2.baz props2.baz
}) })
describe('defineEmit w/ type declaration', () => { describe('defineEmits w/ type declaration', () => {
const emit = defineEmit<(e: 'change') => void>() const emit = defineEmits<(e: 'change') => void>()
emit('change') emit('change')
// @ts-expect-error // @ts-expect-error
emit() emit()
@ -58,7 +59,7 @@ describe('defineEmit w/ type declaration', () => {
emit('bar') emit('bar')
type Emits = { (e: 'foo' | 'bar'): void; (e: 'baz', id: number): void } type Emits = { (e: 'foo' | 'bar'): void; (e: 'baz', id: number): void }
const emit2 = defineEmit<Emits>() const emit2 = defineEmits<Emits>()
emit2('foo') emit2('foo')
emit2('bar') emit2('bar')
@ -67,8 +68,8 @@ describe('defineEmit w/ type declaration', () => {
emit2('baz') emit2('baz')
}) })
describe('defineEmit w/ runtime declaration', () => { describe('defineEmits w/ runtime declaration', () => {
const emit = defineEmit({ const emit = defineEmits({
foo: () => {}, foo: () => {},
bar: null bar: null
}) })
@ -77,13 +78,24 @@ describe('defineEmit w/ runtime declaration', () => {
// @ts-expect-error // @ts-expect-error
emit('baz') emit('baz')
const emit2 = defineEmit(['foo', 'bar']) const emit2 = defineEmits(['foo', 'bar'])
emit2('foo') emit2('foo')
emit2('bar', 123) emit2('bar', 123)
// @ts-expect-error // @ts-expect-error
emit2('baz') emit2('baz')
}) })
describe('deprecated defineEmit', () => {
const emit = defineEmit({
foo: () => {},
bar: null
})
emit('foo')
emit('bar', 123)
// @ts-expect-error
emit('baz')
})
describe('useContext', () => { describe('useContext', () => {
const { attrs, emit, slots } = useContext() const { attrs, emit, slots } = useContext()
expectType<Record<string, unknown>>(attrs) expectType<Record<string, unknown>>(attrs)