refactor(component instance): circular reference

pages.json

@@ -456,9 +456,15 @@
       }
     },
     {
-      "path": "pages/component-instance/circular-reference/circular-reference",
+      "path": "pages/component-instance/circular-reference/circular-reference-options",
       "style": {
-        "navigationBarTitleText": "circular reference"
+        "navigationBarTitleText": "循环引用 选项式 API"
+      }
+    },
+    {
+      "path": "pages/component-instance/circular-reference/circular-reference-composition",
+      "style": {
+        "navigationBarTitleText": "循环引用 组合式 API"
       }
     },
 

pages/component-instance/circular-reference/ChildA-composition.uvue

+<template>
+  <view class="child-a">
+    <view class="flex justify-between flex-row mb-10">
+      <text>child A limit:</text>
+      <text>{{limit}}</text>
+    </view>
+    <child-b v-if="limit>1" :limit="limit-1" />
+  </view>
+</template>
+
+<script setup lang='uts'>
+  import ChildB from './childB-composition.uvue'
+
+  defineProps({
+    limit: {
+      type: Number,
+      default: 0
+    }
+  })
+</script>

pages/component-instance/circular-reference/ChildA.uvue → pages/component-instance/circular-reference/ChildA-options.uvue

@@ -4,16 +4,16 @@
       <text>child A limit:</text>
       <text>{{limit}}</text>
     </view>
-    <child-b v-if="limit>1" :limit="limit-1"></child-b>
+    <child-b v-if="limit>1" :limit="limit-1" />
   </view>
 </template>
 
 <script lang='uts'>
-  import childB from './childB.uvue'
+  import ChildB from './childB-options.uvue'
 
   export default {
     components: {
-      childB
+      ChildB
     },
     props: {
       limit: {

pages/component-instance/circular-reference/ChildB-composition.uvue

+<template>
+  <view class="child-b">
+    <view class="flex justify-between flex-row mb-10">
+      <text>child B limit:</text>
+      <text>{{ limit }}</text>
+    </view>
+    <child-a v-if="limit > 1" :limit="limit - 1" />
+  </view>
+</template>
+
+<script setup lang="uts">
+  import ChildA from './childA-composition.uvue'
+
+  defineProps({
+    limit: {
+      type: Number,
+      default: 0
+    }
+  })
+</script>

pages/component-instance/circular-reference/ChildB.uvue → pages/component-instance/circular-reference/ChildB-options.uvue

@@ -4,16 +4,16 @@
       <text>child B limit:</text>
       <text>{{limit}}</text>
     </view>
-    <child-a v-if="limit>1" :limit="limit-1"></child-a>
+    <child-a v-if="limit>1" :limit="limit-1" />
   </view>
 </template>
 
 <script lang='uts'>
-  import childA from './childA.uvue'
+  import ChildA from './childA-options.uvue'
 
   export default {
     components: {
-      childA
+      ChildA
     },
     props: {
       limit: {

pages/component-instance/circular-reference/ChildC-composition.uvue

+<template>
+  <view class="child-c">
+    <view class="flex justify-between flex-row mb-10">
+      <text>child C limit:</text>
+      <text>{{limit}}</text>
+    </view>
+    <child-c-composition v-if="limit>1" :limit="limit-1" />
+  </view>
+</template>
+
+<script setup lang="uts">
+  defineOptions({
+    name: "ChildCComposition"
+  })
+
+  defineProps({
+    limit: {
+      type: Number,
+      default: 0
+    }
+  })
+</script>

pages/component-instance/circular-reference/ChildC.uvue → pages/component-instance/circular-reference/ChildC-options.uvue

@@ -4,13 +4,13 @@
       <text>child C limit:</text>
       <text>{{limit}}</text>
     </view>
-    <child-c v-if="limit>1" :limit="limit-1"></child-c>
+    <child-c-options v-if="limit>1" :limit="limit-1" />
   </view>
 </template>
 
 <script lang='uts'>
   export default {
-    name: "child-c",
+    name: "ChildCOptions",
     props: {
       limit: {
         type: Number,

pages/component-instance/circular-reference/circular-reference-composition.uvue

+<template>
+  <view class="page">
+    <!-- #ifdef APP-ANDROID -->
+    <!-- TODO: ios & web 不支持 a b 互相引用 -->
+    <child-a :limit="5" />
+    <!-- #endif -->
+    <child-c :limit="5" />
+  </view>
+</template>
+
+<script setup lang='uts'>
+  // #ifdef APP-ANDROID
+  import ChildA from './childA-composition.uvue'
+  // #endif
+  import ChildC from './ChildC-composition.uvue'
+</script>
\ No newline at end of file

pages/component-instance/circular-reference/circular-reference.uvue → pages/component-instance/circular-reference/circular-reference-options.uvue

@@ -2,29 +2,24 @@
   <view class="page">
     <!-- #ifdef APP-ANDROID -->
     <!-- TODO: ios & web 不支持 a b 互相引用 -->
-    <child-a :limit="5"></child-a>
+    <child-a :limit="5" />
     <!-- #endif -->
-    <child-c :limit="5"></child-c>
+    <child-c :limit="5" />
   </view>
 </template>
 
 <script lang='uts'>
   // #ifdef APP-ANDROID
-  import childA from './childA.uvue'
+  import ChildA from './childA-options.uvue'
   // #endif
-  import childC from './childC.uvue'
+  import childC from './childC-options.uvue'
 
   export default {
     components: {
       // #ifdef APP-ANDROID
-      childA,
+      ChildA,
       // #endif
       childC
-    },
-    data() {
-      return {
-        text: ''
-      }
-    },
+    }
   }
 </script>
\ No newline at end of file

pages/component-instance/circular-reference/circular-reference.test.js

-const PAGE_PATH = '/pages/component-instance/circular-reference/circular-reference'
+const OPTIONS_PAGE_PATH = '/pages/component-instance/circular-reference/circular-reference-options'
+const COMPOSITION_PAGE_PATH = '/pages/component-instance/circular-reference/circular-reference-composition'
 
-describe('circular-reference', () => {
+describe('', () => {
   let page
-  beforeAll(async () => {
-    page = await program.reLaunch(PAGE_PATH)
-    await page.waitFor(1000)
-  })
 
-  if (process.env.uniTestPlatformInfo.toLowerCase().includes('android')) {
-    it('cross reference', async () => {
+  const test = async (page) => {
+    if (process.env.uniTestPlatformInfo.toLowerCase().includes('android')) {
+      // cross reference
       const childA = await page.$$('.child-a')
       expect(childA.length).toBe(3)
 
       const childB = await page.$$('.child-b')
       expect(childB.length).toBe(2)
-    })
-  }
+    }
 
-  it('reference self', async () => {
+    // reference self
     const childC = await page.$$('.child-c')
     expect(childC.length).toBe(5)
+  }
+
+  it('circular-reference options API', async () => {
+    page = await program.reLaunch(OPTIONS_PAGE_PATH)
+    await page.waitFor('view')
+
+    await test(page)
+  })
+
+  it('circular-reference composition API', async () => {
+    page = await program.reLaunch(COMPOSITION_PAGE_PATH)
+    await page.waitFor('view')
+
+    await test(page)
   })
 })
\ No newline at end of file

pages/index/index.uvue

@@ -382,7 +382,18 @@ export default {
             {
               id: 'circular-reference',
               name: 'circular reference',
-              url: 'circular-reference/circular-reference'
+              children: [
+                {
+                  id: 'circular-reference-options',
+                  name: '循环引用 选项式 API',
+                  url: 'circular-reference-options'
+                },
+                {
+                  id: 'circular-reference-composition',
+                  name: '循环引用 组合式 API',
+                  url: 'circular-reference-composition'
+                },
+              ]
             }
           ] as Page[]
         },