データロードアーキテクチャ

// SvelteKit内部でのRequestEvent生成（簡略化）
// このインターフェースは、Load関数が受け取るeventパラメータの型定義です
interface RequestEvent {
  // コアプロパティ
  request: Request;           // 標準のWeb Request API
  url: URL;                  // パースされたURL
  params: Record<string, string>;  // ルートパラメータ
  route: RouteDefinition;    // マッチしたルート情報
  
  // 拡張プロパティ
  locals: App.Locals;        // サーバー間で共有されるデータ
  platform?: App.Platform;  // プラットフォーム固有の情報
  
  // メソッド
  fetch: typeof fetch;       // 拡張されたfetch関数
  setHeaders: (headers: Record<string, string>) => void;
  cookies: Cookies;          // Cookie操作API
  
  // 内部使用
  depends: (...deps: string[]) => void;  // 依存関係の登録
  parent: () => Promise<Record<string, any>>;  // 親のデータ取得
}

// 実際の内部実装（概念的な例）
// SvelteKitが内部でRequestEventを生成する際の処理を簡略化したものです
// 実際のコードはより複雑ですが、基本的な仕組みは以下のようになっています
class RequestEventImpl implements RequestEvent {
  private _dependencies = new Set<string>();
  private _headers: Headers = new Headers();
  
  constructor(
    private _request: Request,
    private _route: RouteDefinition,
    private _params: Record<string, string>
  ) {
    this.url = new URL(_request.url);
    this.fetch = this.createEnhancedFetch();
  }
  
  // fetch関数の拡張実装
  private createEnhancedFetch(): typeof fetch {
    return async (input: RequestInfo, init?: RequestInit) => {
      // URLを依存関係として自動登録
      const url = typeof input === 'string' ? input : input.url;
      this._dependencies.add(url);
      
      // Cookieの自動転送
      const headers = new Headers(init?.headers);
      headers.set('cookie', this._request.headers.get('cookie') || '');
      
      // 実際のfetch実行
      const response = await fetch(input, {
        ...init,
        headers
      });
      
      return response;
    };
  }
  
  depends(...deps: string[]) {
    deps.forEach(dep => this._dependencies.add(dep));
  }
  
  setHeaders(headers: Record<string, string>) {
    Object.entries(headers).forEach(([key, value]) => {
      this._headers.set(key, value);
    });
  }
}

// +page.server.ts でのRequestEvent活用例
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async (event) => {
  // 1. URLパラメータとクエリパラメータの取得
  const postId = event.params.id;  // /posts/[id] の id部分
  const page = event.url.searchParams.get('page') || '1';
  
  // 2. 認証情報の確認（Hooksでセットされたlocals）
  const user = event.locals.user;
  if (!user) {
    // 3. レスポンスヘッダーの設定（キャッシュなし）
    event.setHeaders({
      'cache-control': 'no-store'
    });
    return { authenticated: false };
  }
  
  // 4. Cookie の読み取り
  const theme = event.cookies.get('theme') || 'light';
  
  // 5. 拡張fetch関数でAPIコール（Cookie自動転送）
  const response = await event.fetch(`/api/posts/${postId}?page=${page}`);
  const post = await response.json();
  
  // 6. カスタム依存関係の登録
  event.depends(`post:${postId}`);
  
  // 7. キャッシュ制御ヘッダーの設定
  event.setHeaders({
    'cache-control': 'public, max-age=3600'  // 1時間キャッシュ
  });
  
  return {
    post,
    theme,
    user: { name: user.name, id: user.id }
  };
};

// +page.ts でのクライアントサイド処理
import type { PageLoad } from './$types';

export const load: PageLoad = async (event) => {
  // 8. 親レイアウトのデータ取得
  const parentData = await event.parent();
  console.log('Layout data:', parentData);
  
  // 9. データリクエストかどうかの判定
  if (event.isDataRequest) {
    // クライアントサイドナビゲーションの場合
    console.log('Client-side navigation detected');
  }
  
  // 10. 追加のAPIコール
  const comments = await event.fetch(`/api/posts/${event.params.id}/comments`);
  
  return {
    comments: await comments.json(),
    layoutTheme: parentData.theme  // 親から継承
  };
};

// クライアントサイドでのキャッシュ管理（概念的な実装）
// このコードはブラウザ上で動作し、ページナビゲーション時の
// Load関数の結果をメモリに保持して再利用します
interface CacheEntry {
  data: any;
  timestamp: number;
  dependencies: Set<string>;
  ttl?: number;  // Time To Live
}

class LoadFunctionCache {
  private cache = new Map<string, CacheEntry>();
  private dependencies = new Map<string, Set<string>>();
  
  // キャッシュエントリの保存
  set(key: string, data: any, deps: Set<string>, ttl?: number) {
    this.cache.set(key, {
      data,
      timestamp: Date.now(),
      dependencies: deps,
      ttl
    });
    
    // 逆引き用の依存関係マップを更新
    deps.forEach(dep => {
      if (!this.dependencies.has(dep)) {
        this.dependencies.set(dep, new Set());
      }
      this.dependencies.get(dep)!.add(key);
    });
  }
  
  // キャッシュの取得
  get(key: string): any | null {
    const entry = this.cache.get(key);
    if (!entry) return null;
    
    // TTLチェック
    if (entry.ttl && Date.now() - entry.timestamp > entry.ttl) {
      this.delete(key);
      return null;
    }
    
    return entry.data;
  }
  
  // 依存関係に基づく無効化
  invalidate(dependency: string) {
    const affected = this.dependencies.get(dependency);
    if (!affected) return;
    
    // 影響を受けるすべてのキャッシュエントリを削除
    affected.forEach(key => {
      this.delete(key);
    });
    
    // 依存関係マップからも削除
    this.dependencies.delete(dependency);
  }
  
  // キャッシュエントリの削除
  private delete(key: string) {
    const entry = this.cache.get(key);
    if (!entry) return;
    
    // 依存関係マップから削除
    entry.dependencies.forEach(dep => {
      const keys = this.dependencies.get(dep);
      if (keys) {
        keys.delete(key);
        if (keys.size === 0) {
          this.dependencies.delete(dep);
        }
      }
    });
    
    this.cache.delete(key);
  }
  
  // 全キャッシュクリア
  clear() {
    this.cache.clear();
    this.dependencies.clear();
  }
}

// クライアントサイドでのinvalidate関数の内部実装
// この関数は$app/navigationからエクスポートされ、
// ブラウザ上でキャッシュを手動で無効化する際に使用します
async function invalidate(href: string | ((href: URL) => boolean)) {
  const cache = getLoadFunctionCache();
  
  if (typeof href === 'string') {
    // 文字列の場合は直接無効化
    cache.invalidate(href);
  } else {
    // 関数の場合はすべてのキャッシュエントリをチェック
    cache.forEach((entry, key) => {
      try {
        const url = new URL(key, location.origin);
        if (href(url)) {
          cache.invalidate(key);
        }
      } catch {
        // URLパースエラーは無視
      }
    });
  }
  
  // 影響を受けるLoad関数を再実行
  await rerunAffectedLoadFunctions();
}

// SvelteKitが提供する拡張fetch関数の実装
// この関数はLoad関数のevent.fetchとして提供され、
// 通常のfetchにSvelteKit固有の機能を追加しています
function createEnhancedFetch(event: RequestEvent): typeof fetch {
  return async function fetch(
    input: RequestInfo | URL,
    init?: RequestInit
  ): Promise<Response> {
    const url = typeof input === 'string' 
      ? new URL(input, event.url)
      : input instanceof URL 
        ? input 
        : new URL(input.url, event.url);
    
    // 内部APIへのリクエストの場合
    if (url.origin === event.url.origin && url.pathname.startsWith('/api/')) {
      // サーバーサイドでは直接ハンドラを呼び出し
      if (typeof window === 'undefined') {
        const handler = await resolveAPIHandler(url.pathname);
        if (handler) {
          // RequestEventを構築して直接実行
          const apiEvent = createAPIEvent(url, init, event);
          return await handler(apiEvent);
        }
      }
    }
    
    // Cookie転送の自動化
    const headers = new Headers(init?.headers);
    if (!headers.has('cookie') && event.request.headers.has('cookie')) {
      headers.set('cookie', event.request.headers.get('cookie')!);
    }
    
    // 依存関係の自動追跡
    event.depends(url.href);
    
    // 実際のfetch実行
    const response = await globalThis.fetch(input, {
      ...init,
      headers,
      // SSR時はcredentialsを自動設定
      credentials: init?.credentials ?? 'same-origin'
    });
    
    return response;
  };
}

// hooks.server.tsの内部処理
// handleフックで使用可能なオプションの型定義
interface ResolveOptions {
  transformPageChunk?: (input: { html: string; done: boolean }) => string;
  filterSerializedResponseHeaders?: (name: string) => boolean;
  preload?: (input: { type: 'font' | 'css' | 'js'; path: string }) => boolean;
}

// sequence関数の内部実装
// 複数のミドルウェアを連鎖的に実行するためのヘルパー関数
// hooks.server.tsでミドルウェアを組み合わせる際に使用します
export function sequence(...handlers: Handle[]): Handle {
  const combined: Handle = handlers.reduce(
    (prev, next) => {
      return async (input, opts) => {
        // 前のハンドラを実行し、その中で次のハンドラを呼び出す
        return prev(input, async (event) => {
          // 次のハンドラに制御を渡す
          return next(
            { ...input, event }, 
            opts
          );
        });
      };
    },
    // 初期ハンドラ（最後に実行される）
    (({ event }, resolve) => resolve(event)) as Handle
  );
  
  return combined;
}

// Load関数実行前のミドルウェア処理
// Hooksで設定されたミドルウェアを通過してからLoad関数が実行される仕組み
async function executeMiddlewareChain(
  event: RequestEvent,
  loadFunctions: LoadFunction[]
): Promise<any> {
  // handle hookを通過
  const transformedEvent = await runHandleHook(event);
  
  // localsに格納されたデータはLoad関数で利用可能
  const results = await Promise.all(
    loadFunctions.map(load => {
      // 各Load関数にtransformedEventを渡す
      return load(transformedEvent);
    })
  );
  
  return mergeLoadResults(results);
}

// 内部的な並列実行の実装
// Layout ServerLoad、Page ServerLoad、Layout Load、Page Loadを
// 最適な順序で並列実行するためのエグゼキューター
class LoadFunctionExecutor {
  private runningLoads = new Map<string, Promise<any>>();
  
  async executeLoads(
    route: RouteDefinition,
    event: RequestEvent
  ): Promise<Record<string, any>> {
    const loads = this.collectLoadFunctions(route);
    const results: Record<string, any> = {};
    
    // Server LoadとUniversal Loadを分離
    const serverLoads = loads.filter(l => l.type === 'server');
    const universalLoads = loads.filter(l => l.type === 'universal');
    
    // Server Loadを並列実行
    if (serverLoads.length > 0) {
      const serverResults = await this.executeParallel(
        serverLoads,
        event
      );
      Object.assign(results, serverResults);
    }
    
    // Universal LoadにServer Loadの結果を渡して並列実行
    if (universalLoads.length > 0) {
      const universalEvent = {
        ...event,
        data: results  // Server Loadの結果を含む
      };
      
      const universalResults = await this.executeParallel(
        universalLoads,
        universalEvent
      );
      Object.assign(results, universalResults);
    }
    
    return results;
  }
  
  private async executeParallel(
    loads: LoadFunction[],
    event: RequestEvent
  ): Promise<Record<string, any>> {
    // デデュープ: 同じLoad関数の重複実行を防ぐ
    const promises = loads.map(load => {
      const key = load.id;
      
      if (!this.runningLoads.has(key)) {
        this.runningLoads.set(
          key,
          this.executeLoad(load, event)
            .finally(() => this.runningLoads.delete(key))
        );
      }
      
      return this.runningLoads.get(key)!;
    });
    
    const results = await Promise.all(promises);
    
    // 結果をオブジェクトにマージ
    return loads.reduce((acc, load, index) => {
      acc[load.name] = results[index];
      return acc;
    }, {} as Record<string, any>);
  }
  
  private async executeLoad(
    load: LoadFunction,
    event: RequestEvent
  ): Promise<any> {
    try {
      // タイムアウト設定
      const timeout = load.timeout || 30000;
      const result = await Promise.race([
        load.fn(event),
        new Promise((_, reject) => 
          setTimeout(() => reject(new Error('Load timeout')), timeout)
        )
      ]);
      
      return result;
    } catch (error) {
      // エラーハンドリング
      if (load.optional) {
        return null;  // オプショナルな場合はnullを返す
      }
      throw error;  // 必須の場合はエラーを伝播
    }
  }
}

// ストリーミングSSRの内部実装
// ReadableStreamを使用して、データをチャンク単位で順次送信する仕組み
class StreamingRenderer {
  async renderStreaming(
    component: Component,
    props: Props,
    loadPromises: Map<string, Promise<any>>
  ): Promise<ReadableStream> {
    const encoder = new TextEncoder();
    const decoder = new TextDecoder();
    
    return new ReadableStream({
      async start(controller) {
        // 初期HTMLを即座に送信
        const initialHTML = await renderInitialHTML(component, props);
        controller.enqueue(encoder.encode(initialHTML));
        
        // ストリーミングデータのプレースホルダーを挿入
        controller.enqueue(encoder.encode(
          '<' + 'script id="__SVELTE_KIT_STREAMING__" type="application/json">'
        ));
        
        // Promiseが解決されるたびにデータを送信
        for (const [key, promise] of loadPromises) {
          try {
            const data = await promise;
            const chunk = JSON.stringify({ key, data });
            controller.enqueue(encoder.encode(chunk + '\n'));
            
            // クライアントサイドでの即座の更新トリガー
            controller.enqueue(encoder.encode(
              `<${'script'}>__sveltekit_stream_update(${JSON.stringify(key)})</${'script'}>`
            ));
          } catch (error) {
            // エラーもストリーミング
            const errorChunk = JSON.stringify({ 
              key, 
              error: error.message 
            });
            controller.enqueue(encoder.encode(errorChunk + '\n'));
          }
        }
        
        // ストリーミング完了マーカー
        controller.enqueue(encoder.encode('</' + 'script>'));
        controller.close();
      }
    });
  }
}

// Load関数のパフォーマンス計測
// 実行時間、依存関係、キャッシュヒット率などを追跡し、
// Server-Timingヘッダーとしてブラウザの開発者ツールに表示できます
interface LoadMetrics {
  name: string;
  startTime: number;
  endTime: number;
  duration: number;
  dependencies: string[];
  cacheHit: boolean;
  error?: Error;
}

class PerformanceMonitor {
  private metrics: LoadMetrics[] = [];
  
  async measureLoad<T>(
    name: string,
    fn: () => Promise<T>,
    deps: string[]
  ): Promise<T> {
    const startTime = performance.now();
    const metric: LoadMetrics = {
      name,
      startTime,
      endTime: 0,
      duration: 0,
      dependencies: deps,
      cacheHit: false
    };
    
    try {
      const result = await fn();
      metric.endTime = performance.now();
      metric.duration = metric.endTime - metric.startTime;
      
      // 開発環境では警告を出力
      if (import.meta.env.DEV && metric.duration > 1000) {
        console.warn(
          `Slow Load function: ${name} took ${metric.duration}ms`
        );
      }
      
      this.metrics.push(metric);
      return result;
    } catch (error) {
      metric.error = error as Error;
      metric.endTime = performance.now();
      metric.duration = metric.endTime - metric.startTime;
      this.metrics.push(metric);
      throw error;
    }
  }
  
  getMetrics(): LoadMetrics[] {
    return this.metrics;
  }
  
  // Server-Timingヘッダーの生成
  generateServerTiming(): string {
    return this.metrics
      .map(m => `${m.name};dur=${m.duration.toFixed(2)}`)
      .join(', ');
  }
}

// メモリ効率的なキャッシュ管理
// WeakRefを使用してガベージコレクションを妨げずにキャッシュを管理
// メモリが逸迫した場合は自動的にキャッシュが解放されます
class MemoryEfficientCache {
  private cache = new Map<string, WeakRef<any>>();
  private registry = new FinalizationRegistry((key: string) => {
    // オブジェクトがGCされたらキャッシュからも削除
    this.cache.delete(key);
  });
  
  set(key: string, value: any) {
    // WeakRefを使用してメモリリークを防ぐ
    const ref = new WeakRef(value);
    this.cache.set(key, ref);
    
    // GC時のクリーンアップを登録
    this.registry.register(value, key);
  }
  
  get(key: string): any | null {
    const ref = this.cache.get(key);
    if (!ref) return null;
    
    const value = ref.deref();
    if (value === undefined) {
      // オブジェクトがGCされていた場合
      this.cache.delete(key);
      return null;
    }
    
    return value;
  }
  
  // 定期的なクリーンアップ
  cleanup() {
    for (const [key, ref] of this.cache) {
      if (ref.deref() === undefined) {
        this.cache.delete(key);
      }
    }
  }
}

// デバッグ用のLoad関数ラッパー
// 開発環境でのみ動作し、Load関数の入出力を詳細にログ出力します
function debugLoadFunction(name: string, load: LoadFunction): LoadFunction {
  return async (event) => {
    if (import.meta.env.DEV) {
      console.group(`🔄 Load: ${name}`);
      console.log('URL:', event.url.toString());
      console.log('Params:', event.params);
      console.log('Locals:', event.locals);
      console.time(`Load: ${name}`);
    }
    
    try {
      const result = await load(event);
      
      if (import.meta.env.DEV) {
        console.log('Result:', result);
        console.timeEnd(`Load: ${name}`);
        console.groupEnd();
      }
      
      return result;
    } catch (error) {
      if (import.meta.env.DEV) {
        console.error('Error:', error);
        console.timeEnd(`Load: ${name}`);
        console.groupEnd();
      }
      throw error;
    }
  };
}

// 使用例
// +page.tsや+layout.tsでデバッグラッパーを使用することで、
// Load関数の動作を詳細に追跡できます
export const load = debugLoadFunction('products', async ({ fetch }) => {
  const response = await fetch('/api/products');
  return {
    products: await response.json()
  };
});