Laravel Blade Components: inline HTML elements wrapped with spaces

[bplace]

• Laravel Version: 8.11.2
• PHP Version: 7.3.17-1 +ubuntu18.04.1+deb.sury.org+1
• Database Driver & Version: MariaDB 10.5.6

Description:

I have a Blade component which generates an HMTL link element given a page id, which needs to work as an inline element :

View file

Lorem ipsum l'<x-front.link id="12">anchor text</a>, etc...

components/front/link.blade.php

<a href="{{ route('page', $id) }}" {{ $attributes }}>{{ $slot }}</a>

Resulting HTML

Lorem ipsum l' <a href="/page/12">anchor text</a> ,etc...

The issue here are the spaces around the generated link element. I did try to have some cleanup in the component class, without success:

App/View/Components/Front/Link.php

public function render()
    {
        return function (array $data) {
            $html = View::make('components.front.link', $data)->render();

            return trim(preg_replace("#^\s+<a#m", "<a", $html));
        };
    }

After digging into the code, I've found the following lines :

Illuminate\View\Compilers\ComponentTagCompiler

protected function componentString(string $component, array $attributes) {
    // ...
    return " @component('{$class}', '{$component}', [".$this->attributesToString($parameters, $escapeBound = false).'])
<?php $component->withAttributes(['.$this->attributesToString($attributes->all(), $escapeAttributes = $class !== DynamicComponent::class).']); ?>';
}

protected function compileClosingTags(string $value)
{
    return preg_replace("/<\/\s*x[-\:][\w\-\:\.]*\s*>/", ' @endcomponentClass ', $value);
}

These two methods add a space before @component and after @endcomponentClass. Removing them does not seem to break Laravel, but I'll ask over the official repository.

Steps To Reproduce:

• Create a component $ php artisan make:component Link
• Edit component blade file {{ $slot }} or just an empty file
• Write Blade view : Lorem ipsum l'<x-link>ariane</x-link>, etc...
• Render page with additional spaces : Lorem ipsum l' ariane , etc...

[driesvints]

Heya, that's a known issue and a very hard one to solve given the nature of the compiler. We don't consider this a bug at the moment but rather how things work. However, if anyone wants to dig into resolving this one that'd would be greatly appreciated 👍

[driesvints]

@bplace note that the spaces you noted above are explicitly added to prevent collision with other syntax when components are pasted against other parts. It'd be breaking to simply remove them. The real solution requires a much more deeper and complex dive into the compiler.

[bplace]

Yeah I guessed so, I'll try to have my own compiler work differently for this specific component

[thomasriccioli]

Hello guys,

@bplace I also encounter the same "issue", specifically for my application.

By using {{''}} which generated an empty space, I fixed ComponentTagCompiler on my side like this :

    protected function componentString(string $component, array $attributes)
    {
        // ...
        return "{{''}}@component('{$class}', '{$component}', [".$this->attributesToString($parameters, $escapeBound = false).'])
<?php $component->withAttributes(['.$this->attributesToString($attributes->all(), $escapeAttributes = $class !== DynamicComponent::class).']); ?>';
    }

    protected function compileClosingTags(string $value)
    {
        return preg_replace("/<\/\s*x[-\:][\w\-\:\.]*\s*>/", ' @endcomponentClass{{\'\'}}', $value);
    }

    protected function compileSelfClosingTags(string $value)
    {
        // ...
        return preg_replace_callback($pattern, function (array $matches) {
            // ...
            return $this->componentString($matches[1], $attributes)."\n@endcomponentClass{{''}}";
        }, $value);
    }

That way, there is no more ambiguity for the blade compiler, even when two components are sticked to each other.

My tests with this fix are successful and I am able to generate :

<a href="url1">Link 1</a><a href="url2">Link 2</a>

with :

<x-link href="url1">Link 1</x-link><x-link href="url2">Link 2</x-link>

Notice how the components where sticked together and no space was added in between, while compiling correctly.

@driesvints Do you have any examples of specific cases or component conflicts where this fix couldn't work ?

Thanks for your help.

[driesvints]

Like I said we don't have a clear solution to this atm. This requires deep investigation which we unfortunately don't want to spend time on atm. Anyone's free to send in prs 👍

[bplace]

@thomasriccioli I've made my own solution by triming the spaces on specific components, see the full answer on laracast.

I haven't tested nested components, which may lead to issues, as this is not required for my current needs.

[thomasriccioli]

ok thank you guys for your responses :)