I've been struggling to implement <svelte:component /> with Typescript without success. Here's my current attempt:
Presentation.svelte
<script lang="ts">
export let slides;
</script>
{#each slides as slide}
<svelte:component this={slide.component} {...slide} />
{/each}
+page.svelte
<script lang="ts">
import TitleSlide from '$lib/components/Slides/TitleSlide.svelte';
import Presentation from '$lib/components/Presentation.svelte';
import HeaderSlide from '$lib/components/Slides/HeaderSlide.svelte';
const slides = [
{
component: TitleSlide,
//
},
{
component: HeaderSlide,
}
]
</script>
<Presentation {slides} />
TitleSlide.svelte
<script lang="ts">
import BaseSlide from './BaseSlide.svelte';
export let title: string;
export let subtitle: string;
</script>
<BaseSlide>
<div class="flex flex-col items-center">
<h1 class="text-8xl font-bold">{title}</h1>
<h2 class="text-4xl">{subtitle}</h2>
</div>
</BaseSlide>
HeaderSlide.svelte
<script lang="ts">
import BaseSlide from './BaseSlide.svelte';
export let header: string;
</script>
<BaseSlide>
<h3 class="text-6xl">{header}</h3>
</BaseSlide>
BaseSlide.svelte
<section class="flex h-screen items-center justify-center bg-slate-300">
<slot />
</section>
I am seeking a solution to define all the slides in the slides array within +page.svelte, using props based on the component's type in Typescript. After some research, I discovered that components can be typed using
writable<typeof SvelteComponent>export let slides: writable<typeof SvelteComponent>[];export let slides: Writable<typeof SvelteComponent>[];