Svelte 3: Usando blocos “if”

Aplicativos web aprimorados ciberneticamente

Neste artigo, veremos como usar os blocos if com o Svelte para adicionar alguma lógica de controle de fluxo ao nosso código de marcação.

Os blocos no Svelte começam com a sintaxe {#block}…{/block}, portanto, os blocos if usam a sintaxe {#if}…{/if}. E, como você verá, também podemos adicionar um bloco else e/ou blocos elseif como parte de um bloco if.

Vamos começar com o exemplo mais simples, onde apenas mostramos algumas marcações se o valor da prop lightsOn for verdadeiro:

{#if lightsOn}
<p>I can see clearly now!</p>
{/if}

Também podemos adicionar um bloco else usando a sintaxe {:else}:

{#if lightsOn}
<p>I can see clearly now!</p>
{:else}
<p>It's too dark in here! 🌑</p>
{/if}

:elseif

Também podemos adicionar quantos blocos de elseif nós quisermos com a sintaxe {:else if condition}. Vamos modificar um pouco o nosso exemplo:

{#if pickedColor === 'green'}
<p>I agree with you! 💚</p>
{:else if pickedColor === 'blue'}
<p>Even better! 💙</p>
{:else if pickedColor === 'purple'}
<p>Ok then! 💜</p>
{/if}

E no exemplo acima, também poderíamos ter adicionado um bloco elsecomo o último item em nosso bloco if, para adicionar alguma marcação se nenhuma de nossas condições for verdadeira.

Em seguida, vamos ver um exemplo de um aplicativo que usa um bloco if para ocultar ou exibir alguma marcação. O exemplo também será um bom lembrete sobre como inicializar um novo projeto Svelte.

Sinta-se à vontade para pular essa parte se sentir que já tem uma boa idéia sobre a configuração de um projeto Svelte e o uso de blocos if.

Quer ver o exemplo final funcionando? Você pode acessar o live demo que criei no CodeSandbox:

Nosso Exemplo

Para ajudar a ilustrar e aprofundar o conhecimento sobre os blocos, criaremos um aplicativo gerador de QR Code, com a ajuda desta API de geração de QR Code.

Então, vamos começar nossa jornada com este mini projeto 🚣‍.

Configuração do Projeto

  • Instale a versão recomendada do Node.js, se você não tiver um.
  • Crie uma pasta para o novo projeto.

Agora abra seu terminal, e na nova pasta, digite os comandos abaixo:

Agora, para ver se você configurou seu projeto corretamente ou não, execute o comando abaixo:

Abrindo http://localhost:5000 no seu navegador, veremos algo como:

Sua estrutura de arquivos será semelhante a isso:

O App.svelte é o arquivo principal onde escreveremos nosso código. Comece excluindo todo o seu conteúdo.

Construindo o Projeto

Vamos primeiro começar com a parte da marcação HTML e fazer um pequeno formulário para enviar o texto digitado para o qual você precisa gerar o QR Code.

Temos dataSubmit que é uma função que iremos usar na parte JavaScript. O on:submit é semelhante ao nativo onsubmit() e é usado como manipulador de eventos para o evento submit do formulário. Observe como também usamos o modificador preventDefault para evitar a necessidade de adicionar um código adicional à nossa função de manipulador.

Em bind:value={inputText} fazemos a ligação bidirecional entre o valor da entrada e a variável inputText.

Você também pode escrever o CSS no mesmo arquivo App.svelteusando uma tag style:

.textInput {
width: 70%;
height: 40px;
color: #484848;
border-width: 1.5px;
border-style: solid;
border-color: black;
padding: 3px;
font-weight: 700;
}
.btn {
border-radius: 3px;
background-color: black;
color: whitesmoke;
font-weight: 700;
cursor: pointer;
}

Depois de escrever o código acima, a página ficará mais ou menos assim:

Escrevendo o JavaScript

No mesmo arquivo ‌App.svelte, você também pode escrever a parte do JavaScript em uma tag script.

Iremos criar a variável com o endereço do servidor da API do QR Code e também as variáveis do exemplo usado pelo HTML, como dataSubmit.

Em seguida, vamos criar uma variável que indica se o texto é ou não digitado pelo usuário e começar a escrever a lógica do código do QR Code:

Criando os blocos “if”

Agora temos que adicionar um pouco de HTML e os blocos if para mostrar o código QR gerado quando o texto é inserido:

  {#if textPresent}
<img src={qrCodeUrl} /><br>
<a href={qrCodeUrl} download>Download</a>
{/if}
</div>

Se textPresent for verdadeiro, a marcação dentro do bloco if será visível e incluída no DOM.

Blocos “else”

Você também pode usar um blocl else para exibir outra coisa se a condição do if não for avaliada como verdadeira:

  {#if textPresent}
<img src={qrCodeUrl} /><br>
<a href={qrCodeUrl} download>Download</a>
{:else}
<p>No QR code yet! ☹️</p>
{/if}
</div>

Agora adicione um pouco mais de estilo: 🤓

a {
font-weight: 700px;
font-size: 30px;
color: black;
}

Agora, ao digitar algum texto na caixa de entrada e clicar em enviar, você obterá o código QR que representa esse texto.

Algo assim 😍.

Seu aplicativo está pronto para produção! 🥳🔥

Créditos ⭐️