SvelteのDynamic Componentがわかりづらかったので解説

Svelte 1.45.0にて実装されたDynamic Componentがドキュメントもなくてわかりづらかったので、コンポーネントを作ってみて調べました。

Dynamic Componentとは

「渡したデータがtruthyならComponent1として、falsyならComponent2としてコンパイルする」という動作をするようです。

<:Component {switcher ? Component1 : Component2}></:Component>

これをbuild/dynamic.jsにコンパイルしたとします。

<script src="./build/dynamic.js"></script>
<script>
new Dynamic({
  target: document.querySelector('dynamic'),
  data: {
    switcher: true,
    Component1: AnalogClock,
    Component2: DigitalClock,
  }
});
</script>
<dynamic></dynamic>

switcherをうまく使えば、ルーティングに合わせてコンポーネントを変えたり、遅延ロードとくっつけたりできるようです。

上のコンポーネントを実際に作ってみました。

Dynamic Component

チェックボックスに応じてアナログ時計とデジタル時計が切り替わるアプリです。

注意点

:Componentという部分は変えてはいけないようです。<:Dynamic>などとするとうまく動きません。

また、上の例で言うところのComponent1にdataが渡せません。これに関してはコードを見る限り簡単に直せそうなのでなんとかしてほしいですね。