Super componentes... E muito mais!

O último lançamento da biblioteca Bemtv veio com recursos interessantes, o mais marcante deles a sintaxe possibilitada pelos SuperComponents.

Por que SuperComponent?

Um dos objetivos de criar componentes é poder utilizá-los muitas vezes em sua aplicação. Com o SuperComponent, internamente, cada vez que o componente é usado, cria-se uma instância leve que gerência essa nova renderização do componente. Essas instâncias assumem o “controle”, sempre que ocorre uma ação nelas, onde a reação é a execução de um callback passado anteriormente, normalmente em Hooks e eventos do DOM.

Um breve olhar

Componente Counter:

import { _ } from "bemtv";

const { click$, $, css, template, render } = _`Counter`({ count: 0 });

click$(() => $.count++);

css`
  padding: 20px;
  color: blue;
`;

template`button[Clicked: $count ]`;

render();

Logo, vemos que não precisamos envolver a lógica do componente em uma função como de costume, então a sintaxe parece melhor e mais limpa.

Variáveis de ​​componentes(compVars)

No exemplo anterior, passamos um objeto com uma propriedade count como argumento, este objeto é chamado compVars e todas as propriedades adicionadas a ele são isoladas a cada renderização do componente, incluindo estruturas de dados como Array, Set, Map e Object.

Conhecendo nossas “variáveis”, a Bemtv consegue fornecer açúcares sintáticos realmente doces.

Um exemplo é que podemos adicionar o caminho para a propriedade diretamente no template usando o símbolo $:

import { _ } from "bemtv";

const { template, render } = _`Counter`({ message: "Hey!" });

template`button[Clicked: $message ]`;

render();

Se tivermos uma propriedade com o mesmo nome de um atributo HTML podemos usar o símbolo @ para informar a Bemtv para tratar a propriedade como chave e valor:

import { _ } from "bemtv";

const { template, render } = _`Img`({
  src: "avatar.png",
  alt: "My avatar",
});

template`img[ @src @alt ]`;

render();

Funções de transformação

As funções de transformação nos permitem adicionar uma “marca” a uma estrutura de dados e informa ao Bemtv para transformar a estrutura de dados somente quando necessário, isso nos permite focar apenas na estrutura de dados.

import { tFn } from "bemtv";

const tListJoin = tFn((list) => list.join(" br[] "));

O exemplo acima cria uma função de transformação que pode ser usada com listas, e quando a lista é solicitada pelo template ele executa essa função e adiciona o resultado ao template:

import { _, tFn} from "bemtv";

const tListJoin = tFn((list) => list.join(" br[] "));

const { template } = _`List`({
  list: tListJoin(["user1", "user2", "user3"]),
});

template`div[Users: $list ]

Sempre que esta lista for alterada (ex: $.list.push(item)), A Bemtv detectará e usará a função de transformação novamente e renderizará a alteração.

As funções de transformação podem ser incrivelmente poderosas porque com Brackethtml podemos até retornar a marcação com CSS-In-JS.

Router

Um Router é usado para navegação entre visualizações de vários componentes em uma aplicação Bemtv, permite alterar a URL do navegador e mantém a UI sincronizada com a URL:

import { _, router } from "bemtv";

_`Home`().template`Hey!`;

_`AboutUs`().template`Hey Again!`;

const { template, render } = _`MyPages`();

template`
      #[] br[]br[] 
      Links: 
        #Home[Click to go home!]  
        #AboutUs[Click to know about us!]`;

render();

No exemplo acima, criamos duas rotas(Bemtv cria rotas automaticamente) e fornecemos um local para que elas sejam renderizadas #[] e também criamos links #Home[ Texto do link ], tudo isso em poucas linhas!

Fechamento

Esses são apenas alguns dos novos recursos da biblioteca, caso queira saber mais segue o link para o repositório do projeto: Bemtv.

Obrigado por chegar até aqui!