x-data incompatibility issue with htm

[aral]

Edited as per #3337 (reply in thread):

htm converts <div x-data … /> to <div x-data="true" … /> whereas Alpine.js currently expects <div x-data="" … />.

Suggested solution

As per #3337 (reply in thread):

I suppose you just add "or data strictly equal to true" in here: https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/directives/x-data.js#L24

[SimoTod]

all the directives in alpine need x-data. I believe the documentation says that on one of the first pages.

[SimoTod]

just to clarify, x-data doesn't need to be on the element. it can be (and most of the time it will be) on one of the parent tags.

[aral]

@SimoTod Yep, it does mention that. It also mentions that you can just put x-data on them (incorrect) – only x-data="{}" works – and some of the examples leave it out completely (incorrect).

(Details/links above.)

[ekwoka]

Or more accurately, it's making it be x-data="true" which can be appropriate behavior for a lot of properties, but would be incorrect for x-data.

It could be worth having Alpine handle this case and not simply leave that up to the user to work around.

[SimoTod]

Yeah, it won't be too much of a change. I suppose you just add "or data strictly equal to true" in here: https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/directives/x-data.js#L24

[aral]

@ekwoka @SimoTod Ah, you beat me to it. Yep, that’s what’s happening :)

[aral]

Updated the original description based on your replies.

[aral]

Pull request opened based on your suggestion, @SimoTod: #3339