Web Components com Stencil em 2024

Stencil é um compilador avançado, projetado para criar Web Components reutilizáveis e altamente eficientes. Desenvolvido pela equipe por trás do Ionic, Stencil facilita a criação de componentes que podem ser facilmente integrados em qualquer aplicação web, independentemente do framework ou biblioteca em uso. Este guia detalhado irá conduzi-lo através do processo de configuração e criação de um Web Component básico utilizando o Stencil.

O que é Stencil?

Stencil é uma ferramenta moderna que combina a simplicidade dos Web Components com a flexibilidade de frameworks como React e Vue. Usando uma sintaxe baseada em TypeScript e JSX, Stencil permite a criação de componentes dinâmicos e altamente performáticos. Além disso, gera componentes otimizados para produção, com suporte a funcionalidades como reatividade e encapsulamento nativo via Shadow DOM.

Passo 1: Configuração do Ambiente de Desenvolvimento

Antes de iniciar, é necessário configurar seu ambiente de desenvolvimento. Os requisitos básicos incluem:

• Node.js (v16 ou superior)
• NPM ou Yarn

Caso ainda não tenha o Node.js instalado, ele pode ser baixado a partir do site oficial. Com o Node.js devidamente instalado, siga os passos abaixo para criar um novo projeto com o Stencil.

Passo 2: Criando um Novo Projeto Stencil

Abra o terminal e execute o seguinte comando para iniciar um novo projeto Stencil:

npm init stencil

Você será solicitado a escolher um tipo de projeto. Para este tutorial, selecione “component”

(Component Starter) para começar com uma configuração mínima.

Se tudo der certo você verá algo:

Passo 3: Estrutura do Projeto

Após a criação do projeto, a estrutura de pastas será semelhante a esta:

Os diretórios e arquivos mais importantes incluem:

• src/components/my-component/: Contém os arquivos do seu componente, como o código principal (.tsx), estilo (.css) e testes (.spec.ts).
• stencil.config.ts: Arquivo de configuração do Stencil.
• index.html: Página HTML simples para testar o componente durante o desenvolvimento.

Vamos instalar todas as dependências, rodando o comando abaixo:
npm install

Agora vamos rodar o projeto para ver se tudo está ok:

npm start

Caso dê algum erro como este:

Vamos instalar essas dependências para corrigi-lo:
npm install –save-dev istanbul-lib-report yargs-parser

npm install –save-dev @types/istanbul-lib-report @types/yargs-parser

E atualizar nossas dependências:
npm update

Passo 4: Desenvolvendo o Seu Primeiro Componente

Com o projeto configurado, vamos criar um Web Component básico. No diretório src/components/my-component/, abra o arquivo my-component.tsx.

O código básico do componente pode ser estruturado da seguinte forma:

import { Component, Prop, h } from '@stencil/core';

@Component({

tag: 'my-component',

styleUrl: 'my-component.css',

shadow: true,

})

export class MyComponent {

@Prop() first: string;

@Prop() last: string;

private getText(): string {

return `${this.first} ${this.last}`;

}

render() {

return <div>Hello, World! I'm {this.getText()}</div>;

}

}

Explicando o Código

• @Component: Decorador que define o Web Component, permitindo a especificação do nome do elemento HTML (tag), caminho para o arquivo de estilos (styleUrl) e se o componente utilizará Shadow DOM (shadow).
• @Prop: Decorador que define propriedades públicas do componente, permitindo que valores sejam passados como atributos HTML.
• getText(): Método privado que retorna uma string formatada usando as propriedades first e last.
• render(): Método que define o que será exibido pelo componente. Neste exemplo, retorna um elemento div com o texto “Hello, World!”.

Passo 5: Estilizando o Componente

Abra o arquivo my-component.css para adicionar estilos ao componente. O Stencil aplica os estilos diretamente ao Shadow DOM, assegurando que eles não afetem outros elementos na página.

Exemplo simples de estilo:

div {

font-family: sans-serif;

font-size: 20px;

color: #333;

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

}

Passo 6: Testando o Componente

Stencil inclui um servidor de desenvolvimento integrado, facilitando o teste do componente. Para iniciá-lo, execute:

npm start

Isso abrirá uma nova aba no navegador com a página index.html, onde o componente pode ser testado.

Passo 7: Utilizando o Componente

Para utilizar o componente my-component em uma página HTML, adicione a seguinte linha ao arquivo index.html:

<my-component first=”John” last=”Doe”></my-component>

Após recarregar a página, o texto “Hello, World! I’m John Doe” será exibido.

Passo 8: Build para Produção

Após concluir o desenvolvimento, você pode gerar um build para produção, que compilará o componente em JavaScript puro, pronto para ser utilizado em qualquer aplicação. Execute:

npm run build

Os arquivos de produção serão gerados na pasta dist/, incluindo um bundle otimizado para projetos ou distribuição via npm.

Conclusão

Stencil é uma ferramenta versátil e poderosa para a criação de Web Components modernos e reutilizáveis. Em 2024, à medida que a modularidade e interoperabilidade se tornam ainda mais cruciais no desenvolvimento web, Stencil se destaca como uma escolha excelente para desenvolvedores que desejam construir componentes performáticos e de fácil manutenção.

Explore o Stencil e veja como ele pode acelerar o desenvolvimento dos seus próximos projetos frontend!