Stencil para a criação de Web-Components.

Os Web Components estão cada vez mais presentes no desenvolvimento front-end, proporcionando componentes reutilizáveis evitando, assim, a repetição de código e tornando o desenvolvimento mais eficiente e organizado.

Durante o desenvolvimento de web components, conheci o StencilJS, uma ferramenta que se destacou pela sua facilidade de compreensão e compatibilidade com outros frameworks. Com o stencil, consegui ter mais rapidez e eficiência no meu desenvolvimento ao ajudar a construir uma arquitetura de código mais organizada e de fácil compreensão para futuras manutenções.

O que é o Stencil?

O stencil é um compilador para web-components que permite a criação de componentes performáticos e reutilizáveis utilizando o Virtual Dom renderização assíncrona e lazy loading. A ferramenta utiliza TypeScript, JSX e CSS para criar Web Components compatíveis com padrões que podem ser usados para criar bibliotecas de componentes.

Vantagens do StencilJS

1. Desempenho otimizado: Componentes compilados são leves e rápidos.
2. Compatibilidade universal: Web Components criados com Stencil podem ser utilizados em React, Angular, Vue ou mesmo em aplicações puras com JavaScript.
3. Uso de TypeScript: Oferece tipagem estática para maior segurança no desenvolvimento.
4. Lazy Loading: Carregamento sob demanda para melhorar a performance.
5. APIs modernas: Suporte a decorators, JSX e Shadow DOM.

Primeiros Passos 💻

Para começar vamos instalar o stencil e criar um novo projeto:

npm init stencil

Após seguir os passos da configuração, vamos criar um novo componente:

import { Component, Prop, h } from '@stencil/core';
@Component({
  tag: 'default-button',
  styleUrl: 'default-button.css',
  shadow: true

})

export class DefaultButton{
  @Prop() text: string;

  render() {
    return <button>{this.texto}</button>;
  }
}

Esse código define um Web Component chamado default-button, que recebe uma propriedade text e a exibe dentro de um elemento <button>.

Publicando no NPM e Utilizando o Componente:

Se você quiser compartilhar seu componente com outras pessoas, você pode publicá-lo no NPM. Para isso, siga os passos abaixo:

No package.json, adicione a configuração necessária:

{
  "name": "@seu-usuario/default-button",
  "version": "1.0.0",
  "description": "Meu primeiro web-component criado com o StencilJS",
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "types": "dist/types/index.d.ts",
  "scripts": {
    "build": "stencil build",
    "test": "stencil test"
  },
  "dependencies": {},
  "devDependencies": {}
}

Como vamos publicar no NPM?

Faça login no Npm:

npm login

Faça o build do seu pacote:

npm run build

Agora publique o seu pacote, essa forma o seu pacote irá ficar publico:

npm publish --access public

Vamos instalar o seu pacote:

npm install @seu-usuario/default-button

Agora o ultimo passo é a sua utilização

import '@seu-usuario/default-button';

<default-button text="Olá, Stencil!"></default-button>

Conclusão

Sendo assim, o stencil é uma excelente opção para devs que buscam criar Web Components reutilizáveis e performáticos. Sua compatibilidade com diferentes frameworks e seu suporte a tecnologias modernas fazem dele uma escolha robusta para projetos escaláveis.