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/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)
+  })
+})
+