A maneira tradicional de escrever Web Components não é muito amigável com SSR (Server Side Rendering). Neste post, mostro como você pode construir Web Components reativos que funcionam com SSR e com qualquer framework JavaScript (Vue, React, Svelte, Solid, Brisa) ou Vanilla JS.

• Introdução
• Escrever um Web Component com a Brisa
• Construindo o componente da Web
• Carregando o componente Web em um projeto Vanilla JS
• SSR do componente Web
• Conte-me mais sobre a Brisa... Por favor...
• Nota para criadores de bibliotecas de componentes Web
• Exemplo
• Conclusão

Introdução

Vamos usar o Brisa Web Component Compiler. Brisa é um web framework que, além de ser semelhante a outros frameworks como Next.js ou Nuxt.js, também permite construir Web Components reativos que funcionam com sinais de reatividade, com JSX e com SSR.

Para isso, basta conhecer a sintaxe do Brisa ao escrever Web Components. A Brisa ainda não é pública pois está atualmente em 95,48% do roteiro v0.1, mas estimamos que dentro de 1 mês estará pronta para lançamento e todos poderão acessá-la. No entanto, mesmo que não seja público, você já pode usá-lo para criar suas próprias bibliotecas de Web Components.

Escrevendo um Web Component com Brisa

Como exemplo, vamos escrever um Web Component de um contador, como sempre, o exemplo clássico.

counter-wc.tsx

import type { WebContext } from "brisa";

export default function CounterWC(
  { start = 0, color = "#2cebcf" }: { start?: number; color?: string },
  { state, css }: WebContext,
) {
  const count = state(start);

  css`
    button {
      background-color: ${color};
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px;
      margin: 5px;
      cursor: pointer;
    }
    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  `;

  return (
    

       count.value  }> 
      {count.value}
       count.value--}>-
    
  );
}

A Brisa usa o nome dos arquivos para conhecer o seletor, aqui o seletor seria counter-wc.

DICA: Embora o Brisa ainda não seja público, você pode usar tipos TypeScript para orientá-lo sobre como escrever Web Components.

No exemplo acima, state é usado para criar um sinal e então usando o .value você o torna reativo dentro do JSX. Os props também são sinais especiais, pois por serem somente leitura, o .value não é utilizado para facilitar o uso e definir valores padrão com mais facilidade, isso é feito através de otimizações em tempo de construção, semelhante ao React para atuar como se eles estivessem usando sinais, mas o contrário.

O literal do modelo css permite reagir a alterações reativas, neste caso, da propriedade color. Este modelo CSS literal fora deste exemplo é muito útil para criar animações reativas facilmente. É importante lembrar que Web Components funcionam com Shadow DOM, portanto o CSS não afeta o restante da página.

Construindo o Componente Web

Para construir o Web Component, você precisa executar o seguinte comando:

brisa build -w counter-wc.tsx

Este comando irá gerar 2 arquivos:

[ wait ]  ? building your standalone components...
[ info ]
[ info ]   Standalone components:
[ info ]   - build/counter-wc.client.js (670.00 B)
[ info ]   - build/counter-wc.server.js (842.00 B)
[ info ]
[ info ]   ✨  Done in 42.20ms.

Esses arquivos não são o Web Component, são apenas a função de renderização do Web Component otimizada em tempo de construção para ser o mais leve possível (os bytes que saem são sem gzip).

Então, como carregamos o Web Component?

Carregando o Web Component em um projeto Vanilla JS

Para fazer isso, você precisa adicionar o importmap no HTML com brisa/client e depois importar o arquivo counter-wc.client.js:

Aqui apenas a parte de renderização seria portada em cada arquivo de componente web, enquanto todos usariam o mesmo wrapper Brisa definido no importmap, que é responsável por criar o Web Component com os sinais e o shadow DOM.

SSR do componente Web

SSR de um componente da Web agora pode ser feito graças ao Declarative Shadow DOM. O arquivo counter-wc.server.js já foi compilado com este comportamento, então você só precisa importá-lo para o seu servidor e renderizá-lo no HTML e adaptá-lo ao framework do seu servidor.

Aqui está um exemplo com Bun.js ou Node.js sem usar JSX:

ssr.js

import { renderToString } from "brisa/server";
import { jsx } from "brisa/jsx-runtime";
import CustomCounter from "counter-wc/server";

const html = `


    
    
        ${await renderToString(jsx(CustomCounter, { start: 10 }))}
    

`;

console.log(html);

Em seguida, execute bun run ssr.js e você verá o HTML com o componente web renderizado usando o Declarative Shadow DOM.

Conte-me mais sobre a Brisa... Por favor...

A integração destas bibliotecas de Web Components com a Brisa é feita através de um arquivo de configuração:

import type { WebComponentIntegrations } from "brisa";

export default {
  "custom-counter": {
    client: "./path/to/web-component.client.js",
    server: "./path/to/web-component.server.js",
    types: "./path/to/web-component.types.d.ts",
  },
} satisfies WebComponentIntegrations;

Desta forma, os tipos SSR e TypeScript são automaticamente integrados ao seu projeto. E você pode usar o Web Component em qualquer componente de servidor ou em outro Web Component.

Se estiver interessado em saber mais, convido-o a subscrever a newsletter Brisa para receber as últimas novidades e atualizações sobre a Brisa. Estimamos que até o final de setembro estará pronto para lançamento.

Nota para criadores de bibliotecas de componentes Web

Encorajamos você a experimentar o Brisa para criar suas próprias bibliotecas de Web Components. Se colocar o emblema “made with Brisa”, colocaremos um link para a sua biblioteca na página da Brisa.

Exemplo

Se você quiser ver o repositório GitHub do exemplo de contador que explicamos neste artigo, você pode dar uma olhada e usá-lo como referência para suas próprias criações:

• https://github.com/aralroca/counter-wc

Conclusão

Neste post, vimos como construir Web Components reativos que funcionam com SSR e com qualquer framework JavaScript ou Vanilla JS. Usamos o Brisa para construir o Web Component e vimos como carregá-lo em um projeto Vanilla JS e como fazer SSR com ele.

Espero que você tenha gostado deste post e que tenha aprendido algo novo. Se você tiver alguma dúvida, não hesite em me perguntar nos comentários abaixo. Ficarei feliz em ajudá-lo.

Boa programação e aproveite o resto do verão! ??