[10.x] Introduce short-hand "false" syntax for Blade component props

[ryangjchandler]

Currently, setting the value of a Blade component prop to false can only be done with the binding syntax.

<x-layout :margin="false">

This syntax is quite verbose for something so simple, so this pull request introduces a new short-hand syntax.

<x-layout !margin />

The syntax is similar to the "not" operation in regular PHP code and feels quite familiar.

Not sure whether "short false" syntax is the best name for this, open to suggestions.

[laserhybiz]

this seems to me more similar to css !important (or tailwinds important modifier)

[driesvints]

Smart!

[Rizky92]

I support this implementation. "Falsy" props were one of our concerns when making blade components. We have to work around this by making every boolean props to be false, and add them manually when the component is needed.

This PR allowed us to refactor some of those falsies to truthy by default.

[julien-fontaine]

@ryangjchandler Why don't you use the short-hand:

<x-layout />

It's better to let the user add the behavior they need, rather than forcing them to remove a default one.

[aguingand]

@taylorotwel @driesvints This will fail to parse in some cases, e.g:

<x-test :value="$value && !old('value')" />

[driesvints]

@ryangjchandler

[ryangjchandler]

I'm on vacation until Wednesday, maybe worth reverting the merge before tomorrows release so I can take a look at it & add in some test cases.

@aguingand have you physically confirmed that the RegEx currently parses incorrectly for that example case?

[driesvints]

Done: #48220

[aguingand]

I understand the reasoning behind short syntaxes but it'll need a rework of how attributes are parsed. The :$aaa syntax can also have false-positive in the value but it's less likely

<x-test :value="$value ? $yes :$no" />

[ryangjchandler]

FYI, I am going to revisit this in the week. Been slammed with work since getting back from vacation!