Support for "High Order Component" / Wrapper / Forwarding

Is your feature request related to a problem? Please describe.

I want to build a “transparent” lazy-loading component. This component should load a target component asynchronously, and when ready, delegate everything to this target.

This lazy-component should be generic: it should work for every target component. Moreover, I don’t want the consumer of the component to know there is this wrapper, it should be “transparent” for it.

Today, it doesn’t seem to be possible to build such “wrapper” because :

• There is no API to forwards slots to the delegate ;
• There is no API to forwards events to the delegate ;
• There is no API to forwards “bind” from the parent to the delegate ;

There is various issues about this : #2837 about forwardings events ; #1824 and #4295 about forwardings slots ; I found nothing about “binding” forwardings. #4647 is about a loadable component, closed because “svelte-loadable” can implements this issue. however, it’s false because it doesn’t supports slots or events.

Describe the solution you’d like

An official way/api to “wrapper” transparently another component.

Describe alternatives you’ve considered

I am able to prototype such wrapper with internals API, however I am not able to forwards binding from parent to child :

<svelte:component this={cpn} {...slotsProps} {...$$restProps} bind:this={instance}/>

<script>
    import { get_current_component } from 'svelte/internal';
    
    export let provider;
    
    const slotsProps = {"$$slots":$$props.$$slots, "$$scope":$$props.$$scope};
    const self = get_current_component();
    
    let cpn;
    let instance;
        
    provider().then(result => cpn = result);
    
    $: if (instance) {
        for (let [type, listeners] of Object.entries(self.$$.callbacks)) {
            instance.$on(type, (e) => {
                listeners.forEach(l => l(e));
            });
        }
    }
</script>

How important is this feature to you?

I can’t today implements this kind of component. I’d like to “wrap” heavyweight components without updating or adding loading logic to every consumer.

[Sxxov]

I’ve written an RFC at https://github.com/sveltejs/rfcs/pull/57 in an attempt to propose a solution for this. Anyone one looking at this problem should feel free to chime in.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.