Svelte4 to Svelte5 Upgrade Reactivity

[anandhuremanan]

Hi There, I'm in a process of rewriting my svelte4 codebase to svelte5 and I've this svelte Data Grid component(complex component removed other stuffs).

I'm receiving columns for the grid as props

let {
		dataSource,
		columns,
		...Other Stuffs Here
	}: GridProps = $props();

and

Added an additional column to show filter menu popup for each Column as follows

columns = columns.map((column: any) => ({
		...column,
		showFilterPopup: false,
		isFilterActive: false
	}));

then I rendered it as

<tr>
	{#each columns as columnHeader}
		<th
			class="border-b border-t bg-gray-50 px-2 py-4 dark:bg-gray-700"
			style="width: {columnHeader.width ? `${columnHeader.width}px` : 'auto'};"
		>
			<div class="flex items-center gap-2 text-sm">
				{#if columnHeader.headerText}
					{columnHeader.headerText}
				{:else}
					{columnHeader.field}
				{/if}
				{#if columnHeader.mandatory}
					<span class="text-red-500">*</span>
				{/if}
				<!-- Filter Logic -->
				{#if columnHeader.filter && !columnHeader.template}
					<button
						onclick={() => {
							columnHeader.showFilterPopup = !columnHeader.showFilterPopup;
							console.log(columnHeader.showFilterPopup);
						}}
						><FilterOutline
							size="sm"
							class={`${columnHeader.isFilterActive ? 'text-red-400' : ''}`}
						/></button
					>
					<!-- Filter Pop Up Component For Showing Filtering Options -->
                                        <FilterPopUp
							bind:show={columnHeader.showFilterPopup}
							cancel={(event: any) => {
							if (event === 'cancel') {
									columnHeader.showFilterPopup = !columnHeader.showFilterPopup;
													}
												}}
							apply={handleApplyFilter}
							bind:columnHeader={columnHeader.field}
							{clearFilter}
											/>
				{/if}
			</div>
		</th>
	{/each}
</tr>

My FilterPopUp component is as follows

<script lang="ts">
	interface FilterProps {
		show: boolean;
		columnHeader: string;
		cancel: any;
		apply: any;
		clearFilter: any;
	}

	let {
		show = $bindable(false),
		columnHeader = $bindable(''),
		cancel,
		apply,
		clearFilter
	}: FilterProps = $props();

	$effect(() => {
		console.log(show);
	});

	let filterValue: string = $state('');
	let selected: string = $state('contains');
	let isFilterActive = $state(false);

	const onCancelHandler = () => {
		cancel('cancel');
	};

	const applyFilterHandler = () => {
		apply({ filterValue, selected, columnHeader });
		show = false;
		isFilterActive = true;
	};

	const clearFilterHandler = () => {
		isFilterActive = false;
		clearFilter({ columnHeader });
	};
</script>

{#if show}
	<div
		class="absolute bg-gray-100 p-2 border z-10 mt-40 flex items-end flex-col shadow-lg gap-2 rounded-md dark:bg-gray-700"
	>
		<select
			name="selected"
			id="selected"
			bind:value={selected}
			class="w-full p-2 rounded-lg dark:bg-gray-600"
		>
			<option value="contains">Contains</option>
			<option value="starts_with">Starts With</option>
			<option value="ends_with">Ends With</option>
		</select>
		<input
			type="text"
			bind:value={filterValue}
			placeholder="Enter filter value"
			class="rounded-lg p-2 text-sm dark:bg-gray-600"
		/>
		<div class="mt-2">
			<button
				onclick={onCancelHandler}
				class="text-xs bg-red-600 text-white p-1 rounded-lg hover:bg-red-600">Cancel</button
			>
			{#if isFilterActive}
				<button
					onclick={clearFilterHandler}
					class="text-xs bg-black text-white p-1 rounded-lg dark:bg-white dark:text-white"
					>Clear Filter</button
				>
			{/if}
			<button
				onclick={applyFilterHandler}
				class="text-xs bg-black text-white p-1 rounded-lg dark:bg-white dark:text-black"
				>Apply Filter</button
			>
		</div>
	</div>
{/if}

I need to show the filterpopup when clicks on the filter button, This was works in svelte4, but I don't have any idea about how to make it works on svelte5 since the reactivity changed.

[brunnerh]

You are messing with props that are not $bindable, would not recommend that. Such properties are not deeply reactive.

Would either store the additional column data separately (e.g. in a map) or create a separate state variable, e.g.

const extendedColumns = $state(columns.map(...));

(If columns can change during the life of the component, you may need to combine this with $derived or use an $effect.)

[anandhuremanan]

Thanks for your reply, but how was this worked on svelte 4? Is it not recommended on svelte 4 as well?

[brunnerh]

Also would not recommend it in Svelte 4.

The old reactivity system invalidates the source array when modifying an item in #each, this is no longer the case in runes mode. The reactivity on the item has to be provided by state/signals on the item itself. (This should lead to better performance since only the affected item is checked/updated.)