Skip to content

Commit

Permalink
fix(reactivity): correctly handle method calls on user-extended arrays (
Browse files Browse the repository at this point in the history
#11760)

close #11759
  • Loading branch information
jh-leong authored Sep 3, 2024
1 parent 52cdb0f commit 9817c80
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 3 deletions.
21 changes: 21 additions & 0 deletions packages/reactivity/__tests__/reactiveArray.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -724,6 +724,27 @@ describe('reactivity/reactive/Array', () => {
expect(state.things.forEach('foo', 'bar', 'baz')).toBeUndefined()
expect(state.things.map('foo', 'bar', 'baz')).toEqual(['1', '2', '3'])
expect(state.things.some('foo', 'bar', 'baz')).toBe(true)

{
class Collection extends Array {
find(matcher: any) {
return super.find(matcher)
}
}

const state = reactive({
// @ts-expect-error
things: new Collection({ foo: '' }),
})

const bar = computed(() => {
return state.things.find((obj: any) => obj.foo === 'bar')
})
bar.value
state.things[0].foo = 'bar'

expect(bar.value).toEqual({ foo: 'bar' })
}
})
})
})
10 changes: 7 additions & 3 deletions packages/reactivity/src/arrayInstrumentations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -242,9 +242,13 @@ function apply(
const needsWrap = arr !== self && !isShallow(self)
// @ts-expect-error our code is limited to es2016 but user code is not
const methodFn = arr[method]
// @ts-expect-error
if (methodFn !== arrayProto[method]) {
const result = methodFn.apply(arr, args)

// #11759
// If the method being called is from a user-extended Array, the arguments will be unknown
// (unknown order and unknown parameter types). In this case, we skip the shallowReadArray
// handling and directly call apply with self.
if (methodFn !== arrayProto[method as any]) {
const result = methodFn.apply(self, args)
return needsWrap ? toReactive(result) : result
}

Expand Down

0 comments on commit 9817c80

Please sign in to comment.