Frontend Weekly 2024-07-19

Vitest v2.0.0: Browser Mode#

Vitest v2.0.0 がリリースされた。非推奨な API の削除やカバレッジの改善、ブラウザモードの追加などが行われている。

https://github.com/vitest-dev/vitest/releases/tag/v2.0.0

いくつか破壊的な変更が行われているが、mock.results が自動的に resolved されることを期待したようなコードを書いていたり、coverage 周りの設定をしていない場合、そのまま移行できると思われる。カバレッジのスコアは変わる可能性があるが、基本的に問題があればエラーが出るような変更が多い。

https://vitest.dev/guide/migration.html#migrating-to-vitest-2-0

Broser Mode がサポートされたと紹介されているが、まだ実験的な機能ではあるように見える。これを利用することで、ブラウザ上で Vitest のテストを実行できるようになる。 Provider として Webdriverio と Playwright がサポートされている。

https://vitest.dev/guide/browser/#browser-mode

Deno 1.45#

Deno v1.45 がリリースされた。Workspace のサポートや Node.js との互換性向上、fronzen フラグの追加、deno init --libコマンドの追加などが行われた。

https://deno.com/blog/v1.45

Workspace and Monorepo Support#

このリリースでは、ワークスペースのサポートが追加された。次のようにワークスペースを定義することで、利用することができる。

1
{
2
  "workspace": ["./add", "./substract"]
3
}

またnpm workspacesもサポートしており、npm ワークスペースに Deno を含めることも、Deno ワークスペースに npm を含めることもできる。

fronzen フラグ#

Yarn の--frozen-lockfileや、npm のnpm ci相当の--frozenフラグが追加された。これにより、コマンドを実行した際にロックファイルが古くなっていればエラーを出すことが出来るようになった。

1
deno test --frozen --coverage

ライブラリ用の初期化 `deno init --lib`#

ライブラリを作成する際に、deno initコマンドに--libフラグを指定することで、JSR に公開する用のプロジェクトを簡単に開始することができる。

1
deno init --lib

Fog of War について - Remix#

Remix v2.10.0 で future フラグでサポートされた Fog of War という機能についての記事。 Fog of War は、簡単に言えばルートマニフェストを遅延読み込みさせる仕組みであり、ルートマニフェストを小さく始め、ユーザのリクエストに応じてルートを読み込むようにすることで、膨大なルートを持つサービスであってもパフォーマンスを維持できるようにするもの。この機能は Remix の次のメジャーバージョン、つまり React Router v7 でデフォルトになる予定。

https://remix.run/blog/fog-of-war

`@property`が Baseline に追加#

@propertyは、CSS のカスタムプロパティを定義するためのルールで、--で始まるプロパティを定義するためのもの。これにより、カスタムプロパティを定義する際に、プロパティの型や初期値を指定できるようになる。

1
@property --item-size {
2
  syntax: "<percentage>";
3
  inherits: true;
4
  initial-value: 40%;
5
}
6

7
.container {
8
  display: flex;
9
  height: 200px;
10

11
  --item-size: 20%;
12
}
13

14
.item {
15
  width: var(--item-size);
16
  height: var(--item-size);
17
}

このアットルールが Baseline に追加、つまり主要ブラウザで互換性があることが確認された。 https://web.dev/blog/at-property-baseline?hl=en

`es-toolkit`の紹介#

es-toolkitは Lodash 互換を目指している。代替ライブラリよりバンドルサイズやパフォーマンスに優れているとされている。

https://github.com/toss/es-toolkit

個人的に Lodash のようなライブラリこそ shadcn/ui のような提供方法が適しているように思うが、どうなのだろうか。

MPA View Transitions の挙動を Speculative rules で改善する#

View Transitions は最近 CSS のみで MPA でも利用できるようになったが、不安定な環境では、2 つの画面をスムーズに切り替えるためのページ読み込みによってフリーズしたような表示になってしまう場合がある。

これを特定のルートを事前レンダリングできるSpeculation Rules APIを利用して改善する方法についての記事。

https://ryanseddon.com/web/view-transitions-speculative/

次のような記述で事前レンダリングをブラウザに要求できる。

1
<script type="speculationrules">
2
  {
3
    "prerender": [
4
      {
5
        "where": {
6
          "href_matches": "/*"
7
        },
8
        "eagerness": "moderate"
9
      }
10
    ]
11
  }
12
</script>

現状 Speculation Rules API は、Firefox と Safari ではサポートされていない。

https://developer.chrome.com/docs/web-platform/prerender-pages?hl=en

CSS ゲームにおけるキーボードナビゲーションの仕組み#

コンテナスタイルクエリやアニメーションを利用して状態管理を行い CSS のみでゲームを作る記事。 https://frontendmasters.com/blog/how-keyboard-navigation-works-in-a-css-game/