svelteでpropsにSvelteComponentを渡すときの備忘録（svelte:componentを使う時）

備忘録です。
slotを使えばいいのでほとんど出番はないと思います。

読み込みたいHogeコンポーネント

<script lang="ts">
  export let hoge: string
</script>

<p>{hoge}</p>

hogeがexportされています。
このpropsは必須です。

コンポーネントとそのpropsを受け取るChildコンポーネント

<script lang="ts">
  import type { SvelteComponent, ComponentProps } from 'svelte'

  type Component = $$Generic<typeof SvelteComponent> //point
  export let component: Component
  export let componentProps: ComponentProps<InstanceType<Component>> //point
</script>

<svelte:component this={component} {...componentProps} />

typeof SvelteComponentとComponentProps<InstanceType<Component>>がポイントです。
typeofのほうはまぁそやろなという感じですが、InstanceTypeの方は普段classを使わないので知りませんでした。
ComponentPropsはその名の通りコンポーネントのpropsの型を得るやつです。こっちは使い所がありそうです。

使う側のParentコンポーネント

<script lang="ts">
  import Child from './Child.svelte'
  import Hoge from './Hoge.svelte'
</script>
<Child
  component={Hoge}
  componentProps={{
    hoge: 'hoge', //point
  }}
/>

componentPropsに型がつくのがポイントです。

最初に書いた通り、slotで事足りると思うのでほとんど使うことはないと思います。
特定の何個かのコンポーネントのどれかしか受け取りたくない（slotでは自由度が高すぎる）　みたいな時に使えるかもしれません。