Frontend Weekly 2024-11-22
Playwright v1.49、Framer Motion、Deno v2.1、Angular v19、Grepなどについて
Playwright v1.49 - Aria Snapshots
Playwright v1.49リリース。
https://playwright.dev/docs/release-notes#version-149
アクセシビリティツリーのスナップショットを取れるAria Snapshot機能が追加。 従来のDOM構造のスナップショットに比べて、リファクタリング耐性が高い。
await expect(page.locator("body")).toMatchAriaSnapshot("...");
https://playwright.dev/docs/aria-snapshots
New Chromium
新しいヘッドレスChromiumを選択できるようになった。
次のようにオプトインできる。
import { defineConfig, devices } from "@playwright/test";
export default defineConfig({
projects: [
{
name: "chromium",
use: { ...devices["Desktop Chrome"], channel: "chromium" },
},
],
});
これはChromeが言及しているもので、本物のChromeブラウザを利用することが出来る。
https://developer.chrome.com/blog/chrome-headless-shell?hl=ja
Playwrightでは、この変更に伴いデフォルトで古いヘッドレス実装と新しいヘッドレス実装の両方がダウンロードされるようになったため、ダウンロードサイズが増加した。
https://github.com/microsoft/playwright/issues/33566
どちらを利用するかに合わせて次のようにオプションを渡すことで最適化できる。
# after for headless-only tests
npx playwright install --only-shell
# after for new headless mode
npx playwright install --no-shell
Framer Motion is now independent
ReactのアニメーションライブラリであるFramer Motionは、今後Framorから独立して開発される。
https://motion.dev/blog/framer-motion-is-now-independent-introducing-motion
今後はMotionという名前で開発される。ReactだけでなくVanilla JS APIも提供されている。今後様々なライブラリに対応予定とのこと。
Deno v2.1
Deno v2.1リリース。このリリースはDeno初のLTSであり、2025年4月までサポートされる。
Wasm Imports
Wasmのインポートをサポート。
import { add } from "./add.wasm";
console.log(add(1, 2));
Turbocharged deno task
Taskに説明文を付与するdescriptionの追加、task間の依存関係を定義できるdependenciesの追加など。
{
"tasks": {
"build": "deno run -RW build.ts",
"generate": "deno run -RW generate.ts",
"serve": {
"description": "Start the dev server",
"command": "deno run -RN server.ts",
"dependencies": ["build", "generate"]
}
}
}
deno outdated
npm
などと同様に依存関係を管理するdeno outdated
コマンドが追加。
deno outdated [--recursive] [--update] [--latest]
バイナリへのアセットファイルの埋め込み
deno compile
にアセットを埋め込むオプションが追加。
deno compile --include ./names.csv --include ./data/ main.ts
Angular v19
Angular v19リリース。
https://blog.angular.dev/meet-angular-v19-7b29dfd05b84
standalone
がデフォルトでtrueに、Incremental HydrationとHMRのサポート、linkedSignalの追加など。
Vercel acquires Grep
VercelがGithubの全文検索サービスであるGrepを買収。