The complex typewriting effect is abstracted away in a neat function, out of site and out of mind.

this action is re-usable. Anytime you want a typewriter effect added to an element, you just import the function and apply it. So elegant.

Some call them the lifecycle methods of elements which I think is an apt description.

Finally, I think Actions are great for animations, because you will definitely need to apply the same logic to many different elements. One of my favorite examples are FLIP animations, where a change in DOM position can be animated. For example shuffling a list of items. I will not dive deep into the topic in this article: I've written about some techniques in this article about FLIP animations in React and in this article about how to create spring animations with Web Animation API. Although they are not about Svelte, at the end of the day it all boils down to manipulating the HTML element directly. And Svelte Actions are a great place to do it.

But you can get quite close to directly updating CSS with Actions!

export function autofocus(node) { node.focus(); } That's it. This is a legitimate Svelte Action!

It's more powerful to have them happen in definition order, because this lets you intercept thing in event handlers or in actions.

Moreover, you can add as many use:action directives as you want to an element.

With a few lines of code we can add functionality to regular HTML elements, in a very reusable and declarative way.

the use directive takes care of the component lifecycle for us.

If it's behaviour that you can imagine needing to reuse among multiple components, or if it's something that you can imagine applying to an element inside an {#if ...} block (for example), then it probably belongs in an action. It it's something that 'belongs' to the component itself, rather than a specific element, then it's probably more of a lifecycle thing.

The use:action method seems cleaner, but aside from that, are there any underlying differences between these two methods that would make one preferred over the other in certain situations?

Popper for Svelte with actions, no wrapper components or component bindings required! Other Popper libraries for Svelte (including the official @popperjs/svelte library) use a wrapper component that takes the required DOM elements as props. Not only does this require multiple bind:this, you also have to pollute your script tag with multiple DOM references. We can do better with Svelte actions!

A cleaner approach could be the use:action API.

For use$ since svelte is never going to support actions for components, i designed something that reminds React hooks that will in some ways replace this feature.

You can add actions to the components with use={[Action1, [Action2, action2Props], Action3]}.

use: [] - An array of actions and/or action/property arrays.

I used a self made (for the experience) rule based sytem with the Svelte use:action element directive. FI: <input .. use:valid={prop, 'mandatory'}....>

Sometimes, you may be tempted to write that wrapper. Because all your (React or Vue or insert your reactive framework here) instincts tell you so.Resist the temptation. There is a better way. A svelter way. Introducing: the use-directive (a.k.a. “actions”).

An action used on anchor tags to navigate around the application.

The point of the feature is to not rely on the third-party author of the child component to add a prop for every action under the sun. Rather, they could just mark a recipient for actions on the component (assuming there is a viable target element), and then consumers of the library could extend the component using whatever actions they desire.

They don't need to add a prop for every action. The action itself can be passed in as a prop. <script> export let action; </script> <div use:action>whatever</div> The argument for the action can be another prop or can be part of the same prop.

Your tooltip component will have to wrap your image with a span tag or something, it can’t just add events to its children. And if you are adding multiple actions to it you will have to wrap it multiple times.

<Concern1> <Concern2> </Concern2> </Concern1>

vs.

<img use:concern1 use:concern2>

I have created an action for form validation and its really working well