Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

"defer" attribute fails #194

Open
beeards opened this issue Jul 2, 2022 · 4 comments
Open

"defer" attribute fails #194

beeards opened this issue Jul 2, 2022 · 4 comments
Labels
bug

Comments

@beeards
Copy link

beeards commented Jul 2, 2022 •
edited
Loading

Library version

v1.3.0

Laravel version

v9.18.0

PHP version

v8.1.7

Description

defer it's not working as expected with the helper function. I have the components deactivated, but even activated it fails. And the sets enabled too.

// helpers.php
function svg(string $name, $class = '', array $attributes = []): Svg

Steps to reproduce

// config/blade-icons.php
return [
    // ...
    'sets' => [
        'default' => [
            'paths' => [
                'resources/svg',
                'vendor/blade-ui-kit/blade-heroicons/resources/svg',
            ],
            'disk' => '',
            'prefix' => 'icon',
            'fallback' => '',
            'class' => '',
            'attributes' => [],
        ],
    ],
    // ...
];

Method 1

{{-- home.blade.php --}}
{{ svg('o-home', 'method-A', ['defer']) }}
{{ svg('o-home', 'method-B', ['defer' => true]) }}
{{ svg('o-home', 'method-C', ['defer' => 1]) }}
{{ svg('o-home', 'method-D', ['defer' => '1']) }}
{{ svg('o-home', ['class' => 'method-E'], ['defer']) }}
{{ svg('o-home', ['class' => 'method-F'], ['defer' => true]) }}
{{ svg('o-home', ['class' => 'method-G'], ['defer' => 1]) }}
{{ svg('o-home', ['class' => 'method-H'], ['defer' => '1']) }}
{{ svg('o-home', ['class' => 'method-I', 'defer']) }}
{{ svg('o-home', ['class' => 'method-J', 'defer' => true]) }}
{{ svg('o-home', ['class' => 'method-K', 'defer' => 1]) }}
{{ svg('o-home', ['class' => 'method-L', 'defer' => '1']) }}
<!-- - - - - - - - - -->
@stack('bladeicons')

outputs

<!-- localhost/home -->
<svg defer class="method-A" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>

<svg defer="1" class="method-B" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><use href="#icon-08184c0014ea88c93d292d37d36a0a53"></use></svg>
@once("icon-08184c0014ea88c93d292d37d36a0a53")
    @push("bladeicons")
    <g id="icon-08184c0014ea88c93d292d37d36a0a53"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></g>
    @endpush
@endonce

<svg defer="1" class="method-C" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><use href="#icon-08184c0014ea88c93d292d37d36a0a53"></use></svg>
@once("icon-08184c0014ea88c93d292d37d36a0a53")
    @push("bladeicons")
    <g id="icon-08184c0014ea88c93d292d37d36a0a53"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></g>
    @endpush
@endonce

<svg defer="1" class="method-D" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><use href="#icon-08184c0014ea88c93d292d37d36a0a53"></use></svg>
@once("icon-08184c0014ea88c93d292d37d36a0a53")
    @push("bladeicons")
    <g id="icon-08184c0014ea88c93d292d37d36a0a53"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></g>
    @endpush
@endonce

<svg class="method-E" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>

<svg class="method-F" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>

<svg class="method-G" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>

<svg class="method-H" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>

<svg class="method-I" defer xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>

<svg class="method-J" defer="1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><use href="#icon-08184c0014ea88c93d292d37d36a0a53"></use></svg>
@once("icon-08184c0014ea88c93d292d37d36a0a53")
    @push("bladeicons")
    <g id="icon-08184c0014ea88c93d292d37d36a0a53"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></g>
    @endpush
@endonce

<svg class="method-K" defer="1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><use href="#icon-08184c0014ea88c93d292d37d36a0a53"></use></svg>
@once("icon-08184c0014ea88c93d292d37d36a0a53")
    @push("bladeicons")
    <g id="icon-08184c0014ea88c93d292d37d36a0a53"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></g>
    @endpush
@endonce

<svg class="method-L" defer="1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><use href="#icon-08184c0014ea88c93d292d37d36a0a53"></use></svg>
@once("icon-08184c0014ea88c93d292d37d36a0a53")
    @push("bladeicons")
    <g id="icon-08184c0014ea88c93d292d37d36a0a53"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></g>
    @endpush
@endonce
<!-- - - - - - - - - -->
<svg hidden class="hidden">
</svg>

Method 2

// config/blade-icons.php
return [
    // ...
    'attributes' => [
        'defer' => true,
    ],
    // ...
];
{{-- home.blade.php --}}
{{ svg('o-home', ['class' => 'method-M']) }}
{{ svg('o-home', 'method-N') }}
<!-- - - - - - - - - -->
@stack('bladeicons')

outputs

<svg class="method-M" defer="1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><use href="#icon-08184c0014ea88c93d292d37d36a0a53"></use></svg>
@once("icon-08184c0014ea88c93d292d37d36a0a53")
@push("bladeicons")
<g id="icon-08184c0014ea88c93d292d37d36a0a53"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></g>
@endpush
@endonce

<svg class="method-N" defer="1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><use href="#icon-08184c0014ea88c93d292d37d36a0a53"></use></svg>
@once("icon-08184c0014ea88c93d292d37d36a0a53")
@push("bladeicons")
<g id="icon-08184c0014ea88c93d292d37d36a0a53"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></g>
@endpush
@endonce

<!-- - - - - - - - - -->
<svg hidden class="hidden">
</svg>
@beeards beeards added the bug label Jul 2, 2022
@beeards
Copy link
Author

beeards commented Jul 2, 2022

This seems to bypass it, but it's redundant

{!! Blade::render(Blade::render(" {{ svg('o-home', 'method-X-times-render', ['defer' => true]) }} ")) !!}

@driesvints
Copy link
Member

This feature was added by @indykoning. Right now, I have no plans on providing support myself for this feature but would appreciate it if either @indykoning could look into this or if someone can send in a PR. Thanks

@indykoning
Copy link
Contributor

It seems that any escape/print texts are compiled later in the process thus not triggering the blade engine to actually compile the @once and @Push statements to php code.

What this boils down to is that it is not possible to directly print out the defered icons i'm afraid.

Three possible fixes in usage of it are using
1:
using the blade component of it

<x-icon-o-home defer/>

2:

{!! Blade::render(svg('o-home', 'method-A', ['defer'])->toHtml()) !!}

As this tells blade to render the html result of the svg function, thus compiling the php code.

3:
not deferring the svg helper function at all which is the fastest fix.

We cannot tell the helper function to compile the output of the svg class itself as we don't know if it is rendered in blade.
Trying to defer would in that case break and deferring wouldn't actually work either.
What could be done is extending the blade directive to render what comes out of the svg function
https://github.com/blade-ui-kit/blade-icons/blob/1.x/src/BladeIconsServiceProvider.php#L98
as the blade directive can only be used in blade

@driesvints driesvints reopened this Jun 18, 2024
@driesvints
Copy link
Member

Gonna revisit this as I want to see this solved. I haven't dug deep into this yet so would appreciate any help here. I'm not sure extending Blade is the right solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Milestone
No milestone
Development

No branches or pull requests
3 participants
@driesvints @indykoning @beeards