Component/Livewire attribute error

[wit3]

Hi, if i try to use cli on blade that has component or livewire tag, the plugin add me space in variable chain.

Before:

<x-component-name type="error" :content="$message->content"/>

After:

<x-component-name type="error" :content="$message - > content"/>

It's a bug or an option?

[shufo]

Hi @wit3. Thanks for trying out.

I think I had that behavior in an earlier version, but I think it was fixed in recent version.
I tried formatting with prettier-plugin-blade v.1.3.2

❯ cat example.blade.php
<x-component-name type="error" :content="$message->content" />

❯ yarn run prettier example.blade.php
yarn run v1.22.10
$ prettier --plugin . --plugin-search-dir . example.blade.php
<x-component-name type="error"
                  :content="$message->content" />

Can you post the version of prettier-plugin-blade you tried and preferably the whole template?
Sorry if I'm missed something.

[wit3]

packages.json

"devDependencies": {
        "@shufo/prettier-plugin-blade": "^1.3.2",
        "@tailwindcss/aspect-ratio": "^0.4.0",
        "@tailwindcss/forms": "^0.4.0",
        "@tailwindcss/line-clamp": "^0.3.0",
        "@tailwindcss/typography": "^0.5.0",
        "alpinejs": "^3.5.0",
        "autoprefixer": "^10.4.0",
        "axios": "^0.24.0",
        "laravel-echo": "^1.11.3",
        "laravel-mix": "^6.0.37",
        "lodash": "^4.17.19",
        "postcss": "^8.4.5",
        "postcss-import": "^14.0.2",
        "postcss-nesting": "^9.0.0",
        "prettier": "2.6.2",
        "pusher-js": "^7.0.3",
        "tailwindcss": "^3.0.3"
    },

**Example blade file: tab-list-relations.blade.php **

 <div class="px-4 sm:px-0 mt-6" x-data="{ tab: window.location.hash ? window.location.hash : '#tab1' }">
        <div class="hidden sm:block">
            <nav class="relative z-0 rounded-lg shadow flex divide-x divide-gray-200" aria-label="Tabs">

@foreach ($this->relations as $k => $relation )                
          
                <a href="#" aria-current="page"
                    class="text-gray-900 rounded-l-lg  group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-6 text-sm font-medium text-center hover:bg-gray-50 focus:z-10"
                    x-on:click.prevent="tab='#tab1'">
                    <span>Consumi</span>
                    <span aria-hidden="true" :class="tab == '#tab1' ? 'bg-red-500' : 'bg-transparent'"
                        class="absolute inset-x-0 bottom-0 h-0.5"></span>
                </a>
            @endforeach

               

            </nav>
        </div>
        <div class="mt-6">
            @foreach ($this->relations as $k => $relation )                
            <div x-show="tab == '#tab{{$k}}'" x-cloak>
                <livewire:widgets.invoice-document-consumption.card :invoice_document_id="$this->invoiceDocument->id" />
            </div>
            @endforeach
     
        </div>
    </div>

if i run ./node_modules/.bin/prettier --write resources/views/livewire/widgets/invoice-document/tab-list-relations.blade.php

Output:

 <div class="mt-6 px-4 sm:px-0" x-data="{ tab: window.location.hash ? window.location.hash : '#tab1' }">
     <div class="hidden sm:block">
         <nav class="relative z-0 flex divide-x divide-gray-200 rounded-lg shadow" aria-label="Tabs">

             @foreach ($this->relations as $k => $relation)
                 <a href="#" aria-current="page"
                     class="group relative min-w-0 flex-1 overflow-hidden rounded-l-lg bg-white py-4 px-6 text-center text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10"
                     x-on:click.prevent="tab='#tab1'">
                     <span>Consumi</span>
                     <span aria-hidden="true" :class="tab == '#tab1' ? 'bg-red-500' : 'bg-transparent'"
                         class="absolute inset-x-0 bottom-0 h-0.5"></span>
                 </a>
             @endforeach



         </nav>
     </div>
     <div class="mt-6">
         @foreach ($this->relations as $k => $relation)
             <div x-show="tab == '#tab{{ $k }}'" x-cloak>
                 <livewire:widgets.invoice-document-consumption.card
                     :invoice_document_id="$this - > invoiceDocument - > id" />
             </div>
         @endforeach

     </div>
 </div>

[shufo]

Thanks @wit3.
This seems to be a bug due to not expecting <livewire.~~> tags.

For temporary workaround, you can use the @livewire directive by laravel-livewire to prevent unexpected formatting.

e.g.

@livewire('show-post', ['post' => $post])

I'll try to fix the behaviour so that you can use <livewire:~~ /> tags.

[shufo]

Fixed at https://github.com/shufo/prettier-plugin-blade/releases/tag/v1.3.5