Recommended code changes before migrating to Svelte 5

[rmunn]

Before we migrate to Svelte 5 using pnpx sv migrate svelte-5, we probably want to make the following changes to our code so that the automatic migration tool won't fail on certain components:

• HeaderPage.svelte - rename the "header-content" slot to "headerContent" — when the migration tool replaces slots with snippets, the names need to be valid Javascript identifiers

  • Used in DetailsPage.svelte
  • Used in routes/(authenticated)/+page.svelte (via DetailsPage)
  • Used in routes/(authenticated)/project/[project_code]/+page.svelte (via DetailsPage)

• HeaderPage.svelte - rename the "title" slot to "titleText" so it doesn't conflict with the name of the prop

• DetailsPage.svelte - has a slot named "title" and a prop named "title", need to rename one of them or the migration script will refuse to migrate the file

  • Used in routes/(authenticated)/+page.svelte
  • Used in routes/(authenticated)/project/[project_code]/+page.svelte

• RadioButtonGroup.svelte - replace the $$props.class usage with a className prop (string | undefined) and use that in the top-level div

  • Not actually used anywhere, so maybe we should just delete the component?

• FilterBar.svelte - name clashes between slot names and prop names used in component

  • filters is an exported prop but also the name of a slot. Rename the slot to "filterSlot".
  • activeFilters is the name of a slot but also the name of a prop passing data back to the component. We'll want to rename the slot to activeFilterSlot before running the migration.
  • Used in ProjectFilter.svelte
  • Used in UserFilter.svelte