feat(render function): cloneVNode

pages.json

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

pages/index/index.uvue

@@ -993,6 +993,22 @@ export default {
                   url: 'mergeProps-composition'
                 },
               ]
+            },
+            {
+              id: 'cloneVNode',
+              name: 'cloneVNode',
+              children: [
+                {
+                  id: 'cloneVNode-options',
+                  name: 'cloneVNode 选项式 API',
+                  url: 'cloneVNode-options'
+                },
+                {
+                  id: 'cloneVNode-composition',
+                  name: 'cloneVNode 组合式 API',
+                  url: 'cloneVNode-composition'
+                },
+              ]
             }
           ] as Page[]
         },

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

+<script setup lang="uts">
+  import { cloneVNode } from 'vue'
+
+  defineOptions({
+    render() : VNode {
+      const originalVNode = h('view', { class: 'original' }, [
+        h('text', {}, 'Hello World'),
+      ])
+      // #ifdef APP
+      const clonedVNode = cloneVNode(originalVNode, new Map<string, any | null>([['class', 'cloned']]))
+      // #endif
+      // #ifdef WEB
+      const clonedVNode = cloneVNode(originalVNode, { class: 'cloned'})
+      // #endif
+
+      return h('view', { class: 'flex flex-col' }, [originalVNode, clonedVNode])
+    }
+  })
+</script>
+
+<style>
+  .original {
+    background-color: #ff0000;
+  }
+
+  .cloned {
+    background-color: #00ff00;
+  }
+</style>
\ No newline at end of file

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

+<script lang="uts">
+  import { cloneVNode } from 'vue'
+
+  export default {
+    render() : VNode {
+      const originalVNode = h('view', { class: 'original' }, [
+        h('text', {}, 'Hello World'),
+      ])
+      // #ifdef APP
+      const clonedVNode = cloneVNode(originalVNode, new Map<string, any | null>([['class', 'cloned']]))
+      // #endif
+      // #ifdef WEB
+      const clonedVNode = cloneVNode(originalVNode, { class: 'cloned'})
+      // #endif
+
+      return h('view', { class: 'flex flex-col' }, [originalVNode, clonedVNode])
+    }
+  }
+</script>
+
+<style>
+  .original {
+    background-color: #ff0000;
+  }
+
+  .cloned {
+    background-color: #00ff00;
+  }
+</style>
\ No newline at end of file

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

+const OPTIONS_PAGE_PATH = '/pages/render-function/cloneVNode/cloneVNode-options'
+const COMPOSITION_PAGE_PATH = '/pages/render-function/cloneVNode/cloneVNode-composition'
+
+describe('cloneVNode', () => {
+  if (process.env.uniTestPlatformInfo.toLocaleLowerCase().startsWith('ios')) {
+    // TODO: ios options API 合并属性无效, composition API 页面空白
+    it("IOS platform not support", async () => {
+      expect(1).toBe(1);
+    });
+    return
+  }
+
+  let page = null
+  const test = async (pagePath) => {
+    page = await program.reLaunch(pagePath)
+    // 因为 web 端无法获取, 未使用 waitFor view
+    await page.waitFor(1000)
+
+    const image = await program.screenshot();
+    expect(image).toSaveImageSnapshot();
+  }
+
+  it('cloneVNode options API', async () => {
+    await test(OPTIONS_PAGE_PATH)
+  })
+
+  it('cloneVNode composition API', async () => {
+    await test(COMPOSITION_PAGE_PATH)
+  })
+})
\ No newline at end of file

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

@@ -13,13 +13,11 @@
 </template>
 
 <script setup lang="uts">
-  // TODO: 确认 android 与 web & ios 差异
-  // #ifndef APP-ANDROID
   import { mergeProps } from 'vue'
-  // #endif
 
   type PropFn = () => string
 
+  // TODO: 确认 android 与 web & ios 差异
   // #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']])
@@ -38,7 +36,7 @@
   // #endif
   const propFnResList = ref<string[]>([])
 
-  mergedProps.value = mergeProps(propA, propB)
+  mergedProps.value = mergeProps(propA, propB)
   
   const triggerMergedClick = () => {
     (mergedProps.value['onClick'] as PropFn[]).forEach(fn => { propFnResList.value.push(fn()) })

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

@@ -12,16 +12,14 @@
   </view>
 </template>
 
-<script lang="uts">
-  // TODO: 确认 android 与 web & ios 差异
-  // #ifndef APP-ANDROID
+<script lang="uts">
   import { mergeProps } from 'vue'
-  // #endif
 
   type PropFn = () => string
   export default {
     data() {
       return {
+        // TODO: 确认 android 与 web & ios 差异
         // #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']]),
@@ -35,7 +33,7 @@
         propB: {
           class: { bar: true },
           onClick: () : string => 'propB click res'
-        },
+        },
         mergedProps: {},
         // #endif
         propFnResList: [] as string[],