Introdução a LIT: uma biblioteca reativa baseada em padrões

Lit é uma opção interessante entre o front-end JavaScript Estruturas para programação reativa. Isso é pegou um pouco de interesse dos desenvolvedoresmas permanece relativamente abaixo do radar em comparação com Algumas outras estruturas reativas. Lit é construído em cima do mozilla Padrão dos componentes da Net e prioriza a velocidade e um pequeno conjunto de recursos úteis.

O padrão de componentes da internet mozilla

Para entender LIT, você precisa entender os componentes da internet. Um padrão do navegador suportado por todos os principais navegadores, os componentes da Net fornece uma maneira consistente de definir componentes da interface do usuário. A idéia de componentes da internet é dar aos desenvolvedores um conjunto de ferramentas no navegador para lidar com as necessidades universais dos componentes da interface do usuário. Em um mundo preferrred, todas as estruturas – seriam reagem, vue ou outra coisa – ficariam no topo da camada dos componentes da Net, dando mais consistência ao desenvolvimento da Net.

A LIT é uma biblioteca limpa e focada que facilita uma experiência mais confortável do desenvolvedor do uso de componentes da Net. Funciona produzindo componentes da Net, que são apenas elementos HTML personalizados. Esses elementos podem ser usados amplamente, por exemplo, em React. Aqui está um componente simples de felicitações construído a partir do padrão:

class SimpleGreeting extends HTMLElement {
  constructor() {
    tremendous();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    const identify = this.getAttribute('identify') || 'World';

    this.shadowRoot.innerHTML = `
       
        p {
          colour: navy;
          font-family: sans-serif;
          border: 1px stable lightblue;
          padding: 5px;
          show: inline-block;
        }
       
       
Good day, ${identify}! 
    `;
  }
}

Este componente gera uma saudação com base no identify propriedade, com um estilo simples de componentes. Para usá -lo, você pode inseri -lo no console da internet (F12) e depois correr:

const defaultGreeting = doc.createElement('simple-greeting');
doc.physique.appendChild(defaultGreeting);

Como o componente funciona e o que faz é bastante óbvio, embora existam várias características interessantes, como o construtor e o shadowRoot. Principalmente, a coisa a perceber é que os componentes da Net permitem definir a funcionalidade encapsulada usando um padrão do navegador, que pode ser executado diretamente no console da internet.

Desenvolvendo componentes da Net com LIT

Agora, vejamos a mesma funcionalidade, mas usando lit.

Lit fornece lessons e funções ajudantes como LitElement e decoradores como customElement juntamente com html e css Funções para otimizar o processo de desenvolvimento:

import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('simple-greeting-lit')
export class SimpleGreetingLit extends LitElement {

  @property({ sort: String })
  identify="World"; // default

  static kinds = css`
    p {
      colour: blueviolet; 
      font-family: sans-serif;
      border: 2px stable mediumpurple;
      padding: 8px;
      show: inline-block;
    }
    span {
      font-weight: daring;
    }
  `;

  render() {
    return html` 
Good day,  ${this.identify} ! That is Lit. 
`;
  }
}

Este snippet de código serve ao mesmo objetivo do nosso exemplo de componentes da Net, mas você pode ver imediatamente que o tamanho e a complexidade foram reduzidos. Os decoradores (aka anotações) começando com @ Vamos declarar o customElement (que é o que o componente da internet finalmente estava fazendo) e o identify propriedade de maneira concisa. Também descartamos o construtor padrão e não exigimos mais marcação em linha para o CSS, graças ao LIT’s css função (a Modelo marcado literal função).

Lit também nos permite usar o render método para retornar um modelo gerado pelo html função. O conteúdo do html O argumento da função permite combinar HTML com interpolação variável. Isso é semelhante ao JSX e outras sintaxe de modelos, mas observe que usamos ${} em vez de {}e que nós usamos this Para se referir ao componente.

A maneira mais fácil de experimentar isso é usar o Iluminado por playground on-line. Observe que neste playground, você precisará usar o Ts (TypeScript) Alterne para as anotações funcionarem. (Essa limitação refere -se apenas ao playground; as anotações funcionarão com JavaScript na construção.)

Adicionando reatividade a componentes acesos

Agora vamos dar o próximo passo na reatividade e fazer litros identify variável interativa. Adicionaremos uma entrada que nos permite alterar o nome-uma ligação bidirecional entre um enter componente e o nome exibido no modelo. A LIT os mantém em sincronia.

O código a seguir inclui apenas as partes significativas que mudaram:

render() {
    return html`
       

         
         
Good day,  ${this.identify} ! 
       
    `;
  }

  _handleNameInput(occasion: Occasion) {
    const inputElement = occasion.goal as HTMLInputElement;
    this.identify = inputElement.worth;
  }

A funcionalidade aqui é a mesma da amostra anterior, mas agora temos um enter elemento e uma função manipuladora. A entrada é o texto do tipo HTML padrão. É também um padrão worth Propriedade, mas é prefixada com o operador de pontos da LIT. O operador DOT liga a entrada para ${this.identify}o ingrediente mágico que torna o valor da entrada reativo para essa variável. O operador DOT diz à LIT que você deseja a propriedade JavaScript ao vivo para o valor, e não um valor estático. Isso garante que a LIT mantenha a entrada atualizada com as alterações programáticas no valor.

O @enter atributo permite apontar o manipulador de mudança em nosso _handleNameInput função. A própria função usa a manipulação DOM padrão para recuperar o valor do elemento de entrada e depois atribui -lo ao the.identify variável. Esse é o outro lado da ligação bidirecional. Quando o usuário altera o valor dentro da entrada, o manipulador atualiza this.identify. Lit garante que onde quer que this.identify Aparece, ele recebe o novo valor.

Usando o estado de componente interno em LIT

Outro recurso essencial comum a todas as bibliotecas reativas é o estado de componente interno. A LIT também simplifica esse aspecto da programação reativa. Por exemplo, digamos que precisamos de um recurso de present/ocultar. Isso dependeria de um valor booleano puramente interno; portanto, não há necessidade de conectá -lo a uma propriedade que interage com um pai ou qualquer coisa externa. Podemos declarar uma nova variável de estado como assim:

  @state()
  non-public _showSecretMessage = false;

Agora isso estará disponível para nós na interface do usuário. Podemos usá -lo para alternar a visibilidade de uma seção:

${this._showSecretMessage
  ? html` 
That is the key message! 
`
  : '' /* Render nothing if false */
}

Isso irá no modelo, como parte do render função. Ele usa uma expressão de modelo (o ${} construção) e dentro disso, um operador ternário JavaScript (o ? : sintaxe). Isso avaliará o segmento após o ? se this._showSecretMessage é verdadeiro, ou a parte seguinte : Se for falso. O resultado líquido é que, se o valor for verdadeiro, obtemos um pedaço de modelo HTML colocado na vista neste momento e, se não, não obtemos nada.

E é exatamente isso que queremos – a renderização condicional com base em nossa alternância. Para realmente alternar o valor, podemos adicionar um botão:

${this._showSecretMessage
  ? html` 
That is the key message! 
`
  : '' /* Render nothing if false */
}

Este código de botão usa a variável de estado para mostrar condicionalmente um rótulo apropriado. Aqui está como o @click on Ligação do manipulador:

_toggleSecretMessage() {
    this._showSecretMessage = !this._showSecretMessage;
}

Aqui, simplesmente trocamos o valor de nossa variável de estado e a LIT faz o trabalho de manifestar essa mudança na visão com base em nossa tela ternária. Agora, temos um painel que podemos mostrar e esconder à vontade.

Renderizando coleções em LIT

Agora vamos verificar a capacidade de Lit de renderizar coleções. Primeiro, criaremos uma lista de Hobbits Como uma propriedade:

@property({ sort: Array })
  hobbits = ("Frodo Baggins", "Samwise Gamgee", "Merry Brandybuck", "Pippin Took");

Estamos usando uma propriedade aqui em vez de estado, porque provavelmente definiremos esse valor de um pai. Em seguida, queremos exibir nosso Hobbits:

 
The Fellowship's Hobbits: 
      ${this.hobbits && this.hobbits.size > 0
        ? html`
             

              ${this.hobbits.map(
                (hobbitName) => html` 
${hobbitName} 
`
              )}
             
          `
        : html` 
(No hobbits listed on this roster!) 
`
      }

Usamos o operador condicional ternário novamente para mostrar uma mensagem se o Hobbits estão vazios. Com nossos dados padrão, mostramos uma lista dos hobbits mais famosos (todos exceto Bilbo). O trabalho principal é feito usando o map operador funcional no this.hobbits variável. Isso nos permite mover-se sobre cada elemento e produzir a marcação de itens de lista apropriada by way of LIT’s html função.

Usando LIT para fazer chamadas de API

Agora vamos mudar do meio da Terra para Westeros e carregar alguns dados de caracteres de uma API remota.

Primeiro, criaremos um interno state variável para gerenciar a promessa de busca:

@state()
  non-public _characterDataPromise: Promise ;

Em seguida, vamos implementar um constructor Porque precisamos fazer algo ao carregar primeiro o componente. Nesse caso, estamos carregando os dados:

constructor() {
    tremendous();
    this._characterDataPromise = this._fetchCharacterData();
  }

Aqui, chamamos para o _fetchCharacterData função:

non-public async _fetchCharacterData() {
  const apiUrl = "https://www.anapioficeandfire.com/api/characters?web page=1&pageSize=10";

  strive {
    const response = await fetch(apiUrl);

      if (!response.okay) {
        throw new Error(`API request failed with standing: ${response.standing}`);
      }

      const json: Array  = await response.json();

      if (json && json.size > 0) {
        const characterTemplates = json.map((char) => {
          const displayName = char.identify || (char.aliases && char.aliases(0)) || "Unnamed Character";
          return html`
             

               ${displayName} 
              ${char.tradition ? html`  - Tradition: ${char.tradition} ` : ''}
              ${char.born ? html` , Born: ${char.born} ` : ''}
             
          `;
        });
        return html` 
${characterTemplates} 
`;
      } else {
        return html` 
No characters present in these lands! 
`;
      }
    } catch (error) {
      console.error("Didn't fetch Sport of Thrones character knowledge:", error);
      return Promise.resolve(html` 
Couldn't summon characters: ${error.message} 
`);
    }
  }

O código aqui é principalmente JavaScript padrão, exceto que estamos usando LIT’s html Função para retornar a marcação de modelo apropriada para cada caso em nossos resultados de busca. Mas observe que o actual _fetchCharacterData função retorna uma promessa. No caso de um erro, ele o faz explicitamente, mas em todos os casos, a função assíncrona retornará uma promessa. Observe também que o resolve o método é chamado com o conteúdo do html Chamada de função.

Salvamos uma alça para esta promessa anteriormente em this._characterDataPromise. A alça salva nos permite esperar de forma inteligente sobre o resultado desta chamada, no modelo de componente principal:

return html`
       
Characters from the Seven Kingdoms (or thereabouts): 
      ${till(
        this._characterDataPromise,
        html` 
Sending a raven for information (loading characters...). 
`
      )}
    `;

Novamente, usamos o till() função para aguardar o resultado remaining da promessa. Observe que o segundo argumento exibe o conteúdo de espera.

Conclusão

A LIT contém uma riqueza de idéias interessantes, e sua popularidade não é surpreendente, especialmente devido à sua base no padrão dos componentes da Net. A grande questão é se a LIT decolará como um sistema de componente common para uma variedade de outras estruturas, como React, Sieve e Vue. Se isso acontecer, inseriremos uma fase totalmente nova em sua relevância e adoção. Por enquanto, porém, a LIT é uma abordagem viável por si só, especialmente atraente para projetos que valorizam o alto valor dos padrões.

Veja meu Repositório do GitHub Para o código -fonte de todos os exemplos deste artigo.