test: test unwrapping computed refs

packages/reactivity/__tests__/reactive.spec.ts

@@ -1,6 +1,7 @@
 import { ref, isRef } from '../src/ref'
 import { reactive, isReactive, toRaw, markNonReactive } from '../src/reactive'
 import { mockWarn } from '@vue/runtime-test'
+import { computed } from '../src/computed'
 
 describe('reactivity/reactive', () => {
   mockWarn()
@@ -135,6 +136,22 @@ describe('reactivity/reactive', () => {
     expect(isRef(observedObjectRef)).toBe(true)
   })
 
+  test('should unwrap computed refs', () => {
+    // readonly
+    const a = computed(() => 1)
+    // writable
+    const b = computed({
+      get: () => 1,
+      set: () => {}
+    })
+    const obj = reactive({ a, b })
+    // check type
+    obj.a + 1
+    obj.b + 1
+    expect(typeof obj.a).toBe(`number`)
+    expect(typeof obj.b).toBe(`number`)
+  })
+
   test('non-observable values', () => {
     const assertValue = (value: any) => {
       reactive(value)

packages/reactivity/src/reactive.ts

@@ -1,13 +1,11 @@
 import { isObject, toTypeString } from '@vue/shared'
 import { mutableHandlers, readonlyHandlers } from './baseHandlers'
-
 import {
   mutableCollectionHandlers,
   readonlyCollectionHandlers
 } from './collectionHandlers'
-
-import { UnwrapNestedRefs } from './ref'
 import { ReactiveEffect } from './effect'
+import { UnwrapRef, Ref } from './ref'
 
 // The main WeakMap that stores {target -> key -> dep} connections.
 // Conceptually, it's easier to think of a dependency as a Dep class
@@ -40,6 +38,9 @@ const canObserve = (value: any): boolean => {
   )
 }
 
+// only unwrap nested ref
+type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRef<T>
+
 export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
 export function reactive(target: object) {
   // if trying to observe a readonly proxy, return the readonly version.

packages/reactivity/src/ref.ts

@@ -2,7 +2,7 @@ import { track, trigger } from './effect'
 import { OperationTypes } from './operations'
 import { isObject } from '@vue/shared'
 import { reactive } from './reactive'
-import { ComputedRef, WritableComputedRef } from './computed'
+import { ComputedRef } from './computed'
 
 export const refSymbol = Symbol(__DEV__ ? 'refSymbol' : '')
 
@@ -73,22 +73,16 @@ type BailTypes =
 // Recursively unwraps nested value bindings.
 export type UnwrapRef<T> = {
   cRef: T extends ComputedRef<infer V> ? UnwrapRef<V> : T
-  wcRef: T extends WritableComputedRef<infer V> ? UnwrapRef<V> : T
   ref: T extends Ref<infer V> ? UnwrapRef<V> : T
   array: T extends Array<infer V> ? Array<UnwrapRef<V>> : T
   object: { [K in keyof T]: UnwrapRef<T[K]> }
   stop: T
 }[T extends ComputedRef<any>
   ? 'cRef'
-  : T extends WritableComputedRef<any>
-    ? 'wcRef'
-    : T extends Ref
-      ? 'ref'
-      : T extends Array<any>
-        ? 'array'
-        : T extends BailTypes
-          ? 'stop' // bail out on types that shouldn't be unwrapped
-          : T extends object ? 'object' : 'stop']
-
-// only unwrap nested ref
-export type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRef<T>
+  : T extends Ref
+    ? 'ref'
+    : T extends Array<any>
+      ? 'array'
+      : T extends BailTypes
+        ? 'stop' // bail out on types that shouldn't be unwrapped
+        : T extends object ? 'object' : 'stop']