Action parameters in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to pass a parameter to the action function.

Svelte

<script>
  function highlight(node, [1]) {
    node.style.backgroundColor = [1].color;
    return {
      destroy() {
        node.style.backgroundColor = '';
      }
    };
  }
</script>

<p use:highlight={{ color: 'yellow' }}>Highlight me!</p>

Drag options to blanks, or click blank then click option'

Aparams

Bcolor

Cnode

Devent

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong parameter name instead of the parameters object.

Confusing the node with the parameters.

The second parameter of an action function is the parameters object passed when using the action.

2fill in blank

medium

Complete the code to update the action when parameters change.

Svelte

<script>
  function highlight(node, params) {
    node.style.backgroundColor = params.color;
    return {
      [1](newParams) {
        node.style.backgroundColor = newParams.color;
      }
    };
  }
</script>

Drag options to blanks, or click blank then click option'

Aupdate

Bchange

Crefresh

Dmodify

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method name that does not exist in Svelte actions.

Not implementing the update method to handle parameter changes.

The update method is called when the parameters passed to the action change.

3fill in blank

hard

Fix the error in the action function parameter usage.

Svelte

<script>
  function tooltip([1]) {
    // code to show tooltip
  }
</script>

Drag options to blanks, or click blank then click option'

Aparams, node

Bnode, params

Cnode

Dparams

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the order of node and params.

Using only params without the node.

The action function must receive the DOM node as the first argument. Parameters are optional as the second argument.

4fill in blank

hard

Fill both blanks to correctly destructure parameters in the action function.

Svelte

<script>
  function focus(node, [1]) {
    const { delay, color } = [2];
    setTimeout(() => {
      node.style.outlineColor = color;
      node.focus();
    }, delay);
  }
</script>

Drag options to blanks, or click blank then click option'

Aparams

Boptions

Dsettings

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the parameter object and destructuring from another variable.

Not destructuring the parameter object correctly.

The second argument is commonly named params, which you can destructure to get individual parameters.

5fill in blank

hard

Fill all three blanks to correctly implement an action with parameters and update method.

Svelte

<script>
  function resize(node, [1]) {
    function applySize() {
      node.style.width = [2] + 'px';
      node.style.height = [3] + 'px';
    }
    applySize();
    return {
      update(newParams) {
        [1] = newParams;
        applySize();
      }
    };
  }
</script>

Drag options to blanks, or click blank then click option'

Aparams

Bparams.width

Cparams.height

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Not updating the params variable inside the update method.

Using wrong variable names for width and height.

The action receives params as the second argument. You use params.width and params.height to set sizes. The update method updates params and reapplies the size.

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