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:

<script>
  export let lightsOn;
</script>

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

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

<script>
  export let lightsOn;
</script>

{#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:

<script>
  export let pickedColor;
</script>

{#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 else como 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:

• https://codesandbox.io/s/live-demo-article-svelte-if-blocks-dfiib

---

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:

$ npx degit sveltejs/template qr-code-generator
$ cd qr-code-generator
$ npm install

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

$ npm run dev

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

Sua estrutura de arquivos será semelhante a isso:

qr-code-generator
  |- node_modules  
  |- index.js
  |- public
  |- src
    |- App.svelte
    |- main.js

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.

<div class="wrapper">
  <h1>QR CODE GENERATOR</h1>
  <form on:submit|preventDefault={dataSubmit}>
    <input bind:value={inputText}
            class="textInput"
            type="text"
            placeholder="Enter any text or url..." />
    <input class="btn" type="submit" value="Submit" />
  </form>
</div>

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.svelte usando uma tag style:

.wrapper {
  max-width: 700px;
  margin: 0 auto;
}

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

<script>
let qrCodeUrl = "";
let inputText = "";
let API_URL = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=";
function dataSubmit(e) {
  // logic will go here
}
</script>

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:

<script>
let qrCodeUrl = "";
let inputText = "";
let textPresent = false;
let API_URL = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=";
function dataSubmit(e) {
  if (inputText !== "") {
    textPresent = true;
    qrCodeUrl = API_URL + inputText;
  }
}
</script>

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:

<div  class="wrapper">
  <h1>QR CODE GENERATOR</h1>
  <form on:submit|preventDefault={dataSubmit}>
    <input class="textInput"
           type="text"
           placeholder="Enter any text or url..."
           bind:value={inputText} />
    <input class="btn" type="submit" value="Submit" />
  </form>

  {#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:

<div  class="wrapper">
  <h1>QR CODE GENERATOR</h1>
  <form on:submit|preventDefault={dataSubmit}>
    <input class="textInput"
           type="text"
           placeholder="Enter any text or url..."
           bind:value={inputText} />
    <input class="btn" type="submit" value="Submit" />
  </form>

  {#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: 🤓

img {
  margin-top: 100px;
  margin-bottom: 30px;
}

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 ⭐️

• Using if Blocks in Svelte, escrito originalmente por @alligatorio

Comments

[Ben Calder]

Cool to see people writing Svelte articles :)

I noticed your code has a bug though:
Using += to mutate API_URL is probably not what you intended:

let API_URL = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=";
function dataSubmit(e) {
  if (inputText !== "") {
    textPresent = true;
    API_URL += inputText;
    // look at the result after making multiple submissions to see why this is bad:
    console.log(API_URL);
  }
}

Instead you can simply make API_URL a const and append the input to it:

// this shouldn't ever change!
const API_URL = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=";
function dataSubmit(e) {
  if (inputText !== "") {
    loadingQrCode = true;
    let img = new Image();
    img.src = API_URL + inputText; // better ;)
    console.log(img.src);
  }
}

[Eduardo Rabelo]

it is fixed, thanks mate!

[Eduardo Rabelo]

hey Been, thanks for spotting that! Since this is a 1:1 translation, I usually don't review the code example, and seems I should've done to this one! :D I appreciate your effort, cheers

[Olimpio]

Demais...