Ou Vanilla JavaScript com duas funções auxiliares?

Neste artigo, discutirei como desenvolver componentes web reutilizáveis ​​usando a biblioteca Fusor e os benefícios de fazê-lo.

Esses componentes podem então ser compostos em aplicativos da web completos, semelhantes aos criados usando React, Angular, Vue, Solid, Svelte e outros.

A API Fusor consiste em apenas duas funções principais:

• Crie um elemento DOM envolvido em um objeto especial.
• Atualizar um elemento DOM envolvido em um objeto especial.

Além de algumas funções raramente usadas, como:

• Obtenha um elemento DOM de um objeto especial.

Você não precisa saber nada sobre este objeto especial.

Crie um elemento DOM

Criação via JSX

import { getElement } from "@fusorjs/dom";

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

document.body.append(getElement(message)); // Get

Usamos as funções de API create e get.

Criação alternativa não JSX

import { div } from "@fusorjs/dom/html";
const message = div("Seconds ", count, " elapsed"); // Create

Atualizar um elemento DOM

import { getElement, update } from "@fusorjs/dom";

let count = 0;
const message = 
Seconds {() => count} elapsed
; // Create

document.body.append(getElement(message)); // Get

setInterval(() => {
  count  = 1;
  update(message); // Update
}, 1000);

Usamos a função da API update. Ele atualiza um elemento DOM e todos os seus filhos recursivamente. Ele recupera novos valores dos resultados das funções, tornando-os dinâmicos.

Filhos, atributos e propriedades podem ser todos dinâmicos.

 (toggle ? "on" : "off")} />




As atualizações do DOM ocorrerão apenas se os novos valores diferirem dos atuais.


  
  
  Definir parâmetros


Na maioria das vezes, você definirá os parâmetros normalmente:







No entanto, às vezes você precisará distinguir entre atributos e propriedades. Para especificar seu tipo, você pode adicionar sufixos _a ou _p aos seus nomes:







Para adicionar um manipulador de eventos, você deve sempre usar um sufixo _e:


 "event handler"} />




Existem tipos adicionais, e alguns deles podem ter opções extras para garantir compatibilidade total com os padrões W3C:


 "event handler"} />





  
  
  Crie um componente reutilizável


Componha seus componentes usando os objetos especiais do Fusor. Encapsule estado e parâmetros dentro de funções. Coloque os nomes dos seus componentes em maiúscula.

Aqui está um exemplo de componente de botão de contagem:


import { getElement, update } from "@fusorjs/dom";

const CountingButton = (props) => {
  let count = props.count ?? 0; // Init State

  const self = (
     {
        count  = 1;
        update(self);
      }}
    >
      Clicked {() => count} times
    
  );

  return self;
};

const App = () => (
  

    
Three counting buttons
    
);

document.body.append(getElement(App()));




O componente CountingButton atualiza apenas parte de seu próprio elemento DOM sem afetar o restante do aplicativo.

Depois de entender completamente como o componente acima funciona, você pode reescrevê-lo de uma maneira um pouco mais curta e obter o mesmo resultado:


const CountingButton = ({ count = 0 }) => (
   {
      count  = 1;
      update(self);
    }}
  >
    Clicked {() => count} times
  
);




Cada função de retorno de chamada do manipulador de eventos recebe dois argumentos: o objeto de evento padrão e o objeto especial atual.

Mais uma vez, se você entendeu o exemplo acima, confira a versão mais curta do mesmo componente:


const CountingButton = ({ count = 0 }) => (
   (count  = 1)}>
    Clicked {() => count} times
  
);




Adicionamos a opção de atualização para atualizar o componente depois que o retorno de chamada do manipulador de eventos for chamado, o que é equivalente ao exemplo anterior.


  
  
  Vida útil


O último aspecto que precisamos entender antes de mergulhar no desenvolvimento de aplicações do mundo real é o ciclo de vida do componente.

Consiste em apenas quatro etapas:


Crie o componente

Conectar ao DOM

Atualizar o DOM

Desconectar do DOM

import { getElement, update } from "@fusorjs/dom";

const IntervalCounter = ({ count = 0 }) => {
  console.log("1. Create the component");

  return (
    
 {
        console.log("2. Connect to the DOM");

        const timerId = setInterval(() => {
          count  ;
          update(self);
          console.log("3. Update the DOM");
        }, 1000);

        return () => {
          clearInterval(timerId);
          console.log("4. Disconnect from the DOM");
        };
      }}
    >
      Since mounted {() => count} seconds elapsed
    
  );
};

const instance = ;
const element = getElement(instance);

document.body.append(element);
setTimeout(() => element.remove(), 15000);




A propriedade mount possui uma função que é executada quando o componente é adicionado ao DOM. Esta função recebe um argumento: o objeto especial atual. Também pode retornar outra função que é executada quando o componente é removido do DOM.

Controlamos totalmente esses quatro estágios do ciclo de vida. Isso nos permite criar, atualizar e comparar componentes usando métodos personalizados assíncronos ou concorrentes, com diferentes estratégias e quadros de animação em mente.


  
  
  Isso conclui o tutorial


Como você pode ver neste tutorial, o Fusor é simples, conciso e explícito. Na maioria das vezes, você usará apenas suas duas funções de API. No entanto, também oferece muito controle e flexibilidade quando necessário.

Então, para responder à pergunta do título, Fusor é uma pequena biblioteca JavaScript, não um framework, mas pode alcançar os mesmos resultados que outros frameworks.


  
  
  Comece a codificar


Todos os exemplos acima estão disponíveis no CodeSandbox.

Além disso, confira o exemplo do Relógio Analógico SVG.

Aqui está um aplicativo do mundo real.

Projetos iniciais padrão:

JavaScript inicial
TypeScript Starter

  
  
  Obrigado