You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The 'module context' tutorials of the svelte tutorials examine a method of controlling a set of components by passing references to the module context of 'AudioPlayer.svelte'
This is accomplished by using bind:this within AudioPlayer.svelte to gain a reference to the child component that will be ready onMount. This approach works well.
However there are many instances where instead of referencing a child element of a particular component, it would be useful to access a reference to the component itself rather than a child component.
There are several ways around this problem I will discuss in 'Alternatives considered' but all of them are rather awkward.
Describe the proposed solution
Currently the onMount lifecycle hook accepts one parameter of type () => void or () => () => void. This may feasibly be extended to also accept (SvelteComponent) => void, and have the onMount function pass a reference to the just-mounted component.
Alternatives considered
There are some 'existing' solutions but none are great.
use get_current_component from 'svelte/internal'. As part of the internal api this is not intended for supporting this use, and could easily break in the future if changes are made to the internal implementation of svelte. An officially supported runtime function to accomplish this would also be a good solution.
Add a wrapping component and then use bind:this to the component you want to control. This expands the DOM unnecessarily, and requires passing/binding all of the attributes intended for control through this wrapper component.
Instead of passing the component to the module context, pass a callback function or object containing callback functions. This works well in simple instances, like stopping all audio players, but get convoluted very quickly when you want to allow for more complex control of a component.
Describe the problem
The 'module context' tutorials of the svelte tutorials examine a method of controlling a set of components by passing references to the module context of 'AudioPlayer.svelte'
This is accomplished by using
bind:this
within AudioPlayer.svelte to gain a reference to the child component that will be readyonMount
. This approach works well.However there are many instances where instead of referencing a child element of a particular component, it would be useful to access a reference to the component itself rather than a child component.
There are several ways around this problem I will discuss in 'Alternatives considered' but all of them are rather awkward.
Describe the proposed solution
Currently the
onMount
lifecycle hook accepts one parameter of type() => void
or() => () => void
. This may feasibly be extended to also accept(SvelteComponent) => void
, and have the onMount function pass a reference to the just-mounted component.Alternatives considered
There are some 'existing' solutions but none are great.
use
get_current_component
from 'svelte/internal'. As part of the internal api this is not intended for supporting this use, and could easily break in the future if changes are made to the internal implementation of svelte. An officially supported runtime function to accomplish this would also be a good solution.Add a wrapping component and then use bind:this to the component you want to control. This expands the DOM unnecessarily, and requires passing/binding all of the attributes intended for control through this wrapper component.
Instead of passing the component to the module context, pass a callback function or object containing callback functions. This works well in simple instances, like stopping all audio players, but get convoluted very quickly when you want to allow for more complex control of a component.
use bind:this with svelte:self/
This is super janky and I'm not sure you end up with a reference to the correct component.
Importance
would make my life easier
The text was updated successfully, but these errors were encountered: