Named actions in Svelte - Mini Project: Build & Apply

Using Named Actions in Svelte

📖 Scenario: You are building a simple interactive web page where you want to add a special effect to an HTML element when the user interacts with it.Using Svelte's named actions, you will create a reusable action that changes the background color of a box when the mouse enters and leaves it.

🎯 Goal: Build a Svelte component that uses a named action called highlight to change the background color of a <div> when hovered.

📋 What You'll Learn

Create a named action function called highlight that changes the background color of an element.

Add a configuration variable color to specify the highlight color.

Use the highlight action on a <div> element with the configured color.

Ensure the highlight effect is removed when the mouse leaves the element.

💡 Why This Matters

🌍 Real World

Named actions in Svelte help you add reusable interactive behaviors to elements, such as animations, event handling, or DOM manipulations, without repeating code.

💼 Career

Understanding named actions is important for building clean, maintainable Svelte applications and is a common skill required for frontend developer roles using Svelte.

1

Create the highlight named action function

Write a named action function called highlight that takes an element parameter and adds event listeners for mouseenter and mouseleave. On mouseenter, set the element's background color to yellow. On mouseleave, reset the background color to '' (empty string).

Svelte

// Your code here

// Create the highlight action function

Hint

Remember, a named action is a function that receives the element and can return an object with a destroy method to clean up event listeners.

2

Add a color configuration variable

Add a variable called color and set it to the string 'lightblue'. This variable will be used to customize the highlight color in the next step.

Svelte

export function highlight(element) {
    // Add a color variable here

    function onMouseEnter() {
        element.style.backgroundColor = 'yellow';
    }
    function onMouseLeave() {
        element.style.backgroundColor = '';
    }
    element.addEventListener('mouseenter', onMouseEnter);
    element.addEventListener('mouseleave', onMouseLeave);

    return {
        destroy() {
            element.removeEventListener('mouseenter', onMouseEnter);
            element.removeEventListener('mouseleave', onMouseLeave);
        }
    };
}

Hint

Define color outside the highlight function and use it inside onMouseEnter to set the background color.

3

Use the highlight action on a <div>

In the Svelte component, create a <div> element with the text Hover over me!. Use the use:highlight directive on this <div> to apply the highlight action.

Svelte

const color = 'lightblue';

export function highlight(element) {
    function onMouseEnter() {
        element.style.backgroundColor = color;
    }
    function onMouseLeave() {
        element.style.backgroundColor = '';
    }
    element.addEventListener('mouseenter', onMouseEnter);
    element.addEventListener('mouseleave', onMouseLeave);

    return {
        destroy() {
            element.removeEventListener('mouseenter', onMouseEnter);
            element.removeEventListener('mouseleave', onMouseLeave);
        }
    };
}

 with use:highlight and text 'Hover over me!' below -->

Hint

Use the use:highlight directive on the <div> element to apply the action.

4

Make the highlight color configurable via action parameter

Modify the highlight action to accept a second parameter params with a color property. Use params.color as the highlight color instead of the fixed color variable. Update the <div> to pass { color: 'pink' } as the parameter to use:highlight.

Svelte

const color = 'lightblue';

// Modify highlight to accept params and use params.color
export function highlight(element, params) {
    // Your code here
}

Hover over me!

Hint

Accept params as the second argument and use params.color inside the action. Pass the color object in the use:highlight directive.

Practice

1. What is the main purpose of named actions in Svelte?

easy

A. To style elements with CSS

B. To define new components

C. To add reusable behavior to HTML elements

D. To manage application state

Solution

1. Step 1: Understand what named actions do

   Named actions in Svelte are used to add behavior to HTML elements that can be reused across components.

2. Step 2: Compare with other options

   Defining components, styling, and state management are handled differently in Svelte, not by named actions.

3. Final Answer:

   To add reusable behavior to HTML elements -> Option C

4. Quick Check:

   Named actions = reusable element behavior [OK]

Hint: Named actions add behavior to elements, not styles or state [OK]

Common Mistakes:

• Confusing actions with components
• Thinking actions handle styling
• Assuming actions manage state

2. Which of the following is the correct syntax to define a named action in Svelte?

easy

A. function myAction(node) { /* code */ }

B. const myAction = () => { /* code */ }

C. let myAction = node => { /* code */ }

D. action myAction(node) { /* code */ }

Solution

1. Step 1: Recall named action syntax

   Named actions are functions that receive the element node as the first argument, typically declared as function myAction(node) {}.

2. Step 2: Check other options

   Arrow functions can work but must return an object for cleanup; action myAction(node) { /* code */ } uses invalid syntax.

3. Final Answer:

   function myAction(node) { /* code */ } -> Option A

4. Quick Check:

   Named action = function with node parameter [OK]

Hint: Named actions are functions with node parameter, not keywords [OK]

Common Mistakes:

• Using invalid 'action' keyword
• Defining without node parameter
• Using arrow function without return object

3. Given this named action and usage:

function highlight(node) {
  node.style.backgroundColor = 'yellow';
  return {
    destroy() {
      node.style.backgroundColor = '';
    }
  };
}

<div use:highlight>Hello</div>

What happens when the component is removed from the page?

medium

A. The background color resets to default

B. The element is removed from the DOM immediately

C. An error occurs because destroy is missing

D. The background color stays yellow

Solution

1. Step 1: Understand the action's destroy method

   The destroy method resets the background color to empty string when the element is removed.

2. Step 2: Effect on component removal

   When the component unmounts, destroy runs, so the background color resets to default.

3. Final Answer:

   The background color resets to default -> Option A

4. Quick Check:

   destroy resets styles on removal [OK]

Hint: Destroy cleans up styles when element is removed [OK]

Common Mistakes:

• Assuming styles persist after removal
• Thinking destroy is optional
• Confusing destroy with element removal

4. What is wrong with this named action code?

function focus(node) {
  node.focus();
  return {
    destroy() {
      node.blur();
    }
  }
}

<input use:focus>

medium

A. Calling node.blur() in destroy may cause errors if node is removed

B. The action should not call node.focus() immediately

C. The action does not return an object

D. The action must be async to work properly

Solution

1. Step 1: Analyze the focus call timing

   Calling node.focus() immediately may not work reliably because the element might not be fully rendered, visible, or ready (e.g., during CSS transitions or animations).

2. Step 2: Best practice for focus actions

   In Svelte, it's often necessary to delay the focus call using tick(), requestAnimationFrame, or setTimeout(..., 0) to ensure DOM readiness.

3. Final Answer:

   The action should not call node.focus() immediately -> Option B

4. Quick Check:

   Delay focus with tick() or RAF [OK]

Hint: Delay node.focus() with tick() for reliability [OK]

Common Mistakes:

• Calling focus immediately without delay
• Ignoring DOM/transition timing issues
• Assuming focus always succeeds synchronously

5. You want to create a named action that changes an element's text color based on a parameter and updates it when the parameter changes. Which approach is correct?

hard

A. Use a reactive statement inside the action function to watch parameters

B. Set the color once in the action and ignore parameter changes

C. Recreate the action every time parameters change instead of updating

D. Return an update function from the action that sets the color when parameters change

Solution

1. Step 1: Understand parameter updates in named actions

   Named actions can return an update function to handle parameter changes dynamically.

2. Step 2: Evaluate options for handling parameter changes

   Setting color once ignores updates; reactive statements inside action function don't track parameters; recreating action is inefficient.

3. Final Answer:

   Return an update function from the action that sets the color when parameters change -> Option D

4. Quick Check:

   Use update() to handle parameter changes [OK]

Hint: Use update() function to react to parameter changes [OK]

Common Mistakes:

• Ignoring parameter updates
• Misusing reactive statements inside actions
• Recreating actions unnecessarily