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

fix(runtime-core): fix props/emits resolving with global mixins

Browse Source 
fix #1975
This commit is contained in:
Evan You 2020-08-31 18:32:07 -04:00
parent 2bbeea9a51
commit 8ed0b342d4
8 changed files with 162 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
packages/runtime-core/__tests__/componentEmits.spec.ts
View File

@ -178,40 +178,13 @@ describe('component: emit', () => {
expect(fn).toHaveBeenCalledTimes(1)
})
describe('isEmitListener', () => {
test('array option', () => {
const def1 = { emits: ['click'] }
expect(isEmitListener(def1, 'onClick')).toBe(true)
expect(isEmitListener(def1, 'onclick')).toBe(false)
expect(isEmitListener(def1, 'onBlick')).toBe(false)
})
test('object option', () => {
const def2 = { emits: { click: null } }
expect(isEmitListener(def2, 'onClick')).toBe(true)
expect(isEmitListener(def2, 'onclick')).toBe(false)
expect(isEmitListener(def2, 'onBlick')).toBe(false)
})
test('with mixins and extends', () => {
const mixin1 = { emits: ['foo'] }
const mixin2 = { emits: ['bar'] }
const extend = { emits: ['baz'] }
const def3 = {
mixins: [mixin1, mixin2],
extends: extend
}
expect(isEmitListener(def3, 'onFoo')).toBe(true)
expect(isEmitListener(def3, 'onBar')).toBe(true)
expect(isEmitListener(def3, 'onBaz')).toBe(true)
expect(isEmitListener(def3, 'onclick')).toBe(false)
expect(isEmitListener(def3, 'onBlick')).toBe(false)
})
test('.once listeners', () => {
const def2 = { emits: { click: null } }
expect(isEmitListener(def2, 'onClickOnce')).toBe(true)
expect(isEmitListener(def2, 'onclickOnce')).toBe(false)
})
test('isEmitListener', () => {
const options = { click: null }
expect(isEmitListener(options, 'onClick')).toBe(true)
expect(isEmitListener(options, 'onclick')).toBe(false)
expect(isEmitListener(options, 'onBlick')).toBe(false)
// .once listeners
expect(isEmitListener(options, 'onClickOnce')).toBe(true)
expect(isEmitListener(options, 'onclickOnce')).toBe(false)
})
})

43
packages/runtime-core/__tests__/componentProps.spec.ts
View File

@ -7,7 +7,8 @@ import {
FunctionalComponent,
defineComponent,
ref,
serializeInner
serializeInner,
createApp
} from '@vue/runtime-test'
import { render as domRender, nextTick } from 'vue'
@ -309,4 +310,44 @@ describe('component props', () => {
expect(setupProps).toMatchObject(props)
expect(renderProxy.$props).toMatchObject(props)
})
test('merging props from global mixins', () => {
let setupProps: any
let renderProxy: any
const M1 = {
props: ['m1']
}
const M2 = {
props: { m2: null }
}
const Comp = {
props: ['self'],
setup(props: any) {
setupProps = props
},
render(this: any) {
renderProxy = this
return h('div', [this.self, this.m1, this.m2])
}
}
const props = {
self: 'from self, ',
m1: 'from mixin 1, ',
m2: 'from mixin 2'
}
const app = createApp(Comp, props)
app.mixin(M1)
app.mixin(M2)
const root = nodeOps.createElement('div')
app.mount(root)
expect(serializeInner(root)).toMatch(
`from self, from mixin 1, from mixin 2`
)
expect(setupProps).toMatchObject(props)
expect(renderProxy.$props).toMatchObject(props)
})
})

4
packages/runtime-core/src/apiCreateApp.ts
View File

@ -33,6 +33,7 @@ export interface App<HostElement = any> {
provide<T>(key: InjectionKey<T> | string, value: T): this
// internal, but we need to expose these for the server-renderer and devtools
_uid: number
_component: ConcreteComponent
_props: Data | null
_container: HostElement | null
@ -108,6 +109,8 @@ export type CreateAppFunction<HostElement> = (
rootProps?: Data | null
) => App<HostElement>
let uid = 0
export function createAppAPI<HostElement>(
render: RootRenderFunction,
hydrate?: RootHydrateFunction
@ -124,6 +127,7 @@ export function createAppAPI<HostElement>(
let isMounted = false
const app: App = (context.app = {
_uid: uid++,
_component: rootComponent as ConcreteComponent,
_props: rootProps,
_container: null,

39
packages/runtime-core/src/component.ts
View File

@ -18,7 +18,8 @@ import {
import {
ComponentPropsOptions,
NormalizedPropsOptions,
initProps
initProps,
normalizePropsOptions
} from './componentProps'
import { Slots, initSlots, InternalSlots } from './componentSlots'
import { warn } from './warning'
@ -30,7 +31,8 @@ import {
EmitsOptions,
ObjectEmitsOptions,
EmitFn,
emit
emit,
normalizeEmitsOptions
} from './componentEmits'
import {
EMPTY_OBJ,
@ -72,11 +74,11 @@ export interface ComponentInternalOptions {
/**
* @internal
*/
__props?: NormalizedPropsOptions | []
__props?: Record<number, NormalizedPropsOptions>
/**
* @internal
*/
__emits?: ObjectEmitsOptions
__emits?: Record<number, ObjectEmitsOptions | null>
/**
* @internal
*/
@ -231,6 +233,16 @@ export interface ComponentInternalInstance {
* @internal
*/
directives: Record<string, Directive> | null
/**
* reoslved props options
* @internal
*/
propsOptions: NormalizedPropsOptions
/**
* resolved emits options
* @internal
*/
emitsOptions: ObjectEmitsOptions | null
// the rest are only for stateful components ---------------------------------
@ -254,14 +266,17 @@ export interface ComponentInternalInstance {
*/
ctx: Data
// internal state
// state
data: Data
props: Data
attrs: Data
slots: InternalSlots
refs: Data
emit: EmitFn
// used for keeping track of .once event handlers on components
/**
* used for keeping track of .once event handlers on components
* @internal
*/
emitted: Record<string, boolean> | null
/**
@ -387,6 +402,14 @@ export function createComponentInstance(
components: null,
directives: null,
// resolved props and emits options
propsOptions: normalizePropsOptions(type, appContext),
emitsOptions: normalizeEmitsOptions(type, appContext),
// emit
emit: null as any, // to be set immediately
emitted: null,
// state
ctx: EMPTY_OBJ,
data: EMPTY_OBJ,
@ -419,9 +442,7 @@ export function createComponentInstance(
a: null,
rtg: null,
rtc: null,
ec: null,
emit: null as any, // to be set immediately
emitted: null
ec: null
}
if (__DEV__) {
instance.ctx = createRenderContext(instance)

64
packages/runtime-core/src/componentEmits.ts
View File

@ -8,12 +8,16 @@ import {
isFunction,
extend
} from '@vue/shared'
import { ComponentInternalInstance, ConcreteComponent } from './component'
import {
ComponentInternalInstance,
ComponentOptions,
ConcreteComponent
} from './component'
import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
import { warn } from './warning'
import { normalizePropsOptions } from './componentProps'
import { UnionToIntersection } from './helpers/typeUtils'
import { devtoolsComponentEmit } from './devtools'
import { AppContext } from './apiCreateApp'
export type ObjectEmitsOptions = Record<
string,
@ -44,10 +48,12 @@ export function emit(
const props = instance.vnode.props || EMPTY_OBJ
if (__DEV__) {
const options = normalizeEmitsOptions(instance.type)
if (options) {
if (!(event in options)) {
const propsOptions = normalizePropsOptions(instance.type)[0]
const {
emitsOptions,
propsOptions: [propsOptions]
} = instance
if (emitsOptions) {
if (!(event in emitsOptions)) {
if (!propsOptions || !(`on` + capitalize(event) in propsOptions)) {
warn(
`Component emitted event "${event}" but it is neither declared in ` +
@ -55,7 +61,7 @@ export function emit(
)
}
} else {
const validator = options[event]
const validator = emitsOptions[event]
if (isFunction(validator)) {
const isValid = validator(...args)
if (!isValid) {
@ -98,11 +104,16 @@ export function emit(
}
}
function normalizeEmitsOptions(
comp: ConcreteComponent
): ObjectEmitsOptions | undefined {
if (hasOwn(comp, '__emits')) {
return comp.__emits
export function normalizeEmitsOptions(
comp: ConcreteComponent,
appContext: AppContext,
asMixin = false
): ObjectEmitsOptions | null {
const appId = appContext.app ? appContext.app._uid : -1
const cache = comp.__emits || (comp.__emits = {})
const cached = cache[appId]
if (cached !== undefined) {
return cached
}
const raw = comp.emits
@ -111,18 +122,23 @@ function normalizeEmitsOptions(
// apply mixin/extends props
let hasExtends = false
if (__FEATURE_OPTIONS_API__ && !isFunction(comp)) {
if (comp.extends) {
const extendEmits = (raw: ComponentOptions) => {
hasExtends = true
extend(normalized, normalizeEmitsOptions(comp.extends))
extend(normalized, normalizeEmitsOptions(raw, appContext, true))
}
if (!asMixin && appContext.mixins.length) {
appContext.mixins.forEach(extendEmits)
}
if (comp.extends) {
extendEmits(comp.extends)
}
if (comp.mixins) {
hasExtends = true
comp.mixins.forEach(m => extend(normalized, normalizeEmitsOptions(m)))
comp.mixins.forEach(extendEmits)
}
}
if (!raw && !hasExtends) {
return (comp.__emits = undefined)
return (cache[appId] = null)
}
if (isArray(raw)) {
@ -130,20 +146,22 @@ function normalizeEmitsOptions(
} else {
extend(normalized, raw)
}
return (comp.__emits = normalized)
return (cache[appId] = normalized)
}
// Check if an incoming prop key is a declared emit event listener.
// e.g. With `emits: { click: null }`, props named `onClick` and `onclick` are
// both considered matched listeners.
export function isEmitListener(comp: ConcreteComponent, key: string): boolean {
let emits: ObjectEmitsOptions | undefined
if (!isOn(key) || !(emits = normalizeEmitsOptions(comp))) {
export function isEmitListener(
options: ObjectEmitsOptions | null,
key: string
): boolean {
if (!options || !isOn(key)) {
return false
}
key = key.replace(/Once$/, '')
return (
hasOwn(emits, key[2].toLowerCase() + key.slice(3)) ||
hasOwn(emits, key.slice(2))
hasOwn(options, key[2].toLowerCase() + key.slice(3)) ||
hasOwn(options, key.slice(2))
)
}

8
packages/runtime-core/src/componentOptions.ts
View File

@ -42,11 +42,7 @@ import {
WritableComputedOptions,
toRaw
} from '@vue/reactivity'
import {
ComponentObjectPropsOptions,
ExtractPropTypes,
normalizePropsOptions
} from './componentProps'
import { ComponentObjectPropsOptions, ExtractPropTypes } from './componentProps'
import { EmitsOptions } from './componentEmits'
import { Directive } from './directives'
import {
@ -431,7 +427,7 @@ export function applyOptions(
const checkDuplicateProperties = __DEV__ ? createDuplicateChecker() : null
if (__DEV__) {
const propsOptions = normalizePropsOptions(options)[0]
const [propsOptions] = instance.propsOptions
if (propsOptions) {
for (const key in propsOptions) {
checkDuplicateProperties!(OptionTypes.PROPS, key)

48
packages/runtime-core/src/componentProps.ts
View File

@ -31,6 +31,7 @@ import {
} from './component'
import { isEmitListener } from './componentEmits'
import { InternalObjectKey } from './vnode'
import { AppContext } from './apiCreateApp'
export type ComponentPropsOptions<P = Data> =
| ComponentObjectPropsOptions<P>
@ -107,7 +108,8 @@ type NormalizedProp =
// normalized value is a tuple of the actual normalized options
// and an array of prop keys that need value casting (booleans and defaults)
export type NormalizedPropsOptions = [Record<string, NormalizedProp>, string[]]
export type NormalizedProps = Record<string, NormalizedProp>
export type NormalizedPropsOptions = [NormalizedProps, string[]] | []
export function initProps(
instance: ComponentInternalInstance,
@ -121,7 +123,7 @@ export function initProps(
setFullProps(instance, rawProps, props, attrs)
// validation
if (__DEV__) {
validateProps(props, instance.type)
validateProps(props, instance)
}
if (isStateful) {
@ -151,7 +153,7 @@ export function updateProps(
vnode: { patchFlag }
} = instance
const rawCurrentProps = toRaw(props)
const [options] = normalizePropsOptions(instance.type)
const [options] = instance.propsOptions
if (
// always force full diff if hmr is enabled
@ -236,7 +238,7 @@ export function updateProps(
trigger(instance, TriggerOpTypes.SET, '$attrs')
if (__DEV__ && rawProps) {
validateProps(props, instance.type)
validateProps(props, instance)
}
}
@ -246,7 +248,7 @@ function setFullProps(
props: Data,
attrs: Data
) {
const [options, needCastKeys] = normalizePropsOptions(instance.type)
const [options, needCastKeys] = instance.propsOptions
if (rawProps) {
for (const key in rawProps) {
const value = rawProps[key]
@ -259,7 +261,7 @@ function setFullProps(
let camelKey
if (options && hasOwn(options, (camelKey = camelize(key)))) {
props[camelKey] = value
} else if (!isEmitListener(instance.type, key)) {
} else if (!isEmitListener(instance.emitsOptions, key)) {
// Any non-declared (either as a prop or an emitted event) props are put
// into a separate `attrs` object for spreading. Make sure to preserve
// original key casing
@ -283,7 +285,7 @@ function setFullProps(
}
function resolvePropValue(
options: NormalizedPropsOptions[0],
options: NormalizedProps,
props: Data,
key: string,
value: unknown
@ -315,10 +317,15 @@ function resolvePropValue(
}
export function normalizePropsOptions(
comp: ConcreteComponent
): NormalizedPropsOptions | [] {
if (comp.__props) {
return comp.__props
comp: ConcreteComponent,
appContext: AppContext,
asMixin = false
): NormalizedPropsOptions {
const appId = appContext.app ? appContext.app._uid : -1
const cache = comp.__props || (comp.__props = {})
const cached = cache[appId]
if (cached) {
return cached
}
const raw = comp.props
@ -329,22 +336,24 @@ export function normalizePropsOptions(
let hasExtends = false
if (__FEATURE_OPTIONS_API__ && !isFunction(comp)) {
const extendProps = (raw: ComponentOptions) => {
const [props, keys] = normalizePropsOptions(raw)
hasExtends = true
const [props, keys] = normalizePropsOptions(raw, appContext, true)
extend(normalized, props)
if (keys) needCastKeys.push(...keys)
}
if (!asMixin && appContext.mixins.length) {
appContext.mixins.forEach(extendProps)
}
if (comp.extends) {
hasExtends = true
extendProps(comp.extends)
}
if (comp.mixins) {
hasExtends = true
comp.mixins.forEach(extendProps)
}
}
if (!raw && !hasExtends) {
return (comp.__props = EMPTY_ARR)
return (cache[appId] = EMPTY_ARR)
}
if (isArray(raw)) {
@ -381,9 +390,8 @@ export function normalizePropsOptions(
}
}
}
const normalizedEntry: NormalizedPropsOptions = [normalized, needCastKeys]
comp.__props = normalizedEntry
return normalizedEntry
return (cache[appId] = [normalized, needCastKeys])
}
// use function string name to check type constructors
@ -416,9 +424,9 @@ function getTypeIndex(
/**
* dev only
*/
function validateProps(props: Data, comp: ConcreteComponent) {
function validateProps(props: Data, instance: ComponentInternalInstance) {
const rawValues = toRaw(props)
const options = normalizePropsOptions(comp)[0]
const options = instance.propsOptions[0]
for (const key in options) {
let opt = options[key]
if (opt == null) continue

14
packages/runtime-core/src/componentPublicInstance.ts
View File

@ -29,7 +29,6 @@ import {
resolveMergedOptions,
isInBeforeCreate
} from './componentOptions'
import { normalizePropsOptions } from './componentProps'
import { EmitsOptions, EmitFn } from './componentEmits'
import { Slots } from './componentSlots'
import {
@ -250,7 +249,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
} else if (
// only cache other properties when instance has declared (thus stable)
// props
(normalizedProps = normalizePropsOptions(type)[0]) &&
(normalizedProps = instance.propsOptions[0]) &&
hasOwn(normalizedProps, key)
) {
accessCache![key] = AccessTypes.PROPS
@ -354,7 +353,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
has(
{
_: { data, setupState, accessCache, ctx, type, appContext }
_: { data, setupState, accessCache, ctx, appContext, propsOptions }
}: ComponentRenderContext,
key: string
) {
@ -363,8 +362,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
accessCache![key] !== undefined ||
(data !== EMPTY_OBJ && hasOwn(data, key)) ||
(setupState !== EMPTY_OBJ && hasOwn(setupState, key)) ||
((normalizedProps = normalizePropsOptions(type)[0]) &&
hasOwn(normalizedProps, key)) ||
((normalizedProps = propsOptions[0]) && hasOwn(normalizedProps, key)) ||
hasOwn(ctx, key) ||
hasOwn(publicPropertiesMap, key) ||
hasOwn(appContext.config.globalProperties, key)
@ -450,8 +448,10 @@ export function createRenderContext(instance: ComponentInternalInstance) {
export function exposePropsOnRenderContext(
instance: ComponentInternalInstance
) {
const { ctx, type } = instance
const propsOptions = normalizePropsOptions(type)[0]
const {
ctx,
propsOptions: [propsOptions]
} = instance
if (propsOptions) {
Object.keys(propsOptions).forEach(key => {
Object.defineProperty(ctx, key, {