Monólitos Modernos com Internacionalização:InertiaJS, React & Laravel.

#laravel #webdev #braziliandevs #react

InertiaJS é um adpater para aplicações monólitos usarem frameworks/bibliotecas e afins do ecossistema JavaScript. Esse artigo vai se limitar em somente em como fazer uma internacionalização usando ainda as ferramentas out of box do laravel.

Internacionalização padrão laravel. 🌎️

Nos tópicos de internacionalização ou localização do framework laravel, é deixado explícito que por padrão laravel não vem com os diretórios de internacionalização criados, para isso é necessário rodar php artisan lang:publish. Por padrão laravel criará uma estrutura nesse estilo.


/lang
    /en
        messages.php
    /es
        messages.php

Para usar nesse tutorial do inertia, apague os subdiretórios com en, es, nosso método de internacionalização será usando arquivos json. Antes de avançar para os próximos passos, caso tenham interesse recomendo uma leitura mais detalhada de documentação de internacionalização do laravel. Documentação

Internacionalizando com Inertia 🇧🇷 🇷🇺 🇨🇳 🇿🇦 🇮🇳

1) Definição de língua padrão do seu sistema

Qual a importância disso? Bom, essa será a língua que você estará programando no seu dia a dia, escolha com cuidado, sempre busque usar a língua o qual seu cliente alvos são nativos.

Já escolheu? Certo, então vamos lá.

2) Criação dos arquivos de internacionalização

Dentro do diretório lang/ crie um arquivo com o nome da localização da sua língua do tipo JSON. Exemplo: Em meu sistema a língua padrão é o inglês, mas esse sistema será usado por brasileiros também, então irei criar um arquivo lang/pt_br.json, nesse arquivo irei definir as string em via chave e valor, do inglês para português brasileiro. O arquivo ficará na possível seguinte estrutura.


{
    "Log in":"Entrar",
    "Password": "Senha",
    "Remember me": "Lembrar do ultímo acesso",
    "Email":"E-mail",
    "Forgot your password?":"Esqueci minha senha",
    "Name":"Nome",
    "Confirm Password": "Confirme sua senha",
    "Already registered?": "Já possui um registro?",
    "Register": "Registrar"
}

Chuchu🥒Beleza👍️! Agora você já tem seus arquivo de internacionalização. Você pode criar quantos quiser, apenas garanta que o nome do arquivo seja igual o nome da localização, normalmente essa informação fica no seu env com a chave APP_LOCALE da sua aplicação.

3) Enviando dados para para o frontend.

Essa parte é simples, no seu Inertia Middleware. Coloque o seguinte código.

    $locale = app()->currentLocale();
    $filePath = base_path('lang/' . $locale . '.json');
    $language = File::json($filePath);

agora basta enviar esses dados para frontend, um conselho de amigo é colocar esse código em uma função de helper. Seu middleware estará parecendo algo como.

l é a minha função que traz o arquivo de tradução.


    /**
     * Define the props that are shared by default.
     *
     * @return array<string, mixed>
     */
    public function share(Request $request): array
    {
        $lang = l();
        logs()->debug(["lang" => $lang]);
        return [
            ...parent::share($request),
            'auth' => [
                'user' => $request->user(),
            ],
            'ziggy' => fn() => [
                ...(new Ziggy)->toArray(),
                'location' => $request->url(),
            ],
            'lang' => $lang,
        ];
    }

4) Consumindo no frontend.

Agora que já podemos acessar esses dados pela o hook do inertia de usePage().props, podemos criar uma função de utils em nosso front que nos retorne o valor traduzido.


export function t(key: string) {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const { lang } = usePage<PageProps>().props;

    if (!lang) return key;

    if (!lang[key]) return key;

    return lang[key];
}

Dessa forma nosso frontend podemos agora escrever nossos componentes da seguinte maneira.

 <InputLabel htmlFor="email" value={t('Email')} />

Assim tornando uma internacionalização mais simples. Claro, há problemas que essa abordagem não trata como pluralização e substituição. Mas o intuito dela é resolver o problema para aplicações com uso simples de internacionalização. Caso sua aplicação precise de coisas além, pode comentar aqui para nós trocarmos uma ideia e quem sabe pensar em uma solução. Até mais 👋