Frontend Weekly 2024-11-22

#Frontend weekly #Playwright #Framer Motion #Motion #Deno

#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

どちらを利用するかに合わせて次のようにオプションを渡すことで最適化できる。

Terminal window
# 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コマンドが追加。

Terminal window
deno outdated [--recursive] [--update] [--latest]

#バイナリへのアセットファイルの埋め込み

deno compileにアセットを埋め込むオプションが追加。

Terminal window
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/

Edit on GitHub