Super componentes... E muito mais!
Tags: javascript, webdev, frontend, opensource
Published: 2022-11-17 12:36:11

![Super-heróis Batman e homem aranha de mãos dadas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7zjjv622e8sl084ar97.jpg)


O último lançamento da biblioteca [**Bemtv**](https://github.com/diogoneves07/bemtvjs) 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**:

```js 
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 `$`:

```js 
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:

```js 
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.

```js 
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:

```js 
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:

```js
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**](https://github.com/diogoneves07/bemtvjs).

Obrigado por chegar até aqui!