Unexpected behavior when passing variable to Alpine component

[gbourant]

I'm encountering unexpected behavior when passing a variable from one component to another using Alpine.js.

Instead of passing the actual value +30:6979999999 to the phone component, Alpine appears to pass the entire component definition created with Alpine.data('phone'). This leads to unexpected results.

Is this a known issue or expected behavior? Is there a better recommended way to pass primitive values like strings to an Alpine component?

Renaming Alpine.data('phone') to something like Alpine.data('phoneComponent') seems to resolve the issue.

Alternatively, using x-data="phone($data.phone)" instead of just phone(phone) also works.

Would appreciate clarification or guidance on whether this is a bug or a naming conflict limitation.

<script>
    Alpine.data('phone', (number: string) => {
        const phoneComponent: Alpine.AlpineComponent<PhoneComponent> = {
            number: number
        };
        return phoneComponent;
    });
</script>

<div x-data="{ phone : '+30:6979999999' }">
    <div x-data="phone(phone)" x-model="phone" x-modelable="number">
        
    </div>
</div>

[SimoTod]

There's no way for Alpine to know the difference between a data component and a local variable, and a data component has always priority.
Just choose different names.

[ekwoka]

So, whether ideal or not, the components defined with Alpine.data are exposed at the highest priority.

Mainly because that would be a standard expectation that they are the thing most likely to be referenced.

So your example of phone(phone) in JS would either have to be the number...being called as a function...or the data factory being passed to the data factory...

It's just impossible to have to be the number being passed to the datafactory.

Alpine is still just JS.

And you can't have 2 variables in scope with the same name.

do the $data.phone is the recommended approach, or use more diverse names.