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

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

// deno.json
{
  "workspace": ["./add", "./substract"]
}

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

fronzenフラグ

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

deno test --frozen --coverage

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

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

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のカスタムプロパティを定義するためのルールで、--で始まるプロパティを定義するためのもの。これにより、カスタムプロパティを定義する際に、プロパティの型や初期値を指定できるようになる。

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 40%;
}

.container {
  display: flex;
  height: 200px;

  --item-size: 20%;
}

.item {
  width: var(--item-size);
  height: var(--item-size);
}

このアットルールが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/

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

<script type="speculationrules">
  {
    "prerender": [
      {
        "where": {
          "href_matches": "/*"
        },
        "eagerness": "moderate"
      }
    ]
  }
</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/