refactor(component instance): $root

pages.json

@@ -108,6 +108,19 @@
         "navigationBarTitleText": "$parent 组合式 API"
       }
     },
+    // #ifdef APP
+    {
+      "path": "pages/component-instance/root/root-options",
+      "style": {
+        "navigationBarTitleText": "$root 选项式 API"
+      }
+    },{
+      "path": "pages/component-instance/root/root-composition",
+      "style": {
+        "navigationBarTitleText": "$root 组合式 API"
+      }
+    },
+    // #endif
 
     {
       "path": "pages/built-in-component/keep-alive/keep-alive",
@@ -270,14 +283,6 @@
         "navigationBarTitleText": "component-lifecycle"
       }
     },
-    // #ifdef APP
-    {
-      "path": "pages/component-instance/root/root",
-      "style": {
-        "navigationBarTitleText": "$root"
-      }
-    },
-    // #endif
     {
       "path": "pages/component-instance/slots/slots",
       "style": {

pages/component-instance/data/data.test.js

@@ -22,11 +22,15 @@ describe('$data', () => {
 
   it('$data 选项式 API', async () => {
     page = await program.reLaunch(OPTIONS_PAGE_PATH)
+    await page.waitFor('view')
+    
     await test(page)
   });
 
   it('data 组合式 API', async () => {
     page = await program.reLaunch(COMPOSITION_PAGE_PATH)
+    await page.waitFor('view')
+
     await test(page)
   })
 })

pages/component-instance/el/el.test.js

@@ -9,11 +9,15 @@ describe('$el', () => {
   }
   it('$el 选项式 API', async () => {
     page = await program.reLaunch(OPTIONS_PAGE_PATH)
+    await page.waitFor('view')
+    
     await test(page)
   });
 
   it('$el 组合式 API', async () => {
     page = await program.reLaunch(COMPOSITION_PAGE_PATH)
+    await page.waitFor('view')
+    
     await test(page)
   })
 

pages/component-instance/options/options.test.js

@@ -16,11 +16,15 @@ describe('$options', () => {
 
   it('$options 选项式 API', async () => {
     page = await program.reLaunch(OPTIONS_PAGE_PATH)
+    await page.waitFor('view')
+    
     await test(page)
   });
 
   it('$options 组合式 API', async () => {
     page = await program.reLaunch(COMPOSITION_PAGE_PATH)
+    await page.waitFor('view')
+    
     await test(page)
   })
 })

pages/component-instance/parent/parent.test.js

@@ -17,11 +17,15 @@ describe('$parent', () => {
   
   it('$parent 选项式 API', async () => {
     page = await program.reLaunch(OPTIONS_PAGE_PATH)
+    await page.waitFor('view')
+    
     await test(page)
   });
   
   it('$parent 组合式 API', async () => {
     page = await program.reLaunch(COMPOSITION_PAGE_PATH)
+    await page.waitFor('view')
+    
     await test(page)
   })
 })

pages/component-instance/props/props.test.js

@@ -40,11 +40,15 @@ describe('props', () => {
 
   it('props 选项式 API', async () => {
     page = await program.reLaunch(OPTIONS_PAGE_PATH)
+    await page.waitFor('view')
+    
     await test(page)
   });
 
   it('props 组合式 API', async () => {
     page = await program.reLaunch(COMPOSITION_PAGE_PATH)
+    await page.waitFor('view')
+    
     await test(page)
   })
 })
\ No newline at end of file

pages/component-instance/root/child-composition.uvue

+<template>
+  <view class="flex justify-between flex-row">
+    <text>root str in parent component: </text>
+    <text id="root-str-child">{{ rootStr }}</text>
+  </view>
+</template>
+
+<script setup lang="uts">
+const str = ref('child component str')
+const rootStr = ref('')
+
+onMounted(() => {
+  const instance = getCurrentInstance()!.proxy!
+  rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string
+})
+</script>

pages/component-instance/root/child-options.uvue

+<template>
+  <view class="flex justify-between flex-row">
+    <text>root str in parent component: </text>
+    <text id="root-str-child">{{ rootStr }}</text>
+  </view>
+</template>
+
+<script lang="uts">
+export default {
+  data () {
+    return {
+      str: 'child component str',
+      rootStr: ''
+    }
+  },
+  mounted() {
+    this.rootStr = this.$root!.$data['str'] as string
+  }
+}
+</script>

pages/component-instance/root/root-composition.uvue

+
+<template>
+    <view class="page">
+      <view class="mb-10 flex justify-between flex-row">
+        <text>root str in parent component: </text>
+        <text id="root-str-parent">{{ rootStr }}</text>
+      </view>
+      <child />
+    </view>
+</template>
+
+<script setup lang="uts">
+import Child from './child-composition.uvue'
+
+const str = ref('root component str')
+const rootStr = ref('')
+
+onReady(() => {
+  const instance = getCurrentInstance()!.proxy!
+  rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string
+})
+
+defineExpose({
+  str
+})
+</script>

pages/component-instance/root/root-options.uvue

+<template>
+  <view class="page">
+    <view class="mb-10 flex justify-between flex-row">
+      <text>root str in parent component: </text>
+      <text id="root-str-parent">{{ rootStr }}</text>
+    </view>
+    <child />
+  </view>
+</template>
+
+<script lang="uts">
+import Child from './child-options.uvue'
+
+export default {
+  components: {Child},
+  data () {
+    return {
+      str: 'root component str',
+      rootStr: ''
+    }
+  },
+  onReady() {
+    this.rootStr = this.$root!.$data['str'] as string
+  }
+}
+</script>

pages/component-instance/root/root.test.js

-const PAGE_PATH = '/pages/component-instance/root/root'
+const OPTIONS_PAGE_PATH = '/pages/component-instance/root/root-options'
+const COMPOSITION_PAGE_PATH = '/pages/component-instance/root/root-composition'
 
 describe('$root', () => {
   if (process.env.uniTestPlatformInfo.startsWith('web')) {
-    // TODO: web 端$root指向和app端不同，具体待定
+    // TODO: web 端 $root 指向和 app 端不同，具体待定
     it('web', async () => {
       expect(1).toBe(1)
     })
     return
   }
   let page
-  beforeAll(async () => {
-    page = await program.reLaunch(PAGE_PATH)
-    await page.waitFor(500)
-  })
-
-  it('$root 属性生效', async () => {
-    const root = await page.callMethod('getRoot')
+  const test = async (page) => {
+    const rootStrParent = await page.$('#root-str-parent')
+    expect(await rootStrParent.text()).toBe('root component str')
+    
+    const rootStrChild = await page.$('#root-str-child')
+    expect(await rootStrChild.text()).toBe('root component str')
+  }
 
-    expect(root).toBe(true)
+  it('$root 选项式 API', async () => {
+    page = await program.reLaunch(OPTIONS_PAGE_PATH)
+    await page.waitFor('view')
+    
+    await test(page)
+  });
+  
+  it('$root 组合式 API', async () => {
+    page = await program.reLaunch(COMPOSITION_PAGE_PATH)
+    await page.waitFor('view')
+    
+    await test(page)
   })
 })

pages/component-instance/root/root.uvue

-<template>
-  <view class="page">
-    <view class="row">root: <text>{{root}}</text></view>
-  </view>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      root: true
-    }
-  },
-  onReady() {
-    console.log(this.getRoot())
-  },
-  methods: {
-    getRoot (): boolean {
-      return this.$root!.$data['root'] as boolean
-    }
-  }
-}
-</script>
-
-<style>
-  .row {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin-bottom: 10px;
-  }
-</style>

pages/index/index.uvue

@@ -208,6 +208,24 @@ export default {
                 }
               ]
             },
+            // #ifdef APP 
+            {
+              id: 'root',
+              name: '$root',
+              children: [
+                {
+                  id: 'root-options',
+                  name: '$root 选项式 API',
+                  url: 'root-options',
+                },
+                {
+                  id: 'root-composition',
+                  name: '$root 组合式 API',
+                  url: 'root-composition',
+                }
+              ]
+            },
+            // #endif
           ] as Page[],
         }
       ] as Menu[],

refactor:options-API-composition-API-correspondence.md

@@ -21,6 +21,11 @@ script 中不要有空的 data, onLoad, methods\
 ### transform function
 
 目前仅处理了 script 节点
+已知问题：
+- script 节点无法增加 setup
+- 无法处理函数返回值类型
+- 无法处理函数换行
+
 ```js
 function transform(fileInfo, api) {
   const $ = api.gogocode
@@ -41,7 +46,10 @@ function transform(fileInfo, api) {
 
   script
     .find('watch:{}')
-    .replace('$_$:{handler($_$){$$$}}', 'watch(() => $_$,($_$) => {$$$})')
+    .replace(
+      '$_$:{handler($_$){$$$}}',
+      'watch(() => $_$,($_$) => {$$$})'
+    )
     .replace('$_$:{handler(){$$$}}', 'watch(() => $_$,() => {$$$})')
     .replace(
       "'$_$':{handler($_$){$$$},deep: true}",
@@ -56,6 +64,12 @@ function transform(fileInfo, api) {
     .replace('watch:{$$$}', '$$$')
 
   script
+    .replace('onLoad(){$$$}', 'onLoad(() => {$$$})')
+    .replace('onShow(){$$$}', 'onShow(() => {$$$})')
+    .replace('onReady(){$$$}', 'onReady(() => {$$$})')
+    .replace('onHide(){$$$}', 'onHide(() => {$$$})')
+    .replace('onUnload(){$$$}', 'onUnload(() => {$$$})')
+    .replace('onBackPress(){$$$}', 'onBackPress(() => {$$$})')
     .replace('created(){$$$}', 'onBeforeMount(() => {$$$})')
     .replace('mounted(){$$$}', 'onMounted(() => {$$$})')
     .replace('beforeUnmount(){$$$}', 'onBeforeUnmount(() => {$$$})')
@@ -65,11 +79,11 @@ function transform(fileInfo, api) {
 
   script
     .find('methods:{}')
-    .replace('async $_$($$$0){$$$1}', 'const $_$ = async ($$$0) => {$$$1}')
     .replace(
-      '$_$($$$0){$$$1}',
-      'const $_$ = ($$$0) => {$$$1}'
+      'async $_$($$$0){$$$1}',
+      'const $_$ = async ($$$0) => {$$$1}'
     )
+    .replace('$_$($$$0){$$$1}', 'const $_$ = ($$$0) => {$$$1}')
     .replace('async $_$(){$$$}', 'const $_$ = async () => {$$$}')
     .replace('$_$(){$$$}', 'const $_$ = () => {$$$}')
     .replace('methods:{$$$}', '$$$')