659文字
3分
編集

Fresh 2.3

#Fresh #Deno #Vite

Fresh 2.3 がリリースされた。コミットは 100 件超、貢献者は 20 名に達する。従来は全ページに小さな client-entry が載り Islands もパーシャルも使わない場合でもクライアント側の起動処理が入っていたが、実際に Islands かパーシャル（f-client-nav）を使うかを判定してから script を注入するようになり、静的ページでは script 要素・モジュール preload・クライアントバンドルが送られない。設定変更は不要で、アップグレード後にそのまま反映される。

指標Fresh 2.2Fresh 2.3
JavaScript（生）約 14〜22 KB0 KB
JavaScript（gzip）約 5〜9 KB0 KB
Module preload ヘッダ1 以上0
インライン起動用 script10

View Transitions API と既存のパーシャルを接続し、<body> に f-client-nav と f-view-transition を並べるとパーシャル遷移が document.startViewTransition() で包まれ、CSS の ::view-transition-old / ::view-transition-new や要素単位の view-transition-name でアニメーションを指定できる。対応ブラウザ以外では従来どおりのパーシャル更新に落ちる。

html
<body f-client-nav f-view-transition>
  <!-- your app -->
</body>

WebSocket はフレームワーク組み込みとなり、App に対して app.ws("/ws", { open, message, close }) のようにハンドラを渡すほか、ファイルベースのルートでは GET ハンドラ内の ctx.upgrade() で応答を返すパターンが使える。WebSocket 以外のリクエストが WebSocket 用ルートに来た場合は 400 を返す。

typescript
const app = new App().ws("/ws", {
  open(socket) {
    console.log("Client connected");
  },
  message(socket, event) {
    socket.send(`Echo: ${event.data}`);
  },
  close(socket) {
    console.log("Client disconnected");
  },
});

そのほか次のような変更が含まれる。

  • Vite 統合では CJS と process.env の扱いを Vite 側に寄せて Babel パスを削減し、resolve.alias の適用順や React 互換エイリアス、optimizeDeps.exclude による Preact の二重プリバンドル回避、immutable キャッシュ向けのクエリ付きアセット URL、ウォッチャがエディタの一時ファイルで落ちない修正などが入った。
  • fresh パッケージから CSP nonce 注入と IP 許可／拒否リスト（CIDR 対応）のミドルウェアが追加された。
  • サーバー側 OpenTelemetry に加え、HTML に W3C traceparent の meta を差し込み、ブラウザ側 SDK がサーバーのトレースと接続できる。
  • Temporal の 8 種類をルートから島コンポーネントの props としてそのまま渡せる。
  • staticDir に配列を渡して複数の静的ディレクトリを合成でき、同名ファイルは先勝ちになる。
  • パーシャルのローディング表示はリンクだけでなくフォーム送信にも効き、送信ボタン単位のインジケータも選べる。
  • リバースプロキシ背後では trustProxy: true で X-Forwarded-Proto と X-Forwarded-Host を読み ctx.url を書き換える。
  • Deno 2.7 以降では deno create @fresh/init で新規プロジェクトを足場立てでき、deno run -Ar jsr:@fresh/update で既存プロジェクトを更新できる。

ルーティングやパーシャル、Head 周りの不具合修正に加え、ミドルウェア連鎖は起動時に一度コンパイルされリクエストごとに組み立てないようになった。

#参考文献