Actions in Svelte are an extremely powerful feature and something programmers definitely need to know. Here is the basic knowledge about actions in Svelte .

Things you need to know about Actions in Svelte Picture 1

The Svelte framework is one of the  hottest JavaScript frameworks in the web development ecosystem. Its easy-to-grasp syntax makes it the perfect choice for those who want to create stunning web applications in a similar way to regular JavaScript.

This guide will help you understand how Svelte actions work and how they are used. This is an essential skill for anyone looking to exploit the full potential of this particular framework.

What is action in Svelte?

At the most basic level, an action in Svelte is simply a JavaScript function that runs whenever an element is bound. Svelte actions can return a JavaScript object with a destroy method that the browser calls each time it removes an element from the Document Object Model (DOM). For example, if you want to capture the text inside a DOM element when the browser docks it on the DOM, here's how to do it:

 {#if messageShown} This is a message. {/if}  (messageShown = !messageShown)}>Toggle Message

In the above code block, you have two variables in the script tag named messageShown and message. The browser only assigns the div element if messageShown is truthy, and the button element is responsible for controlling the state of the messageShown variable .

The div component has a bind directive: binds the host component (in the case of a div) to the messageShown variable . The $ symbol marks the next command as the response. That means any functions in the command will rerun every time any dependencies are changed.

In this case, the $ symbol tells the browser to listen for any changes in the next command and write the innerText of the link's message . Remember that message is linked to the div element.

That's code for a simple problem. Svelte actions make the process of listening for the attached state of an element easier.

How to create a Svelte action

Here's how you can recreate the functionality above with an alternative action. Svelte provides a use: directive that you can attach to any element in your component. The use: directive will reference the action you want to run as soon as the browser attaches the element to the DOM.

 {#if messageShown} This is a message. {/if} messageShown=!messageShown}>Toggle Message

In the above code block, the script tag contains the notify function that records the notification in the browser console. In the markup section, the div element has a use: command that references the notify function.

This action tells the browser to run the notify function whenever the browser attaches a div element on the DOM. Pay attention to the node parameter in the notify function . It refers to the element attached to that action.

Things you need to know about Actions in Svelte Picture 2

This approach is simpler than the previous one. The old way works fine but what if you want to duplicate this functionality on multiple elements in different components? This will lead to code duplication.

Since a Svelte action is just a function, that means you can create a regular .js file and export the action as a module that elements in your app can use. You can attach multiple actions to a single element with their own tasks. A common approach is to create a lib directory with an actions.js file that exports various events.

export function action1(node) { // Code để chạy. } export function action2(node) { // Code để chạy. }

Now you can import the appropriate actions wherever you need them:

Use the destroy method in an action

In Svelte, each action has the ability to provide an object with a destroy method, allowing you to deploy actions each time the browser removes the host element from the DOM.

You can edit the notify function from the original example to return an object with a destroy method like this:

const notify = (node) => { console.log("Mounted", node.innerText); return { destroy: ()=>console.log('Unmounted!') } }

This function returns an object with the destroy method . When the browser removes this element, it calls destroy which is responsible for displaying the text Unmounted! in console.

Things you need to know about Actions in Svelte Picture 3

Pass parameters to an action

When attaching an action to an element with the use: command , Svelte automatically binds that element to a parameter (usually called a node ), which can be referenced from your action. However, you can pass other parameters to an action like this:

If you want a param variable in your action , the code looks like this:

function action(node, param){ // Viết code tại đây. }

Passing multiple parameters into one action is also possible. To do this, you must pass the parameters as objects.

Now you can use this parameter in the action as follows:

function action(node, {param1, param2}) { // Viết code tại đây. }

Use the Update method of an action

In addition to the destroy method , actions can also return an update that runs whenever the parameters change. To illustrate that, here is the code for a simple game where the computer picks a random number (a multiple of 5) and the player has to guess that number.

 {message}

{number}

 number=number+5}>Increase by 5 number=number-5}>Reduce by 5

In the above code block, the evaluate function is an action that returns an object with the update method . It listens for changes in the passed parameter and returns a string based on how close the user's guess was. There are currently two buttons with the command on:click , responsible for increasing and decreasing number .

Above are the things you need to know about actions in Svelte . Hope the article is useful to you.

Isabella Humphrey

Update 28 October 2023