はじめに
Fresh v2.3がリリースされました。
この記事では主な変更点などについて解説します。
View Transition API
View Transition APIのサポートが行われています (#3708)
Partialの仕組みと統合されており、f-client-navによってクライアントナビゲーションが有効化されている要素に対してf-view-transitionを指定することで、Partialによる画面遷移に対してdocument.startViewTransition()が自動で適用されます。
もしブラウザーがView Transition APIをサポートしていない場合は、今まで通り通常のPartialによる画面遷移にフォールバックされます。
不要なJavaScript依存の排除 (Zero JavaScript by Default)
アプリケーションがIsland及びPartialのどちらにも依存していない場合、本番ビルドがJavaScriptコードへ依存しないように改善されています (#3696)
これによりFresh v1の頃と同様に、必要でなければJavaScriptコードがブラウザーに送信されなくなります。
WebSocketサポート
FreshにWebSocketの公式サポートが追加されています (#3774)
App#ws()メソッドが追加されており、WebSocket用のエンドポイントを定義することができます。またContext#upgrade()メソッドも追加されており、より柔軟にWebSocket向けのエンドポイントを実装することも可能です。
Islandに対するTemporalのサポート
Islandコンポーネントのpropsに対するTemporal関連のオブジェクトの指定がサポートされています (#3701)
なおTemporal APIについてはDeno v2.7にて安定化されています。
ipFilter()ミドルウェア
@fresh/coreパッケージにipFilter()が追加されています (#3035)
@std/net/unstable-ipのmatchSubnets()をベースに実装されており、指定されたCIDR表記に基づいてアクセス制限を掛けることができます。
csp() - リクエストごとのnonceの生成がサポート
csp()ミドルウェアにuseNonceオプションが追加されています (#3709)
このオプションにtrueが設定された場合、FreshはSSRごとに一意なnonceを生成し、各種インライン<script>や<style>に設定した上で、Content-Security-Policyヘッダーの各種ディレクティブに対してunsafe-inlineではなくnonce-<nonce>を設定してくれます。
trustProxyオプション
AppにtrustProxyオプションが追加されています (#3757)
このオプションにtrue が指定されると、ContextオブジェクトのurlプロパティーがX-Forwarded-Proto及びX-Forwarded-Hostヘッダーを考慮して設定されます。
複数静的ディレクトリのサポート
staticDirオプションで配列の指定がサポートされています (#3759)
Viteプラグイン (@fresh/plugin-vite) においてstaticDirオプションで配列が指定された場合、最初の要素 (ディレクトリ) がViteのpublicDirオプションに指定され、それ以外はFreshの開発サーバーから配信されるようです。
フォームに対する_freshIndicatorのサポート
Partialが適用されたformまたはbutton[type=submit]要素に対して、ref経由で_freshIndicator属性にSignalを設定しておくことで、該当のフォームがsubmitされる際に_freshIndicatorに設定されたSignalが自動的にtrueに更新されます (#3753)。これにより該当のSignalの値を元にローディングのアニメーションを表示することなどが可能です。
@fresh/init - deno createのサポート
@fresh/initパッケージでdeno createコマンドによるプロジェクトの作成がサポートされています (#3706, #3746)
これによりdeno create jsr@fresh/initコマンドでプロジェクトが作成できます。
OpenTelemetry - meta[name="traceparent"]の自動設定
Deno本体においてOpenTelemetryサポートが有効化されている (OTEL_DENO=true) 場合に、Freshが自動的にmeta[name="traceparent"]タグをHTMLに埋め込むように改善されています (#3729)
これにより@opentelemetry/instrumentation-document-loadパッケージなどによる計装が機能するようです。