refactor(vue): use unref instead of access _value

README.md

@@ -1,59 +1,10 @@
-# object-shake
+# Object Shake
 
 ### Use Cases
 
-#### - `Vanilla`
+- [Vanilla](./packages/core/README.md)
+- [Vue3](./packages/vue/README.md)
 
-```js
-import { shake } from '@object-shake/core'
+### Performance
 
-const target = {
-  a: {
-    b: { c: 1, d: 2 },
-    e: 3
-  },
-  f: 4
-}
-
-const [proxyTarget, getShakedTarget] = shake(target)
-
-proxyTarget.a.b.c
-console.log(getShakedTarget()) // { a: { b: { c: 1 } } }
-
-proxyTarget.f
-console.log(getShakedTarget()) // { a: { b: { c: 1 } }, f: 4 }
-```
-
-#### - `Vue3`
-
-```vue
-<script setup>
-import { ref, onMounted } from 'vue'
-import { reactiveShake } from '@object-shake/vue'
-
-const target = ref({
-  a: {
-    b: { c: 1, d: 2 },
-    e: 3
-  },
-  f: 4
-})
-
-const [proxyTarget, getShakedTarget] = reactiveShake(target)
-
-onMounted(() => {
-  console.log(getShakedTarget()) // { a: { b: { c: 1 } }, f: 4 }
-})
-</script>
-
-<template>
-  <div>
-    <span>{{ proxyTarget.a.b.c }}</span>
-    <span>{{ proxyTarget.f }}</span>
-  </div>
-</template>
-```
-
-### Perf
-
-- performance Test in Nuxt3: `shake state` vs `state` -> https://github.com/undermoonn/vue-reactive-shake-perf
+- Benchmark in [Nuxt3](https://github.com/undermoonn/vue-reactive-shake-perf): `useState` vs `useStateShake`

packages/vue/README.md

@@ -1,7 +1,7 @@
 ```vue
 <script setup>
 import { ref, onMounted } from 'vue'
-import { reactiveShake } from '@object-shake/vue'
+import { shakeMaybeRef } from '@object-shake/vue'
 
 const target = ref({
   a: {
@@ -11,17 +11,17 @@ const target = ref({
   f: 4
 })
 
-const [proxyTarget, getShakedTarget] = reactiveShake(target)
+const [proxy, getShaked] = shakeMaybeRef(target)
 
 onMounted(() => {
-  console.log(getShakedTarget()) // { a: { b: { c: 1 } }, f: 4 }
+  console.log(getShaked()) // { a: { b: { c: 1 } }, f: 4 }
 })
 </script>
 
 <template>
   <div>
-    <span>{{ proxyTarget.a.b.c }}</span>
-    <span>{{ proxyTarget.f }}</span>
+    <span>{{ proxy.a.b.c }}</span>
+    <span>{{ proxy.f }}</span>
   </div>
 </template>
 ```

packages/vue/src/index.test.ts

@@ -1,17 +1,17 @@
 import { ref, reactive } from '@vue/reactivity'
 import { test, expect, describe } from 'vitest'
-import { reactiveShake } from '.'
+import { shakeMaybeRef } from '.'
 
-describe('[preview vue] test', () => {
-  test('ref shake base', () => {
-    const [p, s] = reactiveShake(ref({ a: { b: 1 }, c: 2 }))
+describe('shake object of vue', () => {
+  test('ref', () => {
+    const [p, s] = shakeMaybeRef(ref({ a: { b: 1 }, c: 2 }))
     expect(s()).toEqual({})
     p.value.a.b
     expect(s()).toEqual({ a: { b: 1 } })
   })
 
-  test('reactive shake base', () => {
-    const [p, s] = reactiveShake(reactive({ a: { b: 1 }, c: 2 }))
+  test('reactive', () => {
+    const [p, s] = shakeMaybeRef(reactive({ a: { b: 1 }, c: 2 }))
     expect(s()).toEqual({})
     p.a.b
     expect(s()).toEqual({ a: { b: 1 } })

packages/vue/src/index.ts

@@ -1,14 +1,7 @@
 import { shake } from '@object-shake/core'
-import { MaybeRef, unref, UnwrapRef } from '@vue/reactivity'
+import { unref, ref, isRef, type UnwrapRef, type Ref } from '@vue/reactivity'
 
-export function reactiveShake<T extends MaybeRef<object>>(target: T): [T, () => UnwrapRef<T>] {
-  const [p, s] = shake(target)
-
-  return [
-    p,
-    () => {
-      const res = unref(s())
-      return (res as any)._value || res
-    }
-  ]
+export function shakeMaybeRef<T extends object | Ref>(target: T): [T, () => UnwrapRef<T>] {
+  const [proxy, getShaked] = shake(unref(target))
+  return [isRef(target) ? ref(proxy) : proxy, getShaked]
 }