From 96eabdd62a9833351b967d832752421b2c999374 Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Sun, 21 Apr 2024 15:41:12 +0800
Subject: [PATCH] refactor(reactivity): shallowReadonly

---
 pages/index/index.uvue                        |  5 ++
 .../shallow-reactive/shallow-reactive.test.js |  1 +
 .../shallow-readonly/shallow-readonly.test.js | 14 ++--
 .../shallow-readonly/shallow-readonly.uvue    | 78 +++++++++++--------
 ...ions-API-composition-API-correspondence.md |  2 +-
 5 files changed, 60 insertions(+), 40 deletions(-)

diff --git a/pages/index/index.uvue b/pages/index/index.uvue
index ca4ac9d..e03e4c1 100644
--- a/pages/index/index.uvue
+++ b/pages/index/index.uvue
@@ -607,6 +607,11 @@ export default {
                   name: 'shallowReactive',
                   url: 'shallow-reactive/shallow-reactive'
                 },
+                {
+                  id: 'shallow-readonly',
+                  name: 'shallowReadonly',
+                  url: 'shallow-readonly/shallow-readonly'
+                },
               ]
             }
           ] as Page[]
diff --git a/pages/reactivity/advanced/shallow-reactive/shallow-reactive.test.js b/pages/reactivity/advanced/shallow-reactive/shallow-reactive.test.js
index 88c775a..13b8b25 100644
--- a/pages/reactivity/advanced/shallow-reactive/shallow-reactive.test.js
+++ b/pages/reactivity/advanced/shallow-reactive/shallow-reactive.test.js
@@ -22,6 +22,7 @@ describe('shallowReactive', () => {
     await incrementStateCountBtn.tap()
 
     expect(await stateCount.text()).toBe('1')
+    // TODO: web 失败,获取到的还是 0
     expect(await stateNestedCount.text()).toBe('1')
   })
 })
\ No newline at end of file
diff --git a/pages/reactivity/advanced/shallow-readonly/shallow-readonly.test.js b/pages/reactivity/advanced/shallow-readonly/shallow-readonly.test.js
index 5e022f6..f01ad29 100644
--- a/pages/reactivity/advanced/shallow-readonly/shallow-readonly.test.js
+++ b/pages/reactivity/advanced/shallow-readonly/shallow-readonly.test.js
@@ -1,4 +1,4 @@
-const PAGE_PATH = '/pages/composition-api/reactivity/shallow-readonly/shallow-readonly'
+const PAGE_PATH = '/pages/reactivity/advanced/shallow-readonly/shallow-readonly'
 
 describe('shallowReadonly', () => {
   let page = null
@@ -8,10 +8,10 @@ describe('shallowReadonly', () => {
   })
   it('basic', async () => {
     let stateCount = await page.$('#state-count')
-    expect(await stateCount.text()).toBe('state.count: 0')
+    expect(await stateCount.text()).toBe('0')
 
     let stateNestedCount = await page.$('#state-nested-count')
-    expect(await stateNestedCount.text()).toBe('state.nested.count: 0')
+    expect(await stateNestedCount.text()).toBe('0')
 
     if (process.env.uniTestPlatformInfo.startsWith('web')) {
       // web端操作readonly对象会直接编译失败,以下测试无法执行
@@ -24,15 +24,15 @@ describe('shallowReadonly', () => {
     const incrementStateNestedCountBtn = await page.$('#increment-state-nested-count-btn')
     await incrementStateNestedCountBtn.tap()
 
-    expect(await stateCount.text()).toBe('state.count: 0')
-    expect(await stateNestedCount.text()).toBe('state.nested.count: 0')
+    expect(await stateCount.text()).toBe('0')
+    expect(await stateNestedCount.text()).toBe('0')
 
     const updatePageRenderBtn = await page.$('#update-page-render-btn')
     await updatePageRenderBtn.tap()
 
     stateCount = await page.$('#state-count')
-    expect(await stateCount.text()).toBe('state.count: 0')
+    expect(await stateCount.text()).toBe('0')
     stateNestedCount = await page.$('#state-nested-count')
-    expect(await stateNestedCount.text()).toBe('state.nested.count: 1')
+    expect(await stateNestedCount.text()).toBe('1')
   })
 })
\ No newline at end of file
diff --git a/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue b/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue
index 100e85e..9f4b6d4 100644
--- a/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue
+++ b/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue
@@ -1,45 +1,59 @@
 <template>
   <view :key="pageKey" class="page">
-    <text id="state-count" class="mb-10">state.count: {{ state.count }}</text>
-    <text id="state-nested-count" class="mb-10">state.nested.count: {{ state.nested.count }}</text>
-    <button id="increment-state-count-btn" class="mb-10" @click="incrementStateCount">
+    <view class="flex justify-between flex-row mb-10">
+      <text>state.count:</text>
+      <text id="state-count">{{ state.count }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>state.nested.count:</text>
+      <text id="state-nested-count">{{ state.nested.count }}</text>
+    </view>
+    <button
+      id="increment-state-count-btn"
+      class="mb-10"
+      @click="incrementStateCount">
       increment state.count
     </button>
-    <button id="increment-state-nested-count-btn" class="mb-10" @click="incrementStateNestedCount">
+    <button
+      id="increment-state-nested-count-btn"
+      class="mb-10"
+      @click="incrementStateNestedCount">
       increment state.nested.count
     </button>
-    <button id="update-page-render-btn" @click="updatePageRender">update page render</button>
+    <button id="update-page-render-btn" @click="updatePageRender">
+      update page render
+    </button>
   </view>
 </template>
 
-<script setup>
-  let pageKey = ref<number>(0)
+<script setup lang="uts">
+let pageKey = ref<number>(0)
 
-  type StateNested = {
-    count : number
-  }
-  type State = {
-    count : number,
-    nested : StateNested
-  }
-  const state = shallowReadonly({
-    count: 0,
-    nested: {
-      count: 0
-    } as StateNested
-  } as State)
+type StateNested = {
+  count : number
+}
+type State = {
+  count : number,
+  nested : StateNested
+}
+const state = shallowReadonly({
+  count: 0,
+  nested: {
+    count: 0
+  } as StateNested
+} as State)
 
-  // #ifdef APP
-  const incrementStateCount = () => {
-    state.count++
-  }
+// #ifdef APP
+const incrementStateCount = () => {
+  state.count++
+}
 
-  const incrementStateNestedCount = () => {
-    state.nested.count++
-  }
-  // #endif
+const incrementStateNestedCount = () => {
+  state.nested.count++
+}
+// #endif
 
-  const updatePageRender = () => {
-    pageKey.value = Date.now()
-  }
-</script>
\ No newline at end of file
+const updatePageRender = () => {
+  pageKey.value = Date.now()
+}
+</script>
diff --git a/refactor_options-API-composition-API-correspondence.md b/refactor_options-API-composition-API-correspondence.md
index f353ab7..0aa8aa5 100644
--- a/refactor_options-API-composition-API-correspondence.md
+++ b/refactor_options-API-composition-API-correspondence.md
@@ -146,7 +146,7 @@ function transform(fileInfo, api) {
 - [x] markRaw
 - [x] onScopeDispose
 - [x] shallowReactive
-- [ ] shallowReadonly
+- [x] shallowReadonly
 - [ ] shallowRef
 - [ ] toRaw
 - [ ] triggerRef
-- 
GitLab