Prep code in src for Svelte 5 migration (#1176)

Svelte 5 converts slots to snippets, which are passed in as props. So if a slot had the same name as a prop, one or the other has to be renamed to avoid a name conflict. The Svelte 5 migration tool won't rename slots or props, so we need to do it before running the tool so that it can migrate our code successfully. * Prep FilterBar for Svelte 5 migration * Prep DetailsPage for Svelte 5 migration * Prep RadioButtonGroup for Svelte 5 migration
sillsdev · Oct 31, 2024 · 0a42f92 · 0a42f92
1 parent a49d64f
commit 0a42f92
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 23 deletions.
diff --git a/frontend/src/lib/components/FilterBar/FilterBar.svelte b/frontend/src/lib/components/FilterBar/FilterBar.svelte
@@ -86,7 +86,7 @@
 </script>
 
 <div class="input filter-bar input-bordered flex items-center gap-2 py-1.5 px-2 flex-wrap h-[unset] min-h-12">
-  <slot name="activeFilters" {activeFilters} />
+  <slot name="activeFilterSlot" {activeFilters} />
   <div class="flex grow">
     <PlainInput
       bind:value={$allFilters[searchKey]}
@@ -110,15 +110,15 @@
           <span class="text-lg">✕</span>
         </button>
       {/if}
-      {#if $$slots.filters}
+      {#if $$slots.filterSlot}
         <div class="join-item">
           <Dropdown>
             <button class="btn btn-square join-item btn-sm gap-2">
               <span class="i-mdi-filter-outline text-xl" />
             </button>
             <div slot="content" class="card w-[calc(100vw-1rem)] sm:max-w-[35rem]">
               <div class="card-body max-sm:p-4">
-                <slot name="filters" />
+                <slot name="filterSlot" />
               </div>
             </div>
           </Dropdown>

diff --git a/frontend/src/lib/components/Projects/ProjectFilter.svelte b/frontend/src/lib/components/Projects/ProjectFilter.svelte
@@ -66,7 +66,7 @@
 </script>
 
 <FilterBar on:change searchKey="projectSearch" {autofocus} {filters} {filterDefaults} bind:hasActiveFilter {filterKeys} {loading}>
-  <svelte:fragment slot="activeFilters" let:activeFilters>
+  <svelte:fragment slot="activeFilterSlot" let:activeFilters>
     {#each activeFilters as filter}
       {#if filter.key === 'projectType'}
         <ActiveFilter {filter}>
@@ -108,7 +108,7 @@
       {/if}
     {/each}
   </svelte:fragment>
-  <svelte:fragment slot="filters">
+  <svelte:fragment slot="filterSlot">
     <h2 class="card-title">{$t('project.filter.title')}</h2>
     {#if filterEnabled('memberSearch')}
       <FormField label={$t('project.filter.project_member')}>

diff --git a/frontend/src/lib/components/Users/UserFilter.svelte b/frontend/src/lib/components/Users/UserFilter.svelte
@@ -57,7 +57,7 @@
   {filterKeys}
   {loading}
 >
-  <svelte:fragment slot="activeFilters" let:activeFilters>
+  <svelte:fragment slot="activeFilterSlot" let:activeFilters>
     {#each activeFilters as filter}
       {#if filter.key === 'userType' && filter.value}
         <ActiveFilter {filter}>
@@ -80,7 +80,7 @@
       {/if}
     {/each}
   </svelte:fragment>
-  <svelte:fragment slot="filters">
+  <svelte:fragment slot="filterSlot">
     <h2 class="card-title">{$t('admin_dashboard.user_filter.title')}</h2>
     {#if filterEnabled('userType')}
       <div class="form-control">

diff --git a/frontend/src/lib/forms/RadioButtonGroup.svelte b/frontend/src/lib/forms/RadioButtonGroup.svelte
@@ -19,11 +19,12 @@
   export let description: string | undefined = undefined;
   export let variant: 'radio-warning' | undefined = undefined;
   export let labelColor: 'text-warning' | undefined = undefined;
+  export let divClass: string | undefined = undefined;
 </script>
 
 <div
   role="radiogroup"
-  class={$$props.class ?? ''}
+  class={divClass ?? ''}
   aria-labelledby={`label-${id}`}
   id={`group-${id}`}
   >

diff --git a/frontend/src/lib/layout/DetailsPage.svelte b/frontend/src/lib/layout/DetailsPage.svelte
@@ -3,22 +3,22 @@
   import t from '$lib/i18n';
   import HeaderPage from './HeaderPage.svelte';
 
-  export let title: string;
+  export let titleText: string;
   export let wide = false;
   export let setBreadcrumb = true;
 </script>
 
-<HeaderPage {wide} {title} {setBreadcrumb}>
+<HeaderPage {wide} titleText={titleText} {setBreadcrumb}>
   <svelte:fragment slot="banner"><slot name="banner"></slot></svelte:fragment>
   <svelte:fragment slot="actions"><slot name="actions"></slot></svelte:fragment>
   <svelte:fragment slot="title"><slot name="title"></slot></svelte:fragment>
-  <svelte:fragment slot="header-content">
+  <svelte:fragment slot="headerContent">
     {#if $$slots.badges}
       <BadgeList>
         <slot name="badges" />
       </BadgeList>
     {/if}
-    <slot name="header-content" />
+    <slot name="headerContent" />
   </svelte:fragment>
   {#if $$slots.details}
     <div class="my-4 space-y-2">

diff --git a/frontend/src/lib/layout/HeaderPage.svelte b/frontend/src/lib/layout/HeaderPage.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
   import Page from './Page.svelte';
 
-  export let title: string;
+  export let titleText: string;
   export let wide = false;
   export let setBreadcrumb = true;
 </script>
 
-<Page {title} {wide} {setBreadcrumb}>
+<Page title={titleText} {wide} {setBreadcrumb}>
   <svelte:fragment slot="header">
     <slot name="banner" />
     <div class="flex flex-row-reverse flex-wrap justify-between mb-4 gap-y-2 gap-x-4">
@@ -17,11 +17,11 @@
         {#if $$slots.title}
           <slot name="title" />
         {:else}
-          {title}
+          {titleText}
         {/if}
       </h1>
     </div>
-    <slot name="header-content" />
+    <slot name="headerContent" />
   </svelte:fragment>
   <div class="divider" />
   <div class="pb-6">

diff --git a/frontend/src/routes/(authenticated)/+page.svelte b/frontend/src/routes/(authenticated)/+page.svelte
@@ -59,8 +59,8 @@
   }
 </script>
 
-<HeaderPage wide title={$t('user_dashboard.title')}>
-  <svelte:fragment slot="header-content">
+<HeaderPage wide titleText={$t('user_dashboard.title')}>
+  <svelte:fragment slot="headerContent">
     <div class="flex gap-4 w-full">
       <div class="grow">
         <ProjectFilter

diff --git a/frontend/src/routes/(authenticated)/org/[org_id]/+page.svelte b/frontend/src/routes/(authenticated)/org/[org_id]/+page.svelte
@@ -117,7 +117,7 @@
 
 <PageBreadcrumb href="/org/list">{$t('org.table.title')}</PageBreadcrumb>
 
-<DetailsPage wide title={org.name}>
+<DetailsPage wide titleText={org.name}>
   <svelte:fragment slot="actions">
     {#if isMember}
       <AddMyProjectsToOrgModal {user} {org} />

diff --git a/frontend/src/routes/(authenticated)/org/list/+page.svelte b/frontend/src/routes/(authenticated)/org/list/+page.svelte
@@ -85,7 +85,7 @@ TODO:
 * Paging
 -->
 
-<HeaderPage wide title={$t('org.table.title')}>
+<HeaderPage wide titleText={$t('org.table.title')}>
   <svelte:fragment slot="actions">
     <AdminContent>
       <a href="/org/create" class="btn btn-success">
@@ -98,7 +98,7 @@ TODO:
     {$t('org.table.title')}
     <Icon icon="i-mdi-account-group-outline" size="text-5xl" y="10%" />
   </svelte:fragment>
-  <svelte:fragment slot="header-content">
+  <svelte:fragment slot="headerContent">
     <FilterBar
       searchKey="search"
       filterKeys={['search']}

diff --git a/frontend/src/routes/(authenticated)/project/[project_code]/+page.svelte b/frontend/src/routes/(authenticated)/project/[project_code]/+page.svelte
@@ -286,7 +286,7 @@
 
 <!-- we need the if so that the page doesn't break when we delete the project -->
 {#if project}
-  <DetailsPage wide title={project.name}>
+  <DetailsPage wide titleText={project.name}>
     <svelte:fragment slot="actions">
       {#if project.isLanguageForgeProject}
         <a href="./{project.code}/viewer" target="_blank"
@@ -365,7 +365,7 @@
         </span>
       </div>
     </svelte:fragment>
-    <svelte:fragment slot="header-content">
+    <svelte:fragment slot="headerContent">
       <BadgeList>
         <ProjectConfidentialityBadge on:click={projectConfidentialityModal.openModal} {canManage} isConfidential={project.isConfidential ?? undefined} />
         <ProjectTypeBadge type={project.type} />