Introdução
Acabei de lançar o Pushdock, uma ferramenta de changelog para founders de SaaS. Minha meta era criar um widget de changelog leve, sem dependências e com instalação rápida. Este guia detalhará a implementação do widget de changelog usando Vanilla JS e Shadow DOM.
![[Pitch] Construí um widget de changelog em menos de 15KB usando Vanilla JS e Shadow DOM — e por quê não usei React](/uploads/thumbs/generated/tip-13357.svg)
Desenvolvimento de Vanilla JS
Minha primeira decisão foi não usar React no widget. React + ReactDOM sozinhos já somavam ~45KB, o que ultrapassava minha meta de 15KB. A solução foi usar Vanilla JS puro, manipulando diretamente o DOM e usando a API fetch nativa. O resultado foi um widget de 11.8KB gzipados.
Implementação de Shadow DOM
O segundo problema era o CSS. Quando você injeta HTML em um site externo, o CSS do site externo pode afetar o seu widget e vice-versa. A solução foi usar o Shadow DOM, uma feature nativa do browser que cria um escopo isolado. O Shadow DOM permite que o CSS do widget não afete o documento principal e vice-versa, garantindo um isolamento de estilos.
Cache do Widget
Para o cache do widget, usei Cache-Control de 1 hora no CDN da Vercel para o arquivo changelog.js e revalidate de 60 segundos no Next.js para a lista de posts da API. O badge de 'não lidos' usa localStorage para persistir o timestamp da última visita.
Desafios Técnicos
O maior desafio técnico foi lidar com o z-index. Mesmo usando Shadow DOM, o widget precisava aparecer acima de outros elementos do site do cliente. A solução foi usar um z-index alto (9999) no host element fora do shadow root.
Conclusão
O Pushdock é uma alternativa ao Beamer e AnnounceKit, focada em founders de SaaS que querem algo leve, simples e com preço previsível. O widget de changelog foi implementado usando Vanilla JS e Shadow DOM, com apenas 11.8KB, sem dependências e instalação rápida.