I have several Svelte components, for example: Melon.svelte
, Cherry.svelte
, Phone.svelte
. In a parent component, FruitBox.svelte
, using <svelte:component>
, I want to be able to dynamically render only fruit components, but not others.
Is there a way to annotate my components in some way, that would allow to semantically differentiate them?
<!-- FruitBox.svelte --> <script lang="ts"> import { onMount } from 'svelte'; import Cherry from './Cherry.svelte'; import Melon from './Melon.svelte'; import Phone from './Phone.svelte'; // can this be more specific than "any"? let fruitType: any; onMount(() => { fruitType = pickRandomFruit(); }) function pickRandomFruit(): any // I want type annotation / compile time check here { // return Phone; <-- this would also work, but I want to limit that return (Math.random() >= 0.5) ? Melon : Cherry; }</script><svelte:component this={fruitType} />
I understand Svelte doesn't have inheritance -- however, I don't need to share functionality or elements between components, but rather simple type annotation. Can this be achieved?