O hirunewani blog

Frontend Weekly 2024-11-22

Created at

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も提供されている。今後様々なライブラリに対応予定とのこと。

https://motion.dev/

Deno v2.1

Deno v2.1リリース。このリリースはDeno初のLTSであり、2025年4月までサポートされる。

https://deno.com/blog/v2.1

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を買収。

https://vercel.com/blog/vercel-acquires-grep

https://grep.app/