refactor(reactivity): effectScope

pages/index/index.uvue

@@ -581,6 +581,11 @@ export default {
                   name: 'customRef',
                   url: 'custom-ref/custom-ref'
                 },
+                {
+                  id: 'effect-scope',
+                  name: 'effectScope',
+                  url: 'effect-scope/effect-scope'
+                },
               ]
             }
           ] as Page[]

pages/reactivity/advanced/effect-scope/effect-scope.test.js

-const PAGE_PATH = '/pages/composition-api/reactivity/effect-scope/effect-scope'
+const PAGE_PATH = '/pages/reactivity/advanced/effect-scope/effect-scope'
 
 describe('effectScope', () => {
-  const isWeb = process.env.uniTestPlatformInfo.startsWith('web')
-  let page = null
+  let page = null
+  const platformInfo = process.env.uniTestPlatformInfo.toLowerCase()
+  const isAndroid = platformInfo.startsWith('android')
+  const isIos = platformInfo.startsWith('ios')
+  const isWeb = platformInfo.startsWith('web')
+    
   beforeAll(async () => {
     page = await program.reLaunch(PAGE_PATH)
     await page.waitFor('view')
   })
   it('basic', async () => {
     const counter = await page.$('#counter')
-    expect(await counter.text()).toBe('counter: 0')
+    expect(await counter.text()).toBe('0')
 
-    const watchCounterRes = await page.$('#watch-counter-res')
-    expect(await watchCounterRes.text()).toBe(isWeb ? 'watch counter result:' : 'watch counter result: ')
+    const watchCounterRes = await page.$('#watch-counter-res')
+    if(isAndroid || isWeb){
+      expect(await watchCounterRes.text()).toBe('')
+    }
+    if(isIos){
+      expect(await watchCounterRes.text()).toBe(null)
+    }
 
     const watchEffectCounterRes = await page.$('#watch-effect-counter-res')
-    expect(await watchEffectCounterRes.text()).toBe('watchEffect counter result: counter: 0')
+    expect(await watchEffectCounterRes.text()).toBe('counter: 0')
 
     const incrementCounterBtn = await page.$('#increment-counter-btn')
     await incrementCounterBtn.tap()
 
-    expect(await counter.text()).toBe('counter: 1')
-    expect(await watchCounterRes.text()).toBe('watch counter result: newVal: 1, oldVal: 0')
-    expect(await watchEffectCounterRes.text()).toBe('watchEffect counter result: counter: 1')
+    expect(await counter.text()).toBe('1')
+    expect(await watchCounterRes.text()).toBe('newVal: 1, oldVal: 0')
+    expect(await watchEffectCounterRes.text()).toBe('counter: 1')
 
     const stopEffectScopeBtn = await page.$('#stop-effect-scope-btn')
     await stopEffectScopeBtn.tap()
 
     await incrementCounterBtn.tap()
 
-    expect(await counter.text()).toBe('counter: 2')
-    expect(await watchCounterRes.text()).toBe('watch counter result: newVal: 1, oldVal: 0')
-    expect(await watchEffectCounterRes.text()).toBe('watchEffect counter result: counter: 1')
+    expect(await counter.text()).toBe('2')
+    expect(await watchCounterRes.text()).toBe('newVal: 1, oldVal: 0')
+    expect(await watchEffectCounterRes.text()).toBe('counter: 1')
 
   })
 })
\ No newline at end of file

pages/reactivity/advanced/effect-scope/effect-scope.uvue

 <template>
   <view class="page">
-    <text id="counter">counter: {{ counter }}</text>
-    <text id="watch-counter-res" class="mt-10">watch counter result: {{ watchCounterRes }}</text>
-    <text id="watch-effect-counter-res" class="mt-10">watchEffect counter result:
-      {{ watchEffectCounterRes }}</text>
-    <button id="increment-counter-btn" class="mt-10" @click="() => {counter++}">increment counter</button>
-    <button id="stop-effect-scope-btn" class="mt-10" @click="stopEffectScope">stop effect scope</button>
+    <view class="flex justify-between flex-row mb-10">
+      <text>counter:</text>
+      <text id="counter">{{ counter }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>watch counter result:</text>
+      <text id="watch-counter-res">{{ watchCounterRes }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>watchEffect counter result:</text>
+      <text id="watch-effect-counter-res">{{ watchEffectCounterRes }}</text>
+    </view>
+    <button
+      id="increment-counter-btn"
+      class="mt-10"
+      @click="
+        () => {
+          counter++;
+        }
+      ">
+      increment counter
+    </button>
+    <button id="stop-effect-scope-btn" class="mt-10" @click="stopEffectScope">
+      stop effect scope
+    </button>
   </view>
 </template>
 
-<script setup>
-  const scope = effectScope()
+<script setup lang="uts">
+const scope = effectScope()
 
-  const counter = ref(0)
+const counter = ref(0)
 
-  const watchCounterRes = ref('')
+const watchCounterRes = ref('')
 
-  const watchEffectCounterRes = ref('')
+const watchEffectCounterRes = ref('')
 
-  scope.run(() => {
-    watch(counter, (newVal : number, oldVal : number) => {
-      watchCounterRes.value = `newVal: ${newVal}, oldVal: ${oldVal}`
-    })
+scope.run(() => {
+  watch(counter, (newVal : number, oldVal : number) => {
+    watchCounterRes.value = `newVal: ${newVal}, oldVal: ${oldVal}`
+  })
 
-    watchEffect(() => {
-      watchEffectCounterRes.value = `counter: ${counter.value}`
-    })
+  watchEffect(() => {
+    watchEffectCounterRes.value = `counter: ${counter.value}`
   })
+})
 
-  const stopEffectScope = () => scope.stop()
-</script>
+const stopEffectScope = () => scope.stop()
+</script>
\ No newline at end of file

refactor_options-API-composition-API-correspondence.md

@@ -141,7 +141,7 @@ function transform(fileInfo, api) {
 - [x] unRef
 
 - [x] customRef
-- [ ] effectScope
+- [x] effectScope
 - [ ] getCurrentScope
 - [ ] markRaw
 - [ ] onScopeDispose