Skip to content

Commit

Permalink
feat(runtime-core): provide full props to props validator functions (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
nandi95 authored Dec 5, 2023
1 parent a817883 commit 8e27692
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 3 deletions.
50 changes: 50 additions & 0 deletions packages/runtime-core/__tests__/componentProps.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,56 @@ describe('component props', () => {
expect(root.innerHTML).toBe('<div id="b">2</div>')
})

describe('validator', () => {
test('validator should be called with two arguments', async () => {
const mockFn = vi.fn((...args: any[]) => true)
const Comp = defineComponent({
props: {
foo: {
type: Number,
validator: (value, props) => mockFn(value, props)
},
bar: {
type: Number
}
},
template: `<div />`
})

// Note this one is using the main Vue render so it can compile template
// on the fly
const root = document.createElement('div')
domRender(h(Comp, { foo: 1, bar: 2 }), root)
expect(mockFn).toHaveBeenCalledWith(1, { foo: 1, bar: 2 })
})

test('validator should not be able to mutate other props', async () => {
const mockFn = vi.fn((...args: any[]) => true)
const Comp = defineComponent({
props: {
foo: {
type: Number,
validator: (value, props) => !!(props.bar = 1)
},
bar: {
type: Number,
validator: value => mockFn(value)
}
},
template: `<div />`
})

// Note this one is using the main Vue render so it can compile template
// on the fly
const root = document.createElement('div')
domRender(h(Comp, { foo: 1, bar: 2 }), root)
expect(
`Set operation on key "bar" failed: target is readonly.`
).toHaveBeenWarnedLast()
expect(mockFn).toHaveBeenCalledWith(2)
})
})

test('warn props mutation', () => {
let instance: ComponentInternalInstance
let setupProps: any
Expand Down
9 changes: 6 additions & 3 deletions packages/runtime-core/src/componentProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import {
toRaw,
shallowReactive,
trigger,
TriggerOpTypes
TriggerOpTypes,
shallowReadonly
} from '@vue/reactivity'
import {
EMPTY_OBJ,
Expand Down Expand Up @@ -57,7 +58,7 @@ export interface PropOptions<T = any, D = T> {
type?: PropType<T> | true | null
required?: boolean
default?: D | DefaultFactory<D> | null | undefined | object
validator?(value: unknown): boolean
validator?(value: unknown, props: Data): boolean
/**
* @internal
*/
Expand Down Expand Up @@ -634,6 +635,7 @@ function validateProps(
key,
resolvedValues[key],
opt,
__DEV__ ? shallowReadonly(resolvedValues) : resolvedValues,
!hasOwn(rawProps, key) && !hasOwn(rawProps, hyphenate(key))
)
}
Expand All @@ -646,6 +648,7 @@ function validateProp(
name: string,
value: unknown,
prop: PropOptions,
props: Data,
isAbsent: boolean
) {
const { type, required, validator, skipCheck } = prop
Expand Down Expand Up @@ -675,7 +678,7 @@ function validateProp(
}
}
// custom validator
if (validator && !validator(value)) {
if (validator && !validator(value, props)) {
warn('Invalid prop: custom validator check failed for prop "' + name + '".')
}
}
Expand Down

0 comments on commit 8e27692

Please sign in to comment.