Feature Suggestion: Allow svelte:fragment to be used as returned component value for this prop in svelte:component

[brandonmcconnell]

Describe the problem

For situations where I want to conditionally wrap on element in a component, or leave it as-is, unwrapped, I see a lot of value in svelte:fragment being accepted as a valid this prop value for svelte:component.

In other words, I would naturally expect this to work, but it does not appear to:

<svelte:component
  this={condition
    ? WrapperComponent
    : svelte:fragment
  }
>
  Hello {name}!
</svelte:component>

Describe the proposed solution

I would like to see support for svelte:fragment within the this prop of svelte:component components added, which would naturally allow the optional wrapping of nodes.

Alternatives considered

The main alternative is see is quite similar but essentially creating my own Fragment component which simply returns the slotted content in this format:

<slot {...$$restProps} />

In practice, it could be used like this:

<svelte:component
  this={condition
    ? WrapperComponent
    : Fragment
  }
>
  Hello {name}!
</svelte:component>

Importance

would make my life easier

[brandonmcconnell]

Here it is in practice (the workaround):

https://svelte.dev/repl/17594118f02f4c4f808c1e98ed95e261?version=3.46.4

[tanhauhau]

1. <svelte:fragment> is not the same as React fragment or something from the other frameworks that you are familiar with.

when you write

<Component>
   <svelte:fragment slot="xxx">
      <div />
      <div />
   </svelte:fragment>
</Component>

it is a construct in compile time to group elements together, but you wont see a trace of it after it is being compiled.
so, it is not a runtime variable in which you can pass it to anywhere.

2. if you take a look at condition ? WrapperComponent : svelte:fragment this would not be a valid javascript expression.
3. i think for now, we are leaving this to solutions outside of the svelte core. your Fragment.svelte component did a good job

so thank you and im closing this :)

[brandonmcconnell]

@tanhauhau May I then revise the spec for this feature request to make the this prop on <svelte:component> and <svelte:element> optional, and have them work like a svelte:fragment when the this prop is present by returns a falsy or nullish value?

So this example (below) would simply render Some text since the this prop is a falsy value:

<svelte:component this={false && MyComponent}>
  Some text
</svelte:component>

The same would be true for <svelte:element>.

[brandonmcconnell]

@tanhauhau This issue was resolved effectively. I'll create a new feature suggestion for the new spec. Thanks as always!