."}]]]}] 44:["$","section","11",{"className":"mb-16","children":["$undefined",[["$","div","0",{"className":"mb-8 rounded-md border p-6 bg-[hsl(var(--warn)/0.08)] border-[hsl(var(--warn)/0.30)]","children":[["$","h3",null,{"className":"mb-3 flex items-center gap-2 font-semibold text-[hsl(38_92%_75%)]","children":[["$","span",null,{"className":"font-mono","aria-hidden":"true","children":"⚠"}],"Fique atento"]}],["$","div",null,{"className":"leading-relaxed text-fg-muted","children":[["$","p","0",{"className":"text-fg-muted leading-relaxed mb-6","children":"Sempre nomeie corretamente remotes/hosts e garanta que não haverá conflitos de instância de libs (React/Vue) no browser. Use o campo shared na config do plugin."}]]}]]}]]]}] 45:["$","section","12",{"className":"mb-16","children":[["$","h2",null,{"id":"expondo-componentes-e-apps-completos","className":"scroll-mt-24 text-2xl md:text-3xl font-bold text-foreground mb-6","children":"Expondo componentes e apps completos"}],[["$","p","0",{"className":"text-fg-muted leading-relaxed mb-6","children":"No exposes do Federation Plugin, você decide se expõe apenas um botão, todo o app, um conjunto de widgets ou um Design System completo para uso cruzado. Projetos reais costumam expor o app inteiro, mas expor componentes isolados é possível para reuso entre aplicações."}]]]}] 46:["$","section","13",{"className":"mb-16","children":[["$","h2",null,{"id":"vite-plugin-federation-o-segredo-para-react-vue-vite","className":"scroll-mt-24 text-2xl md:text-3xl font-bold text-foreground mb-6","children":"Vite Plugin Federation: o segredo para React + Vue + Vite"}],[["$","p","0",{"className":"text-fg-muted leading-relaxed mb-6","children":"O vite-plugin-federation traz o poder do module federation para quem usa Vite/Rollup, sem precisar de Webpack. Basta configurar name , filename , exposes e shared — e garantir que os arquivos gerados (como remoteEntry.js ) estejam acessíveis via build/preview no servidor. O host consome esses JS diretamente via browser."}]]]}] 47:["$","section","14",{"className":"mb-16","children":["$undefined",[["$","div","0",{"className":"mb-8 rounded-md border p-6 bg-[hsl(var(--success)/0.08)] border-[hsl(var(--success)/0.30)]","children":[["$","h3",null,{"className":"mb-3 flex items-center gap-2 font-semibold text-[hsl(142_71%_72%)]","children":[["$","span",null,{"className":"font-mono","aria-hidden":"true","children":"✓"}],"Sucesso"]}],["$","div",null,{"className":"leading-relaxed text-fg-muted","children":[["$","p","0",{"className":"text-fg-muted leading-relaxed mb-6","children":"O tempo de build cai, os repositórios desacoplados acelera a inovação e cada squad ganha autonomia de verdade. O futuro do frontend escalável veio para quem domina essa arquitetura."}]]}]]}]]]}] 48:["$","section","15",{"className":"mb-16","children":[["$","h2",null,{"id":"dicas-rapidas-para-evoluir","className":"scroll-mt-24 text-2xl md:text-3xl font-bold text-foreground mb-6","children":"Dicas rápidas para evoluir"}],[["$","p","0",{"className":"text-fg-muted leading-relaxed mb-6","children":"1. Planeje: micro front-ends não são plug and play. 2. Obedeça limites claros entre módulos. 3. Use o compartilhamento de libs para evitar múltiplas instâncias de React no mesmo browser. 4. Teste tudo em ambiente de integração antes de abrir para produção. 5. Invista em monitoramento, logs e pipelines isolados para cada remote."}]]]}] 49:["$","section","16",{"className":"mb-16","children":[["$","h2",null,{"id":"quer-ver-isso-em-acao","className":"scroll-mt-24 text-2xl md:text-3xl font-bold text-foreground mb-6","children":"Quer ver isso em ação?"}],[["$","p","0",{"className":"text-fg-muted leading-relaxed mb-6","children":"Não precisa esperar a próxima live! Confira tutoriais e vídeos completos do canal Dev Doido (youtube.com/@DevDoido) para exemplos direto do código, debug ao vivo e casos reais usando m