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!