Any downsides of having x-init twice?

[ju5t]

For simplicity, let's say we have the following component:

<div x-data="{ name: 'bob' }" x-init="name = red">
    <div {{ $attributes }}>
</div>

We use this component everywhere but there's one place where we need some more functionality. We need to keep track of its value in an Alpine store. The simplest way to do this would be to copy the component. But as it's a pretty complicated one with lots of options we prefer not to.

Turns our that you can add a second x-init by passing it as an attribute.

<x-component x-init="console.log(name)">

Which gets rendered into:

<div x-data="{ name: 'bob' }" x-init="name = red">
    <div x-init="console.log(name)">
</div>

But that might be wrong? Or perhaps there are better solutions? Are there any downsides of having x-init twice in your component?

[SimoTod]

Does it actually work? Alpine runs on the generated output and your browsers won't really parse duplicate attributes

[ju5t]

You're right. My example didn't match the structure of our Blade component. I'll edit it for clarity. We use something along the lines of the one below:

<div x-data="{ name: 'bob' }" x-init="name = red">
    <div {{ $attributes }}>
</div>

[SimoTod]

Yeah, that's just a different component with x-init (even if nested), no issues with that. You can have as many different component with their own x-init as you need.

[ju5t]

It's not a different component, is it? We're not including x-data in the child div so it's still the same Alpine component.

[ekwoka]

Yeah it's not a different component ,but it's a new element, so attribute squashing isn't a concern.

[ekwoka]

Theres no reason you can't.

Just be aware that if the final element ends up with 2 x-init attributes, only one will work, since html doesn't let you do that.

that x-component thing isn't part of Alpine...

[ju5t]

Theres no reason you can't.

But are there any downsides? Are there better solutions?

that x-component thing isn't part of Alpine...

I know, I mistakenly thought that having {{ $attributes }} in them made it obvious that it's a Laravel Blade component.

[ekwoka]

I just mean, the specifics of whether your code would work is bound to that.

There isn't any reason there would be a downside. It's just initializing..