feat(shallowReadonly): add shallowReadonly and set computed to be shallowReadonly (#447)

* feat(shallowReadonly): add shallowReadonly and set computed to be shallowReadonly

* chore: fix tests

* chore: readme

* chore:restore formatting

* docs: update zh-CN README

Co-authored-by: Anthony Fu <[email protected]>

Author: pikax

README.md

@@ -38,13 +38,15 @@ import { ref, reactive } from '@vue/composition-api'
 Include `@vue/composition-api` after Vue and it will install itself automatically.
 
 <!--cdn-links-start-->
+
 ```html
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 <script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
 ```
+
 <!--cdn-links-end-->
 
-`@vue/composition-api` will be exposed to global variable `window.VueCompositionAPI`. 
+`@vue/composition-api` will be exposed to global variable `window.VueCompositionAPI`.
 
 ```ts
 const { ref, reactive } = VueCompositionAPI
@@ -68,8 +70,6 @@ export default defineComponent({
 
 To make JSX/TSX work with `@vue/composition-api`, check out [babel-preset-vca-jsx](https://github.com/luwanquan/babel-preset-vca-jsx) by [@luwanquan](https://github.com/luwanquan).
 
-
-
 ## SSR
 
 Even if there is no definitive Vue 3 API for SSR yet, this plugin implements the `onServerPrefetch` lifecycle hook that allows you to use the `serverPrefetch` hook found in the classic API.
@@ -78,7 +78,7 @@ Even if there is no definitive Vue 3 API for SSR yet, this plugin implements the
 import { onServerPrefetch } from '@vue/composition-api'
 
 export default {
-  setup (props, { ssrContext }) {
+  setup(props, { ssrContext }) {
     const result = ref()
 
     onServerPrefetch(async () => {
@@ -88,8 +88,8 @@ export default {
     return {
       result,
     }
-  },
-};
+  }
+}
 ```
 
 ## Limitations
@@ -124,7 +124,6 @@ state.list[1].value === 1 // true
 ❌ <b>Should NOT</b> use <code>ref</code> in a plain object when working with <code>Array</code>
 </summary>
 
-
 ```js
 const a = {
   count: ref(0),
@@ -162,8 +161,8 @@ const a = reactive({
   list: [
     reactive({
       count: ref(0),
-    })
-  ],
+    }),
+  ]
 })
 // unwrapped
 a.list[0].count === 0 // true
@@ -179,7 +178,6 @@ a.list[1].count === 1 // true
 
 </details>
 
-
 ### Template Refs
 
 <details>
@@ -212,7 +210,6 @@ a.list[1].count === 1 // true
 
 </details>
 
-
 <details>
 <summary>
 ✅ String ref && return it from <code>setup()</code> && Render Function / JSX
@@ -238,8 +235,8 @@ export default {
   },
 }
 ```
-</details>
 
+</details>
 
 <details>
 <summary>
@@ -266,7 +263,6 @@ export default {
 
 </details>
 
-
 <details>
 <summary>
 ❌ Render Function / JSX in <code>setup()</code>
@@ -301,7 +297,6 @@ export default {
 
 If you really want to use template refs in this case, you can access `vm.$refs` via `SetupContext.refs`
 
-
 ```jsx
 export default {
   setup(initProps, setupContext) {
@@ -347,7 +342,6 @@ declare module '@vue/composition-api' {
 
 > :bulb: In Vue 3, it will return an new proxy object.
 
-
 </details>
 
 ### Watch
@@ -359,11 +353,11 @@ declare module '@vue/composition-api' {
 
 ```js
 watch(() => {
-  /* ... */
+    /* ... */
 }, {
   immediate: true,
-  onTrack() {},  // not available
-  onTrigger() {},  // not available
+  onTrack() {}, // not available
+  onTrigger() {}, // not available
 })
 ```
 
@@ -389,18 +383,26 @@ app2.component('Bar', Bar) // equivalent to Vue.use('Bar', Bar)
 
 </details>
 
+### shallowReadonly
+
+<details>
+<summary>
+⚠️ <code>shallowReadonly()</code> will create a new object and with the same root properties, new properties added will <b>not</b> be readonly or reactive.
+</summary>
+
+> :bulb: In Vue 3, it will return an new proxy object.
+
+</details>
 
 ### Missing APIs
 
 The following APIs introduced in Vue 3 are not available in this plugin.
 
 - `readonly`
-- `shallowReadonly`
 - `defineAsyncComponent`
 - `onRenderTracked`
 - `onRenderTriggered`
 - `isProxy`
-- `isReadonly`
 - `isVNode`
 
 ### Reactive APIs in `data()`
@@ -415,18 +417,16 @@ export default {
   data() {
     return {
       // will result { a: { value: 1 } } in template
-      a: ref(1) 
+      a: ref(1),
     }
   },
 }
 ```
 
 </details>
 
-
 ### Performance Impact
 
 Due the the limitation of Vue2's public API. `@vue/composition-api` inevitably introduced some extract costs. It shouldn't bother you unless in extreme environments.
 
 You can check the [benchmark results](https://antfu.github.io/vue-composition-api-benchmark-results/) for more details.
-

README.zh-CN.md

@@ -78,17 +78,17 @@ export default defineComponent({
 import { onServerPrefetch } from '@vue/composition-api'
 
 export default {
-  setup (props, { ssrContext }) {
+  setup(props, { ssrContext }) {
     const result = ref()
 
     onServerPrefetch(async () => {
       result.value = await callApi(ssrContext.someId)
     })
 
     return {
-      result,
+      result
     }
-  },
+  }
 }
 ```
 
@@ -130,27 +130,27 @@ state.list[1].value === 1 // true
 
 ```js
 const a = {
-  count: ref(0),
+  count: ref(0)
 }
 const b = reactive({
-  list: [a], // `a.count` 不会自动展开!!
+  list: [a] // `a.count` 不会自动展开!!
 })
 
 // `count` 不会自动展开, 须使用 `.value`
-b.list[0].count.value === 0; // true
+b.list[0].count.value === 0 // true
 ```
 
 ```js
 const b = reactive({
   list: [
     {
-      count: ref(0), // 不会自动展开!!
-    },
-  ],
+      count: ref(0) // 不会自动展开!!
+    }
+  ]
 })
 
 // `count` 不会自动展开, 须使用 `.value`
-b.list[0].count.value === 0; // true
+b.list[0].count.value === 0 // true
 ```
 
 </details>
@@ -163,17 +163,17 @@ b.list[0].count.value === 0; // true
 
 ```js
 const a = reactive({
-  count: ref(0),
+  count: ref(0)
 })
 const b = reactive({
-  list: [a],
+  list: [a]
 })
 // 自动展开
 b.list[0].count === 0 // true
 
 b.list.push(
   reactive({
-    count: ref(1),
+    count: ref(1)
   })
 )
 // 自动展开
@@ -205,9 +205,9 @@ b.list[1].count === 1; // true
       })
 
       return {
-        root,
+        root
       }
-    },
+    }
   }
 </script>
 ```
@@ -232,13 +232,13 @@ export default {
     })
 
     return {
-      root,
+      root
     }
   },
   render() {
     // 使用 JSX
     return () => <div ref="root" />
-  },
+  }
 }
 ```
 
@@ -262,9 +262,9 @@ export default {
       const root = ref(null)
 
       return {
-        root,
+        root
       }
-    },
+    }
   }
 </script>
 ```
@@ -289,7 +289,7 @@ export default {
 
     // 使用 JSX
     return () => <div ref={root} />
-  },
+  }
 }
 ```
 
@@ -348,7 +348,7 @@ declare module '@vue/composition-api' {
 
 此行为与 Vue 2 中的 `Vue.observable` 一致
 
-> :bulb: 在 Vue 3 中，`reactive()` 会返回一个新的的代理对象.
+> :bulb: 在 Vue 3 中，`reactive()` 会返回一个新的的代理对象
 
 </details>
 
@@ -361,33 +361,42 @@ declare module '@vue/composition-api' {
 </summary>
 
 ```js
-watch(() => {
-  /* ... */
-}, {
-  immediate: true,
-  onTrack() {},  // 不可用
-  onTrigger() {},  // 不可用
-})
+watch(
+  () => {
+    /* ... */
+  }, {
+    immediate: true,
+    onTrack() {},  // 不可用
+    onTrigger() {},  // 不可用
+  }
+)
 ```
 
 </details>
 
+### shallowReadonly
+
+<details>
+<summary>
+⚠️ <code>shallowReadonly()</code> 会返回一个新的浅拷贝对象，在此之后新加的字段<b>将不会</b>获得只读或响应式状态。
+</summary>
+
+> :bulb: 在 Vue 3 中，`shallowReadonly()` 会返回一个新的的代理对象
+
+</details>
 
 ### 缺失的 API
 
 以下在 Vue 3 新引入的 API ，在本插件中暂不适用：
 
 - `readonly`
-- `shallowReadonly`
 - `defineAsyncComponent`
 - `onRenderTracked`
 - `onRenderTriggered`
 - `customRef`
 - `isProxy`
-- `isReadonly`
 - `isVNode`
 
-
 ### 在 `data()` 中使用组合式 API
 
 <details>
@@ -402,7 +411,7 @@ export default {
       // 在模版中会成为 { a: { value: 1 } }
       a: ref(1) 
     }
-  },
+  }
 }
 ```