Warning for nested x-data

[Elliotclyde]

How's it going team?

I just had a situation in a project where I moved x-data up to a parent element and forgot to delete the child's x-data attribute. It took me quite a while to find where the bug was.

Am I an idiot? Possibly.

But how would you all feel about a console warning when nested data attributes are incorrectly set, for possible idiots like myself?

[markfirmware]

Does an inner x-data mask an outer one? I did not see it in the readme.

Thanks, Mark.

[Elliotclyde]

Yeah the inner x-data does mask it. I was also having a look at this blog post which advises that nested x-data can cause a whole lot of weird bugs.

https://codewithhugo.com/alpinejs-component-communication-event-bus/

[KevinBatdorf]

How would you know when it was incorrectly set vs intentional?

[Elliotclyde]

I thought Alpine didn't support child and parent components - if you take a look at the fifth paragraph of this blogpost:

https://codewithhugo.com/alpinejs-component-communication-event-bus/

It says:

"This is because “Alpine components” can’t currently be nested (principally having an element with x-data inside another element with x-data causes all sorts of weird issues)."

Is this wrong? If this isn't wrong, then maybe this should be in the docs.

When I was working with it, the parent data definitely wasn't accessible by elements inside the child component.

[KevinBatdorf]

The statement is wrong. You can nest components as much as you want safely and it's common.

The issue is that they cannot communicate with each other without a little help, for example, with a $parent helper, or with events/listeners. Components live in isolation.

You should see an error in the console though when you attempt to access a parent's data, such as x is undefined

[Elliotclyde]

Ahhh okay. Yep that was the error I was getting.

I just thought it was an antipattern to nest components. I should've just had another look through the readme.

Thanks for your help! 😊
Cheers

[KevinBatdorf]

That article might need to be updated for clarity too. cc: @HugoDF

[HugoDF]

I just thought it was an antipattern to nest components. I should've just had another look through the readme.

As far as I'm concerned it is mostly an antipattern (hence that comment in the post). Nested components don't work as you expect them to coming from React/Vue or even Vanilla JS (eg. functions can access variables in their lexical scope). I personally believe nested components cause issues with few tangible benefits, for the longest time, we've seen issues/questions/discussions about it.

In any case, @KevinBatdorf is right and I might go update that post. Fundamentally, patterns discussed in that article also work with nested components so no need to exclude them.

I think a better way to write that quoted sentence is that "nested alpine components have a specific set of gotchas" or similar, happy to take suggestion.

Edit: here's what I went with