Some Dev Ex issues with x-init (and some potential solutions)

[paulcsmith]

Hello!

I was talking to someone about their experience with Alpine and unfortunately they they couldn't get it to work and switched to Stimulus 😢. After chatting with him it looks like the problem was that x-init was used without x-data so nothing was ever initialized. I believe it didn't raise an error either so it appeared to do "nothing".

I wonder if one of these could help?

1. Allow x-init to also initialize a component? So it works as-if you set x-data="{}"

• Maybe this doesn't work though since it might mess up scoping?

2. Could a console error be written if x-init is used without x-data?

I think the main problem was that it seemed to silently fail, so maybe option 2 would work so Alpine can teach the user what to do?

Thanks for reading and for the awesome framework!! :D

[HugoDF]

I think there is space for "detect x-* attributes" and log if there are x-* attributes but no x-data.

[SimoTod]

Thanks for your feedback. It's a shame but it would be like trying to use stymulus without a data-controller, do you know if stymulus print anything in console in that case?
It's kind of Alpine 101, we can maybe make it explicit in the documentation which should help a bit.

Solution 1 is a no-go for me. People will start seeing those in online tutorials and they'll get false expectations (e.g. they might expect x-on:click to work outside an x-data compinent). It would also be computationally more expensive and add complexity (and probably bugs).
2) is a maybe but I know Caleb is keen on keeping the core light and slim so we need to see if he's cool with that.

To be fair, I'm not sure how many people had that problem, I would prefer improve the readme (And the future official website/documentation).

[HugoDF]

This isn't the first time I've seen issues with people forgetting x-data

[SimoTod]

It's a computational nightmare to detect if there's a x-* directive outside a x-data component though.
You can't query attribute using wildcard so it means that you have to walk the whole dom, for each item get all attributes, if an attribute is x-something, lookup for x-data using closest and print a console log.
It's a lot of dom walking just to prevent a rookie mistake. That's why I'm not fully sold.

[HugoDF]

Yep, maybe just a blanket "log when no x-data found" would be reasonable (and little overhead since we're already doing the querySelector('[x-data'])

[paulcsmith]

Thanks for your thorough response!

Thanks for your feedback. It's a shame but it would be like trying to use stymulus without a data-controller, do you know if stymulus print anything in console in that case?

I think it is a bit different. Stimulus does not have an "init" attribute. Instead it has a connect hook in the controller. I think what confuses new people is that x-init sounds like it should init a component. In some ways I think x-data isn't that clear because it doesn't jsut set data, it inits the component. But I think that's well outside the scope of this discussion 😂

Solution 1 is a no-go for me.

Yeah I think you're right 👍

2. is a maybe but I know Caleb is keen on keeping the core light and slim so we need to see if he's cool with that.

My thought would be this is only done in "dev". So maybe the code could only be included in dev? Not sure if there is way to just omit code if in prod, but that'd be great.

It's a computational nightmare to detect if there's a x-* directive outside a x-data component though.
You can't query attribute using wildcard so it means that you have to walk the whole dom, for each item get all attributes, if an attribute is x-something, lookup for x-data using closest and print a console log.
It's a lot of dom walking just to prevent a rookie mistake. That's why I'm not fully sold.

Agree. This could get out of hand. That's why I'd suggest only querying for x-init without an x-data, and only doing it in dev.

Should be fairly simple:

// this is just pseudo code, but shows the rough idea
// Only run this/include this in dev.
if (querySelector("[x-init]:not([x-data])) {
  console.warn("Using x-init without x-data will not work. Add an empty x-data: x-data='{}'. https://link-to-x-data-docs".)
}

This is better IMO than just relying on the README because it helps people find the information they need in case they missed that part of the README

What do you think @SimoTod @calebporzio? Seems like it could be a a quick win and help people that run into this. I've run into this even because sometimes I just forget. So having a little nudge even for experienced Alpine devs would be awesome IMO!

[SimoTod]

I'm not against it as long as it's just a few lines like you suggested but I also believe that it's something that you learn straight away so documenting it is already a good move.
For example, we had another ticket a couple of days ago from another person using x-on:click without x-data so perhaps it's not just x-init generating confusion.
Let's see what Caleb thinks. 👍