Alpine: Breaking change between 2.3.3 and 2.3.4

[p3k]

Please have a look at this Codepen:

https://codepen.io/p3k/pen/mdbrbrZ?editors=1011

This loads version 2.3.3 of AlpineJS and defines x-data with a property called name which is assigned the empty string.

Then it renders an input element which is disabled by default but becomes enabled by checking whether name is assigned a value.

The output:

<div x-data='{ name: "" }'>
<input :disabled="name">
</div>

All is fine.

Now when I set the version to 2.x.x (which loads 2.3.4, no clue why actually setting it to 2.3.4 doesn’t) the output suddenly becomes this:

<div x-data='{ name: "" }'>
<input disabled="" :disabled="name">
</div>

I.e. the input element remains disabled. Obviously, in 2.3.4 the empty string in the name property becomes truthy?

Is this a bug or a purposeful breaking change? And if the latter: how should I adapt the code to sustainably work?

[HugoDF]

You should be able to use :disabled="Boolean(name)"

[richgcook]

Are you wanting to disable the field by default and enable it when name has a value? In your second example disabled would be applied because it's an empty string (non-explicit falsy).

I believe only null, undefined and false are the determined falsy values for removing an attribute now.

[SimoTod]

It's an expected change. It's been documented in the release notes and you can see a video on. youtube where Caleb discuss and merge that PR (https://www.youtube.com/watch?v=kp0SbG5dFPE). The rationale it that the feature was supposed to mimic VueJS from the beginning but it was not so the previous version was considered a bug.

You can use :disabled="Boolean(name)" or :disabled="name != ''".

[p3k]

thanks for the clarification @SimoTod – i get why the change was made just think it’s not the best idea to introduce it in a patch version upgrade:

PATCH version when you make backwards compatible bug fixes

[p3k]

btw. an even simpler fix is using :hidden='!!name' :cat:

[HugoDF]

to be fair the implementation that I originally submitted for this was backwards compatible for boolean attributes 😕

@p3k are we cool to close this issue? I don't think we're going to roll back the changes per the stream that @SimoTod posted.

[SimoTod]

Yeah, but it also says
A bug fix is defined as an internal change that fixes incorrect behavior.
and the previous behaviour was incorrect according to the author.
Whether or not it was correct, it's probably an opinion so we could discuss that for ages without getting a final answer. 😂

The original PR was more backward friendly but during the streaming it was decided to go fully compatible with Vue.

Not related to this issue but...
I wasn't a fan of suggesting to use 2.x.x from the CDN for this reason, if you use Alpine in production, I strongly suggest you use a specific version (like Vue suggest in their documentation https://vuejs.org/v2/guide/installation.html#CDN) to avoid accidental breaking changes.

[richgcook]

The attribute removal change was really a game changer for me 👏🏻

[p3k]

@HugoDF

are we cool to close this issue?

sure! not my intention to ask for rolling anything back here. highlighting this as a breaking change in the release notes would be a nice gesture, though.

@SimoTod

I wasn't a fan of suggesting to use 2.x.x from the CDN for this reason

this is in fact totally unrelated to my issue; i currently pinned alpinejs to 2.3.3 in my package.json 😛

nevertheless, i just get version 2.3.3 all allong when i load alpine via https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js – probably an issue on jsdelivr.net’s end…

[HugoDF]

release notes would be a nice gesture, though

I agree I think 😄