This content originally appeared on DEV Community and was authored by João Neto
Há umas semanas me peguei pensando em como poderia otimizar um fluxo de build de SVGs para React, sem depender de soluções gigantes ou plugins engessados. Foi aí que nasceu a ideia de escrever meu próprio plugin para o SWC, um compilador escrito em Rust que, convenhamos, intimida bastante quem só encostou de leve na linguagem.
Minha meta era simples no papel:
Pegar um svg, passar pelo swc e gerar um componente React limpo, válido.
A realidade, claro, foi um pouco mais tortuosa, por que eu queria fazer isso sem depender do svgr e outras libs que já fazem isso.
Entendendo o monstro (ou tentando)
Primeiro veio o Rust. Embora eu já estivesse brincando com a linguagem, foi a primeira vez que precisei realmente encarar o ecossistema do swc_core, entender o mínimo sobre a árvore de sintaxe (AST), a forma como Visit e VisitMut funcionam e como a arquitetura modular (e brutal) do SWC exige que você entenda exatamente onde quer mexer.
Não sou especialista em compiladores, nem pretendo ser, mas foi gratificante ver como as peças se encaixam, mesmo que de forma amadora. Tive que desenhar árvore por árvore, pra criar o componente react com base no svg e debugar no contexto do WASM que não tem ~”console.log”~ de maneira tão fácil, e principalmente aceitar que erros de tipo em Rust não perdoam ninguém.
Modularidade que empodera (e atrapalha)
O legal (e assustador) de criar um plugin pro SWC é perceber que tudo é feito pra ser plugável, performático e modular. Isso é libertador, mas também não extremamente complicado: se você não entende bem o que está mexendo, vai quebrar seu AST todo e nada vai compilar.
Depois de alguns dias errando e recompilando e olhado os plugin prontos do SWC, consegui fazer um VisitMut que:
- Troca
classporclassName. - Converte
style="..."em objeto React. - Transforma atributos com hífen (
stroke-width) emstrokeWidth. - Empacota tudo em um componente export default, bonitinho.
CLI, build e WASM
A parte boa: depois de pronto, compilar tudo pra WASM e rodar com o swc cli é praticamente mágico. Ter Rust + SWC + WASM rodando em npm run build te dá a sensação de ter controle sobre o compilador inteiro.
Hoje, com esse plugin, eu já consigo montar uma biblioteca de ícones SVG que viram componentes React no build. É brutalmente rápido e sem dependências extras.
Limites e próximos passos
Por enquanto, é um experimento — funciona bem no React para web, mas ainda não daria pra usar direto no React Native. Quem sabe numa v0.2 eu consiga estender isso pra gerar algo compatível com react-native-svg ou outra lib parecida.
Para quem quiser explorar
O repo é: https://github.com/joaoneto/swc-plugin-svg-component
Se quiser ver como funciona, clona, compila, brinca com cargo build e swc cli. Se surgir bug, abre issue. Se quiser mexer junto, manda PR. Se achar tudo isso insano demais pra rodar em produção, concordo. É um plugin experimental no sentido mais radical possível da palavra.
No fim das contas, foi uma experiência que me aproximou mais do Rust, do SWC e do Next.js com Turbopack.
This content originally appeared on DEV Community and was authored by João Neto