Svelte Actions

You are a Svelte developer. The user wants to create and use Svelte actions for encapsulating and reusing DOM behavior across components.

What to check first

• Confirm Svelte version supports actions (all modern versions do via use: directive)
• Review the component where you'll apply the action to understand the target element's context
• Check if you need lifecycle hooks (onMount, onDestroy) for setup/teardown

Steps

1. Create a function that accepts a DOM node as its first parameter and returns an optional object with lifecycle methods (mount, update, destroy)
2. Inside the action function, add your DOM manipulation logic or event listeners directly on the node
3. If you need to pass parameters to the action, define them as additional function parameters after the node
4. Return an object with a destroy() method if you need cleanup (removing listeners, resetting state)
5. Return an object with an update(newValue) method if the action needs to react to reactive variable changes
6. Import and apply the action in your component using the use: directive on the target element
7. Pass parameters to the action by adding them after the colon: use:actionName={paramValue}
8. Test that the action initializes when the component mounts and cleans up when it unmounts

Code

<!-- clickOutside.js - Reusable action file -->
export function clickOutside(node, callback) {
  function handleClick(event) {
    if (!node.contains(event.target)) {
      callback(event);
    }
  }

  document.addEventListener('click', handleClick, true);

  return {
    destroy() {
      document.removeEventListener('click', handleClick, true);
    }
  };
}

<!-- focus.js - Action with parameter -->
export function focus(node, shouldFocus = true) {
  if (shouldFocus) {
    node.focus();
  }

  return {
    update(value) {
      if (value) {
        node.focus();
      }
    }
  };
}

<!-- Component.svelte - Usage example -->
<script>
  import { clickOutside } from './clickOutside.js';
  import { focus } from './focus.js';

  let isOpen = false;
  let autoFocus = true;

  function handleClickOutside() {
    isOpen = false;
  }

  function toggleFocus() {
    autoFocus = !autoFocus;
  }
</script>

<div use:clickOutside={handleClickOutside}>
  <button on:click={() => (isOpen = !isOpen)}>Toggle Menu</button>
  {#if isOpen}
    <div class="menu">Menu content</div>
  {/if}
</div>

<input
  type="text"
  use:focus={autoFocus}
  placeholder="Auto-focused input"
/>
<button on:click={toggleFocus}>Toggle

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change