Accents encoded in livewire components (Jetstream)

[jozeflambrecht]

• Laravel-Lang Version: 10.1.7
• PHP Version: 7.4.4

Description:

When I use Jetstream (livewire) and go the add Teams page, this is what I see:

On the left side, the accents are ok. But on the livewire component, they are encoded.

Steps To Reproduce:

Install Laravel, Jetstream and copy language files into resources/lang folder.

[Fred Delrieu]

Ce ne sont pas les accents, mais l'apostrophe qui pose problème, car équipe est bien écrit. Il faudrait voir si le problème ne vient pas des apostrophes Windows

[jozeflambrecht]

It could be the windows environment, but why is l'équipe correctly on the left panel?

[Luis Parrado]

It looks more like a problem of how Laravel renders the properties passed to a component.

For example, See resources/views/teams/create-team-form.blade.php.
The {{ __('Team Details') }} translation is inside a slot of the component and there aren't problems, but if you see the Line 12 and Line 25 the translations are passed to the value property using the {{ }} syntax, and this seems to be a problem.

If you want to fix this, you can:

• Pass the translation through the slot replacing

<x-jet-label value="{{ __('Team Owner') }}" />  //Line 12
//
<x-jet-label for="name" value="{{ __('Team Name') }}" /> //Line 25

by

<x-jet-label>{{ __('Team Owner') }}</x-jet-label> //Line 12
//
<x-jet-label for="name">{{ __('Team Name') }}</x-jet-label> //Line 25

or

• Pass the property value using the colon syntax, replacing

<x-jet-label value="{{ __('Team Owner') }}" />  //Line 12
//
<x-jet-label for="name" value="{{ __('Team Name') }}" /> //Line 25

by

<x-jet-label :value="__('Team Owner')" /> //Line 12
//
<x-jet-label for="name" :value="__('Team Name')" /> //Line 25

Therefore this behavior is not the responsibility of this package.

[Andrey Helldar]

The {{ }} blade operator encodes special characters in unicode.

This behavior is inherent in Jetstream.

To prevent the text from being converted to unicode, need to output it in raw view:

<x-slot name="title">
    {!! __('Team Details') !!}
</x-slot>

You can offer PR to the Jetstream project by describing this issue. Or just let them know about this issue when working with non-English localizations.