Usando componentes HTML com o webpack

Tempo de leitura: 3 minutos

No nosso último post, que você pode conferir clicando aqui, nós utilizamos o webpack na nossa aplicação node.js + typescript. Hoje, vamos falar mais um pouco sobre o webpack.

Um recurso poderoso do PHP é o recurso Que permite importar arquivos HTML para o DOM no próprio servidor. No entanto, usar o PHP não é uma solução viável para muitas pessoas – especialmente os desenvolvedores front-end. O GitHub não suporta linguagens do lado do servidor como o PHP. Portanto, temos que encontrar uma solução melhor.

Queremos usar JavaScript no lado do cliente para usar módulos HTML em um aplicativo de página única. Webpack vem para o resgate, fornecendo o html-loader. O HTML loader nos permite injetar código HTML em JavaScript, que pode então injetar dinamicamente componentes HTML no DOM principal.

Refiro-me a esses módulos HTML como “componentes estáticos”. Eles não têm um estado intrínseco e não contêm nenhum código JavaScript, como os componentes React. Isso os torna tão rápidos quanto o HTML + vanilla JS, adicionando a conveniência da modularidade.

Instalando o HTML loader

Supondo que você tenha o webpack instalado,

npm install --save-dev html-loader
# or
yarn add -D html-loader

Agora você precisa adicioná-lo ao seu arquivo de configuração:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: true,
              interpolation: false
            }
          }
        ]
      }
    ]
  }
};

Adicionando componentes estáticos ao seu projeto

Eu gosto de criar uma pasta separada para meus módulos HTML.

static-components/
  registration.html
  header.html
  footer.html

Injetando seu HTML em JavaScript e depois no DOM

Agora você pode importar módulos HTML em arquivos JavaScript como strings. Essa string pode então ser definida como a propriedade innerHTML dos seus contêineres.

// main.html
<html><head>...</head>
<body>
  <div id="root"></div>
  <script src="index.js"></script>
</body>
</html>

Agora, no seu código:

// index.js
import header from './static-components/header.html'
import footer from './static-components/footer.html'
document.onload = function() {
  document.getElementById("root").innerHTML = header + footer;
}

Analogia para React

Os módulos HTML são como os componentes React, exceto que são “estáticos”. Eles não mudam com o tempo ou têm um estado.

No entanto, você pode criar controladores que sejam carregados e descarregados sempre que você adicionar e remover HTML do DOM. Esses controladores podem adicionar manipuladores de eventos DOM para criar aplicativos interativos.

// StaticController.js
window.staticControllers = {};
// HeaderController.js
import header from 'path/to/header.html'
window.staticControllers.headerController = {
  initialRender: function() {
    return header;
  },
  onLoad: function() {
    document.getElementById('id').onclick = ...;
  }
};

No entanto, os componentes estáticos não terão quase nenhuma sobrecarga em comparação com o React, já que ele não renderiza novamente. Além disso, você não precisa carregar seu site com centenas de KB de dados.

Combinando JSX com módulos HTML

Um recurso realmente interessante seria capaz de separar JSX longo do arquivo JavaScript real, certo. O único obstáculo seria avaliar a notação de objeto do JSX em tempo de execução. Claro, os desenvolvedores terão que adicionar esse recurso.

No entanto, se conseguirmos isso um dia, você pode escrever JSX em arquivos de marcação separados!

Gostou do conteúdo? não deixe de seguir a uebile nas redes sociais, pois toda semana tem post novo aqui no blog com mais dicas para o seu impulso digital.