feat(render function): mergeProps

pages.json

@@ -716,6 +716,18 @@
         "navigationBarTitleText": "render function"
       }
     },
+    {
+      "path": "pages/render-function/mergeProps/mergeProps-options",
+      "style": {
+        "navigationBarTitleText": "mergeProps 选项式 API"
+      }
+    },
+    {
+      "path": "pages/render-function/mergeProps/mergeProps-composition",
+      "style": {
+        "navigationBarTitleText": "mergeProps 组合式 API"
+      }
+    },
     {
       "path": "pages/examples/unrecognized-component/unrecognized-component",
       "style": {

pages/index/index.uvue

@@ -82,19 +82,19 @@
 import { setLifeCycleNum, state } from '@/store/index.uts'
 
 type Page = {
-  id: string
-  name: string
-  enable?: boolean
-  url?: string
-  children?: Page[]
+  id : string
+  name : string
+  enable ?: boolean
+  url ?: string
+  children ?: Page[]
 }
 
 type Menu = {
-  id: string
-  name: string
-  pages: Page[]
-  url?: string
-  enable?: boolean
+  id : string
+  name : string
+  pages : Page[]
+  url ?: string
+  enable ?: boolean
 }
 
 export default {
@@ -871,7 +871,7 @@ export default {
           name: '内置',
           pages: [
             {
-              id:'component',
+              id: 'component',
               name: '组件',
               children: [
                 {
@@ -911,7 +911,7 @@ export default {
               ]
             },
             {
-              id:'special-elements',
+              id: 'special-elements',
               name: '特殊元素',
               children: [
                 {
@@ -977,6 +977,22 @@ export default {
               id: 'render',
               name: 'render & h()',
               url: 'render/render'
+            },
+            {
+              id: 'mergeProps',
+              name: 'mergeProps',
+              children: [
+                {
+                  id: 'mergeProps-options',
+                  name: 'mergeProps 选项式 API',
+                  url: 'mergeProps-options'
+                },
+                {
+                  id: 'mergeProps-composition',
+                  name: 'mergeProps 组合式 API',
+                  url: 'mergeProps-composition'
+                },
+              ]
             }
           ] as Page[]
         },
@@ -1049,7 +1065,7 @@ export default {
     }
   },
   methods: {
-    goDetailPage(parentUrl: string, page: Page) {
+    goDetailPage(parentUrl : string, page : Page) {
       if (page.enable == false) {
         uni.showToast({
           icon: 'none',
@@ -1062,15 +1078,15 @@ export default {
       })
     },
     // 自动化测试
-    setLifeCycleNum(num: number) {
+    setLifeCycleNum(num : number) {
       setLifeCycleNum(num)
     },
     // 自动化测试
-    getLifeCycleNum(): number {
+    getLifeCycleNum() : number {
       return state.lifeCycleNum
     },
     // 自动化测试
-    checkLaunchPath(): boolean {
+    checkLaunchPath() : boolean {
       const app = getApp()
       return app.checkLaunchPath()
     }

pages/render-function/mergeProps/mergeProps-composition.uvue

+<template>
+  <view class="page">
+    <view class="mb-10 flex flex-row justify-between">
+      <text>merged class</text>
+      <text id="merged-class">{{mergedProps['class']}}</text>
+    </view>
+    <button class="mb-10" id="trigger-merged-click" @click="triggerMergedClick">trigger merged onClick</button>
+    <view>
+      <text class="mb-10">prop function result list</text>
+      <text class="click-res" v-for="(item, index) in propFnResList" :key="index">{{item}}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+  // TODO: 确认 android 与 web & ios 差异
+  // #ifndef APP-ANDROID
+  import { mergeProps } from 'vue'
+  // #endif
+
+  type PropFn = () => string
+
+  // #ifdef APP-ANDROID
+  const propA = new Map<string, any | null>([['class', 'foo'], ['onClick', () : string => 'propA click res']])
+  const propB = new Map<string, any | null>([['class', { bar: true }], ['onClick', () : string => 'propB click res']])
+  const mergedProps = ref(new Map<string, any | null>())
+  // #endif
+  // #ifndef APP-ANDROID
+  const propA = {
+    class: 'foo',
+    onClick: () : string => 'propA click res'
+  }
+  const propB = {
+    class: { bar: true },
+    onClick: () : string => 'propB click res'
+  }
+  const mergedProps = ref({})
+  // #endif
+  const propFnResList = ref<string[]>([])
+
+  mergedProps.value = mergeProps(propA, propB)
+  
+  const triggerMergedClick = () => {
+    (mergedProps.value['onClick'] as PropFn[]).forEach(fn => { propFnResList.value.push(fn()) })
+  }
+</script>
\ No newline at end of file

pages/render-function/mergeProps/mergeProps-options.uvue

+<template>
+  <view class="page">
+    <view class="mb-10 flex flex-row justify-between">
+      <text>merged class</text>
+      <text id="merged-class">{{mergedProps['class']}}</text>
+    </view>
+    <button class="mb-10" id="trigger-merged-click" @click="triggerMergedClick">trigger merged onClick</button>
+    <view>
+      <text class="mb-10">prop function result list</text>
+      <text class="click-res" v-for="(item, index) in propFnResList" :key="index">{{item}}</text>
+    </view>
+  </view>
+</template>
+
+<script lang="uts">
+  // TODO: 确认 android 与 web & ios 差异
+  // #ifndef APP-ANDROID
+  import { mergeProps } from 'vue'
+  // #endif
+
+  type PropFn = () => string
+  export default {
+    data() {
+      return {
+        // #ifdef APP-ANDROID
+        propA: new Map<string, any | null>([['class', 'foo'], ['onClick', () : string => 'propA click res']]),
+        propB: new Map<string, any | null>([['class', { bar: true }], ['onClick', () : string => 'propB click res']]),
+        mergedProps: new Map<string, any | null>(),
+        // #endif
+        // #ifndef APP-ANDROID
+        propA: {
+          class: 'foo',
+          onClick: () : string => 'propA click res'
+        },
+        propB: {
+          class: { bar: true },
+          onClick: () : string => 'propB click res'
+        },
+        mergedProps: {},
+        // #endif
+        propFnResList: [] as string[],
+      }
+    },
+    onLoad() {
+      this.mergedProps = mergeProps(this.propA, this.propB)
+    },
+    methods: {
+      triggerMergedClick() {
+        (this.mergedProps['onClick'] as PropFn[]).forEach(fn => { this.propFnResList.push(fn()) })
+      }
+    }
+  }
+</script>
\ No newline at end of file

pages/render-function/mergeProps/mergeProps.test.js

+const OPTIONS_PAGE_PATH = '/pages/render-function/mergeProps/mergeProps-options'
+const COMPOSITION_PAGE_PATH = '/pages/render-function/mergeProps/mergeProps-composition'
+
+describe('mergeProps', () => {
+  let page = null
+  const test = async (pagePath) => {
+    page = await program.reLaunch(pagePath)
+    await page.waitFor('view')
+    
+    const mergedClass = await page.$('#merged-class')
+    expect(await mergedClass.text()).toBe('foo bar')
+    
+    const triggerMergedClickBtn = await page.$('#trigger-merged-click')
+    await triggerMergedClickBtn.tap()
+    
+    const clickResList = await page.$$('.click-res')
+    expect(clickResList.length).toBe(2)
+    expect(await clickResList[0].text()).toBe('propA click res')
+    expect(await clickResList[1].text()).toBe('propB click res')
+  }
+  
+  it('mergeProps options API', async () => {
+    await test(OPTIONS_PAGE_PATH)
+  })
+  
+  it('mergeProps composition API', async () => {
+    await test(COMPOSITION_PAGE_PATH)
+  })
+})
+