Part 3 / Special elements / <svelte:options>

<svelte:options> 要素はコンパイラのオプションを指定することができます。

例として immutable オプションを使用します。このアプリでは、新しいデータを受け取るたびに <Todo> コンポーネントが点滅します。アイテムの1つをクリックすると、更新された todos 配列が作成され、done 状態が切り替わります。これにより、他の <Todo> アイテムも点滅しますが、DOM は変更されません。

これを最適化するには、<Todo> コンポーネントに immutable データを期待するように指示します。これは、todo プロパティを 変更 しないことを約束していることを意味します。

これを Todo.svelte ファイルの先頭に追加します。

<svelte:options immutable={true}/>

お好みであれば、これを <svelte:options immutable/> と短くしても構いません。

これで、Todos をクリックして切り替えると、更新されたコンポーネントだけが点滅するようになりました。

ここで設定できるオプションは

• immutable={true} — 変更可能なデータは使用できません、コンパイラは値が変更されたかどうかを判断するために単純な参照等価性チェックを行うことができます。
• immutable={false} — デフォルトです。Svelteは、変更可能なオブジェクトが変更されたかどうかについて、より保守的になります。
• accessors={true} — コンポーネントのプロパティ(props)のゲッターとセッターを追加します。
• accessors={false} — デフォルトの値です。
• namespace="..." — このコンポーネントが使用される名前空間。最も一般的なものは "svg" です。
• tag="..." — このコンポーネントをカスタム要素としてコンパイルする際に使用する名前。

これらのオプションの詳細については、API リファレンスを参照してください。