Action return data in Svelte - Mini Project: Build & Apply

Using Action Return Data in Svelte

📖 Scenario: You are building a simple interactive Svelte component that changes the background color of a box when you hover over it. You want to use a Svelte action that returns data about the hover state, so the component can react accordingly.

🎯 Goal: Create a Svelte action that returns an object with a hovered property indicating if the mouse is over the element. Use this returned data in the component to change the box's background color.

📋 What You'll Learn

Create a Svelte action called hoverAction that tracks mouse enter and leave events.

The action must return an object with a hovered property that is true when hovered and false otherwise.

In the component, use the action and access the returned data to conditionally set the box background color.

Use reactive statements or bindings to update the UI based on the action's returned data.

💡 Why This Matters

🌍 Real World

Svelte actions are useful for adding reusable behavior to DOM elements, such as tracking user interactions or managing animations. Returning data from actions lets components respond dynamically to these behaviors.

💼 Career

Understanding how to create and use Svelte actions with return data is important for building interactive, maintainable web applications using Svelte. This skill is valuable for frontend developers working with modern frameworks.

1

Create the hoverAction Svelte action

Write a Svelte action named hoverAction that accepts a DOM element parameter. Inside, add event listeners for mouseenter and mouseleave events on the element. Initialize a variable hovered to false. The action should return an object with a hovered property set to false initially.

Svelte

// Your code here

// Create hoverAction function that takes element
// Add mouseenter and mouseleave event listeners
// Initialize hovered to false
// Return { hovered } object

Hint

Remember, a Svelte action is a function that receives a DOM element. Use addEventListener to track mouse events. Return an object with the hovered property.

2

Add a reactive variable to track hover state

In the Svelte component, create a variable called hoveredState and set it initially to false. This variable will hold the current hover state from the action's returned data.

Svelte

export function hoverAction(node) {
    let hovered = false;

    function handleMouseEnter() {
        hovered = true;
    }

    function handleMouseLeave() {
        hovered = false;
    }

    node.addEventListener('mouseenter', handleMouseEnter);
    node.addEventListener('mouseleave', handleMouseLeave);

    return {
        hovered
    };
}

// Your code here

// Create a variable called hoveredState and set it to false

Hint

Just create a simple variable hoveredState and set it to false.

3

Use the action and update hoveredState reactively

In the Svelte component, use the use:hoverAction directive on a <div> element. Capture the returned object from the action in a variable called actionReturn. Then, create a reactive statement that updates hoveredState to actionReturn.hovered whenever it changes.

Svelte

export function hoverAction(node) {
    let hovered = false;

    function handleMouseEnter() {
        hovered = true;
    }

    function handleMouseLeave() {
        hovered = false;
    }

    node.addEventListener('mouseenter', handleMouseEnter);
    node.addEventListener('mouseleave', handleMouseLeave);

    return {
        hovered
    };
}

let hoveredState = false;

// Your code here

// Use the hoverAction on a div with use:hoverAction={actionReturn}
// Create a reactive statement to update hoveredState = actionReturn.hovered

Hint

Use let actionReturn to capture the action's return. Use a reactive statement $: hoveredState = actionReturn?.hovered ?? false to update the hover state.

4

Change the box background color based on hover state

Add a style attribute to the <div> that sets the background color to lightblue when hoveredState is true, and white when false. Use a ternary expression inside the style attribute.

Svelte

export function hoverAction(node) {
    let hovered = false;

    function handleMouseEnter() {
        hovered = true;
    }

    function handleMouseLeave() {
        hovered = false;
    }

    node.addEventListener('mouseenter', handleMouseEnter);
    node.addEventListener('mouseleave', handleMouseLeave);

    return {
        hovered
    };
}

let hoveredState = false;

let actionReturn;

$: hoveredState = actionReturn?.hovered ?? false;



  

Hint

Use the ternary operator inside the style attribute to change background color based on hoveredState.

Practice

1. What is the main purpose of returning data from a SvelteKit action?

easy

A. To send information back to the page after a form event

B. To reload the entire page automatically

C. To prevent the form from submitting

D. To change the URL without navigation

Solution

1. Step 1: Understand what actions do in SvelteKit

   Actions handle form submissions and can return data to the page.

2. Step 2: Identify the purpose of returned data

   Returned data is used to update the UI or show messages without reloading the page.

3. Final Answer:

   To send information back to the page after a form event -> Option A

4. Quick Check:

   Action return data = send info back [OK]

Hint: Actions return data to update UI after form submit [OK]

Common Mistakes:

• Thinking actions reload the page
• Confusing return data with navigation
• Assuming return data prevents form submission

2. Which of the following is the correct way to return data from a SvelteKit action?

easy

A. return response.send('Saved!');

B. return { success: true, message: 'Saved!' };

C. return redirect('/success');

D. return window.location.reload();

Solution

1. Step 1: Review SvelteKit action return syntax

   Actions return plain objects with data to send back to the page.

2. Step 2: Check each option

   return { success: true, message: 'Saved!' }; returns an object with success and message keys, which is correct. Options A, C, and D use incorrect or unrelated syntax.

3. Final Answer:

   return { success: true, message: 'Saved!' }; -> Option B

4. Quick Check:

   Return object with data = return { success: true, message: 'Saved!' }; [OK]

Hint: Return plain object with data from action [OK]

Common Mistakes:

• Using response.send() which is not SvelteKit syntax
• Trying to redirect instead of returning data
• Calling window methods inside action

3. Given this action code:

export const actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const name = formData.get('name');
    if (!name) {
      return { error: 'Name is required' };
    }
    return { success: `Hello, ${name}!` };
  }
};

What will data contain if the form is submitted with name = "Anna"?

medium

A. { name: 'Anna' }

B. { error: 'Name is required' }

C. undefined

D. { success: 'Hello, Anna!' }

Solution

1. Step 1: Analyze the form data handling

   The action reads the 'name' field from the form data and checks if it exists.

2. Step 2: Determine returned data for name = 'Anna'

   Since 'Anna' is provided, the condition for missing name is false, so it returns { success: `Hello, Anna!` }.

3. Final Answer:

   { success: 'Hello, Anna!' } -> Option D

4. Quick Check:

   Valid name returns success message [OK]

Hint: Check condition for missing name to find returned data [OK]

Common Mistakes:

• Assuming error is returned even when name exists
• Expecting data to contain raw form fields
• Confusing undefined with returned object

4. Identify the error in this SvelteKit action code:

export const actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const age = formData.get('age');
    if (age < 18) {
      return { error: 'Must be 18 or older' };
    }
    return { success: true };
  }
};

medium

A. Actions cannot return objects

B. Missing await before request.formData()

C. age is a string, so numeric comparison fails

D. No return statement in the function

Solution

1. Step 1: Understand formData.get() returns strings

   The age variable is a string, so comparing it with number 18 directly is incorrect.

2. Step 2: Identify the error in comparison

   Comparing string with number causes unexpected behavior; age should be converted to number first.

3. Final Answer:

   age is a string, so numeric comparison fails -> Option C

4. Quick Check:

   formData.get() returns string, convert before compare [OK]

Hint: Convert formData values to number before numeric checks [OK]

Common Mistakes:

• Forgetting formData.get() returns string
• Assuming implicit conversion works correctly
• Missing await on async calls

5. You want to show a success message after a form submission using action return data. Which approach correctly updates the UI without reloading the page?

<form method="POST">
  <input name="email" type="email" />
  <button type="submit">Subscribe</button>
</form>

<script>
  export let data;
</script>

<p>{data?.success ? data.success : ''}</p>

hard

A. Return { success: 'Subscribed!' } from the action and use {data.success} in the page

B. Use window.alert('Subscribed!') inside the action

C. Redirect to a new page showing the message

D. Reload the page manually after submission

Solution

1. Step 1: Understand how action return data updates UI

   Returning an object with a success message allows the page to access it via the data prop.

2. Step 2: Check the page code usage

   The page uses {data?.success} to conditionally show the message without reloading.

3. Final Answer:

   Return { success: 'Subscribed!' } from the action and use {data.success} in the page -> Option A

4. Quick Check:

   Return data + conditional render updates UI [OK]

Hint: Return success message and display with {data.success} [OK]

Common Mistakes:

• Trying to alert inside action (server-side)
• Reloading or redirecting instead of returning data
• Not using returned data in the page