Action parameters in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when using an action with parameters in Svelte?

Consider this Svelte action that changes the background color of an element based on a parameter. What will be the background color of the

after mounting?

function colorAction(node, color) {
  node.style.backgroundColor = color;
  return {
    update(newColor) {
      node.style.backgroundColor = newColor;
    }
  };
}

<div use:colorAction={'red'}>Hello</div>

Svelte

function colorAction(node, color) {
  node.style.backgroundColor = color;
  return {
    update(newColor) {
      node.style.backgroundColor = newColor;
    }
  };
}

<div use:colorAction={'red'}>Hello</div>

A The div will have a background color of 'undefined'.

B The div will have no background color because the action parameter is ignored.

C The div will have a default background color set by the browser.

D The div will have a red background color.

💡 Hint

Remember that the action receives the parameter as the second argument and applies it immediately.

The action receives 'red' as the color parameter and sets the node's background color to red on mount.

❓ state_output

intermediate

How does updating action parameters affect the DOM in Svelte?

Given this Svelte action and component, what will be the background color of the

after the button is clicked?

function colorAction(node, color) {
  node.style.backgroundColor = color;
  return {
    update(newColor) {
      node.style.backgroundColor = newColor;
    }
  };
}

<script>
  let bg = 'blue';
</script>

<div use:colorAction={bg}>Color me</div>
<button on:click={() => bg = 'green'}>Change Color</button>

Svelte

function colorAction(node, color) {
  node.style.backgroundColor = color;
  return {
    update(newColor) {
      node.style.backgroundColor = newColor;
    }
  };
}

<script>
  let bg = 'blue';
</script>

<div use:colorAction={bg}>Color me</div>
<button on:click={() => bg = 'green'}>Change Color</button>

A The div's background color stays blue even after clicking the button.

B The div's background color changes from blue to green after clicking the button.

C The div's background color changes to red after clicking the button.

D The div's background color becomes transparent after clicking the button.

💡 Hint

Check how the action's update method reacts to parameter changes.

When the variable 'bg' changes, Svelte calls the action's update method with the new value, updating the background color.

📝 Syntax

advanced

Which option correctly defines a Svelte action with parameters and cleanup?

You want to create a Svelte action that logs a message when the element is mounted and removes the event listener on destroy. Which code snippet is correct?

A

function logAction(node, message) {
  console.log(message);
  const handler = () => console.log('clicked');
  node.addEventListener('click', handler);
  return {
    destroy() {
      node.removeEventListener('click', handler);
    }
  };
}

B

function logAction(node, message) {
  console.log(message);
  const handler = () => console.log('clicked');
  node.addEventListener('click', handler);
  return {
    update(newMessage) {
      console.log(newMessage);
    }
  };
}

C

function logAction(node, message) {
  console.log(message);
  node.addEventListener('click', () => console.log('clicked'));
  return {
    destroy() {
      node.removeEventListener('click');
    }
  };
}

D

function logAction(node, message) {
  console.log(message);
  node.addEventListener('click', () => console.log('clicked'));
  return {};
}

💡 Hint

Remember to keep a reference to the event handler to remove it later.

Option A correctly stores the handler function and removes it in destroy. Others either miss the handler reference or don't remove the listener properly.

🔧 Debug

advanced

Why does this Svelte action not update when parameters change?

Examine this Svelte action usage:

function borderAction(node, width) {
  node.style.border = width + 'px solid black';
}

<script>
  let borderWidth = 2;
</script>

<div use:borderAction={borderWidth}>Box</div>
<button on:click={() => borderWidth = 5}>Increase Border</button>

Why does the border not update when clicking the button?

Svelte

function borderAction(node, width) {
  node.style.border = width + 'px solid black';
}

<script>
  let borderWidth = 2;
</script>

<div use:borderAction={borderWidth}>Box</div>
<button on:click={() => borderWidth = 5}>Increase Border</button>

A The variable borderWidth is not reactive.

B The border style is invalid and ignored by the browser.

C The action lacks an update method to handle parameter changes.

D The action is not applied because of a syntax error.

💡 Hint

Check if the action handles changes to its parameters after initial mount.

Without an update method, the action only runs once on mount and ignores parameter changes.

🧠 Conceptual

expert

What happens if an action's update method returns a new destroy function in Svelte?

In Svelte, an action can return an object with update and destroy methods. What is the effect if the update method returns a new destroy function?

Consider:

function exampleAction(node, param) {
  const cleanup = () => console.log('cleanup old');
  node.style.color = param;
  return {
    update(newParam) {
      cleanup();
      node.style.color = newParam;
      return () => console.log('cleanup new');
    },
    destroy() {
      console.log('destroy called');
    }
  };
}

Svelte

function exampleAction(node, param) {
  const cleanup = () => console.log('cleanup old');
  node.style.color = param;
  return {
    update(newParam) {
      cleanup();
      node.style.color = newParam;
      return () => console.log('cleanup new');
    },
    destroy() {
      console.log('destroy called');
    }
  };
}

A The returned function from update replaces the previous destroy function and is called before the next update or destroy.

B The returned function from update is called immediately after update finishes.

C Svelte throws an error because update cannot return a function.

D The returned function from update is ignored; only the original destroy is called on unmount.

💡 Hint

Think about how Svelte manages cleanup between updates and unmount.

When update returns a function, Svelte treats it as a cleanup function replacing the previous one, calling it before the next update or destroy.

Practice

1. What is the purpose of passing parameters to a Svelte action using use:action={parameter}?

easy

A. To define a new component inside the action

B. To customize the behavior of the action with extra data

C. To import external libraries into the action

D. To style the element directly from the action

Solution

1. Step 1: Understand action parameters

   Action parameters allow you to send extra data to a Svelte action to customize its behavior.

2. Step 2: Identify the purpose of use:action={parameter}

   This syntax passes the parameter to the action so it can use it internally.

3. Final Answer:

   To customize the behavior of the action with extra data -> Option B

4. Quick Check:

   Action parameters customize behavior = A [OK]

Hint: Parameters customize actions with extra data [OK]

Common Mistakes:

• Thinking parameters define components
• Confusing parameters with styling
• Assuming parameters import libraries

2. Which of the following is the correct syntax to pass a parameter named color with value 'red' to a Svelte action called highlight?

easy

A. use:highlight={{color: 'red'}}

B. use:highlight={'red'}

C. use:highlight={color} with let color = 'red'

D. use:highlight(color='red')

Solution

1. Step 1: Recall correct parameter passing syntax

   Svelte actions receive parameters using use:action={parameter} where parameter can be any value or object.

2. Step 2: Identify correct object syntax for passing color

   To pass an object with a key color and value 'red', use {color: 'red'} inside curly braces.

3. Final Answer:

   use:highlight={{color: 'red'}} -> Option A

4. Quick Check:

   Pass object with color key = D [OK]

Hint: Use curly braces with object for named parameters [OK]

Common Mistakes:

• Using parentheses instead of curly braces
• Passing string directly without braces
• Passing variable without defining it

3. Given this Svelte action:

function border(node, { color }) {
  node.style.border = `2px solid ${color}`;
  return {
    update({ color }) {
      node.style.border = `2px solid ${color}`;
    }
  };
}

What will be the border color after this code runs?

<div use:border={{ color: 'blue' }}>Box</div>

medium

A. A 2px solid blue border

B. No border will appear

C. A 2px solid red border

D. A 2px solid black border

Solution

1. Step 1: Understand initial border style setting

   The action sets the border style to '2px solid' plus the passed color, which is 'blue'.

2. Step 2: Confirm the border color after applying the action

   The div will have a blue border because the parameter color is 'blue' and the style is applied immediately.

3. Final Answer:

   A 2px solid blue border -> Option A

4. Quick Check:

   Passed color 'blue' sets border color = B [OK]

Hint: Action sets style using passed color parameter [OK]

Common Mistakes:

• Assuming default color instead of passed color
• Ignoring the update method
• Thinking no border is set initially

4. Consider this Svelte action code:

function scale(node, factor) {
  node.style.transform = `scale(${factor})`;
  return {
    update(newFactor) {
      node.style.transform = `scale(${newFactor})`;
    }
  };
}

Which of the following will result in an invalid CSS transform value when used as use:scale={...}?

medium

A. use:scale={2}

B. use:scale={'2'}

C. use:scale={{ factor: 2 }}

D. use:scale={0.5}

Solution

1. Step 1: Analyze expected parameter type

   The action expects a single number parameter factor, not an object.

2. Step 2: Identify which option passes an object instead of a number

   use:scale={{ factor: 2 }} passes an object { factor: 2 }, which will cause scale(${newFactor}) to become scale([object Object]), an invalid CSS transform value.

3. Final Answer:

   use:scale={{ factor: 2 }} -> Option C

4. Quick Check:

   Passing object instead of number causes invalid transform = C [OK]

Hint: Match parameter type expected by action exactly [OK]

Common Mistakes:

• Passing object when number expected
• Passing string instead of number (allowed but may cause visual issues)
• Passing objects when primitive expected

5. You want to create a Svelte action tooltip that shows a message passed as a parameter and updates the message if it changes. Which of these implementations correctly handles parameter updates?

hard

A. function tooltip(node, message) {
const tip = document.createElement('div');
tip.textContent = message;
node.appendChild(tip);
}

B. function tooltip(node, message) {
node.title = message;
return {};
}

C. function tooltip(node, message) {
node.setAttribute('tooltip', message);
}

D. function tooltip(node, message) {
const tip = document.createElement('span');
tip.textContent = message;
node.appendChild(tip);
return {
update(newMessage) {
tip.textContent = newMessage;
},
destroy() {
node.removeChild(tip);
}
};
}

Solution

1. Step 1: Check for update method handling parameter changes

   function tooltip(node, message) {
     const tip = document.createElement('span');
     tip.textContent = message;
     node.appendChild(tip);
     return {
       update(newMessage) {
         tip.textContent = newMessage;
       },
       destroy() {
         node.removeChild(tip);
       }
     };
   }

   defines an update method that updates the tooltip text when the parameter changes.

2. Step 2: Verify cleanup with destroy method

   This implementation also defines a destroy method to remove the tooltip element when the action is removed, which is good practice.

3. Final Answer:

   The implementation with update and destroy methods -> Option D

4. Quick Check:

   Update method handles parameter changes = A [OK]

Hint: Use update and destroy methods to handle changes and cleanup [OK]

Common Mistakes:

• Not implementing update method for parameter changes
• Not cleaning up DOM elements on destroy
• Using incorrect element types or missing return object