Svelte Actions

Svelte Actions are a powerful feature that allows you to enhance HTML elements with custom behavior. They encapsulate functionality, making it reusable and easy to apply across different components.

Key Concepts

• What are Actions?
  • Actions are functions that can be applied to HTML elements in Svelte.
  • They can manipulate the DOM, handle events, and add custom behavior to elements.
• How to Create an Action
  • An action is simply a function that takes an HTML element and options as parameters.
  • The function can return an object with lifecycle methods to manage the action's behavior.

Basic Structure of an Action

function myAction(node, options) {
  // Setup code: this runs when the action is applied
  node.style.color = options.color;

  // Return an object with lifecycle methods
  return {
    update(newOptions) {
      // Code to run when the action's options change
      node.style.color = newOptions.color;
    },
    destroy() {
      // Cleanup code: this runs when the action is removed
      node.style.color = '';
    }
  };
}

Using Actions

Applying an Action to an Element

You can apply an action using the use: directive in your Svelte component.

<script>
  import { myAction } from './myAction.js';
</script>

<div use:myAction={{ color: 'red' }}>
  This text will be red!
</div>

Updating Action Options

If you want to change the options passed to the action, you can do so by changing the bound variable.

<script>
  let color = 'red';

  function changeColor() {
    color = color === 'red' ? 'blue' : 'red';
  }
</script>

<div use:myAction={{ color }}>
  This text changes color!
</div>

<button on:click={changeColor}>Change Color</button>

Lifecycle Methods

• update: Called whenever the bound values change, allowing the action to reconfigure based on new data.
• destroy: Cleans up when the action is removed or the component is destroyed, preventing memory leaks.

Benefits of Using Actions

• Reusability: Actions can be reused across different components and projects.
• Encapsulation: They help keep your component logic clean by separating concerns.
• Customization: Easily customize behavior and appearance without cluttering your components.

Conclusion

Svelte Actions provide a straightforward way to add interactivity and custom behavior to your components. By defining actions and applying them to elements, you can create reusable, maintainable code that enhances your application's functionality.