Instantly find and remove Svelte component orphans

A simple bash script to clean up your Sveltekit project in seconds

When working on large Sveltekit projects, you will end up with numerous components in your codebase, and over time, some of these might become obsolete or unused. These ‘orphan’ components can clutter your project and confuse you and your team in the future. Today, we will tackle this problem with a simple Bash script that finds all unused Svelte components in your project and optionally deletes them.

Understanding the Script

Let’s start by looking at the complete script, and then we’ll break down how it works.

#!/bin/bash

# ANSI color codes
RED='\033[0;31m'
GREEN='\033[0;32m'
NC='\033[0m' # No Color

# get the list of all .svelte files
svelte_files=$(find src -type f -name "*.svelte")

# Array to hold unused files
declare -a unused_files

echo -e "${NC}Scanning src folder to find all .svelte files"
echo -e "  ${GREEN}.${NC} means the .svelte is imported in another file"
echo -e "  ${RED}x${NC} means the .svelte is not imported and should likely be removed"

# loop over each svelte file
for svelte_file in $svelte_files
do
    # extract the filename
    filename=$(basename -- "$svelte_file")

    # skip files starting with '+'
    if [[ "$filename" == +* ]]
    then
        echo -n -e "${GREEN}.${NC}"
        continue
    fi

    # search for the filename in all files
    found=$(grep -rl "$filename" src)

    # if nothing was found, then the file is unused
    if [[ -z $found ]]
    then
        echo -n -e "${RED}x${NC}"
        unused_files+=("$svelte_file")
    else
        echo -n -e "${GREEN}.${NC}"
    fi
done

# Print a newline after progress dots
echo
echo 

# Print unused files
for file in "${unused_files[@]}"
do
    echo -e "${RED}Unused Svelte file: $file${NC}"
done

# If no unused components found, print the message and exit
if [ ${#unused_files[@]} -eq 0 ]; then
    echo -e "${GREEN}No unused components found.${NC}"
    exit 0
fi

# Delete files if user confirms
if [ ${#unused_files[@]} -gt 0 ]; then
    echo -e -n "${GREEN}Do you want to delete these ${#unused_files[@]} files? (y/n) ${NC}"
    read answer

    if [ "$answer" != "${answer#[Yy]}" ] ;then
        for file in "${unused_files[@]}"
        do
            rm "$file"
            echo -e "${RED}Deleted $file${NC}"
        done
    fi
fi

Defining the Problem

The script operates by finding all .svelte files in your src directory, checking if they're imported anywhere in your project. If a file isn't imported anywhere, the script treats it as unused.

Step by Step Explanation

Finding all Svelte Files

The first thing the script does is use the find command to get a list of all .svelte files in the src directory. The list of file paths is then stored in the svelte_files variable.

# get the list of all .svelte files
svelte_files=$(find src -type f -name "*.svelte")

Processing each Svelte File

The script then loops over each file in svelte_files. For each file, it extracts the filename (without the path) and checks whether this filename is imported anywhere in the src directory.

# loop over each svelte file
for svelte_file in $svelte_files
do
    # extract the filename without extension
    filename=$(basename -- "$svelte_file")

    ...
done

Ignoring Certain Files

Files starting with ‘+’ (like ‘+layout.svelte’) are generally special files in Svelte, and we usually don’t want to include them in our search. The script checks the filename and if it starts with ‘+’, it simply skips the rest of the loop for that file.

# skip files starting with '+'
if [[ "$filename" == +* ]]
then
    echo -n -e "${GREEN}.${NC}"
    continue
fi

Searching for Imports

The script then searches for any occurrence of the filename (which implies an import) within the src directory using the grep command.

# search for the filename in all files
found=$(grep -rl "$filename" src)

Identifying Unused Files

If the grep command doesn't find any matches, it means the file is not imported anywhere. In this case, the script treats the file as unused, and it's added to the unused_files array.

If the file is found, a green . is printed to the console. Otherwise, a red x is printed out. This provides a simple real-time progress update.

# if nothing was found, then the file is unused
if [[ -z $found ]]
then
    echo -n -e "${RED}x${NC}"
    unused_files+=("$svelte_file")
else
    echo -n -e "${GREEN}.${NC}"
fi

Prompting for Deletion

If any unused files are found, the script will ask for confirmation to delete these files. If you confirm, it will delete each file and output a message confirming the deletion.

# Delete files if user confirms
if [ ${#unused_files[@]} -gt 0 ]; then
    echo -e -n "${GREEN}Do you want to delete these ${#unused_files[@]} files? (y/n) ${NC}"
    read answer

    if [ "$answer" != "${answer#[Yy]}" ] ;then
        for file in "${unused_files[@]}"
        do
            rm "$file"
            echo -e "${RED}Deleted $file${NC}"
        done
    fi
fi

Finishing Up

If no unused components are found, a final message will be printed: “No unused components found.”

# If no unused components found, print the message and exit
if [ ${#unused_files[@]} -eq 0 ]; then
    echo -e "${GREEN}No unused components found.${NC}"
    exit 0
fi

Conclusion

This script is a handy tool to keep your Svelte projects clean and easy to navigate. It helps identify unused components that you might have forgotten about and gives you the option to remove them safely. As with any script that modifies your file system, always ensure you have a backup or use version control in case something unexpected happens.