Laravel Wayfinder: Integrando seu backend Laravel ao frontend TypeScript com facilidade

Sempre acompanho lançamentos no ecossistema Laravel em busca de ferramentas que possam tornar o desenvolvimento mais eficiente e organizado. Ontem 02 de Abril, fiquei interessado em uma ferramenta promissora chamada Laravel Wayfinder, que parece resolver muitos dos desafios na integração entre backend Laravel e frontend TypeScript.

O que é o Laravel Wayfinder?

O Laravel Wayfinder é uma solução que gera automaticamente funções TypeScript totalmente tipadas diretamente a partir das rotas e controllers Laravel. Essa funcionalidade promete acabar com a necessidade de URLs hardcoded e elimina os erros comuns de digitação ou parâmetros incorretos no frontend.

Com o Wayfinder, desenvolvedores podem chamar endpoints Laravel diretamente como funções comuns do TypeScript, garantindo uma integração mais fluida e segura entre backend e frontend.

Instalação simples

A instalação é realmente bem simples:

composer require laravel/wayfinder
npm i -D vite-plugin-run

Configure o vite.config.js para monitorar mudanças automaticamente:

import { run } from "vite-plugin-run";

export default defineConfig({
    plugins: [
        run([
            {
                name: "wayfinder",
                run: ["php", "artisan", "wayfinder:generate"],
                pattern: ["routes/*.php", "app/**/Http/**/*.php"],
            },
        ]),
    ],
    resolve: {
        alias: {
            "@actions/": "./resources/js/actions",
            "@routes/": "./resources/js/routes",
        },
    },
});

Gerando definições automáticas

Com um simples comando, as definições são geradas automaticamente:

php artisan wayfinder:generate

Essas definições são organizadas automaticamente nos diretórios wayfinder, actions e routes, proporcionando um ambiente de desenvolvimento mais claro e eficiente.

Potencializando o uso com funções TypeScript

O Wayfinder permite acessar URLs e métodos HTTP facilmente, como neste exemplo:

import { show } from "@actions/App/Http/Controllers/PostController";

const postUrl = show.url(1); // Retorna "/posts/1"
const postHead = show.head(1); // { url: "/posts/1", method: "head" }

Suporte avançado para formulários HTML

Outra promessa interessante do Wayfinder é a geração automática de atributos para formulários convencionais:

php artisan wayfinder:generate --with-form

Exemplo de uso:

import { store } from "@actions/App/Http/Controllers/PostController";

const Page = () => (
    <form {...store.form()}>
        {/* action="/posts" method="post" */}
    </form>
);

Integração com Inertia.js

Para desenvolvedores que utilizam Inertia.js, o Wayfinder é particularmente promissor ao facilitar ainda mais o processo de comunicação com backend:

import { useForm } from "@inertiajs/react";
import { store } from "@actions/App/Http/Controllers/PostController";

const form = useForm({ name: "Meu novo post" });

form.submit(store()); // POST automático para `/posts`

Conclusão

O Laravel Wayfinder é uma ferramenta com grande potencial para melhorar significativamente a produtividade e a segurança em projetos Laravel com TypeScript. Estou bastante entusiasmado com suas possibilidades e recomendo que desenvolvedores fiquem atentos a esta solução para o futuro próximo.

Experimente e veja o quanto ela pode ajudar no seu dia a dia de desenvolvimento!