Needs to be update to work in Runes mode

[gregg-cbs]

I know its tricky but how can we get this component to work when svelte is in Runes mode?

[AndreaGero]

Hello,

I've tried and it is working with Runes:

let startDate = $state(new Date());
let isOpen = $state(false);

function formatDate(dateString: Date) {
	if (isNaN(new Date(dateString).getMilliseconds())) {
		return '';
	}
	return (dateString && format(new Date(dateString), 'dd/MM/yyyy')) || '';
}

let formattedStartDate = $derived.by(() => formatDate(startDate));

const toggleDatePicker = () => (isOpen = !isOpen);

[gregg-cbs]

@AndreaGero
In your svelte config please enable runes mode and then tell us if it works in Runes mode, seems you are confusing using Runes with Runes mode - Svelte 5 by default toggles between svelte 4 and 5 behavior depending on the components code for backwards compatibility. If you do not set runes mode to true in the config then the datepicker component will be running with svelte 4 reactivity, this is bad because then the whole page runs in svelte 4 reactivity which defeats the fine grained reactivity you get with Runes and in our case caused unnecessary dom updates and refreshes when unrelated state changed.

// svelte.config.js
const config = {
  compilerOptions: {
    runes: true,
  }
}

[gregg-cbs]

I forked this repo and migrated it to svelte 5 for my project, was not too bad of a change

[joecorsi]

I forked this repo and migrated it to svelte 5 for my project, was not too bad of a change

any chance you can share the repo?

[gregg-cbs]

Yeah i can, i am swapping out the css variables for plain css as i find it impossible to style or to work with the css when using variables. After that I will share the fork here so you can use it.

[joecorsi]

Yeah i can, i am swapping out the css variables for plain css as i find it impossible to style or to work with the css when using variables. After that I will share the fork here so you can use it.

thanks!

[gregg-cbs]

Here is the gist. It works in svelte 5 in runes mode.

A note is that i did not style Multipane and Showpresets. I have removed all original css and redid it because the original CSS was a mess, my css is not the easiest to modify because of how the classes are being applied but it works and its a lot less code. It looks the same as the original component. I allowed the calendar to be any width and it will work properly so you can make the calendar wider or thinner and the box sizes will adjust.

I am not maintaining this, i did this for myself and it works for me, hopefully it works for you. Copy and paste these files to your project and give it a try:
https://gist.github.com/gregg-cbs/5a401f03d6b53c7a8d5587c0269a27be

[Al38andr0]

Is there any chance of an update from @dysfunc? Are you (or anyone else) planning to migrate to rune mode?

I've got the same issue with SvelteStrap. More time passes, and more moving to rune modes became essential due to the updated dependencies.

Many thanks.