Reusable Code Blocks with Snippets in Svelte

In the previous lesson, you learned how to handle asynchronous data in Svelte using the #await block. This allowed you to fetch data from an API, manage loading and error states, and update the UI dynamically based on user interaction. Now, we’ll shift our focus to another powerful feature in Svelte: reusable code blocks.

Reusable code blocks are essential for writing clean, maintainable, and efficient code. They allow you to define a piece of code once and use it multiple times throughout your application. In Svelte, this is achieved using snippets. Snippets are reusable blocks of markup that can be rendered with different data, making them ideal for components like cards, lists, or any other repetitive UI elements.

In this lesson, you’ll learn how to define and use snippets in Svelte. By the end, you’ll be able to create a reusable ProductCard snippet, filter and render it based on specific criteria, and style it dynamically. This will help you build modular and scalable components in your Svelte applications.

To create a snippet in Svelte, you use the {#snippet} block. A snippet is essentially a reusable template that can accept data as an argument. Once defined, you can render the snippet using the {@render} directive. Let’s start by creating a simple snippet for a product card.

Here’s an example of how to define a ProductCard snippet:

{#snippet ProductCard(product)}
  <div class="product-card {product.category.toLowerCase()}">
    <h4>{product.name}</h4>
    <p>Category: {product.category}</p>
    <p>Price: ${product.price}</p>
  </div>
{/snippet}

In this code:

• The {#snippet ProductCard(product)} block defines a snippet named ProductCard that accepts a product object as an argument.
• Inside the snippet, we use the product object to dynamically display the product’s name, category, and price.
• The class attribute includes a dynamic class based on the product’s category, which we’ll use later for styling.

To render this snippet, you use the {@render} directive:

{@render ProductCard(product)}

This renders the ProductCard snippet with the provided product data. Snippets are incredibly useful for reducing redundancy and keeping your code DRY (Don’t Repeat Yourself).

Now that you know how to define and render a snippet, let’s explore how to filter and render snippets dynamically based on specific criteria. In our example, we’ll render ProductCard snippets for products in two categories: "Electronics" and "Accessories."

Here’s how you can filter and render snippets:

<h2>Electronics</h2>
<div class="product-list">
    {#each products.filter(product => product.category === "Electronics") as product (product.id)}
        {@render ProductCard(product)}
    {/each}
</div>

<h2>Accessories</h2>
<div class="product-list">
    {#each products.filter(product => product.category === "Accessories") as product (product.id)}
        {@render ProductCard(product)}
    {/each}
</div>

In this code:

• We use the #each block to iterate over the filtered list of products.
• The .filter() method is used to include only products that match the specified category.
• For each filtered product, we render the ProductCard snippet using {@render}.

This approach allows you to dynamically render snippets based on specific conditions, making your components more flexible and reusable.