🕉️ 🚰 🕜 Roteamento de Componentes da Web 🎮 🤷🏽 🍏

Às vezes, parece que os componentes da web não atingem a estrutura, principalmente quando comparados aos representantes mais populares. Mas grande parte das coisas mais prementes que não são obscurecidas pela implementação dos padrões incluídos no conceito de componentes da Web é fácil o suficiente para prender usando bibliotecas ou uma pequena quantidade de seu código elegante. Um desses recursos é o roteamento de front-end. O recurso nem sempre é necessário, talvez até controverso, mas na maioria dos frameworks ele está presente e é usado por muitos. E os componentes da web? E tentaremos implementar o roteamento usando a biblioteca navigo.

Para fazer com que os comandos do console funcionem melhor no Windows, você pode instalar os utilitários Unix a partir da distribuição git para este sistema ou, aparentemente, usar os novos recursos da WSL e dos terminais.

Primeiro, crie um projeto:

mkdir testnavigo
cd testnavigo
npm init

e muitas vezes pressionamos enter até que ele libere,

então colocamos a biblioteca

npm i navigo --save

crie index.html,

conecte a biblioteca e defina a classe principal do aplicativo; aqui, ele encapsulará a lógica de roteamento e gerenciamento de todos os componentes filhos.

Os componentes da Web nos deram a oportunidade de chamar automaticamente o gancho quando um elemento aparece na árvore à qual nossa classe está atribuída na árvore de objetos do navegador. Nele, inicializamos a biblioteca de roteamento com código diretamente do exemplo do github da biblioteca (na vida real, isso deve ser feito de maneira mais bonita com o carregamento modular).

<script src="/node_modules/navigo/lib/navigo.min.js"></script>

<my-app></my-app>

<script type="module">

   class MyApp extends HTMLElement {

       connectedCallback() {
           let root = null;
           let useHash = true; // Defaults to: false
           let hash = '#!'; // Defaults to: '#'
           this.router = new Navigo(root, useHash, hash);
       }
    }
   customElements.define('my-app', MyApp);
</script>

Adicionar processamento de rota:

connectedCallback() {
   let root = null;
   let useHash = true; // Defaults to: false
   let hash = '#!'; // Defaults to: '#'
   this.router = new Navigo(root, useHash, hash);
   router
       .on('page-a', () => {
           this.innerHTML = '';
           this.insertAdjacentHTML('beforeend', '<page-a></page-a>');
       })
       .on('page-b', () => {
           this.innerHTML = '';
           this.insertAdjacentHTML('beforeend', '<page-b></page-b>');
       })
       .on('*', () => {
           this.innerHTML = '';
           this.insertAdjacentHTML('beforeend', '<div>Please click links above</div>');
       })
       .resolve();
}

Cada vez que a rota é alterada, nosso componente atualiza o conteúdo interno adicionando uma nova tag a ele. Resta registrar essas tags para os novos componentes da página.

class PageA extends HTMLElement {
   connectedCallback() {
       this.insertAdjacentHTML('beforeend', '<div>This is a page A</div>');
   }
}
class PageB extends HTMLElement {
   connectedCallback() {
       this.insertAdjacentHTML('beforeend', '<div>This is a page B</div>');
   }
}
customElements.define('page-a', PageA);
customElements.define('page-b', PageB);

No topo da página, adicione links para verificar a navegação:

<a href="page-a" data-navigo>Page A</a>
<a href="page-b" data-navigo>Page B</a>

o atributo data-navigo permite clicar neles para serem processados pelo roteador, em vez de fazer solicitações para o back-end. Que é hora de começar, por exemplo, assim:

npx http-server

abra 127.0.0.1 : 8080 no navegador ou o que ele gravar nele e verifique se tudo funciona.

Agora podemos distribuir tudo como deveria em arquivos separados, anexar modelo e carregamento dinâmico de páginas, percorrer rotas para a configuração. Componentes da Web irá assumir o trabalho principal com o Ciclo de Vida de objetos de aplicação, apenas eventos que você deve se lembrar de desligar disconnectedCallback () no gancho.

Desde que eu queria mostrar o quão rápido isso for feito, eu provavelmente não vai esticar o artigo ainda mais;)

Sobre algumas dessas I já escreveu em artigos:

Início rápido com WebComponents

e

WebComponents como estruturas, interação de componentes

Aguarde uma nova revelação ^ W artigos, compartilhe e curta !

O código fonte resultante pode ser visto aqui no repositório no bitpack:

https://bitbucket.org/techminded/testnavigo/

Roteamento de Componentes da Web

More articles: