Fix attributes after with multi-word props

[joshhanley]

The scenario

Currently if we have a component within another component, we can forward attributes to the inner component using a prefix. For example if we call the table component, we can pass props to the paginator component like this:

<flux:table paginator:preserve-scroll>

But if the preserve scroll prop is defined as camelCase inside the paginator component, and the prop is passed in using kebab-case then the value isn't being forwarded properly.

@props([
    'preserveScroll' => false,
])

If we use camelCase when calling the table component though, it works happily.

<flux:table paginator:preserveScroll>

The problem

When attributes are forwarded like that, under the hood, Laravel tries to detect if there are any props defined in the attribute bag, and if they are, it sets the values and removes them from the attribute bag.

But, the way it does it, is it looks to see if the prop name (with the casing as defined in @props), for example preserveScroll is in the attribute bag.

The issue is that what is in the attribute bag is actually preserve-scroll, so when Laravel looks up preserverScroll it can't find it.

This problem has been raised here laravel/framework#48956

And attempted to be fixed here laravel/framework#48983
And here laravel/framework#49146

But it hasn't been accepted.

The solution

The solution is to implement a fix internally. When we extract the attributes that should be passed on to the nested component, we can just ensure there is a camelCase version of that attribute/ prop name so Blade matches it correctly and filters it out of the attributes.

I also did a check to make sure that the props are correctly filtered out of the attribute bag, due to now having both naming schemes in the attribute bag, and it does.

But I just realised as writing this out, that filtering only happens for matching prop names, so there will still be a double up of normal attributes with both cases. 😕