svelte:self for recursive components - Mini Project: Build & Apply

Building a Recursive Tree View with svelte:self

📖 Scenario: You want to display a folder structure where each folder can have subfolders inside it, like a family tree or nested folders on your computer.

🎯 Goal: Create a Svelte component that uses svelte:self to show folders and their nested subfolders recursively.

📋 What You'll Learn

Create a data structure representing folders with nested subfolders

Add a variable to track the minimum number of subfolders to display

Use svelte:self to recursively render subfolders

Add a button to toggle showing subfolders based on the minimum threshold

💡 Why This Matters

🌍 Real World

Recursive components like this are useful for displaying nested menus, file explorers, comment threads, or organizational charts.

💼 Career

Understanding svelte:self helps you build reusable and scalable UI components that handle complex nested data in modern web apps.

1

Set up the folder data structure

Create a variable called folders that holds this exact nested folder structure: { name: 'Root', children: [{ name: 'Folder A', children: [{ name: 'Folder A1', children: [] }] }, { name: 'Folder B', children: [] }] }

Svelte

# Create the folders variable with the nested structure
# Your code here

Hint

Use a variable named folders and create nested objects with name and children arrays.

2

Add a minimum children count variable

Add a variable called minChildren and set it to 1 to control when to show subfolders.

Svelte

let folders = {
  name: 'Root',
  children: [
    { name: 'Folder A', children: [
      { name: 'Folder A1', children: [] }
    ] },
    { name: 'Folder B', children: [] }
  ]
};

// Add minChildren variable here
# Your code here

Hint

Just create a variable named minChildren and assign it the number 1.

3

Render folders recursively using svelte:self

Inside the Svelte component, write a block that shows the folder name and uses {#if folder.children.length >= minChildren} to conditionally render svelte:self for each child folder with let:folder as the iterator variable.

Svelte

let folders = {
  name: 'Root',
  children: [
    { name: 'Folder A', children: [
      { name: 'Folder A1', children: [] }
    ] },
    { name: 'Folder B', children: [] }
  ]
};

let minChildren = 1;


# Your code here

Hint

Use {#if} to check children count, then {#each} to loop, and inside loop use <svelte:self {folder} {minChildren} />.

4

Add a toggle button to show/hide subfolders

Add a variable showChildren initialized to true. Add a button with on:click that toggles showChildren. Wrap the recursive children rendering block inside {#if showChildren}.

Svelte

let folders = {
  name: 'Root',
  children: [
    { name: 'Folder A', children: [
      { name: 'Folder A1', children: [] }
    ] },
    { name: 'Folder B', children: [] }
  ]
};

let minChildren = 1;

// Add showChildren variable and toggle button
# Your code here

{folders.name}
{#if folders.children.length >= minChildren}
  {#if showChildren}
    
      {#each folders.children as folder}
        
          
        
      {/each}
    
  {/if}
{/if}

Hint

Create showChildren variable, add a button with on:click to toggle it, and wrap children rendering with {#if showChildren}.