await expressions - コンポーネント内の非同期処理

// svelte.config.js
import type { Config } from '@sveltejs/kit';

const config: Config = {
	compilerOptions: {
		experimental: {
			async: true,
		},
	},
};

export default config;

<script lang="ts">
  interface User {
    id: string;
    name: string;
  }

  // トップレベルで直接awaitが使用可能
  const user: User = await fetchUser();

  async function fetchUser(): Promise<User> {
    const response = await fetch('/api/user');
    return response.json();
  }
</script>

<h1>ようこそ、{user.name}さん</h1>

<script lang="ts">
  async function getTitle(): Promise<string> {
    const response = await fetch('/api/title');
    const data = await response.json();
    return data.title;
  }
</script>

<!-- マークアップ内で直接await -->
<h1>{await getTitle()}</h1>

<script lang="ts">
  let userId = $state('user-1');

  // $derived内でもawaitが使用可能
  let userData = $derived(await fetchUser(userId));

  async function fetchUser(id: string) {
    const response = await fetch(`/api/users/${id}`);
    return response.json();
  }
</script>

<select bind:value={userId}>
  <option value="user-1">ユーザー1</option>
  <option value="user-2">ユーザー2</option>
</select>

<p>名前: {userData.name}</p>

<script lang="ts">
  let a = $state(1);
  let b = $state(2);

  async function add(x: number, y: number): Promise<number> {
    // 人工的な遅延
    await new Promise((resolve) => setTimeout(resolve, 500));
    return x + y;
  }
</script>

<input type="number" bind:value={a} />
<input type="number" bind:value={b} />

<!-- aを変更しても、add(a, b)が完了するまでUIは更新されない -->
<p>{a} + {b} = {await add(a, b)}</p>

<!-- aを1から2に変更した直後の不整合な状態 -->
<p>2 + 2 = 3</p>
<!-- ← 計算結果がまだ古い -->

<!-- 計算が完了してから更新 -->
<p>2 + 2 = 4</p>

<script lang="ts">
  async function fetchPosts() {
    // 1秒かかる
    await new Promise(r => setTimeout(r, 1000));
    return [{ title: 'Post 1' }];
  }

  async function fetchComments() {
    // 2秒かかる
    await new Promise(r => setTimeout(r, 2000));
    return [{ text: 'Comment 1' }];
  }
</script>

<!-- これらは並行して実行される（合計2秒で完了） -->
<ul>
  {#each await fetchPosts() as post}
    <li>{post.title}</li>
  {/each}
</ul>

<ul>
  {#each await fetchComments() as comment}
    <li>{comment.text}</li>
  {/each}
</ul>

<script lang="ts">
  // 初回は順次実行（posts → comments の順）
  // その後はそれぞれ独立して更新（依存する状態が変わったものだけ）
  let posts = $derived(await fetchPosts());
  let comments = $derived(await fetchComments());
</script>

<script lang="ts">
  async function fetchData() {
    await new Promise(r => setTimeout(r, 2000));
    return { message: 'データが読み込まれました' };
  }
</script>

<svelte:boundary>
  {#snippet pending()}
    <p>読み込み中...</p>
  {/snippet}

  <p>{(await fetchData()).message}</p>
</svelte:boundary>

<script lang="ts">
  let query = $state('');

  async function search(q: string) {
    const response = await fetch(`/api/search?q=${q}`);
    return response.json();
  }

  // 検索結果
  let results = $derived(await search(query));

  // 非同期処理が進行中かどうか
  let isSearching = $derived($effect.pending() > 0);
</script>

<input bind:value={query} placeholder="検索..." />

{#if isSearching}
  <span class="spinner">検索中...</span>
{/if}

<ul>
  {#each results as result}
    <li>{result.title}</li>
  {/each}
</ul>

<script lang="ts">
  import { tick, settled } from 'svelte';

  let updating = $state(false);
  let data = $state({ value: 0 });

  async function handleClick() {
    updating = true;

    // tickでupdatingの変更をUIに反映
    await tick();

    // データを更新
    data = { value: data.value + 1 };

    // すべての非同期更新が完了するまで待機
    await settled();

    updating = false;
  }
</script>

<button onclick={handleClick} disabled={updating}>
  {updating ? '更新中...' : '更新'}
</button>

<p>値: {data.value}</p>

<script lang="ts">
  async function fetchData() {
    const response = await fetch('/api/data');
    if (!response.ok) {
      throw new Error('データの取得に失敗しました');
    }
    return response.json();
  }
</script>

<svelte:boundary>
  {#snippet failed(error)}
    <p class="error">エラー: {error.message}</p>
    <button onclick={() => location.reload()}>再読み込み</button>
  {/snippet}

  {#snippet pending()}
    <p>読み込み中...</p>
  {/snippet}

  <div>
    <h1>{(await fetchData()).title}</h1>
  </div>
</svelte:boundary>

// server.ts
import { render } from 'svelte/server';
import App from './App.svelte';

// awaitで非同期レンダリングを待機
const { head, body } = await render(App);

<svelte:boundary>
  {#snippet pending()}
    <!-- SSR時はこれがレンダリングされる -->
    <p>読み込み中...</p>
  {/snippet}

  <!-- SSR時は無視される -->
  <p>{await fetchData()}</p>
</svelte:boundary>

<script lang="ts">
  import { fork, type Fork } from 'svelte';
  import Menu from './Menu.svelte';

  let open = $state(false);
  let pending: Fork | null = null;

  function preload() {
    // フォークを作成して事前に非同期処理を開始
    pending ??= fork(() => {
      open = true;
    });
  }

  function discard() {
    // フォークを破棄
    pending?.discard();
    pending = null;
  }
</script>

<button
  onfocusin={preload}
  onfocusout={discard}
  onpointerenter={preload}
  onpointerleave={discard}
  onclick={() => {
    // フォークをコミット（実際に適用）
    pending?.commit();
    pending = null;
    open = true;
  }}
>
  メニューを開く
</button>

{#if open}
  <!-- Menu内の非同期処理はフォーク作成時に開始される -->
  <Menu onclose={() => (open = false)} />
{/if}

<script lang="ts">
  import { getPosts, getUser } from './data.remote';

  let userId = $state('user-1');
</script>

<svelte:boundary>
  {#snippet pending()}
    <p>読み込み中...</p>
  {/snippet}

  <header>
    <h1>ようこそ、{(await getUser()).name}さん</h1>
  </header>

  <main>
    <h2>最新の投稿</h2>
    <ul>
      {#each await getPosts() as post}
        <li>{post.title}</li>
      {/each}
    </ul>
  </main>
</svelte:boundary>