feat: proxyRefs method and ShallowUnwrapRefs type (#456)

* feat: `proxyRefs` method and `ShallowUnwrapRefs` type

BREAKING CHANGE: template auto ref unwrapping are now applied shallowly,
i.e. only at the root level. See vuejs/core#1682 for
more details.

Author: pikax

README.md

@@ -361,7 +361,7 @@ watch(() => {
 
 </details>
 
-### createApp
+### `createApp`
 
 <details>
 <summary>
@@ -381,7 +381,7 @@ app2.component('Bar', Bar) // equivalent to Vue.use('Bar', Bar)
 
 </details>
 
-### shallowReadonly
+### `shallowReadonly`
 
 <details>
 <summary>
@@ -392,6 +392,29 @@ app2.component('Bar', Bar) // equivalent to Vue.use('Bar', Bar)
 
 </details>
 
+### `props`
+<details>
+<summary>
+⚠️ <code>toRefs(props.foo.bar)</code> will incorrectly warn when acessing nested levels of props.
+⚠️ <code>isReactive(props.foo.bar)</code> will return false.
+</summary>
+  
+```ts
+defineComponent({
+  setup(props) {
+    const { bar } = toRefs(props.foo) // it will `warn`
+    
+    // use this instead 
+    const { foo } = toRefs(props)
+    const a = foo.value.bar
+  }
+})
+```
+
+</details>
+
+
+
 ### Missing APIs
 
 The following APIs introduced in Vue 3 are not available in this plugin.

src/apis/state.ts

@@ -18,4 +18,6 @@ export {
   UnwrapRef,
   isReadonly,
   shallowReadonly,
+  proxyRefs,
+  ShallowUnwrapRef,
 } from '../reactivity'

src/component/componentProxy.ts

@@ -1,5 +1,5 @@
 import { ExtractPropTypes } from './componentProps'
-import { UnwrapRef } from '..'
+import { ShallowUnwrapRef } from '..'
 import { Data } from './common'
 
 import Vue, {
@@ -28,7 +28,7 @@ export type ComponentRenderProxy<
   $props: Readonly<P & PublicProps>
   $attrs: Data
 } & Readonly<P> &
-  UnwrapRef<B> &
+  ShallowUnwrapRef<B> &
   D &
   M &
   ExtractComputedReturns<C> &
@@ -38,7 +38,7 @@ export type ComponentRenderProxy<
 type VueConstructorProxy<PropsOptions, RawBindings> = VueConstructor & {
   new (...args: any[]): ComponentRenderProxy<
     ExtractPropTypes<PropsOptions>,
-    UnwrapRef<RawBindings>,
+    ShallowUnwrapRef<RawBindings>,
     ExtractPropTypes<PropsOptions, false>
   >
 }
@@ -55,7 +55,7 @@ export type VueProxy<
   Methods = DefaultMethods<Vue>
 > = Vue2ComponentOptions<
   Vue,
-  UnwrapRef<RawBindings> & Data,
+  ShallowUnwrapRef<RawBindings> & Data,
   Methods,
   Computed,
   PropsOptions,

src/mixin.ts

@@ -5,13 +5,7 @@ import {
   SetupFunction,
   Data,
 } from './component'
-import {
-  isRef,
-  isReactive,
-  markRaw,
-  unwrapRefProxy,
-  markReactive,
-} from './reactivity'
+import { isRef, isReactive, markRaw, markReactive } from './reactivity'
 import { isPlainObject, assert, proxy, warn, isFunction } from './utils'
 import { ref } from './apis'
 import vmStateManager from './utils/vmStateManager'
@@ -79,7 +73,7 @@ export function mixin(Vue: VueConstructor) {
     const setup = vm.$options.setup!
     const ctx = createSetupContext(vm)
 
-    // mark props as reactive
+    // mark props
     markReactive(props)
 
     // resolve scopedSlots and slots to functions
@@ -116,12 +110,8 @@ export function mixin(Vue: VueConstructor) {
             if (isFunction(bindingValue)) {
               bindingValue = bindingValue.bind(vm)
             }
-            // unwrap all ref properties
-            const unwrapped = unwrapRefProxy(bindingValue)
-            // mark the object as reactive
-            markReactive(unwrapped)
             // a non-reactive should not don't get reactivity
-            bindingValue = ref(markRaw(unwrapped))
+            bindingValue = ref(markRaw(bindingValue))
           }
         }
         asVmProperty(vm, name, bindingValue)

src/reactivity/index.ts

@@ -21,6 +21,7 @@ export {
   unref,
   shallowRef,
   triggerRef,
+  proxyRefs,
+  ShallowUnwrapRef,
 } from './ref'
 export { set } from './set'
-export { unwrapRefProxy } from './unwrap'

src/reactivity/ref.ts

@@ -2,7 +2,6 @@ import { Data } from '../component'
 import { RefKey, ReadonlyIdentifierKey } from '../utils/symbols'
 import { proxy, isPlainObject, warn } from '../utils'
 import { reactive, isReactive, shallowReactive } from './reactive'
-import { ComputedRef } from '../apis/computed'
 
 declare const _refBrand: unique symbol
 export interface Ref<T = any> {
@@ -22,16 +21,18 @@ type WeakCollections = WeakMap<any, any> | WeakSet<any>
 // RelativePath extends object -> true
 type BaseTypes = string | number | boolean | Node | Window
 
-export type UnwrapRef<T> = T extends ComputedRef<infer V>
-  ? UnwrapRefSimple<V>
-  : T extends Ref<infer V>
+export type ShallowUnwrapRef<T> = {
+  [K in keyof T]: T[K] extends Ref<infer V> ? V : T[K]
+}
+
+export type UnwrapRef<T> = T extends Ref<infer V>
   ? UnwrapRefSimple<V>
   : UnwrapRefSimple<T>
 
 type UnwrapRefSimple<T> = T extends Function | CollectionTypes | BaseTypes | Ref
   ? T
   : T extends Array<any>
-  ? T
+  ? { [K in keyof T]: UnwrapRefSimple<T[K]> }
   : T extends object
   ? UnwrappedObject<T>
   : T
@@ -50,6 +51,7 @@ type SymbolExtract<T> = (T extends { [Symbol.asyncIterator]: infer V }
     : {}) &
   (T extends { [Symbol.iterator]: infer V } ? { [Symbol.iterator]: V } : {}) &
   (T extends { [Symbol.match]: infer V } ? { [Symbol.match]: V } : {}) &
+  (T extends { [Symbol.matchAll]: infer V } ? { [Symbol.matchAll]: V } : {}) &
   (T extends { [Symbol.replace]: infer V } ? { [Symbol.replace]: V } : {}) &
   (T extends { [Symbol.search]: infer V } ? { [Symbol.search]: V } : {}) &
   (T extends { [Symbol.species]: infer V } ? { [Symbol.species]: V } : {}) &
@@ -188,3 +190,31 @@ export function triggerRef(value: any) {
 
   value.value = value.value
 }
+
+export function proxyRefs<T extends object>(
+  objectWithRefs: T
+): ShallowUnwrapRef<T> {
+  if (isReactive(objectWithRefs)) {
+    return objectWithRefs as ShallowUnwrapRef<T>
+  }
+  const value: Record<string, any> = reactive({ [RefKey]: objectWithRefs })
+
+  for (const key of Object.keys(objectWithRefs)) {
+    proxy(value, key, {
+      get() {
+        if (isRef(value[key])) {
+          return value[key].value
+        }
+        return value[key]
+      },
+      set(v: unknown) {
+        if (isRef(value[key])) {
+          return (value[key].value = unref(v))
+        }
+        value[key] = unref(v)
+      },
+    })
+  }
+
+  return value as ShallowUnwrapRef<T>
+}

src/reactivity/unwrap.ts

@@ -155,7 +155,7 @@ describe('with object props', () => {
 
       // assert setup context unwrapping
       expectType<number>(this.c)
-      expectType<string>(this.d.e)
+      expectType<string>(this.d.e.value)
       expectType<GT>(this.f.g)
 
       // setup context properties should be mutable