How about add other directives in custom directive?

[SnowingFox]

For example about a custom directivev-form

it can help us to use v-model, then we can use function expression and bind v-model to another context

Directive

export function formDirective(el, binding, vnode) {
    const model = binding.value   // Ref
    vnode.props = {
      modelValue: model,
      'onUpdate:modelValue': (value) => model.value.value = value
    }
}

// main.js

app.directive('form', formDirective)

Component

<script setup>
const { register } = useForm() 
</script>
<template>
    <input v-form="register('username', { required: 'Username is required!' })"/>
</template>

useForm

export function useForm() {
    const onChange = (fieldName) => {
        // do somework when change
    }
    const register = (fieldName, options) => {
        const model = ref()
        watch(model, () => {
            onChange(fieldName)
        })
        return model
    }
    
    return {  register }
}

As same as <input v-model="model" />, it can be transformed into

<input :value="model" @input="(e) => model.value = e.target.value"/>

We can add other directives to the components which bind with custom directive.

[LinusBorg]

1. Please Stop mentioning maintainers, for - I hope - obvious reasons.
2. Custom directive hooks are run after the render phase, which is too late for changes like this to vnodes, as the props would have been missing during rendering, and then be added only when it's too late.

[SnowingFox]

1. Please Stop mentioning maintainers, for - I hope - obvious reasons.
2. Custom directive hooks are run after the render phase, which is too late for changes like this to vnodes, as the props would have been missing during rendering, and then be added only when it's too late.

i'm sorry about do that, i will not do that next time.

there has other ways to make it work?