Allow custom value and modifier operators

[willrowe]

This exposes new useModifierOperator and useValueOperator functions that allows the default value (:) and modifier (.) operators to be swapped out.

I ran into an issue with a page builder I was using, where it allowed custom attributes, but sanitized the attribute names according to what is allowed for valid HTML. This meant that all values and modifiers were stripped off. If I was able to specify the operators manually for this installation, I would have been able to use Alpine without any issue.

Example:

document.addEventListener('alpine:init', () => {
    Alpine.useValueOperator('--value--')
    Alpine.useModifierOperator('--modifier--')
})

<div x-data="{ foo: 'bar' }">
    <button x-on--value--click="foo = 'baz'"></button>

    <span x-bind--value--foo="foo"></span>
    
    <input type="checkbox" x-on--value--click--modifier--prevent>
</div>

[calebporzio]

Thanks for the thoughtful PR. I'm going to pass on this one.

The core parser can be made operator-agnostic, but the @/: shorthands, the Sort and UI plugins, and most third-party plugins read directive names literally, so a custom operator would break the ecosystem in ways I can't support.

Good news is your use case already works via x-bind object syntax, since the keys are JS strings rather than attribute names:

<button x-bind="{ '@click'() { foo = 'baz' } }">

Separately, RegExp.escape isn't available in browsers older than early 2025, so the change as written would throw for those users.

[willrowe]

Thank you for taking a look. It definitely seems like things are not in a good state right now to allow this change.

This does bring up some internal issues though, which may need to be addressed at some point. For example, user provided values being used in regexes without being escaped.

Also, I did not realize so many things read the directive names directly. That seems like something that should probably be refactored over time so that only the core package is handling parsing of the directives and/or selection based on attributes instead of relying on manual querySelectorAll calls.

[willrowe]

@calebporzio also, thank you for the tip about x-bind. That is extremely helpful!