<svelte:component> is deprecated in runes mode — components are dynamic by defaultsvelte(svelte_component_deprecated)

[anandhuremanan]

Hi there,

What do I use instead of the following in svelte 5, Thank you!!!

<svelte:component
   this={column.template}
   {rowData}
   rowIndex={rowIndex + currentPage * pageSettings.pageNumber}/>

[ankitpatial]

@ananduremanan check it out https://svelte-5-preview.vercel.app/docs/deprecations

you can do:

{@const Component = column.template}
<Component  {rowData} rowIndex={rowIndex + currentPage * pageSettings.pageNumber}/>

[dominikg]

<column.template {rowData} should also work

[anandhuremanan]

<column.template {rowData} should also work

Thanks for your answer, what about situations like <svelte:component this={getFileIconHelper(type)} size="32" color={iconColor} /> which was supported in previous versions, or is it a good practice to do like this?

NB: getFileIconHelper is a method that returns a file Icon.

For More Context

import {
	FileOutline,
	FilePdfOutline,
	FileChartBarOutline,
	FileWordOutline,
	FileMusicOutline,
	FileVideoOutline
} from '$lib/assets/icons/index.js';

export function getFileIconHelper(fileType: string) {
	if (fileType.startsWith('image/')) return null;
	if (fileType === 'application/pdf') return FilePdfOutline;
	if (
		fileType === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
		fileType === 'application/vnd.ms-excel'
	)
		return FileChartBarOutline;
	if (
		fileType === 'application/msword' ||
		fileType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
	)
		return FileWordOutline;
	if (fileType.startsWith('audio/')) return FileMusicOutline;
	if (fileType.startsWith('video/')) return FileVideoOutline;
	return FileOutline;
}

[mahyarmirrashed]

I also have a dynamic component and would like to know how to do this.

[Kingnoba]

The docs could do a better job here, because for way too long my GPT brain tried this:
<{column.template}>
instead of this:
<column.template>

[mwcm]

What about the case when looping through components with {#each} like below?

this doesn't work

<script>
let some_components = [ComponentOne, ComponentTwo];
</script>

<div>
  {#each some_components as c}
    <c/>
  {/each}
</div>

this does work

<script>
let some_components = [ComponentOne, ComponentTwo];
</script>

<div>
  {#each some_components as C}
    <C/>
  {/each}
</div>

this also works

<script>
let some_components = [{'component':ComponentOne}, {'component':ComponentTwo}];
</script>

<div>
  {#each some_components as c}
    <c.component/>
  {/each}
</div>

ankitpatial's suggestion also works

<script>
let some_components = [ComponentOne, ComponentTwo];
</script>

<div>
  {#each some_components as c}
    {@const Component = c}
    <Component/>
  {/each}
</div>

I'm guessing this is the easiest way, just curious if there's a different approach recommended in this case.
Thanks!

EDIT: does work as expected when capitalized, interesting

playground link for anyone curious

[ankitpatial]

if its a Svelte component, my preference is that it starts with a Captial case.

[mwcm]

seems like it does work as expected when capitalized!
seems like properties of objects can be referenced as components without capitalizing too

only not rendering if the component returned by {#each} is referenced directly and not capitalized

[Miroku87]

@mwcm thank you for your research, it's getting me closer to the solution of my issue which is similar to your case but not quite.

I am in this situation

<script>
export let what_component = "";
let some_components = {'component1':ComponentOne, 'component2':ComponentTwo};
</script>

And I would really love to do:

<div>
    <some_components[what_component] />
</div>

But it looks like it really dislikes having square brackets in there.
This works:

<script>
export let what_component = "";
let some_components = [{'component':ComponentOne, 'name':'component1'}, {'component':ComponentTwo, 'name':'component2'}];
</script>

{#each some_components as cmp}
	{#if cmp.name === what_component}
		<cmp.component />
	{/if}
{/each}

But I would prefer to avoid the loop.
Do you happent to know a way?

[mwcm]

Sorry @Miroku87 - not off the top of my head, wrote down everything I observed in my post here

[Miroku87]

I have thought about it with a fresh mind and it hit me. It's simpler than I thought:

<script>
export let what_component = "";
const some_components = {'component1':ComponentOne, 'component2':ComponentTwo};
const Component = some_components[what_component];
</script>
<div>
    <Component />
</div>

[gregg-cbs]

What if I have the classic case of needing to switch out a html tag based on a condition?

<svelte:component this={href ? "a" : "button"} class="{theme[color]} {sizes[size]} {classes} text-center justify-center flex gap-2 items-center rounded-lg font-medium click-in" onclick={onclick} {...rest}>{@render children()}</svelte:component>