Como construir um componente da Web usando Stencil.js

Os componentes da Web são um conjunto de tecnologias que permitem criar elementos reutilizáveis ​​e reutilizá-los em diferentes aplicativos da Web.

Stencil.js é um compilador que gera componentes da web compatíveis com todos os navegadores modernos. Ele fornece ferramentas e APIs para ajudá-lo a criar componentes da web rápidos, eficientes e escaláveis.

Introdução ao Stencil.js

Para começar a usar o Stencil.js, primeiro você precisa inicializá-lo em seu computador.

Faça isso executando o seguinte comando em seu terminal node.js:

npm init estêncil

Depois de executar o comando, um prompt aparecerá na tela para você selecionar com qual projeto deseja iniciar:

Para prosseguir, escolha a opção de componente, digite o nome do seu projeto e confirme sua seleção:

Em seguida, mude para o diretório do seu projeto e instale suas dependências executando estes comandos:

cd first-stencil-project
npm instalar

Criando um novo componente da Web

Para criar um novo componente da Web em Stencil.js, crie um caminho de pasta como origem/componentes. A pasta de componentes conterá um arquivo TypeScript com o nome do seu componente, como Stencil.js usa a linguagem TypeScript e JSX para desenvolvimento de componentes. A pasta também conterá um arquivo CSS que contém o estilo do seu componente.

Por exemplo, se você deseja construir um componente chamado "meu-botão", crie um arquivo chamado meu-botão.tsx e um arquivo CSS chamado meu-botão.css. No meu-botão.tsx arquivo, defina seu componente usando a API Stencil.js:

importar { Componente, h } de'@stencil/núcleo';
@Componente({
 marcação: 'meu-botão',
 styleUrl: 'meu-botão.css',
 sombra: verdadeiro,
})
exportaraulaMeuBotão{
 render() {
retornar (
Clique em mim</button>
 );
 }
}

Este código importa o Componente e h funções de Stencil.js. O Componente função define o componente, enquanto o h função cria sua marcação usando HTML.

Defina seu componente usando o @Componente decorador, que recebe um objeto com três propriedades: marcação, styleUrl, e sombra.

O marcação A propriedade contém o nome da marca do componente. O styleUrl A propriedade especifica o arquivo CSS para estilizar o elemento personalizado. Por último, o sombra A propriedade é um valor booleano que indica se o componente usará o Shadow DOM para encapsular os estilos e o comportamento do elemento personalizado. No método render, você cria um elemento de botão.

Em adição a styleUrl propriedade, você pode usar mais duas propriedades para estilizar seu componente: estilo e styleUrls.

O estilo A propriedade define estilos embutidos para o componente. Leva um valor de string que representa os estilos CSS para o componente:

importar { Componente, h } de'@stencil/núcleo';
@Componente({
 marcação: 'meu-botão',
 estilo: `
 botão {
 preenchimento: 1rem 0.5rem;
 raio da borda: 12px;
 família da fonte: cursiva;
 borda: nenhum;
 cor: #e2e2e2;
 cor de fundo: #333333;
 intensidade da fonte: Negrito;
 }
`,
 sombra: verdadeiro,
})
exportaraulaMeuBotão{
 render() {
retornar (
Clique em mim</button>
 );
 }
}

O styleUrls A propriedade especifica vários arquivos CSS externos para estilizar o componente. Leva uma matriz de valores de string que representam os caminhos para os arquivos CSS:

importar { Componente, h } de'@stencil/núcleo';
@Componente({
 marcação: 'meu-botão',
 URLs de estilo: ['meu-botão.css', 'outro-botão.css'],
 sombra: verdadeiro,
})
exportaraulaMeuBotão{
 render() {
retornar (
Clique em mim</button>
 );
 }
}

Renderizando o Web Component

Depois de criar seu componente da Web, você pode renderizá-lo em um arquivo HTML adicionando uma tag de elemento personalizado. Veja como você pode incluir o componente my-button:

html>
<htmldir="ltr"idioma="en">
<cabeça>
<metaconjunto de caracteres="utf-8" />
<metanome="janela de exibição"contente="largura=largura do dispositivo, escala inicial=1,0, escala mínima=1,0, escala máxima=5,0" />
<linkhref=""rele="folha de estilo">
<título>Iniciador de componentes do estênciltítulo>
<roteirotipo="módulo"origem="/build/first-stencil-project.esm.js">roteiro>
<roteironomoduleorigem="/build/first-stencil-project.js">roteiro>
cabeça>
<corpo>
<meu-botão>meu-botão>
corpo>
html>

Agora você pode criar componentes da Web usando Stencil.js

O Stencil.js é uma ferramenta poderosa para criar componentes da Web que são rápidos, eficientes e escaláveis. Sua API e ferramentas facilitam a criação e o gerenciamento de componentes da Web, e sua compatibilidade com todos os navegadores modernos garante que seus componentes funcionem bem em diferentes aplicativos da Web.

À medida que os componentes da Web se tornam cada vez mais populares, Stencil.js é uma estrutura que você deve considerar ao criar elementos reutilizáveis ​​para a Web.