feat(render function): withDirectives

pages.json

@@ -764,6 +764,20 @@
         "navigationBarTitleText": "resolveComponent 组合式 API"
       }
     },
+    // #ifndef APP-ANDROID
+    {
+      "path": "pages/render-function/withDirectives/withDirectives-options",
+      "style": {
+        "navigationBarTitleText": "withDirectives 选项式 API"
+      }
+    },
+    {
+      "path": "pages/render-function/withDirectives/withDirectives-composition",
+      "style": {
+        "navigationBarTitleText": "resolveComponent 组合式 API"
+      }
+    },
+    // #endif 
     {
       "path": "pages/examples/unrecognized-component/unrecognized-component",
       "style": {

pages/index/index.uvue

@@ -1041,7 +1041,25 @@ export default {
                   url: 'resolveComponent-composition'
                 },
               ]
+            },
+            // #ifndef APP-ANDROID
+            {
+              id: 'withDirectives',
+              name: 'withDirectives',
+              children: [
+                {
+                  id: 'withDirectives-options',
+                  name: 'withDirectives 选项式 API',
+                  url: 'withDirectives-options'
+                },
+                {
+                  id: 'withDirectives-composition',
+                  name: 'withDirectives 组合式 API',
+                  url: 'withDirectives-composition'
+                },
+              ]
             }
+            // #endif
           ] as Page[]
         },
         {

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

+<script setup lang="ts">
+  import { withDirectives } from 'vue'
+  import type { DirectiveBinding } from 'vue'
+
+  defineOptions({
+    data() {
+      return {
+        isMounted: false
+      }
+    },
+    render(instance : ComponentPublicInstance) : VNode {
+      const customDirective = {
+        mounted(el : UniElement, binding : DirectiveBinding, vnode : VNode, prevVNode: VNode | null) {
+          instance.$data['isMounted'] = true
+        }
+      } as Directive
+      return h('view', { class: 'page' }, [
+        withDirectives(h('text', 'Hello World'), [[customDirective]]),
+        h('view', { class: 'mt-10 flex flex-row justify-between' }, [
+          h('text', {}, `isMounted:`),
+          h('text', {}, `${instance.$data['isMounted']}`),
+        ])
+      ])
+    }
+  })
+</script>
\ No newline at end of file

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

+<script lang="uts">
+import {withDirectives } from 'vue'
+import type { DirectiveBinding } from 'vue'
+
+export default {
+  data(){
+    return {
+      isMounted: false
+    }
+  },
+  // android 端暂不支持
+  // render 写入 instance 参数编译报错 error: '$render' overrides nothing‌
+  render(instance: ComponentPublicInstance):VNode {
+    const customDirective = {
+      mounted(el : UniElement, binding : DirectiveBinding, vnode : VNode, prevVNode: VNode | null) {
+        instance.$data['isMounted'] = true
+      }
+    } as Directive
+    return h('view', { class: 'page' }, [
+      withDirectives(h('text', 'Hello World'), [[customDirective]]),
+      h('view', { class: 'mt-10 flex flex-row justify-between' }, [
+        h('text', {}, `isMounted:`),
+        h('text', {}, `${instance.$data['isMounted']}`),
+      ])
+    ])
+  }
+}
+</script>

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

+const OPTIONS_PAGE_PATH = '/pages/render-function/withDirectives/withDirectives-options'
+const COMPOSITION_PAGE_PATH = '/pages/render-function/withDirectives/withDirectives-composition'
+
+describe('withDirectives', () => {
+  let page = null
+  const test = async (pagePath) => {
+    page = await program.reLaunch(pagePath)
+    await page.waitFor(1000)
+
+    const image = await program.screenshot();
+    expect(image).toSaveImageSnapshot();
+  }
+
+  it('withDirectives options API', async () => {
+    await test(OPTIONS_PAGE_PATH)
+  })
+
+  it('withDirectives composition API', async () => {
+    await test(COMPOSITION_PAGE_PATH)
+  })
+})
\ No newline at end of file