Fala pessoal,

Meu nome é Felipe e queria falar um pouco sobre um problema que eu tinha com aplicações React e como eu resolvi isso criando o vite-plugin-react-pages.

A motivação: Desenvolvimento Mais Enxuto e Controle

Quando se trata de desenvolver aplicações web, cada desenvolvedor tem sua preferência pessoal em relação às ferramentas e frameworks. Como o Next.js por exemplo. No entanto, mesmo reconhecendo seus benefícios, a minha paixão reside em trabalhar com uma abordagem mais enxuta, usando React + Vite.

É nesse contexto que o vite-plugin-router surge, porque o roteamento em aplicações React + Vite muitas vezes era uma tarefa trabalhosa e propensa a erros. Era necessário configurar manualmente as rotas, lidar com a complexidade do gerenciamento de estados e manter a estrutura organizada. Isso muitas vezes resultava em código confuso e difícil de dar manutenção.

É aí que o vite-plugin-router resolve esses problemas de forma simples, elegante e intuitiva. Sua missão é fornecer um sistema de roteamento baseado em arquivo que observe a estrutura do projeto e crie automaticamente as rotas, muito inspirado no roteamento do Next.js

Beleza, mas ja não existe soluções pra isso?

Sim existe, como o vite-plugin-react-pages e o vite-plugin-ssr mas nenhuma delas atendia às minhas motivações e necessidades específicas. Foi então que decidi constuí o vite-plugin-router, uma solução que não apenas simplifica o roteamento, mas também se tornou minha fonte de inspiração.

Uma das razões pelas quais o vite-plugin-router se destacou para mim foi seu foco na resolução específica de um problema simples: o roteamento. Enquanto outras opções traziam um conjunto abrangente de funcionalidades ou tentavam emular toda a estrutura do Next.js para o Vite, o vite-plugin-router permanecia fiel à sua proposta de oferecer uma solução leve e eficiente para o roteamento de aplicações. Esse enfoque específico me permitiu integrar facilmente o plugin em meus projetos existentes e alcançar resultados rápidos e satisfatórios.

Solução:

Com o vite-plugin-router, basta criar os arquivos de páginas dentro da pasta src/app, e o plugin se encarrega de mapeá-los para as rotas correspondentes e cria um arquivo de rotas com todas as configurações do seu projeto.

Outro grande destaque do plugin é a facilidade de uso em conjunto com o react-router. O vite-plugin-router se integra perfeitamente à API Suspense do "react-router", possibilitando o carregamento assíncrono das páginas e melhorando significativamente o desempenho da aplicação.

Como Utilizar:

A utilização do vite-plugin-router é simples e direta. Primeiro, instale o plugin no seu projeto Vite com o comando:

npm install -D vite-plugin-router@latest

Em seguida, adicione o plugin à sua configuração do Vite no arquivo vite.config.js:

import { defineConfig } from 'vite'
import Router from 'vite-plugin-router'

export default defineConfig({
  plugins: [
    // ...
    Router()
  ],
})

Agora você pode iniciar seu projeto com npm run dev e criar os arquivos de páginas dentro da pasta src/app e o plugin se encarregará de criar as rotas automaticamente e irá criar um arquivo routes.tsx que deve ser colocado na main.tsx do seu projeto.

import React from 'react'
import ReactDOM from 'react-dom/client'
// ...
import { AppRoutes } from './routes'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <AppRoutes />
  </React.StrictMode>,
)

Além disso, o vite-plugin-router oferece recursos avançados, como rotas dinâmicas e layouts, para tornar o roteamento ainda mais flexível e poderoso.

Roteamento básico

O vite-plugin-router mapeará automaticamente os arquivos do seu diretório de páginas para uma rota com o mesmo nome:

src/app/users.tsx -> /users
src/app/users/profile.tsx -> /users/profile
src/app/settings.tsx -> /settings

Rotas primarias

Arquivos com o nome index são tratados como a página de índice de uma rota:

src/app/index.tsx -> /
src/app/users/index.tsx -> /users

Rotas Dinâmicas

Rotas dinâmicas são indicadas usando colchetes. Ambos os diretórios e páginas podem ser dinâmicos:

src/app/users/[id].tsx -> /users/:id -> (/users/123)
src/app/users/[user]/settings.tsx -> /users/:user/settings -> (/users/123/settings)

Layouts

Podemos utilizar arquivos de layout para criar layouts aninhados do pai. Ao nomear um arquivo específico como layout e definir suas rotas filhas dentro dele, podemos estabelecer uma estrutura hierárquica para nosso aplicativo.

Caso uma rota filho não possua um layout pré definido, o vite-plugin-router vai procurar o layout mais próximo dentro do caminho do arquivo.

Essa abordagem aprimora a organização e o gerenciamento de rotas, facilitando a manutenção e a extensão do aplicativo.

Por exemplo, esta estrutura de diretório:

src/app/
    ├── users/
    │  ├── index.tsx
    │  └── layout.tsx
    └── index.tsx

🚀 Novas funcionalidades

O vite-plugin-router está em constante evolução e temos inúmeras melhorias e novos recursos empolgantes que aumentarão seu poder e facilidade de uso. Abaixo, apresentamos um vislumbre de alguns dos recursos que estamos desenvolvendo ativamente:

🚧 Arquivo de rotas

Atualmente o vite-plugin-router gera um arquivo routes para ser utilizado dento da aplicação, nosso objetivo é apenas disponibilizar um hook com todas as configurações feitas, assim a sua utilização se torna ainda mais eficiente

🚧 Hook de navegação

Um hook que permite fazer navegações entre a sua aplicação 100% tipado com suas rotas dentro de sua aplicação, uma pequena abstração dos hooks do react-router-dom.

import { useNavigate, Navigate, Link } from 'vite-plugin-router'

const navigate = useNavigate()

navigate({
  to: '/users/:id',
  params: {
    id: '123'
  }
})

<Navigate | Link
   to='/users/:id' 
   params={{
      id: '123'
   }}
/>

🚧 Rotas abrangentes

Rotas abrangentes são indicadas com colchetes contendo reticências e o prefixo all [...all]:

src/app/[...all].tsx -> /* (/roteamento-dinamico-simplificado-introduzindo-o-vite-router)
O texto após as reticências será usado tanto para nomear a rota quanto para o nome do prop em que os parâmetros da rota são passados.

🚧 Erros e loadings personalizados

O vite-plugin-router hoje possui apenas um único fallback de error e loading, você pode informar um loading e um error personalizado em AppRoutes, mas não de acordo com o roteamento para cada diretório da aplicação. Muito útil para quando você gerencia varios layouts em sua aplicação.

src/app/
    ├── users/
    │  ├── index.tsx
    │  ├── layout.tsx
    │  ├── 404.tsx
    │  └── loading.tsx
    └── index.tsx

Conclusão:

O vite-plugin-router veio para implementar o roteamento em aplicações React + Vite de forma automatica. Ao eliminar a configuração manual de rotas e facilitar o uso em conjunto com o react-router, ele nos permite focar mais na lógica da aplicação e menos na configuração.

Links e Documentação

LinkedIn: https://www.linkedin.com/in/berguita/
NPM: https://www.npmjs.com/package/vite-plugin-router
GitHub: https://github.com/felipe-bergamaschi/vite-router

Roteamento Dinâmico Simplificado: Introduzindo o Vite router