本文へスキップ
MameTechNews
フロントエンド

jsdom 31.0、CSSエンジンとHTML解析を刷新し破壊的変更

## POINTS

  • 計算済みCSSとシリアライズが変わる。スタイルのスナップショットは差分が出る前提で見る。
  • コンストラクタが途中の文書を返す。完成を待つならDOMContentLoadedか、windowのloadを使う。
  • canvasは@napi-rs/canvas v1.0.13以降が必要。従来のcanvasパッケージだけでは有効にならない。

今回のメジャーは、テスト用DOMの見た目と読み込み順の両方を変える。セレクタ照合と計算済みスタイルが速くなり、シャドウツリーの:host、::slotted()、::part()、adoptedStyleSheetsも扱う。スタイルシートやDOMが変わったあとも、計算結果は追従する。一方でショートハンドや初期値の出方は以前と違い、CSS文字列を焼いたスナップショットは落ちうる。

解析は、ブロッキングスクリプトの依存が揃うまで一時停止する。JSDOMコンストラクタ、fromURL、fromFileは、解析途中の文書を返すことがある。木の完成を待つならDOMContentLoaded、読み込みを遅らせる資源までならwindowのloadを使い、すでに発火済みならreadyStateを見る。loadイベントはwindowにだけ届き、documentでは聞けない。

任意のcanvasは、canvasパッケージから@napi-rs/canvas v1.0.13以降へ変わった。canvasだけを入れても描画は有効にならない。描画結果やエンコードされたバイト列は変わり、WebPのtoDataURLとtoBlobが加わる。カスタムフォントを使うテストは、移行手順の確認が要る。

フロントの単体テストがjsdomに乗っているなら、31はパッチではない。スタイルの期待値、文書の完了待ち、canvasのネイティブ依存を、上げる変更に含める。