Action parameters in Svelte - Step-by-Step Execution

Concept Flow - Action parameters

Start: Element with action

↓

Action function called

↓

Receive parameters: node, parameters

↓

Use parameters inside action

↓

Return object with update and destroy

↓

If parameters change -> call update

↓

On element removal -> call destroy

↓

End

The action receives the element and parameters, uses them, and returns update and destroy functions to handle changes and cleanup.

Execution Sample

Svelte

function highlight(node, { color }) {
  node.style.backgroundColor = color;
  return {
    update({ color }) { node.style.backgroundColor = color; },
    destroy() { node.style.backgroundColor = null; }
  };
}

This action sets background color on an element and updates or cleans it up when parameters change or element is removed.

Execution Table

Step	Action	Parameters Received	Effect on Element	Return Value
1	Action called on element	{ color: 'yellow' }	Sets backgroundColor to yellow	Returns update and destroy functions
2	Parameters update	{ color: 'lightblue' }	update() sets backgroundColor to lightblue	update function called
3	Element removed	N/A	destroy() clears backgroundColor	destroy function called
4	No more updates	N/A	No effect	Action lifecycle ends

💡 Element removed, destroy called, action lifecycle ends

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
node.style.backgroundColor	null	yellow	lightblue	null	null
parameters.color	undefined	yellow	lightblue	N/A	N/A

Key Moments - 3 Insights

Why does the action receive the element node and parameters?

The action needs the element to modify it and parameters to know how to modify it, as shown in step 1 of the execution_table.

What happens when parameters change after the action is applied?

The update function is called with new parameters to update the element, as shown in step 2 of the execution_table.

Why is the destroy function important?

Destroy cleans up changes when the element is removed, preventing leftover styles or effects, as shown in step 3.

Visual Quiz - 3 Questions

Look at the execution_table, what is the backgroundColor after step 2?

A yellow

B lightblue

C null

D unchanged

💡 Hint

Check the 'Effect on Element' column at step 2 in the execution_table.

At which step is the destroy function called?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look for 'destroy() clears backgroundColor' in the execution_table.

If the parameters never change, which function is never called?

A action function

B destroy

C update

D none

💡 Hint

See step 2 where update is called only when parameters change.

Concept Snapshot

Svelte actions receive the element node and parameters.
They modify the element using parameters.
Return update() to handle parameter changes.
Return destroy() to clean up on removal.
Update runs only if parameters change.
Destroy runs when element is removed.

Full Transcript

In Svelte, an action is a function that receives the HTML element and parameters. It can modify the element, for example by setting styles. The action returns an object with update and destroy functions. Update runs when parameters change to update the element accordingly. Destroy runs when the element is removed to clean up any changes. This lifecycle ensures the element stays in sync with parameters and cleans up properly.