Svelteのドキュメントを翻訳してみた

正式に Svelte公式サイトの日本語版が公開されました！

Svelte API 日本語訳

Svelteのドキュメントの一部を機械翻訳してみた、うまく訳せない箇所に関しては手直ししていますが、文章量が多すぎるために細かいところまではチェックできていないので、変になっている箇所があったらコメント欄にてご指摘ください。

参照元：https://svelte.dev/docs

コンポーネント形式

コンポーネントは、Svelteアプリケーションの構成要素です、それらはHTMLのスーパーセットを使用して .svelte ファイルに書き込まれます。

スクリプト、スタイル、マークアップの3つのセクションはすべてオプション（任意）です。

<script>
    // logic goes here
</script>

<style>
    /* styles go here */
</style>

<!-- markup (zero or more items) goes here -->

<script>

<script>ブロックには、コンポーネントインスタンスの作成時に実行されるJavaScriptが含まれます。

最上位レベルで宣言(またはインポート)された変数は、コンポーネントのマークアップから「見える」ようになります。

次の4つの追加ルールがあります。

1. export により、コンポーネントの props を作成します

Svelte は export を使用して変数宣言をプロパティまたは props として利用可能にします。

これは変数がコンポーネントの利用者からアクセス可能になることを意味します。
(詳細については、属性とプロパティのセクションを参照してください)

<script>
  export let foo;

  // Values that are passed in as props
  // are immediately available
  console.log({ foo });
</script>

コンポーネントの利用者がプロパティを指定しない場合に使用されるデフォルト値を指定できます。

開発モード(コンパイラオプションを参照)では、デフォルト値が指定されておらず、利用者も値を指定していない場合、警告が出力されます。

この警告を表示しないようにするには、デフォルト値が指定されていることを確認してください。 (たとえそれがundefinedでも)

<script>
  export let bar = 'optional default value';
  export let baz = undefined;
</script>

const、class、または function をエクスポートすると、コンポーネントの外部から読み取り専用になります。ちなみに、関数式は有効な props です。

<script>
  // these are readonly
  export const thisIs = 'readonly';

  export function greet(name) {
    alert(`hello ${name}!`);
  }

  // this is a prop
  export let format = n => n.toFixed(2);
</script>

props には予約語を使用することができます。

<script>
  let className;

  // creates a `class` property, even
  // though it is a reserved word
  export { className as class };
</script>

2.変数の代入は「リアクティブ」に動作します

コンポーネントの状態を変更して再レンダリングを実行するには、ローカルに宣言した変数に代入するだけです。

変数を(count += 1)と更新するのも、プロパティに(obj.x = y)と代入するのも同じ効果があります。

Svelte のリアクティビティは代入に基づいているため、配列の.push()と.splice()メソッドによる変更は反映されません。

これを回避するためのオプションはチュートリアルにあります。

3. $:ステートメントによるリアクティブ化

あらゆるトップレベル（ブロックや関数の内部ではなく）のステートメントは、$:プレフィクスをつけることにより、リアクティブになります。

リアクティブステートメントは依存している値が変わったときにはいつでも、コンポーネントが更新される直前に実行されます。

<script>
  export let title;

  // this will update `document.title` whenever
  // the `title` prop changes
  $: document.title = title;

  $: {
    console.log(`multiple statements can be combined`);
    console.log(`the current title is ${title}`);
  }
</script>

ステートメントが宣言されていない変数への代入だけで構成されている場合、Svelteはユーザーに代わってlet宣言を注入します。

<script>
  export let num;

  // we don't need to declare `squared` and `cubed`
  // — Svelte does it for us
  $: squared = num * num;
  $: cubed = squared * num;
</script>

4．$プレフィクスを利用すると store にアクセスできます

store への参照がある場合はいつでも、$プレフィクスを付ければコンポーネントの内部からアクセスできます。

これにより Svelte はプレフィクス付きの変数を宣言し、必要に応じて store の購読と解除を設定します。

注意として store は、例えば if ブロックや関数などの内部ではなく、コンポーネントの最上位レベルで宣言する必要があります。

ローカル変数（storeの値ではなく）には$プレフィクスを付ける必要はありません。

<script>
  import { writable } from 'svelte/store';

  const count = writable(0);
  console.log($count); // logs 0

  count.set(1);
  console.log($count); // logs 1
</script>

テンプレート構文

タグ

<div> などの小文字のタグはHTMLを、<Widget> <Namespace.Widget> などの大文字を含むタグはコンポーネントを意味します。

属性値とプロパティ

デフォルトでは、属性はHTMLのものとまったく同じように機能します。

<div class="foo">
  <button disabled>can't touch this</button>
</div>

HTMLと同様に、値は引用符で囲まれていなくても構いません。

<input type=checkbox>

属性値にはJavaScriptを含めることができます。

<a href="page/{p}">page {p}</a>

あるいは、JavaScriptの式そのものでも。

<button disabled={!clickable}>...</button>

標準のHTMLのシンタックスハイライトが失敗する場合のために、引用符の使用は許可されています。

<button disabled="{number !== 42}">...</button>

属性名と値が一致する場合、それらを省略することができます。

<!-- これらは等価です -->
<button disabled={disabled}>...</button>
<button {disabled}>...</button>

慣例により、コンポーネントに渡される値は、属性ではなくプロパティまたは props と呼ばれます、これはDOMの機能です。

属性値と同様に name={name} を {name} に置き換えることができます。

<Widget foo={bar} answer={42} text="hello"/>

スプレッド属性を使用すると、多数の属性またはプロパティを一度に要素またはコンポーネントに渡すことができます。要素またはコンポーネントは、通常のものと散在する複数のスプレッド属性を持つことができます。

<Widget {...things}/>

テキスト式

テキストにはJavaScript式を含めることもできます。

<h1>Hello {name}!</h1>
<p>{a} + {b} = {a + b}.</p>

{#if}

{#if} ブロックでコンテンツを囲むことにより、条件付きでレンダリングすることができます。

追加の条件を{:else if expression}で、必要に応じて最後に{:else}句を使うことも出来ます。

{#if porridge.temperature > 100}
  <p>too hot!</p>
{:else if 80 > porridge.temperature}
  <p>too cold!</p>
{:else}
  <p>just right!</p>
{/if}

{#each ...}

値のリストを繰り返し処理するには、{#each}ブロックを使用します。

{#each}ブロックはインデックスを指定することもでき、2番目の引数でarray.map(...)コールバックと同じものを利用することも出来ます。

<!-- (item.id) が Array.map のコールバックです -->

{#each items as item, i (item.id)}
  <li>{i + 1}: {item.name} x {item.qty}</li>
{/each}

{#each}ブロックは{:else}節を持つこともでき、それはリストが空の場合に表示されます。

{#each todos as todo}
  <p>{todo.text}</p>
{:else}
  <p>No tasks today!</p>
{/each}

{#await}

{#await}ブロックを使用すると、Promiseの3つの状態...pending、fulfilled、rejected に分岐できます。

{#await promise}
  <!-- promise is pending -->
  <p>waiting for the promise to resolve...</p>
{:then value}
  <!-- promise was fulfilled -->
  <p>The value is {value}</p>
{:catch error}
  <!-- promise was rejected -->
  <p>Something went wrong: {error.message}</p>
{/await}

{:catch}ブロックは Promise が reject 時に何もレンダリングする必要が無い場合（もしくはエラーがあり得ない場合）に省略することができます。

pending状態を気にしない場合は、最初のブロックを省略することもできます

{#await promise then value}
  <p>The value is {value}</p>
{/await}

{@html ...}

テキスト式では<と>がエスケープされますが、HTML式ではそうではありません。

SvelteはHTMLをインジェクトする前に式をサニタイズしません。
データが信頼できないソースからのものである場合は、サニタイズする必要があります。
そうしないと、ユーザーをXSSの脆弱性にさらしていることになります。

{@debug ...}

{@debug ...}タグはconsole.log(...)に代わるものを提供しています。
特定の変数の値が変わるたびにログに記録し、devtoolsが開いている場合はコードの実行を一時停止します。

コンマ区切りの変数名のリスト（任意の式ではありません）を受け入れます。

<script>
let user = {
  firstname: 'Ada',
  lastname: 'Lovelace'
};
</script>

{@debug user}

<h1>Hello {user.firstname}!</h1>

{@debug ...}コンマ区切りの変数名のリスト（任意の式ではありません）を受け入れます。

<!-- Compiles -->
{@debug user}
{@debug user1, user2, user3}

<!-- WON'T compile -->
{@debug user.firstname}
{@debug myArray[0]}
{@debug !isReady}
{@debug typeof user === 'object'}

引数なしの{@debug}タグは、与えられた引数とは対照的に、何らかの状態の変更をきっかけにデバッガーステートメントを挿入します。

ディレクティブ

属性と同様に、要素はディレクティブを持つことができ、それは何らかの方法で要素の振る舞いを制御します。

on：イベント名

on:ディレクティブを使用してDOMイベントを監視します。

<script>
let count = 0;

function handleClick(event) {
  count += 1;
}
</script>

<button on:click={handleClick}>
  count: {count}
</button>

ハンドラーは、パフォーマンスを低下させることなくインラインで宣言できます。
属性と同様に、構文の強調表示のためにディレクティブ値を引用符で囲むことができます。

<button on:click="{() => count += 1}">
  count: {count}
</button>

|文字を使ってDOMイベントに修飾子を追加します。

<form on:submit|preventDefault={handleSubmit}>
  <!-- the `submit` event's default is prevented,
  so the page won't reload -->
</form>

以下の修飾子が利用可能です。

• preventDefault- event.preventDefault()ハンドラを実行する前に呼び出す
• stopPropagation- event.stopPropagation()、イベントが次の要素に到達するのを防ぎます
• passive - タッチ/ホイールイベントでのスクロールパフォーマンスを向上させます（Svelteは安全な場所に自動的に追加します）。
• capture- バブリング段階ではなくキャプチャ段階でハンドラーを起動します
• once - 最初の実行後にハンドラを削除する

修飾子はまとめて繋いで指定することができます。on:click|once|capture={...}

値を指定せずに on: ディレクティブを使用すると、コンポーネントはイベントを転送します。つまり、コンポーネントの利用者がイベントをリッスンできます。

<button on:click>
  The component itself will emit the click event
</button>

同じイベントに対して複数のイベントリスナーを持つことができます。

<script>
  let counter = 0;
  function increment() {
    counter = counter + 1;
  }

  function track(event) {
    trackEvent(event)
  }
</script>

<button on:click={increment} on:click={track}>Click me!</button>

bind:プロパティ

データは通常、親から子へと流れます。bind:ディレクティブを使用すると、データを子から親へ逆方向に流すことができます。ほとんどのバインディングは特定の要素に固有です。

最も単純なバインディングは、入力などのプロパティの値を反映します。

<input bind:value={name}>
<textarea bind:value={text}></textarea>

<input type="checkbox" bind:checked={yes}>

名前が値と一致する場合は、省略形を使用できます。

<!-- These are equivalent -->
<input bind:value={value}>
<input bind:value>

数値入力は強制されます、input.valueはDOMでは文字列ですが、Svelteはこれを数値として扱います。入力が空または無効の場合、(type="number"では)値はundefinedです。

<input type="number" bind:value={num}>
<input type="range" bind:value={num}>

Binding <select>

値バインドは、選択されたのvalueプロパティに対応し、任意の値(DOMのように文字列だけでなく)を指定できます。

<select bind:value={selected}>
    <option value={a}>a</option>
    <option value={b}>b</option>
    <option value={c}>c</option>
</select>

要素は、チェックボックスグループと同様に動作します。

<select multiple bind:value={fillings}>
    <option value="Rice">Rice</option>
    <option value="Beans">Beans</option>
    <option value="Cheese">Cheese</option>
    <option value="Guac (extra)">Guac (extra)</option>
</select>

の値がテキストの内容と一致する場合は、属性を省略できます。

<select multiple bind:value={fillings}>
    <option>Rice</option>
    <option>Beans</option>
    <option>Cheese</option>
    <option>Guac (extra)</option>
</select>

contenteditable属性を持つ要素は、innerHTMLとtextContentのバインディングをサポートします。

<div contenteditable="true" bind:innerHTML={html}></div>

メディア要素バインディング

メディア要素 (<audio> と <video>) には読み取り専用の4つの独自のバインディングがあります。

• duration (readonly) — ビデオの合計時間（秒）
• buffered (readonly) — {start, end} オブジェクトを格納した配列
• seekable (readonly) — 同上
• played (readonly) — 同上

...そして３つの双方向バインディングがあります

• currentTime — ビデオの現在地点（秒）
• paused — 自明
• volume — 0から1の間の値

<video
    src={clip}
    bind:duration
    bind:buffered
    bind:seekable
    bind:played
    bind:currentTime
    bind:paused
    bind:volume
></video>

ブロックレベル要素バインディング

ブロックレベル要素は4つの読み取り専用バインディングを持っています、それらを利用したテクニックとしてこのような例があります

• clientWidth
• clientHeight
• offsetWidth
• offsetHeight

<div
    bind:offsetWidth={width}
    bind:offsetHeight={height}
>
    <Chart {width} {height}/>
</div>

bind:group

bind:groupを使うと同時に入力を行うことができます。

<script>
    let tortilla = 'Plain';
    let fillings = [];
</script>

<!-- grouped radio inputs are mutually exclusive -->
<input type="radio" bind:group={tortilla} value="Plain">
<input type="radio" bind:group={tortilla} value="Whole wheat">
<input type="radio" bind:group={tortilla} value="Spinach">

<!-- grouped checkbox inputs populate an array -->
<input type="checkbox" bind:group={fillings} value="Rice">
<input type="checkbox" bind:group={fillings} value="Beans">
<input type="checkbox" bind:group={fillings} value="Cheese">
<input type="checkbox" bind:group={fillings} value="Guac (extra)">

bind:this

DOMノードへの参照を取得するには、bind:thisを使用します。

<script>
    import { onMount } from 'svelte';

    let canvasElement;

    onMount(() => {
        const ctx = canvasElement.getContext('2d');
        drawStuff(ctx);
    });
</script>

<canvas bind:this={canvasElement}></canvas>

class:name

class:ディレクティブを使用すると、要素のクラスを簡単に切り替えることができます。

<!-- These are equivalent -->
<div class="{active ? 'active' : ''}">...</div>
<div class:active={active}>...</div>

<!-- Shorthand, for when name and value match -->
<div class:active>...</div>

<!-- Multiple class toggles can be included -->
<div class:active class:inactive={!active} class:isAdmin>...</div>

use:action

action = (node: HTMLElement, parameters: any) => {
    update?: (parameters: any) => void,
    destroy?: () => void
}

アクションは要素が作成されたときに呼び出される関数です、戻り値にdestory メソッドがある場合、その要素が unomunt された後に呼び出されます。

<script>
    function foo(node) {
        // 要素がDOMに追加された

        return {
            destroy() {
                // 要素がDOMから削除された
            }
        };
    }
</script>

<div use:foo></div>

アクションにはパラメータを指定できます。戻り値に update メソッドがある場合、これらのパラメータが変更されるたびに、svelte がマークアップに更新を適用した直後にこのメソッドが呼び出されます。

心配しないでください、この事実は foo 関数をコンポーネントのインスタンス毎に再宣言することを意味しません、svelteは、state に依存しないすべての関数をコンポーネント定義から取り出しています。

※コンポーネント内の関数でも、stateに依存してない限りはコンポーネントとは別に定義されているので、再宣言する必要はないという意味？

<script>
    export let bar;

    function foo(node, bar) {
        // the node has been mounted in the DOM

        return {
            update(bar) {
                // the value of `bar` has changed
            },

            destroy() {
                // the node has been removed from the DOM
            }
        };
    }
</script>

<div use:foo={bar}></div>

transition:fn

トランジションは、状態の変化の結果DOMが追加もしくは削除された際に発火します。

ブロック内の要素は、現在のすべての遷移が完了するまでDOMに保持されます。

transition:ディレクティブは双方向のトランジションを示し、トランジション中にスムーズに反転できることを意味します。

{#if visible}
    <div transition:fade>
        fades in and out
    </div>
{/if}

デフォルトでは、イントロトランジションは最初のレンダリングでは再生されません。この動作を変更するには、コンポーネントの作成時にintro:trueを設定します。

Transition parameters

アクションと同様に、トランジションにもパラメータを指定できます。

(2重の{{カーリー}}は特別な構文ではありません。これは、式タグ内のオブジェクトリテラルです。)

{#if visible}
    <div transition:fade="{{ duration: 2000 }}">
        flies in, fades out over two seconds
    </div>
{/if}

Custom transition functions

トランジションでは、カスタム関数を使用できます。返されたオブジェクトにcss関数がある場合、Svelteはその要素で再生されるCSSアニメーションを作成します。

cssに渡されるt引数は、イージング関数が適用された後に0から1の間の値をとります。
開始時は0から1、終了時には1から0の値をもちます。つまり1は、トランジションが適用されていない通常の状態です。u引数は1-tに等しくなります。

関数は、トランジションが始まる前にtとuの引数を持って繰り返し呼び出されます。

<script>
    import { elasticOut } from 'svelte/easing';

    export let visible;

    function whoosh(node, params) {
        const existingTransform = getComputedStyle(node).transform.replace('none', '');

        return {
            delay: params.delay || 0,
            duration: params.duration || 400,
            easing: params.easing || elasticOut,
            css: (t, u) => `transform: ${existingTransform} scale(${t})`
        };
    }
</script>

{#if visible}
    <div in:whoosh>
        whooshes in
    </div>
{/if}

カスタムトランジション関数はトランジションの間、同じ引数tとuを持つtick関数を返すこともできます。

tickの代わりにcssを使用できる場合はそうしてください。CSSアニメーションはメインスレッド外で実行することが可能で、低速デバイスでの jank を防ぐことができます。

<script>
    export let visible = false;

    function typewriter(node, { speed = 50 }) {
        const valid = (
            node.childNodes.length === 1 &&
            node.childNodes[0].nodeType === 3
        );

        if (!valid) return {};

        const text = node.textContent;
        const duration = text.length * speed;

        return {
            duration,
            tick: (t, u) => {
                const i = ~~(text.length * t);
                node.textContent = text.slice(0, i);
            }
        };
    }
</script>

{#if visible}
    <p in:typewriter="{{ speed: 20 }}">
        The quick brown fox jumps over the lazy dog
    </p>
{/if}

トランジションがトランジションオブジェクトではなく関数を返す場合、その関数は次のマイクロタスクで呼び出されます。これにより、複数のトランジションを調整してクロスフェード効果を得ることができます。

Transition events

「トランジション」を持つ要素は、標準のDOMイベントに加えて次のイベントを利用できます。

• introstart
• introend
• outrostart
• outroend

{#if visible}
    <p
        transition:fly="{{ y: 200, duration: 2000 }}"
        on:introstart="{() => status = 'intro started'}"
        on:outrostart="{() => status = 'outro started'}"
        on:introend="{() => status = 'intro ended'}"
        on:outroend="{() => status = 'outro ended'}"
    >
        Flies in and out
    </p>
{/if}

トランジションが再生されるのは、属しているブロックが作成または破棄されたときだけです。親ブロックが作成または破棄されたときは再生されません。

{#if x}
    {#if y}
        <p transition:fade>
            fades in and out when x or y change
        </p>

        <p transition:fade|local>
            fades in and out only when y changes
        </p>
    {/if}
{/if}

in:fn/out:fn

transition:と似ていますが、DOMに入る要素(in:)と出る要素(out:)にのみ適用されます。

transition:とは異なり、in:とout:が適用されたトランジションは双方向ではありません。トランジションの進行中にブロックの外に出た場合、イントランジションはアウトトランジションに沿って「再生」され、逆方向にはなりません。出力遷移が中止されると、遷移は最初から再開されます。

{#if visible}
    <div in:fly out:fade>
        flies in, fades out
    </div>
{/if}

animate:

アニメーションは、キー設定された各ブロックの内容の順序が変更されたときにトリガされます。アニメーションは、要素が削除されたときには実行されず、各ブロックのデータが並べ替えられたときにのみ実行されます。アニメーターディレクティブは、キー設定された各ブロックの直接の子である要素上に配置する必要があります。

<!-- When list is reordered the animation will run-->
{#each list as item, index (item)}
    <li animate:flip>{item}</li>
{/each}

アニメーションは、Svelteの組み込みアニメーション関数またはカスタムアニメーション関数で使用できます。

Animation Parameters

アクションやトランジションと同様に、アニメーションにもパラメータを指定できます。

(2重の{{カーリー}}は特別な構文ではありません。これは、式タグ内のオブジェクトリテラルです。)

{#each list as item, index (item)}
    <li animate:flip="{{ delay: 500 }}">{item}</li>
{/each}

Custom animation functions

アニメーションでは、ノード、アニメーションオブジェクト、およびパラメータを引数として提供するカスタム関数を使用できます。アニメーションパラメータは、それぞれのfromおよびtoプロパティを含むオブジェクトです。エレメントの開始位置と終了位置の形状を記述するDOMRectを含んでいます。fromプロパティは、開始位置にあるエレメントのDOMRectです。toプロパティは、リストが並べ替えられ、DOMが更新された後の終了位置にある要素のDOMRectです。

返却されたオブジェクトにcssメソッドがあった場合、Svelteはその要素で実行されるCSSアニメーションを作成します。

cssに渡される引数tは、イージング関数が適用された後に0および1から始まる値です。u引数は1-tに等しくなります。

この関数はアニメーションの開始前に、引数tとuを変えて繰り返し呼び出されます。

<script>
    import { cubicOut } from 'svelte/easing';

    function whizz(node, { from, to }, params) {

        const dx = from.left - to.left;
        const dy = from.top - to.top;

        const d = Math.sqrt(dx * dx + dy * dy);

        return {
            delay: 0,
            duration: Math.sqrt(d) * 120,
            easing: cubicOut,
            css: (t, u) =>
                `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t*360}deg);`
        };
    }
</script>

{#each list as item, index (item)}
    <div animate:whizz>{item}</div>
{/each}

カスタムアニメーション関数は、アニメーション中に同じtおよびu引数で呼び出されるtick関数を返すこともできます。

tickの代わりにcssを使用できる場合はそうしてください。CSSアニメーションはメインスレッド外で実行することが可能で、低速デバイスでの jank を防ぐことができます。

<script>
    import { cubicOut } from 'svelte/easing';

    function whizz(node, { from, to }, params) {

        const dx = from.left - to.left;
        const dy = from.top - to.top;

        const d = Math.sqrt(dx * dx + dy * dy);

        return {
        delay: 0,
        duration: Math.sqrt(d) * 120,
        easing: cubicOut,
        tick: (t, u) =>
            Object.assign(node.style, {
                color: t > 0.5 ? 'Pink' : 'Blue'
            });
    };
    }
</script>

{#each list as item, index (item)}
    <div animate:whizz>{item}</div>
{/each}

コンポーネントディレクティブ

on:eventname

コンポーネントはcreateEventDispatcherを利用するか、DOMイベントを伝播させることでイベントを発火できます。コンポーネントイベントの監視はDOMイベントの監視と同じように出来ます。

<SomeComponent on:whatever={handler}/>

DOMイベントの場合と同様に、on:ディレクティブに値を指定していない場合、コンポーネントはイベントを伝播します、つまりコンポーネントの利用者がイベントを監視できます。

<SomeComponent on:whatever/>

bind:property

同様にコンポーネントのpropsをバインドすることもできます。

<Keypad bind:value={pin}/>

bind:this

コンポーネントはbind:thisもサポートしているため、コンポーネントインスタンスをプログラムから操作できます。

ボタンが最初にレンダリングされてエラーが投げられた時、cartはまだundefinedのため、{Empty shopping cart}を実行できないことに注意してください。

<ShoppingCart bind:this={cart}/>

<button on:click={() => cart.empty()}>
    Empty shopping cart
</button>

コンポーネントは要素と同様に子コンテンツを持つことが出来ます。

コンテンツは、<slot>要素を使用して子コンポーネント内で公開されます。この要素には、子が指定されていない場合に描画されるフォールバックコンテンツを含めることができます。

<!-- App.svelte -->
<Widget>
    <p>this is some child content</p>
</Widget>

<!-- Widget.svelte -->
<div>
    <slot>
        this will be rendered if someone does <Widget/>
    </slot>
</div>

名前付きスロットにより、特定の領域をターゲットにできます。また、フォールバック・コンテンツを持つこともできます。

<!-- App.svelte -->
<Widget>
    <h1 slot="header">Hello</h1>
    <p slot="footer">Copyright (c) 2019 Svelte Industries</p>
</Widget>

<!-- Widget.svelte -->
<div>
    <slot name="header">No header was provided</slot>
    <p>Some content between header and footer</p>
    <slot name="footer"></slot>
</div>

スロットは0回以上レンダリングでき、propsを使用して値を親に戻すことができます。親はlet:ディレクティブを使用してスロットテンプレートに値を公開します。

通常のショートハンドが適用されます - let:item は let:item={item}と等価であり、<slot {item}> は <slot item={item}>と等価です。

<!-- App.svelte -->
<FancyList {items} let:item={item}>
    <div>{item.text}</div>
</FancyList>

<!-- FancyList.svelte -->
<ul>
    {#each items as item}
        <li class="fancy">
            <slot item={item}></slot>
        </li>
    {/each}
</ul>

名前付きスロットは値を公開することもできます。let:ディレクティブはslot属性を持つ要素に適用されます。

<!-- App.svelte -->
<FancyList {items}>
    <div slot="item" let:item={item}>{item.text}</div>
    <p slot="footer">Copyright (c) 2019 Svelte Industries</p>
</FancyList>

<!-- FancyList.svelte -->
<ul>
    {#each items as item}
        <li class="fancy">
            <slot name="item" item={item}></slot>
        </li>
    {/each}
</ul>

<slot name="footer"></slot>

<svelte:self>

<svelte:self>要素は、コンポーネントは再帰的に自分自身を含めることができます。

マークアップの最上位レベルに表示することはできません。無限ループを防ぐには、if または各ブロック内に配置する必要があります。

<script>
    export let count;
</script>

{#if count > 0}
    <p>counting down... {count}</p>
    <svelte:self count="{count - 1}"/>
{:else}
    <p>lift-off!</p>
{/if}

<svelte:component>

<svelte:component>要素は、プロパティーとして指定されたコンポーネントコンストラクタを使用して、コンポーネントを動的に描画します。thisプロパティが変更されると、コンポーネントは破棄されて再作成されます。

もしthisが falsy だった場合は、コンポーネントは描画されません。

<svelte:component this={currentSelection.component} foo={bar}/>

<svelte:window>

<svelte:window>要素を使用すると、コンポーネントが破棄されたときにイベントリスナーを削除したり、サーバー側でのレンダリング時にwindowが存在するかどうかを確認したりすることなく、イベントリスナーをwindowオブジェクトに追加できます。

<script>
    function handleKeydown(event) {
        alert(`pressed the ${event.key} key`);
    }
</script>

<svelte:window on:keydown={handleKeydown}/>

以下のプロパティにバインドすることもできます

• innerWidth
• innerHeight
• outerWidth
• outerHeight
• scrollX
• scrollY
• online — window.navigator.onLine のエイリアスです

scrollX と scrollY 以外は全て読み取り専用です.

<svelte:window bind:scrollY={y}/>

<svelte:body>

<svelte:window>と同様に、このエレメントを使用すると document.body のイベントに対してイベントにリスナーを追加できます。windowで発火しない mouseenter や mouseleaveなどです。

<svelte:body
    on:mouseenter={handleMouseenter}
    on:mouseleave={handleMouseleave}
/>

<svelte:head>

この要素を使用すると、要素を document.head に挿入できます。headコンテンツはサーバ側のレンダリングでは、メインのhtmlコンテンツとは別に表示されます。

<svelte:head>
    <link rel="stylesheet" href="tutorial/dark-theme.css">
</svelte:head>

<svelte:options>

<svelte:option>要素は、コンポーネント単位のコンパイラオプションを指定する場所を提供します。詳細は、コンパイラのセクションを参照してください。利用可能なオプションは次のとおりです。

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

<svelte:options tag="my-custom-element"/>