Nos últimos meses Nos últimos meses, recebi a tarefa de determinar como escrever e gerenciar widgets independentes para meu trabalho de tempo integral. Embora fosse relativamente simples garantir que eles estivessem funcionais, rapidamente percebi que mantê-los era um desafio totalmente diferente

Com isso em mente, comecei um projeto paralelo durante meu tempo livre e o tornei de código aberto. Isso me permitiu compartilhar meus insights e estratégias que me ajudaram a garantir a qualidade dos meus widgets.

Como eu os fiz originalmente?

Como meus widgets exigiam um alto nível de reatividade, confiei muito na API do componente Svelte e usei o Rollup para empacotamento. "Foi simples e direto até que tive os seguintes problemas:

• Meu CSS não utilizado aumentava com o tempo e eu também não tinha certeza se apenas o CSS do componente desejado estava sendo agrupado.

• Dificuldade em lidar com JavaScript por meio de widgets sem digitação estrita. Rapidamente se tornou uma bagunça, pois tive que compartilhar alguns utilitários, como decodificação e autenticação jwt.

Como eu mudei isso?

Comecei a considerar como poderia estabelecer alguns padrões e, mais importante, integrar um sistema de tipos. Isso levou à criação do meu projeto paralelo, svelte-standalone.

O objetivo do svelte-standalone era:

• Garanta um CSS bem reduzido e remova CSS não utilizado ao agrupar.
• Garantir um sistema de tipo de escolha bem suportado e reutilizado em todos os meus aplicativos.

Nota: o sistema de tipos escolhido foi TypeScript.

• Garantir testes unitários e de integração.
• Certifique-se de que eu possa verificar meus widgets visualmente antes e depois de analisá-los.

Como consegui tudo isso?

Depois de garantir a compatibilidade do TypeScript com os plug-ins Rollup e o pré-processador Svelte, dei um passo para trás e dividi meu projeto em etapas principais. Basicamente eu tinha:

1. Um .svelte.
2. Um arquivo embed.js responsável por iniciar a instância do arquivo .svelte e adicioná-lo ao corpo.

A partir disso percebi que meu arquivo incorporado era basicamente um padrão replicado em todos os meus widgets e comecei a gerá-los. Então, consegui usar ferramentas codegen para gerar 3 arquivos com base em meus arquivos esbeltos e no meu desejo de lidar com os tipos em todo o aplicativo:

1. declaration.d.ts - permitiu que eu pudesse importar diretamente meu componente svelte e envolvê-lo usando o tipo SvelteComponent, então transformei meus componentes svelte em digitação forte por padrão.
2. types.ts - permitiu que eu pudesse escrever um defaultConfig baseado nos adereços declarados em declare.d.ts.
3. embed.ts - habilitou o início/parada do meu componente de maneira padrão para todos os meus widgets!

E voilá! Essa abordagem resolveu meus problemas com o sistema de tipos e melhorou a capacidade de manutenção dos meus widgets.

Como enfrentei os desafios de CSS:

Os principais desafios relacionados ao CSS que enfrentei foram: Como posso limpar e reduzir meu CSS sem complicações? Como posso escrever CSS que seja fácil de colaborar e de integrar em diferentes ambientes?

A solução foi bastante direta: basta usar Tailwind CSS.

Com essa abordagem, identifiquei os seguintes benefícios:

• Chega de estilos conflitantes: Usar o Tailwind me permitiu parar de me preocupar com estilos conflitantes. Por exemplo, ao lidar com um aplicativo legado fortemente dependente do Bootstrap, simplesmente apliquei um prefixo e um sinalizador importante ao meu widget e os conflitos foram resolvidos.

• Integração perfeita: Ao importar meu widget para outro aplicativo Tailwind, eu poderia facilmente omitir certas diretivas do Tailwind para reduzir o tamanho do meu pacote.

• Purga e minificação sem esforço: A minificação tornou-se simples e, com o PurgeCSS integrado do Tailwind, eu só precisava configurar o sinalizador de conteúdo corretamente para cada widget. Isso garantiu que apenas os estilos necessários fossem incluídos no pacote final.

Como resolvi os problemas de teste?

Enfrentei o desafio de garantir testes abrangentes para meus widgets, abrangendo testes unitários, testes de integração e testes visuais.

Meu objetivo principal era visualizar meus componentes antes e depois de processá-los com Rollup. Para conseguir isso, segui os seguintes passos:

• Storybook estritamente digitado: Implementei um Storybook estritamente digitado com base em meus arquivos declare.d.ts e types.ts. Isso tornou conveniente gerar automaticamente uma história padrão para cada um dos meus widgets.

• Integração Vite: usei o Vite para carregar o componente incluído em uma rota Svelte. Também foi conveniente gerar um componente de rota padrão baseado em meus arquivos TypeScript.

Isso foi tudo! Eu apreciaria sinceramente algum feedback! Além disso, verifique svelte-standalone.

Se você tiver dúvidas, sugestões ou preocupações, não hesite em entrar em contato comigo!