Directive reuse inside custom directive

[k1mbl3]

I am creating a little hash router directive (x-router="{url: '/user/:id'}") and it is doing good so far, but right now i'm stuck trying to find a way to apply to the modified component builtin directives like x-show and x-transition. Is there any way to do so?

[ekwoka]

Yes, with x-bind. You can look in the UI package at how those implement it.

[k1mbl3]

It's a bit confusing to me.. The docs shows Alpine.bind's first argument as something like an identifier to be used later

<button x-bind="SomeButton"></button>
 
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.bind('SomeButton', () => ({
            type: 'button',
 
            '@click'() {
                this.doSomething()
            },
 
            ':disabled'() {
                return this.shouldDisable
            },
        }))
    })
</script>

on the other hand, one of the source files in the ui folder shows the first argument being the element itself

function handleGroup(el, Alpine) {
    Alpine.bind(el, {
        'x-id'() { return ['alpine-switch-label', 'alpine-switch-description'] },
        'x-data'() {
            return {
                __hasLabel: false,
                __hasDescription: false,
                __switchEl: undefined,
            }
        }
    })
}

that's the same Alpine.bind?