feat(reactivePick): allow ref picks

packages/shared/reactivePick/index.md

@@ -19,6 +19,10 @@ const obj = reactive({
 })
 
 const picked = reactivePick(obj, 'x', 'elementX') // { x: number, elementX: number }
+// or
+const pickedArr = reactivePick(obj, ['x', 'elementX']) // { x: number, elementX: number }
+// or
+const pickedArrRef = reactivePick(obj, ref(['x', 'elementX'])) // { x: number, elementX: number }
 ```
 
 ### Scenarios
@@ -43,6 +47,8 @@ const props = defineProps({
 })
 
 const childProps = reactivePick(props, 'color', 'font')
+// or
+const childPropsArr = reactivePick(props, Object.keys(ChildComp.props))
 </script>
 
 <template>
@@ -80,14 +86,33 @@ const size = reactivePick(useElementBounding(), 'height', 'width')
 /**
  * Reactively pick fields from a reactive object
  *
+ * Overload 1: pass keys individually
+ *
  * @link https://vueuse.js.org/reactivePick
+ * @param obj
+ * @param keys
  */
 export declare function reactivePick<T extends object, K extends keyof T>(
   obj: T,
   ...keys: K[]
 ): {
   [S in K]: UnwrapRef<T[S]>
 }
+/**
+ * Reactively pick fields from a reactive object
+ *
+ * Overload 2: pass keys as (ref) array
+ *
+ * @link https://vueuse.js.org/reactivePick
+ * @param obj
+ * @param keys
+ */
+export declare function reactivePick<T extends object, K extends keyof T>(
+  obj: T,
+  keys: MaybeRef<K[]>
+): {
+  [S in K]: UnwrapRef<T[S]>
+}
 ```
 
 ## Source

packages/shared/reactivePick/index.test.ts

@@ -0,0 +1,67 @@
+import { del, ref } from 'vue-demi'
+import { reactivePick } from '.'
+import { useSetup } from '../../.test'
+
+describe('reactivePick', () => {
+  it('should work with variadic parameters', () => {
+    useSetup(() => {
+      const object = { a: 'a', b: 'b' }
+      const pickedObject = reactivePick(object, 'a', 'b')
+
+      expect(pickedObject.a).toEqual('a')
+      expect(pickedObject.b).toEqual('b')
+      expect((pickedObject as any).c).toBeUndefined()
+
+      object.a = 'foo'
+
+      expect(pickedObject.a).toEqual('foo')
+    })
+  })
+
+  it('should prefer the variadic overload over the array one', () => {
+    useSetup(() => {
+      const object = { a: 'a', b: 'b' }
+      const pickedObject = reactivePick(object, 'a')
+
+      expect(pickedObject.a).toEqual('a')
+    })
+  })
+
+  it('should work with non-ref key arrays', () => {
+    useSetup(() => {
+      const object = { a: 'a', b: 'b', c: 'c' }
+      const pickedObject = reactivePick(object, ['a', 'b'])
+
+      expect(pickedObject.a).toEqual('a')
+      expect(pickedObject.b).toEqual('b')
+      expect((pickedObject as any).c).toBeUndefined()
+
+      object.a = 'foo'
+
+      expect(pickedObject.a).toEqual('foo')
+    })
+  })
+
+  it('should work with ref key arrays', () => {
+    useSetup(() => {
+      const object = { a: 'a', b: 'b', c: 'c' }
+      const picks = ref(['a' as keyof typeof object])
+      const pickedObject = reactivePick(object, picks)
+
+      expect(pickedObject.a).toEqual('a')
+      expect(pickedObject.b).toBeUndefined()
+
+      object.a = 'foo'
+      expect(pickedObject.a).toEqual('foo')
+
+      picks.value.push('b')
+      expect(pickedObject.b).toEqual('b')
+
+      object.b = 'bar'
+      expect(pickedObject.b).toEqual('bar')
+
+      del(picks.value, 1)
+      expect(pickedObject.b).toBeUndefined()
+    })
+  })
+})

packages/shared/reactivePick/index.ts

@@ -1,13 +1,62 @@
-import { reactive, toRef, UnwrapRef } from 'vue-demi'
+import { MaybeRef, tryOnUnmounted } from '@vueuse/shared'
+import { reactive, toRef, unref, UnwrapRef, set, del, watchEffect, watch, isVue2, isVue3 } from 'vue-demi'
 
 /**
  * Reactively pick fields from a reactive object
  *
+ * Overload 1: pass keys individually
+ *
  * @link https://vueuse.js.org/reactivePick
+ * @param obj
+ * @param keys
  */
 export function reactivePick<T extends object, K extends keyof T>(
   obj: T,
   ...keys: K[]
-): { [S in K]: UnwrapRef<T[S]> } {
-  return reactive(Object.fromEntries(keys.map(k => [k, toRef(obj, k)]))) as any
+): { [S in K]: UnwrapRef<T[S]> }
+
+/**
+ * Reactively pick fields from a reactive object
+ *
+ * Overload 2: pass keys as (ref) array
+ *
+ * @link https://vueuse.js.org/reactivePick
+ * @param obj
+ * @param keys
+ */
+export function reactivePick<T extends object, K extends keyof T>(
+  obj: T,
+  keys: MaybeRef<K[]>
+): { [S in K]: UnwrapRef<T[S]> }
+
+export function reactivePick<T extends object, K extends keyof T>(obj: T, firstKey: K | MaybeRef<K[]>, ...otherKeys: K[]) {
+  if (otherKeys.length > 0 || (firstKey as K) in obj)
+    return reactive(Object.fromEntries([firstKey as K, ...otherKeys].map(k => [k, toRef(obj, k)])))
+
+  const reactiveObject = reactive({})
+
+  const stopWatchEffect = watchEffect(() => {
+    const keys = unref(firstKey) as K[]
+    if (isVue3)
+      Object.keys(reactiveObject).filter(key => !keys.includes(key as K)).forEach(key => del(reactiveObject, key))
+
+    keys.forEach((key: K) => set(reactiveObject, key, toRef(obj, key)))
+  }, { flush: isVue2 ? 'sync' : 'pre' })
+
+  if (isVue2) {
+    const stopWatch = watch(() => unref(firstKey), (keys) => {
+      Object.keys(reactiveObject).filter(key => !(keys as K[]).includes(key as K)).forEach(key => del(reactiveObject, key))
+    }, { flush: 'sync' })
+
+    tryOnUnmounted(() => {
+      stopWatchEffect()
+      stopWatch()
+    })
+
+    return reactiveObject
+  }
+
+  tryOnUnmounted(stopWatchEffect)
+
+  return reactiveObject
 }