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