In-depth Understanding of Svelte Logic Blocks

In Svelte, Logic blocks are essential tools for controlling component rendering. This article will provide a detailed introduction to the usage of Logic blocks in Svelte, including conditional rendering, loop rendering, and template slots, helping developers build dynamic applications more efficiently.

Types of Logic Blocks

1. Conditional Rendering ({#if ...})

Conditional rendering is used to dynamically render content based on conditions. Svelte provides if, else if, and else syntax to achieve conditional rendering.

Example:

1
<script>
2
  let loggedIn = false;
3
</script>
4

5
{#if loggedIn}
6
<p>Welcome back!</p>
7
{:else}
8
<p>Please log in.</p>
9
{/if}
10

11
<button on:click="{() => loggedIn = !loggedIn}">Toggle Login State</button>

2. Loop Rendering ({#each ...})

Loop rendering is used to iterate over arrays or objects and generate corresponding HTML structures for each element. Svelte provides each syntax to achieve loop rendering.

Example:

1
<script>
2
  let items = ["Apple", "Banana", "Cherry"];
3
</script>
4

5
<ul>
6
  {#each items as item, index}
7
  <li>{index + 1}: {item}</li>
8
  {/each}
9
</ul>
10

11
<button on:click="{() => items = [...items, 'New Item']}">Add Item</button>

3. Template Slots (<slot>)

Template slots are used to define insertable content within a component. Svelte provides slot syntax to achieve template slots.

Example:

1
<script>
2
  import ChildComponent from "./ChildComponent.svelte";
3
</script>
4

5
<ChildComponent>
6
  <p>This is slot content from the parent component.</p>
7
</ChildComponent>
8

9
<!-- ChildComponent.svelte -->
10
<div>
11
  <h1>Child Component</h1>
12
  <slot></slot>
13
</div>

Advanced Usage of Logic Blocks

1. await Block

The await block is used to handle the state of asynchronous operations, supporting then and catch syntax.

Example:

1
<script>
2
  let promise = fetch("https://jsonplaceholder.typicode.com/posts").then(
3
    (response) => response.json(),
4
  );
5
</script>
6

7
{#await promise}
8
<p>Loading...</p>
9
{:then posts}
10
<ul>
11
  {#each posts as post}
12
  <li>{post.title}</li>
13
  {/each}
14
</ul>
15
{:catch error}
16
<p>Error: {error.message}</p>
17
{/await}

2. Dynamic Components (<svelte:component>)

Dynamic components are used to dynamically load and render different components based on conditions.

Example:

1
<script>
2
  import ComponentA from "./ComponentA.svelte";
3
  import ComponentB from "./ComponentB.svelte";
4

5
  let currentComponent = ComponentA;
6
</script>
7

8
<svelte:component this="{currentComponent}" />
9

10
<button
11
  on:click="{() => currentComponent = currentComponent === ComponentA ? ComponentB : ComponentA}"
12
>
13
  Toggle Component
14
</button>

3. key Block

The key block is used to force re-rendering of specific parts of the content, usually for handling complex animations or state changes.

Example:

1
<script>
2
  let count = 0;
3
</script>
4

5
{#key count}
6
<p>Keyed content: {count}</p>
7
{/key}
8

9
<button on:click="{() => count++}">Increment</button>

Summary

Svelte provides a powerful set of Logic blocks for controlling component rendering behavior. By using conditional rendering, loop rendering, template slots, await blocks, dynamic components, and key blocks, developers can build dynamic applications more efficiently, enhancing user experience.