Add a better (easier) example about use:action to the tutorial #5014
Description
Is your feature request related to a problem? Please describe.
Actions is a very powerful but underrated feature, and not as popular or well known as it should.
The example given at the tutorial, although quite impressive, does not reflect how easy it is to add functionality to HTML elements with use:action. I think it belongs better to the examples section than to the tutorial.
Describe the solution you'd like
A simple example like:
export function selectOnFocus(node) {
if (node && typeof node.select === 'function' ) { // make sure node is defined and has a select() method
const onFocus = (event) => node.select() // event handler
node.addEventListener('focus', onFocus) // when node gets focus call onFocus()
return {
destroy: () => node.removeEventListener('focus', onFocus) // this will be executed when the node is removed from the DOM
}
}
}
A clear and concise description of what you want to happen.
People to realize that use:action is a useful and lightweight technique to add funcionality in a reusable and declarative way
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
googling around, asking at discord
How important is this feature to you?
Note: the more honest and specific you are here the more we will take you seriously.
It's jsut a shame that such a powerful feature is not more popular
Additional context
Add any other context or screenshots about the feature request here.
A few articles that helped me understand what actions are:
https://svelte.school/tutorials/introduction-to-actions
https://medium.com/better-programming/practical-svelte-the-use-directive-60635671335f