document.addEventListener('alpine:init', () => {
    Alpine.directive('hx-val', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate }) => {
        var config = function(evt) {
            evt.detail.parameters[value] = evaluate(expression); // add a new parameter into the request
        }
        el.addEventListener('htmx:configRequest', config);
        cleanup(() => {
            el.removeEventListener('htmx:configRequest', config);
        })
    })
Alpine.directive('hx-header', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate }) => {
        var config = function(evt) {
            evt.detail.headers[value] = evaluate(expression); // add a new parameter into the request
        }
        el.addEventListener('htmx:configRequest', config);
        cleanup(() => {
            el.removeEventListener('htmx:configRequest', config);
        })
    })

    Alpine.directive('dispatch', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate }) => {
        let dependent_properties = evaluateLater(expression)
    
        effect(() => {
            dependent_properties(props => {
                el.dispatchEvent(
                    new CustomEvent(value, {
                        props,
                        bubbles: true,
                        // Allows events to pass the shadow DOM barrier.
                        composed: true,
                        cancelable: true,
                    })
                )
            })
        })
    })
    Alpine.directive(
        "destroy",
        (el, { expression }, { evaluateLater, cleanup }) => {
          const onDestroy = evaluateLater(expression);
          cleanup(onDestroy);
        }
      );
})