wip: readonly

src/composition-api/index.ts

@@ -19,21 +19,20 @@ export {
 
 export {
   reactive,
-  // readonly,
   isReactive,
   isReadonly,
   isShallow,
-  // isProxy,
-  // shallowReactive,
-  // shallowReadonly,
+  isProxy,
+  shallowReactive,
   markRaw,
   toRaw,
   ReactiveFlags,
-  // DeepReadonly,
-  // ShallowReactive,
+  ShallowReactive,
   UnwrapNestedRefs
 } from './reactivity/reactive'
 
+export { readonly, shallowReadonly, DeepReadonly } from './reactivity/readonly'
+
 export {
   computed,
   ComputedRef,

src/composition-api/reactivity/computed.ts

@@ -1,9 +1,10 @@
-import { isServerRendering, noop, warn } from 'core/util'
-import { Ref } from './ref'
+import { isServerRendering, noop, warn, def } from 'core/util'
+import { Ref, RefFlag } from './ref'
 import Watcher from 'core/observer/watcher'
 import Dep from 'core/observer/dep'
 import { currentInstance } from '../currentInstance'
 import { DebuggerOptions } from '../apiWatch'
+import { ReactiveFlags } from './reactive'
 
 declare const ComputedRefSymbol: unique symbol
 
@@ -57,9 +58,7 @@ export function computed<T>(
     ? null
     : new Watcher(currentInstance, getter, noop, { lazy: true })
 
-  return {
-    __v_isRef: true,
-    __v_isReadonly: onlyGetter,
+  const ref = {
     // some libs rely on the presence effect for checking computed refs
     // from normal refs, but the implementation doesn't matter
     effect: watcher,
@@ -80,4 +79,9 @@ export function computed<T>(
       setter(newVal)
     }
   } as any
+
+  def(ref, RefFlag, true)
+  def(ref, ReactiveFlags.IS_READONLY, true)
+
+  return ref
 }

src/composition-api/reactivity/effect.ts

@@ -19,14 +19,18 @@ export type DebuggerEventExtraInfo = {
 }
 
 export class ReactiveEffect<T = any> {
+  // TODO
   onStop?: () => void
   // dev only
   onTrack?: (event: DebuggerEvent) => void
   // dev only
   onTrigger?: (event: DebuggerEvent) => void
 
-  public active = true
-  private _watcher: Watcher
+  active = true
+  /**
+   * @private
+   */
+  _watcher: Watcher
 
   constructor(
     public fn: () => T,

src/composition-api/reactivity/reactive.ts

@@ -1,5 +1,5 @@
 import { observe, Observer } from 'core/observer'
-import { def, isPrimitive, warn } from 'core/util'
+import { def, isPrimitive, warn, toRawType } from 'core/util'
 import type { Ref, UnwrapRefSimple, RawSymbol } from './ref'
 
 export const enum ReactiveFlags {
@@ -17,8 +17,6 @@ export interface Target {
   [ReactiveFlags.RAW]?: any
 }
 
-export declare const ShallowReactiveMarker: unique symbol
-
 // only unwrap nested ref
 export type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRefSimple<T>
 
@@ -27,14 +25,40 @@ export function reactive(target: object) {
   // if trying to observe a readonly proxy, return the readonly version.
   if (!isReadonly(target)) {
     const ob = observe(target)
-    if (__DEV__ && !ob && (target == null || isPrimitive(target))) {
-      warn(`value cannot be made reactive: ${String(target)}`)
+    if (__DEV__ && !ob) {
+      if (target == null || isPrimitive(target)) {
+        warn(`value cannot be made reactive: ${String(target)}`)
+      }
+      if (isCollectionType(target)) {
+        warn(
+          `Vue 2 does not support reactive collection types such as Map or Set.`
+        )
+      }
     }
   }
   return target
 }
 
+export declare const ShallowReactiveMarker: unique symbol
+
+export type ShallowReactive<T> = T & { [ShallowReactiveMarker]?: true }
+
+/**
+ * Return a shallowly-reactive copy of the original object, where only the root
+ * level properties are reactive. It also does not auto-unwrap refs (even at the
+ * root level).
+ */
+export function shallowReactive<T extends object>(
+  target: T
+): ShallowReactive<T> {
+  // TODO
+  return target
+}
+
 export function isReactive(value: unknown): boolean {
+  if (isReadonly(value)) {
+    return isReactive((value as Target)[ReactiveFlags.RAW])
+  }
   return !!(value && (value as Target).__ob__)
 }
 
@@ -47,9 +71,13 @@ export function isReadonly(value: unknown): boolean {
   return !!(value && (value as Target).__v_isReadonly)
 }
 
+export function isProxy(value: unknown): boolean {
+  return isReactive(value) || isReadonly(value)
+}
+
 export function toRaw<T>(observed: T): T {
-  // TODO for readonly
-  return observed
+  const raw = observed && (observed as Target)[ReactiveFlags.RAW]
+  return raw ? toRaw(raw) : observed
 }
 
 export function markRaw<T extends object>(
@@ -58,3 +86,13 @@ export function markRaw<T extends object>(
   def(value, ReactiveFlags.SKIP, true)
   return value
 }
+
+/**
+ * @private
+ */
+export function isCollectionType(value: unknown): boolean {
+  const type = toRawType(value)
+  return (
+    type === 'Map' || type === 'WeakMap' || type === 'Set' || type === 'WeakSet'
+  )
+}

src/composition-api/reactivity/readonly.ts

@@ -0,0 +1,110 @@
+import { def, warn, isPlainObject, isArray } from 'core/util'
+import {
+  isCollectionType,
+  isReadonly,
+  isShallow,
+  ReactiveFlags,
+  UnwrapNestedRefs
+} from './reactive'
+import { isRef, Ref, RefFlag } from './ref'
+
+type Primitive = string | number | boolean | bigint | symbol | undefined | null
+type Builtin = Primitive | Function | Date | Error | RegExp
+export type DeepReadonly<T> = T extends Builtin
+  ? T
+  : T extends Map<infer K, infer V>
+  ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>>
+  : T extends ReadonlyMap<infer K, infer V>
+  ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>>
+  : T extends WeakMap<infer K, infer V>
+  ? WeakMap<DeepReadonly<K>, DeepReadonly<V>>
+  : T extends Set<infer U>
+  ? ReadonlySet<DeepReadonly<U>>
+  : T extends ReadonlySet<infer U>
+  ? ReadonlySet<DeepReadonly<U>>
+  : T extends WeakSet<infer U>
+  ? WeakSet<DeepReadonly<U>>
+  : T extends Promise<infer U>
+  ? Promise<DeepReadonly<U>>
+  : T extends Ref<infer U>
+  ? Readonly<Ref<DeepReadonly<U>>>
+  : T extends {}
+  ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
+  : Readonly<T>
+
+const rawToReadonlyFlag = `__v_rawToReadonly`
+
+export function readonly<T extends object>(
+  target: T
+): DeepReadonly<UnwrapNestedRefs<T>> {
+  if (!isPlainObject(target)) {
+    if (__DEV__) {
+      if (isArray(target)) {
+        warn(`Vue 2 does not support readonly arrays.`)
+      } else if (isCollectionType(target)) {
+        warn(
+          `Vue 2 does not support readonly collection types such as Map or Set.`
+        )
+      } else {
+        warn(`value cannot be made readonly: ${typeof target}`)
+      }
+    }
+    return target as any
+  }
+
+  // already a readonly object
+  if (isReadonly(target)) {
+    return target as any
+  }
+
+  // already has a readonly proxy
+  const existingProxy = target[rawToReadonlyFlag]
+  if (existingProxy) {
+    return existingProxy
+  }
+
+  const proxy = {}
+  def(target, rawToReadonlyFlag, proxy)
+
+  def(proxy, ReactiveFlags.IS_READONLY, true)
+  def(proxy, ReactiveFlags.RAW, target)
+
+  if (isRef(target)) {
+    def(proxy, RefFlag, true)
+  }
+  if (isShallow(target)) {
+    def(proxy, ReactiveFlags.IS_SHALLOW, true)
+  }
+
+  const keys = Object.keys(target)
+  for (let i = 0; i < keys.length; i++) {
+    defineReadonlyProperty(proxy, target, keys[i])
+  }
+
+  return proxy as any
+}
+
+function defineReadonlyProperty(proxy: any, target: any, key: string) {
+  Object.defineProperty(proxy, key, {
+    enumerable: true,
+    configurable: true,
+    get() {
+      const val = target[key]
+      return isPlainObject(val) ? readonly(val) : val
+    },
+    set() {
+      __DEV__ &&
+        warn(`Set operation on key "${key}" failed: target is readonly.`)
+    }
+  })
+}
+
+/**
+ * Returns a reactive-copy of the original object, where only the root level
+ * properties are readonly, and does NOT unwrap refs nor recursively convert
+ * returned properties.
+ * This is used for creating the props proxy object for stateful components.
+ */
+export function shallowReadonly<T extends object>(target: T): Readonly<T> {
+  return target as any
+}

src/composition-api/reactivity/ref.ts

@@ -1,12 +1,18 @@
 import { defineReactive } from 'core/observer/index'
-import { isReactive, type ShallowReactiveMarker } from './reactive'
+import {
+  isReactive,
+  ReactiveFlags,
+  type ShallowReactiveMarker
+} from './reactive'
 import type { IfAny } from 'typescript/utils'
 import Dep from 'core/observer/dep'
-import { warn, isArray } from 'core/util'
+import { warn, isArray, def } from 'core/util'
 
 declare const RefSymbol: unique symbol
 export declare const RawSymbol: unique symbol
 
+export const RefFlag = `__v_isRef`
+
 export interface Ref<T = any> {
   value: T
   /**
@@ -19,11 +25,15 @@ export interface Ref<T = any> {
    * @private
    */
   dep?: Dep
+  /**
+   * @private
+   */
+  [RefFlag]: true
 }
 
 export function isRef<T>(r: Ref<T> | unknown): r is Ref<T>
 export function isRef(r: any): r is Ref {
-  return !!(r && r.__v_isRef === true)
+  return !!(r && (r as Ref).__v_isRef === true)
 }
 
 export function ref<T extends object>(
@@ -52,7 +62,9 @@ function createRef(rawValue: unknown, shallow: boolean) {
   if (isRef(rawValue)) {
     return rawValue
   }
-  const ref: any = { __v_isRef: true, __v_isShallow: shallow }
+  const ref: any = {}
+  def(ref, RefFlag, true)
+  def(ref, ReactiveFlags.IS_SHALLOW, true)
   ref.dep = defineReactive(ref, 'value', rawValue, null, shallow)
   return ref
 }
@@ -82,8 +94,7 @@ export function customRef<T>(factory: CustomRefFactory<T>): Ref<T> {
     () => dep.depend(),
     () => dep.notify()
   )
-  return {
-    __v_isRef: true,
+  const ref = {
     get value() {
       return get()
     },
@@ -91,6 +102,8 @@ export function customRef<T>(factory: CustomRefFactory<T>): Ref<T> {
       set(newVal)
     }
   } as any
+  def(ref, RefFlag, true)
+  return ref
 }
 
 export type ToRefs<T = any> = {
@@ -130,8 +143,7 @@ export function toRef<T extends object, K extends keyof T>(
   if (isRef(val)) {
     return val as any
   }
-  return {
-    __v_isRef: true,
+  const ref = {
     get value() {
       const val = object[key]
       return val === undefined ? (defaultValue as T[K]) : val
@@ -140,6 +152,8 @@ export function toRef<T extends object, K extends keyof T>(
       object[key] = newVal
     }
   } as any
+  def(ref, RefFlag, true)
+  return ref
 }
 
 /**

src/core/observer/index.ts

@@ -15,7 +15,7 @@ import {
   isServerRendering,
   hasChanged
 } from '../util/index'
-import { isRef } from '../../composition-api'
+import { isReadonly, isRef } from '../../composition-api'
 
 const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
 
@@ -212,6 +212,10 @@ export function set(
       `Cannot set reactive property on undefined, null, or primitive value: ${target}`
     )
   }
+  if (isReadonly(target)) {
+    __DEV__ && warn(`Set operation on key "${key}" failed: target is readonly.`)
+    return
+  }
   if (isArray(target) && isValidArrayIndex(key)) {
     target.length = Math.max(target.length, key)
     target.splice(key, 1, val)
@@ -261,6 +265,11 @@ export function del(target: Array<any> | Object, key: any) {
       )
     return
   }
+  if (isReadonly(target)) {
+    __DEV__ &&
+      warn(`Delete operation on key "${key}" failed: target is readonly.`)
+    return
+  }
   if (!hasOwn(target, key)) {
     return
   }

test/unit/features/composition-api/reactivity/readonly.spec.ts

@@ -0,0 +1,502 @@
+import {
+  reactive,
+  readonly,
+  toRaw,
+  isReactive,
+  isReadonly,
+  markRaw,
+  ref,
+  isProxy
+} from 'vca/index'
+import { effect } from 'vca/reactivity/effect'
+import { set, del } from 'core/observer'
+
+/**
+ * @see https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html
+ */
+type Writable<T> = { -readonly [P in keyof T]: T[P] }
+
+describe('reactivity/readonly', () => {
+  describe('Object', () => {
+    it('should make nested values readonly', () => {
+      const original = { foo: 1, bar: { baz: 2 } }
+      const wrapped = readonly(original)
+      expect(wrapped).not.toBe(original)
+      expect(isProxy(wrapped)).toBe(true)
+      expect(isReactive(wrapped)).toBe(false)
+      expect(isReadonly(wrapped)).toBe(true)
+      expect(isReactive(original)).toBe(false)
+      expect(isReadonly(original)).toBe(false)
+      expect(isReactive(wrapped.bar)).toBe(false)
+      expect(isReadonly(wrapped.bar)).toBe(true)
+      expect(isReactive(original.bar)).toBe(false)
+      expect(isReadonly(original.bar)).toBe(false)
+      // get
+      expect(wrapped.foo).toBe(1)
+      // has
+      expect('foo' in wrapped).toBe(true)
+      // ownKeys
+      expect(Object.keys(wrapped)).toEqual(['foo', 'bar'])
+    })
+
+    it('should not allow mutation', () => {
+      const qux = Symbol('qux')
+      const original = {
+        foo: 1,
+        bar: {
+          baz: 2
+        },
+        [qux]: 3
+      }
+      const wrapped: Writable<typeof original> = readonly(original)
+
+      wrapped.foo = 2
+      expect(wrapped.foo).toBe(1)
+      expect(
+        `Set operation on key "foo" failed: target is readonly.`
+      ).toHaveBeenWarnedLast()
+
+      set(wrapped.bar, `baz`, 3)
+      expect(wrapped.bar.baz).toBe(2)
+      expect(
+        `Set operation on key "baz" failed: target is readonly.`
+      ).toHaveBeenWarnedLast()
+
+      // @discrepancy: Vue 2 reactive system does not handle symbol keys.
+      // wrapped[qux] = 4
+      // expect(wrapped[qux]).toBe(3)
+      // expect(
+      //   `Set operation on key "Symbol(qux)" failed: target is readonly.`
+      // ).toHaveBeenWarnedLast()
+
+      del(wrapped, `foo`)
+      expect(wrapped.foo).toBe(1)
+      expect(
+        `Delete operation on key "foo" failed: target is readonly.`
+      ).toHaveBeenWarnedLast()
+
+      del(wrapped.bar, `baz`)
+      expect(wrapped.bar.baz).toBe(2)
+      expect(
+        `Delete operation on key "baz" failed: target is readonly.`
+      ).toHaveBeenWarnedLast()
+
+      // // @ts-expect-error
+      // delete wrapped[qux]
+      // expect(wrapped[qux]).toBe(3)
+      // expect(
+      //   `Delete operation on key "Symbol(qux)" failed: target is readonly.`
+      // ).toHaveBeenWarnedLast()
+    })
+
+    it('should not trigger effects', () => {
+      const wrapped: any = readonly({ a: 1 })
+      let dummy
+      effect(() => {
+        dummy = wrapped.a
+      })
+      expect(dummy).toBe(1)
+      wrapped.a = 2
+      expect(wrapped.a).toBe(1)
+      expect(dummy).toBe(1)
+      expect(`target is readonly`).toHaveBeenWarned()
+    })
+  })
+
+  // @discrepancy Vue 2 cannot support readonly array
+  // describe('Array', () => {
+  //   it('should make nested values readonly', () => {
+  //     const original = [{ foo: 1 }]
+  //     const wrapped = readonly(original)
+  //     expect(wrapped).not.toBe(original)
+  //     expect(isProxy(wrapped)).toBe(true)
+  //     expect(isReactive(wrapped)).toBe(false)
+  //     expect(isReadonly(wrapped)).toBe(true)
+  //     expect(isReactive(original)).toBe(false)
+  //     expect(isReadonly(original)).toBe(false)
+  //     expect(isReactive(wrapped[0])).toBe(false)
+  //     expect(isReadonly(wrapped[0])).toBe(true)
+  //     expect(isReactive(original[0])).toBe(false)
+  //     expect(isReadonly(original[0])).toBe(false)
+  //     // get
+  //     expect(wrapped[0].foo).toBe(1)
+  //     // has
+  //     expect(0 in wrapped).toBe(true)
+  //     // ownKeys
+  //     expect(Object.keys(wrapped)).toEqual(['0'])
+  //   })
+
+  //   it('should not allow mutation', () => {
+  //     const wrapped: any = readonly([{ foo: 1 }])
+  //     wrapped[0] = 1
+  //     expect(wrapped[0]).not.toBe(1)
+  //     expect(
+  //       `Set operation on key "0" failed: target is readonly.`
+  //     ).toHaveBeenWarned()
+  //     wrapped[0].foo = 2
+  //     expect(wrapped[0].foo).toBe(1)
+  //     expect(
+  //       `Set operation on key "foo" failed: target is readonly.`
+  //     ).toHaveBeenWarned()
+
+  //     // should block length mutation
+  //     wrapped.length = 0
+  //     expect(wrapped.length).toBe(1)
+  //     expect(wrapped[0].foo).toBe(1)
+  //     expect(
+  //       `Set operation on key "length" failed: target is readonly.`
+  //     ).toHaveBeenWarned()
+
+  //     // mutation methods invoke set/length internally and thus are blocked as well
+  //     wrapped.push(2)
+  //     expect(wrapped.length).toBe(1)
+  //     // push triggers two warnings on [1] and .length
+  //     expect(`target is readonly.`).toHaveBeenWarnedTimes(5)
+  //   })
+
+  //   it('should not trigger effects', () => {
+  //     const wrapped: any = readonly([{ a: 1 }])
+  //     let dummy
+  //     effect(() => {
+  //       dummy = wrapped[0].a
+  //     })
+  //     expect(dummy).toBe(1)
+  //     wrapped[0].a = 2
+  //     expect(wrapped[0].a).toBe(1)
+  //     expect(dummy).toBe(1)
+  //     expect(`target is readonly`).toHaveBeenWarnedTimes(1)
+  //     wrapped[0] = { a: 2 }
+  //     expect(wrapped[0].a).toBe(1)
+  //     expect(dummy).toBe(1)
+  //     expect(`target is readonly`).toHaveBeenWarnedTimes(2)
+  //   })
+  // })
+
+  // @discrepancy: Vue 2 doesn't support readonly on collection types
+  // const maps = [Map, WeakMap]
+  // maps.forEach((Collection: any) => {
+  //   describe(Collection.name, () => {
+  //     test('should make nested values readonly', () => {
+  //       const key1 = {}
+  //       const key2 = {}
+  //       const original = new Collection([
+  //         [key1, {}],
+  //         [key2, {}]
+  //       ])
+  //       const wrapped = readonly(original)
+  //       expect(wrapped).not.toBe(original)
+  //       expect(isProxy(wrapped)).toBe(true)
+  //       expect(isReactive(wrapped)).toBe(false)
+  //       expect(isReadonly(wrapped)).toBe(true)
+  //       expect(isReactive(original)).toBe(false)
+  //       expect(isReadonly(original)).toBe(false)
+  //       expect(isReactive(wrapped.get(key1))).toBe(false)
+  //       expect(isReadonly(wrapped.get(key1))).toBe(true)
+  //       expect(isReactive(original.get(key1))).toBe(false)
+  //       expect(isReadonly(original.get(key1))).toBe(false)
+  //     })
+
+  //     test('should not allow mutation & not trigger effect', () => {
+  //       const map = readonly(new Collection())
+  //       const key = {}
+  //       let dummy
+  //       effect(() => {
+  //         dummy = map.get(key)
+  //       })
+  //       expect(dummy).toBeUndefined()
+  //       map.set(key, 1)
+  //       expect(dummy).toBeUndefined()
+  //       expect(map.has(key)).toBe(false)
+  //       expect(
+  //         `Set operation on key "${key}" failed: target is readonly.`
+  //       ).toHaveBeenWarned()
+  //     })
+
+  //     // #1772
+  //     test('readonly + reactive should make get() value also readonly + reactive', () => {
+  //       const map = reactive(new Collection())
+  //       const roMap = readonly(map)
+  //       const key = {}
+  //       map.set(key, {})
+
+  //       const item = map.get(key)
+  //       expect(isReactive(item)).toBe(true)
+  //       expect(isReadonly(item)).toBe(false)
+
+  //       const roItem = roMap.get(key)
+  //       expect(isReactive(roItem)).toBe(true)
+  //       expect(isReadonly(roItem)).toBe(true)
+  //     })
+
+  //     if (Collection === Map) {
+  //       test('should retrieve readonly values on iteration', () => {
+  //         const key1 = {}
+  //         const key2 = {}
+  //         const original = new Map([
+  //           [key1, {}],
+  //           [key2, {}]
+  //         ])
+  //         const wrapped: any = readonly(original)
+  //         expect(wrapped.size).toBe(2)
+  //         for (const [key, value] of wrapped) {
+  //           expect(isReadonly(key)).toBe(true)
+  //           expect(isReadonly(value)).toBe(true)
+  //         }
+  //         wrapped.forEach((value: any) => {
+  //           expect(isReadonly(value)).toBe(true)
+  //         })
+  //         for (const value of wrapped.values()) {
+  //           expect(isReadonly(value)).toBe(true)
+  //         }
+  //       })
+
+  //       test('should retrieve reactive + readonly values on iteration', () => {
+  //         const key1 = {}
+  //         const key2 = {}
+  //         const original = reactive(
+  //           new Map([
+  //             [key1, {}],
+  //             [key2, {}]
+  //           ])
+  //         )
+  //         const wrapped: any = readonly(original)
+  //         expect(wrapped.size).toBe(2)
+  //         for (const [key, value] of wrapped) {
+  //           expect(isReadonly(key)).toBe(true)
+  //           expect(isReadonly(value)).toBe(true)
+  //           expect(isReactive(key)).toBe(true)
+  //           expect(isReactive(value)).toBe(true)
+  //         }
+  //         wrapped.forEach((value: any) => {
+  //           expect(isReadonly(value)).toBe(true)
+  //           expect(isReactive(value)).toBe(true)
+  //         })
+  //         for (const value of wrapped.values()) {
+  //           expect(isReadonly(value)).toBe(true)
+  //           expect(isReactive(value)).toBe(true)
+  //         }
+  //       })
+  //     }
+  //   })
+  // })
+
+  // const sets = [Set, WeakSet]
+  // sets.forEach((Collection: any) => {
+  //   describe(Collection.name, () => {
+  //     test('should make nested values readonly', () => {
+  //       const key1 = {}
+  //       const key2 = {}
+  //       const original = new Collection([key1, key2])
+  //       const wrapped = readonly(original)
+  //       expect(wrapped).not.toBe(original)
+  //       expect(isProxy(wrapped)).toBe(true)
+  //       expect(isReactive(wrapped)).toBe(false)
+  //       expect(isReadonly(wrapped)).toBe(true)
+  //       expect(isReactive(original)).toBe(false)
+  //       expect(isReadonly(original)).toBe(false)
+  //       expect(wrapped.has(reactive(key1))).toBe(true)
+  //       expect(original.has(reactive(key1))).toBe(false)
+  //     })
+
+  //     test('should not allow mutation & not trigger effect', () => {
+  //       const set = readonly(new Collection())
+  //       const key = {}
+  //       let dummy
+  //       effect(() => {
+  //         dummy = set.has(key)
+  //       })
+  //       expect(dummy).toBe(false)
+  //       set.add(key)
+  //       expect(dummy).toBe(false)
+  //       expect(set.has(key)).toBe(false)
+  //       expect(
+  //         `Add operation on key "${key}" failed: target is readonly.`
+  //       ).toHaveBeenWarned()
+  //     })
+
+  //     if (Collection === Set) {
+  //       test('should retrieve readonly values on iteration', () => {
+  //         const original = new Collection([{}, {}])
+  //         const wrapped: any = readonly(original)
+  //         expect(wrapped.size).toBe(2)
+  //         for (const value of wrapped) {
+  //           expect(isReadonly(value)).toBe(true)
+  //         }
+  //         wrapped.forEach((value: any) => {
+  //           expect(isReadonly(value)).toBe(true)
+  //         })
+  //         for (const value of wrapped.values()) {
+  //           expect(isReadonly(value)).toBe(true)
+  //         }
+  //         for (const [v1, v2] of wrapped.entries()) {
+  //           expect(isReadonly(v1)).toBe(true)
+  //           expect(isReadonly(v2)).toBe(true)
+  //         }
+  //       })
+  //     }
+  //   })
+  // })
+
+  test('calling reactive on an readonly should return readonly', () => {
+    const a = readonly({})
+    const b = reactive(a)
+    expect(isReadonly(b)).toBe(true)
+    // should point to same original
+    expect(toRaw(a)).toBe(toRaw(b))
+  })
+
+  test('calling readonly on a reactive object should return readonly', () => {
+    const a = reactive({})
+    const b = readonly(a)
+    expect(isReadonly(b)).toBe(true)
+    // should point to same original
+    expect(toRaw(a)).toBe(toRaw(b))
+  })
+
+  test('readonly should track and trigger if wrapping reactive original', () => {
+    const a = reactive({ n: 1 })
+    const b = readonly(a)
+    // should return true since it's wrapping a reactive source
+    expect(isReactive(b)).toBe(true)
+
+    let dummy
+    effect(() => {
+      dummy = b.n
+    })
+    expect(dummy).toBe(1)
+    a.n++
+    expect(b.n).toBe(2)
+    expect(dummy).toBe(2)
+  })
+
+  // test('readonly collection should not track', () => {
+  //   const map = new Map()
+  //   map.set('foo', 1)
+
+  //   const reMap = reactive(map)
+  //   const roMap = readonly(map)
+
+  //   let dummy
+  //   effect(() => {
+  //     dummy = roMap.get('foo')
+  //   })
+  //   expect(dummy).toBe(1)
+  //   reMap.set('foo', 2)
+  //   expect(roMap.get('foo')).toBe(2)
+  //   // should not trigger
+  //   expect(dummy).toBe(1)
+  // })
+
+  // test('readonly array should not track', () => {
+  //   const arr = [1]
+  //   const roArr = readonly(arr)
+
+  //   const eff = effect(() => {
+  //     roArr.includes(2)
+  //   })
+  //   expect(eff._watcher.deps.length).toBe(0)
+  // })
+
+  // test('readonly should track and trigger if wrapping reactive original (collection)', () => {
+  //   const a = reactive(new Map())
+  //   const b = readonly(a)
+  //   // should return true since it's wrapping a reactive source
+  //   expect(isReactive(b)).toBe(true)
+
+  //   a.set('foo', 1)
+
+  //   let dummy
+  //   effect(() => {
+  //     dummy = b.get('foo')
+  //   })
+  //   expect(dummy).toBe(1)
+  //   a.set('foo', 2)
+  //   expect(b.get('foo')).toBe(2)
+  //   expect(dummy).toBe(2)
+  // })
+
+  test('wrapping already wrapped value should return same Proxy', () => {
+    const original = { foo: 1 }
+    const wrapped = readonly(original)
+    const wrapped2 = readonly(wrapped)
+    expect(wrapped2).toBe(wrapped)
+  })
+
+  test('wrapping the same value multiple times should return same Proxy', () => {
+    const original = { foo: 1 }
+    const wrapped = readonly(original)
+    const wrapped2 = readonly(original)
+    expect(wrapped2).toBe(wrapped)
+  })
+
+  test('markRaw', () => {
+    const obj = readonly({
+      foo: { a: 1 },
+      bar: markRaw({ b: 2 })
+    })
+    expect(isReadonly(obj.foo)).toBe(true)
+    expect(isReactive(obj.bar)).toBe(false)
+  })
+
+  test('should make ref readonly', () => {
+    const n = readonly(ref(1))
+    // @ts-expect-error
+    n.value = 2
+    expect(n.value).toBe(1)
+    expect(
+      `Set operation on key "value" failed: target is readonly.`
+    ).toHaveBeenWarned()
+  })
+
+  // Test case not applicable to Vue 2
+  // https://github.com/vuejs/core/issues/3376
+  // test('calling readonly on computed should allow computed to set its private properties', () => {
+  //   const r = ref<boolean>(false)
+  //   const c = computed(() => r.value)
+  //   const rC = readonly(c)
+
+  //   r.value = true
+
+  //   expect(rC.value).toBe(true)
+  //   expect(
+  //     'Set operation on key "_dirty" failed: target is readonly.'
+  //   ).not.toHaveBeenWarned()
+  //   // @ts-expect-error - non-existent property
+  //   rC.randomProperty = true
+
+  //   expect(
+  //     'Set operation on key "randomProperty" failed: target is readonly.'
+  //   ).toHaveBeenWarned()
+  // })
+
+  // #4986
+  test('setting a readonly object as a property of a reactive object should retain readonly proxy', () => {
+    const r = readonly({})
+    const rr = reactive({}) as any
+    rr.foo = r
+    expect(rr.foo).toBe(r)
+    expect(isReadonly(rr.foo)).toBe(true)
+  })
+
+  test('attempting to write plain value to a readonly ref nested in a reactive object should fail', () => {
+    const r = ref(false)
+    const ror = readonly(r)
+    const obj = reactive({ ror })
+    obj.ror = true
+
+    expect(obj.ror).toBe(false)
+    expect(`Set operation on key "value" failed`).toHaveBeenWarned()
+  })
+
+  test('replacing a readonly ref nested in a reactive object with a new ref', () => {
+    const r = ref(false)
+    const ror = readonly(r)
+    const obj = reactive({ ror })
+    try {
+      obj.ror = ref(true) as unknown as boolean
+    } catch (e) {}
+
+    expect(obj.ror).toBe(true)
+    expect(toRaw(obj).ror).not.toBe(ror) // ref successfully replaced
+  })
+})