Um desafio comum entre as equipes de desenvolvimento é usar a mesma linguagem; enquanto uma subequipe está usando Vue, outra pode estar usando React, causando trabalho redundante e forçando você a criar componentes compartilhados duas vezes.
Neste tutorial, exploraremos Mitose , uma ferramenta que pode compilar código para JavaScript padrão, além de frameworks e bibliotecas como Angular, React e Vue, permitindo que você crie componentes reutilizáveis.
Vamos revisar algumas informações básicas para esclarecer quando você deve usar a mitose e, em seguida, instalar a mitose em um novo projeto para vê-la em ação. Vamos começar!
Mitose vs. componentes da web
Embora alguns desenvolvedores inicialmente tenham se voltado para os componentes da web para criar componentes reutilizáveis, eles encontraram problemas como compatibilidade do navegador dos componentes da web e seu nível inferior abordagem, que tornou a criação de componentes reutilizáveis um processo intensivo.
Da mesma forma, certas bibliotecas como React tinham fluxos de trabalho que dificultavam a incorporação de componentes da web, levando ao criação de soluções como LitElement do Google , Ionic e Stencil.js.
Enquanto isso, uma tendência paralela surgiu em Svelte e SolidJS. Destinado à construção de aplicativos, Svelte e SolidJS obtiveram enormes ganhos de desempenho ao compilar o código-fonte para JavaScript padrão, criando pacotes que eram menores e mais rápidos do que os componentes da web.
Mitose baseia-se na funcionalidade de Svelte e SolidJS, empregando a mesma velocidade de compilação e permitindo que você recompile um componente em diferentes estruturas e bibliotecas da mesma base de código. O componente compilado opera como qualquer outro componente do framework.
Semelhante ao SolidJS, o Mitosis usa uma versão do JSX que compila os componentes para JSON. Plugins então compilam os componentes para diferentes alvos, permitindo que você crie ferramentas em duas direções:
Código que pode ser convertido em Mitosis JSON Plugins que compilam ou serializam JSON para frameworks alvo
Por estas razões, Mitosis não suporta ferramentas de código. Por exemplo, Builder.io permite que você crie seu site usando uma ferramenta visual e, em seguida, compile-o para a estrutura de sua escolha. Builder.io atua como um CMS, mas é alimentado por mitose.
A mitose usa edição WYSIWYG e um framework SPA para compilação. Agora que entendemos como a mitose funciona, vamos criar um componente com mitose.
Introdução à mitose
Primeiro, instalaremos a Mitosis CLI:
npm install-g @ builder.io/mitosis-cli
Crie uma pasta vazia no seu computador. Em seu terminal, abra a pasta e crie um novo projeto npm:
npm init-y
Em seguida, instalaremos o Mitosis:
npm install @ builder.io/mitosis
Crie um arquivo chamado component.lite.jsx. lite.jsx é a extensão para projetos de mitose. A seguir, instalaremos a extensão Builder.io VS Code, que fornece destaque de sintaxe para arquivos lite.jsx.
No arquivo component.lite.jsx, adicione o seguinte código:
import {useState, Show, For} de”@ builder.io/mitosis”; export default function Component (props) {const state=useState ({count: 0})
No código acima, declaramos o estado usando o gancho useState. Agora, quando qualquer propriedade no objeto de estado for alterada, a IU será renderizada.
Em seguida, adicione o seguinte bloco de código a component.lite.jsx, que retornará JSX como React ou SolidJS:
return (
{/* EXIBIR A CONTAGEM */}
{/* BOTÃO PARA ADICIONAR À CONTAGEM */}
)}
No código acima, o componente show nos permite renderizar condicionalmente a IU. Como o estado é atualizado com reatribuições simples, não há necessidade de adicionar a função setState, que usaríamos no React. Por último, observe que todos os nossos estados podem ser agrupados em um objeto.
Agora que nosso componente está construído, vamos ver alguns exemplos de nosso componente compilado para diferentes frameworks!
Compilação em mitose
React
Vamos usar a mitose para compilar nosso componente em um componente React:
mitosis compile–to=react component.lite.jsx> component.jsx
O sinalizador–to=nos permite selecionar a estrutura para a qual iremos compilar nosso componente Mitose. Quando compilado para React, obteremos a seguinte saída:
import {useContext} from”react”; import {useLocalObservable} de”mobx-react-lite”; exportar a função padrão Component (props) {const state=useLocalObservable (()=> ({count: 0})); return (
)}
); }
Vue
–to=vue component.lite.jsx> component.vue
Quando compilado para Vue, nosso componente se parecerá com o código abaixo:
Svelte
–to=svelte component.lite.jsx> component.svelte
Quando compilamos nosso componente Mitosis para Svelte, obteremos a seguinte saída:
{/if}
,}) exportar componente de classe padrão {count=0; }
componentes da web
–to=customElement component.lite.jsx> component.js
Quando compilado para componentes da web, obteremos a seguinte saída:
/** * Uso: * *
