Frontend Weekly 2025-01-24

#Element Capture

Chrome 132 では、現在のタブのキャプチャに加えて、要素のキャプチャが可能になった。

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia

Element Capture を試す

次のようにして、要素をキャプチャすることが出来る。

1
const stream = await navigator.mediaDevices.getDisplayMedia({
2
  preferCurrentTab: true,
3
});
4
const [videoTrack] = stream.getVideoTracks();
5
const target = document.getElementById("rt-ElCap");
6
const restrictionTarget = await RestrictionTarget.fromElement(target);
7

8
await videoTrack.restrictTo(restrictionTarget);
9
video.srcObject = stream;

ただし、キャプチャ対象の要素はスタッキングコンテキストを持っている必要がある。

#dialog 要素の toggle イベント

Chrome 132 では、dialog要素が開閉した際に発火するtoggleイベントが追加された。また、開閉直前に発火するbeforetoggleイベントも追加された。

1
dialog.addEventListener("toggle", (event) => {
2
  if (event.newState === "open") {
3
    console.log("Dialog opened");
4
  }
5
});

#File System API が Android や WebView でも利用可能に

File System API は、今まで Safari や Firefox に加えて Chrome でもモバイルでは利用出来なかったが、Chrome 132 から Android では利用可能になった。

File System API（File System Access API）は、ローカルにあるファイルやディレクトリへのアクセス権のユーザーへのリクエストや、許可されたファイルやディレクトリへの操作を提供する API。

https://developer.mozilla.org/en-US/docs/Web/API/File_System_API

1
const fileHandles = await window.showOpenFilePicker();
2
const file = await fileHandles[0].getFile();

#CSS-first configuration

tailwind.config.js の代わりに CSS ファイル内で@themeルールを利用して設定を行うことが出来る。

1
@import "tailwindcss";
2

3
@theme {
4
  --font-display: "Satoshi", "sans-serif";
5

6
  --breakpoint-3xl: 1920px;
7

8
  --color-pikachu-100: #f4e66b;
9
}

#@starting-style support

@starting-styleをサポートしたstarting variant が追加された。

1
<div>
2
  <button popovertarget="my-popover">Check for updates</button>
3
  <div
4
    popover
5
    id="my-popover"
6
    class="transition-discrete starting:open:opacity-0 ..."
7
  >
8
    <!-- ... -->
9
  </div>
10
</div>

#not variants

:not()疑似クラスをサポートしたnot variant が追加された。

1
<div class="not-hover:opacity-75">
2
  <!-- ... -->
3
</div>

#ユーティリティの削除や変更

非推奨なユーティリティ*-opacity-*やflex-shrink-*、overflow-ellipsiesなどが削除された。

https://tailwindcss.com/docs/upgrade-guide#removed-deprecated-utilities

また、一貫性を高めるためにユーティリティの役割や名前の変更も行われている。 shadowやblurなどはshadow-smやblur-smに変更され、元々shadow-smやblur-smであったものはshadow-xsやblur-xsに変更された。

https://tailwindcss.com/docs/upgrade-guide#renamed-utilities

#spy.mockReset の挙動変更

spy.mockReset()は今までモックの履歴をクリアした上で、モックを空の関数に差し替えていたが、Vitest v3 ではモックを元の実装に戻すように実装が変更された。

これにより、Jest と Vitest でspy.mockReset()の挙動が異なるようになった。

#テストフックへのコンテキストの共有

テストフック（onTestFailedとonTestFinished）がコンテキストを受け取るようになった。

1
test("some test", (ctx) => {
2
  ctx.info = "some info";
3
  if (something()) {
4
    ctx.info = "some other info";
5
  }
6
  onTestFinished((ctx) => {
7
    if (ctx.info === "some info") {
8
      // do a thing
9
    }
10
  });
11
});

#テストファイルのカバレッジからの除外

今まで設定をカスタムしているとテストファイル自体をカバレッジの対象にしてしまうことがあったが、常に除外されるようになった。

#spyOn が実装を再利用するように変更

spyOnが実装を再利用するように変更された。

1
const spy1 = vi.spyOn(obj, "method").mockImplementation(() => "mocked");
2
const spy2 = vi.spyOn(obj, "method");
3

4
expect(spy1).toBe(spy2);

#Realtime accessibility tests

@storybook/addon-a11yアドオンにより、axe-coreを利用したリアルタイムのアクセシビリティテストが可能になった。

https://storybook.js.org/docs/writing-tests/accessibility-testing#accessibility-checks-with-a11y-addon

#コードカバレッジの UI での表示

Storybook Test 実行時に収集してカバレッジを UI 上に表示する機能が追加された。

https://storybook.js.org/docs/writing-tests/test-coverage?ref=storybookblog.ghost.io#with-storybook-test