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

[ananduremanan]

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

[ananduremanan]

<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;
}

[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