With All Things Wrapping Up...
dark mode
'Tis the season of Wrapped, and I apparently managed to place myself among the top 0.005% listeners of The Emptiness Machine by Linkin Park by listening to it a total of 192 times. It's just that good (and so is the rest of the album!)
Speaking of wrapping things up, I actually took some time to scratch an itch I've had for a time, which is conditionally wrapping Blade-components with other Blade-components. I've had abominations like this (bit of a contrived example, but whatever) in some of my codebases for a while and it just hurts every time I open them up:
resources/components/some-component.blade.php:
@props([ 'special' => false, ]) @if ($special) <x-some-wrapper-component :$special> <div class="..."> {{ $slot }} </div> </x-some-wrapper-component> @else <div class="..."> {{ $slot }} </div> @endif
Yeah, you could extract the CSS-classes into a variable and stuff but you still end up with a lot of nasty duplication (don't get me wrong, duplication isn't necessarily always bad and I believe it should absolutely be encouraged sometimes as it's often cheaper than the wrong abstraction) but it still hurts a bit to look at.
Well, the other day I decided to just do something about it, and conjured up this little thing:
resources/components/wrap.blade.php:
@props([ 'if' => false, 'with' => null, ]) @if ($if && $with) <x-dynamic-component :component="$with" {{ $attributes }}> {{ $slot }} </x-dynamic-component> @else {{ $slot }} @endif
I don't really know why it took me so long. It's a super simple component, and at the same time really powerful. Just look how pretty it makes our original component now:
resources/components/some-component.blade.php:
@props([ 'special' => false, ]) <x-wrap with="some-wrapper-component" :if="$special" :$special> <div class="..."> {{ $slot }} </div> </x-wrap>
That's it! This was a short one, time to prepare for binge-reading Wind and Truth over the weekend! 🤓