Implement use:Component actions.

[hperrin]

Actions seem like a very easy way to use a component on an object, and would be very useful to implement components that simply added functionality to an existing element. Let's add a shortcut for instantiating a component as an action.

Basically turn this:

<button use:tooltip="{text: 'Svelte rocks!'}">Hover me!</button>

<script>
  import Tooltip from './Tooltip.html';
	
  export default {
    actions: {
      tooltip(node, data) {
        const tooltip = new Tooltip({target: node, data});
        return {
          destroy() {
            tooltip.destroy();
          }
        };
      }
    }
  };
</script>

Into this:

<button use:Tooltip="{text: 'Svelte rocks!'}">Hover me!</button>

<script>
  import Tooltip from './Tooltip.html';
	
  export default {
    components: { Tooltip }
  };
</script>

[hperrin]

#1321 and #1322 together would turn this code:

https://svelte.technology/repl?version=1.60.2&gist=196319d9223a4cde1db09b4a6805094c

Into this code:

https://svelte.technology/repl?version=1.60.2&gist=a736a723115f05d8aa0fbf1baeeccc2e

I think that's a much cleaner and more Svelte-esque solution than manually manipulating the DOM like in https://github.com/sveltejs/svelte/blob/master/test/runtime/samples/action/main.html.

[arxpoetica]

I love this!

[Conduitry]

Since there's no longer a way in Svelte 3 to distinguish whether something is being imported as a component, I don't think this syntax makes sense any longer. We don't want to have a runtime check that looks at whether what it's been given is an action or a component constructor. It would still be easy to implement this in userland as a custom action, or as a function that inputs a component constructor and outputs an action.