refactor: use render children() instead of slot

braden-w · Dec 17, 2024 · d0b1dc8 · d0b1dc8
1 parent 5e39808
commit d0b1dc8
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/apps/app/src/routes/(config)/+layout.svelte b/apps/app/src/routes/(config)/+layout.svelte
@@ -4,6 +4,8 @@ import NavItems from '$lib/components/NavItems.svelte';
 import WhisperingButton from '$lib/components/WhisperingButton.svelte';
 import { recorder } from '$lib/stores/recorder.svelte';
 import { cn } from '$lib/utils.js';
+
+let { children } = $props();
 </script>
 
 <header
@@ -35,4 +37,4 @@ import { cn } from '$lib/utils.js';
 	<NavItems class="-mr-4" />
 </header>
 
-<slot />
+{@render children()}
diff --git a/apps/app/src/routes/(config)/settings/+layout.svelte b/apps/app/src/routes/(config)/settings/+layout.svelte
@@ -3,6 +3,8 @@ import { Button } from '$lib/components/ui/button/index.js';
 import { Separator } from '$lib/components/ui/separator/index.js';
 import SidebarNav from './SidebarNav.svelte';
 
+let { children } = $props();
+
 const sidebarNavItems = [
 	{ title: 'General', href: '/settings' },
 	{ title: 'Recording', href: '/settings/recording' },
@@ -71,7 +73,7 @@ const versionPromise = (async () => {
 			<SidebarNav items={sidebarNavItems} />
 		</aside>
 		<div class="flex-1 lg:max-w-2xl">
-			<slot />
+			{@render children()}
 		</div>
 	</div>
 </main>
diff --git a/apps/app/src/routes/+layout.svelte b/apps/app/src/routes/+layout.svelte
@@ -13,6 +13,8 @@ import type { ToasterProps } from 'svelte-sonner';
 import { Toaster } from 'svelte-sonner';
 import '../app.css';
 
+let { children } = $props();
+
 onNavigate((navigation) => {
 	if (!document.startViewTransition) return;
 
@@ -71,7 +73,7 @@ const TOASTER_SETTINGS = {
 </button>
 
 <div class="xxs:flex hidden min-h-screen flex-col items-center gap-2">
-	<slot />
+	{@render children()}
 </div>
 
 <Toaster class="xs:block hidden" theme={$mode} {...TOASTER_SETTINGS} />