fix(reactivity): ensure that shallow and normal proxies are tracked seperately (close #2843) (#2851)

fix #2843

Author: LinusBorg

packages/reactivity/__tests__/shallowReactive.spec.ts

@@ -1,4 +1,5 @@
-import { shallowReactive, isReactive, reactive } from '../src/reactive'
+import { isReactive, reactive, shallowReactive } from '../src/reactive'
+
 import { effect } from '../src/effect'
 
 describe('shallowReactive', () => {
@@ -13,6 +14,16 @@ describe('shallowReactive', () => {
     expect(isReactive(props.n)).toBe(true)
   })
 
+  // #2843
+  test('should allow shallow und normal reactive for same target', async () => {
+    const original = { foo: {} }
+    const shallowProxy = shallowReactive(original)
+    const reactiveProxy = reactive(original)
+    expect(shallowProxy).not.toBe(reactiveProxy)
+    expect(isReactive(shallowProxy.foo)).toBe(false)
+    expect(isReactive(reactiveProxy.foo)).toBe(true)
+  })
+
   describe('collections', () => {
     test('should be reactive', () => {
       const shallowSet = shallowReactive(new Set())

packages/reactivity/__tests__/shallowReadonly.spec.ts

@@ -1,4 +1,4 @@
-import { isReactive, isReadonly, shallowReadonly } from '../src'
+import { isReactive, isReadonly, readonly, shallowReadonly } from '../src'
 
 describe('reactivity/shallowReadonly', () => {
   test('should not make non-reactive properties reactive', () => {
@@ -27,6 +27,16 @@ describe('reactivity/shallowReadonly', () => {
     ).not.toHaveBeenWarned()
   })
 
+  // #2843
+  test('should differentiate from normal readonly calls', async () => {
+    const original = { foo: {} }
+    const shallowProxy = shallowReadonly(original)
+    const reactiveProxy = readonly(original)
+    expect(shallowProxy).not.toBe(reactiveProxy)
+    expect(isReadonly(shallowProxy.foo)).toBe(false)
+    expect(isReadonly(reactiveProxy.foo)).toBe(true)
+  })
+
   describe('collection/Map', () => {
     ;[Map, WeakMap].forEach(Collection => {
       test('should make the map/weak-map readonly', () => {

packages/reactivity/src/baseHandlers.ts

@@ -5,7 +5,9 @@ import {
   ReactiveFlags,
   Target,
   readonlyMap,
-  reactiveMap
+  reactiveMap,
+  shallowReactiveMap,
+  shallowReadonlyMap
 } from './reactive'
 import { TrackOpTypes, TriggerOpTypes } from './operations'
 import {
@@ -80,7 +82,15 @@ function createGetter(isReadonly = false, shallow = false) {
       return isReadonly
     } else if (
       key === ReactiveFlags.RAW &&
-      receiver === (isReadonly ? readonlyMap : reactiveMap).get(target)
+      receiver ===
+        (isReadonly
+          ? shallow
+            ? shallowReadonlyMap
+            : readonlyMap
+          : shallow
+            ? shallowReactiveMap
+            : reactiveMap
+        ).get(target)
     ) {
       return target
     }

packages/reactivity/src/reactive.ts

@@ -28,7 +28,9 @@ export interface Target {
 }
 
 export const reactiveMap = new WeakMap<Target, any>()
+export const shallowReactiveMap = new WeakMap<Target, any>()
 export const readonlyMap = new WeakMap<Target, any>()
+export const shallowReadonlyMap = new WeakMap<Target, any>()
 
 const enum TargetType {
   INVALID = 0,
@@ -92,7 +94,8 @@ export function reactive(target: object) {
     target,
     false,
     mutableHandlers,
-    mutableCollectionHandlers
+    mutableCollectionHandlers,
+    reactiveMap
   )
 }
 
@@ -106,7 +109,8 @@ export function shallowReactive<T extends object>(target: T): T {
     target,
     false,
     shallowReactiveHandlers,
-    shallowCollectionHandlers
+    shallowCollectionHandlers,
+    shallowReactiveMap
   )
 }
 
@@ -143,7 +147,8 @@ export function readonly<T extends object>(
     target,
     true,
     readonlyHandlers,
-    readonlyCollectionHandlers
+    readonlyCollectionHandlers,
+    readonlyMap
   )
 }
 
@@ -160,15 +165,17 @@ export function shallowReadonly<T extends object>(
     target,
     true,
     shallowReadonlyHandlers,
-    shallowReadonlyCollectionHandlers
+    shallowReadonlyCollectionHandlers,
+    shallowReadonlyMap
   )
 }
 
 function createReactiveObject(
   target: Target,
   isReadonly: boolean,
   baseHandlers: ProxyHandler<any>,
-  collectionHandlers: ProxyHandler<any>
+  collectionHandlers: ProxyHandler<any>,
+  proxyMap: WeakMap<Target, any>
 ) {
   if (!isObject(target)) {
     if (__DEV__) {
@@ -185,7 +192,6 @@ function createReactiveObject(
     return target
   }
   // target already has corresponding Proxy
-  const proxyMap = isReadonly ? readonlyMap : reactiveMap
   const existingProxy = proxyMap.get(target)
   if (existingProxy) {
     return existingProxy