Marcadores Especiais

Editar esta página na GitHub

{@html ...}permalink

{@html expression}

Numa expressão de texto, os caracteres como < e > são escapados; no entanto, com as expressões de HTML, não são:

A expressão deve ser HTML autónomo válido — {@html "<div>"}content{@html "</div>"} não funcionará, porque </div> não é HTML válido. Ele também não compilará o código da Svelte.

A Svelte não desinfeta expressões antes de injetar a HTML. Se os dados provêm duma fonte duvidosa, nós devemos desinfetá-lo, ou estamos expostos aos nossos utilizadores à uma vulnerabilidade XSS.

<div class="blog-post">
  <h1>{post.title}</h1>
  {@html post.content}
</div>

{@debug ...}permalink

{@debug}

{@debug var1, var2, ..., varN}

O marcador {@debug ...} oferece uma alternativa à console.log(...). Ele regista os valores de variáveis específicos sempre que mudarem, e para a execução do código se tivermos as ferramentas de programação aberta:

<script>
  let user = {
    firstname: 'Ada',
    lastname: 'Lovelace'
  };
</script>

{@debug user}

<h1>Hello {user.firstname}!</h1>

{@debug ...} aceita uma lista de nomes de variável separada por vírgula (expressões não arbitrária):

<!-- Compila -->
{@debug user}
{@debug user1, user2, user3}

<!-- NÃO compila -->
{@debug user.firstname}
{@debug myArray[0]}
{@debug !isReady}
{@debug typeof user === 'object'}

O marcador {@debug} sem quaisquer arguments inserirão uma declaração debugger que é acionada quando qualquer estado mudar, como oposto às variáveis especificadas.

{@const ...}permalink

{@const assignment}

O marcador {@const ...} define uma constate local:

<script>
  export let boxes;
</script>

{#each boxes as box}
  {@const area = box.width * box.height}
  {box.width} * {box.height} = {area}
{/each}

{@const} apenas é permitido como filho direto de {#if}, {:else if}, {:else}, {#each}, {:then}, {:catch}, <Component /> ou <svelte:fragment />.