JSer.info #565 - React Router v6がリリースされました。

React Router v6 | Remix

React Hooksベースで再実装、<Route>のネストの扱いを改善、<Link to>の値に相対パスの解釈を<Route path>を基準にする変更などが含まれています。

合わせてReact Router v5からのマイグレーションガイドも公開されています。

React Router | Upgrading from v5

Angular 13がリリースされました。

Angular v13 is now Available. We’re back with the brand new release… | by Mark Thompson (@marktechson) | Nov, 2021 | Angular Blog

Ivyがデフォルトとなったため、View Engineが削除されています。
Angular Package Format(APF)が、package.jsonのexportsフィールドをサポートしました。
また、IE 11のサポートが終了されています。
AngularでのIEサポートはAngular 12までとなり、Angular 12は2022年11月12日までサポートされます。

Angular - Angular versioning and releases

その他には、Angular CLIが永続ビルドキャッシュをサポート、テスト時にDOMのクリーンアップがデフォルト化されています。

Record, replay and measure user flows - Chrome Developersという記事では、Chrome 97の開発者ツールにプレビュー実装されたRecorder panelについて紹介されています。

ユーザー操作を記録し再生でき、またユーザーフローとPerformance計測を組み合わせて利用できます。
また、記録した内容は編集したり、Puppeteerスクリプトとして出力できるようになっています。

以下の記事はどちらもJavaScriptからTypeScriptへの段階的な移行について書かれています。

ゆるい型をつけてから段階的に厳しくしていくアプローチと最初から厳密な型をつけていくというアプローチをそれぞれ扱っているので、合わせて読んでみると面白いと思います。

JSer.infoをサポートするには

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。

ヘッドライン

Release v11.0.0 · puppeteer/puppeteer

github.com/puppeteer/puppeteer/releases/tag/v11.0.0

Chrome library ReleaseNote

puppeteer 11.0.0リリース。
Out of ProcessなiframeのwaitをサポートするPage.waitForFrame()とframe.isOOPFrame()の追加。
HTTP Requestのinitiatorを取得できるようになるなど

Recoil 0.5 | Recoil

recoiljs.org/blog/2021/11/03/0.5.0-release

React library ReleaseNote

Recoil 0.5リリース。
キャッシュをクリアできるuseRecoilRefresher_UNSTABLE()の追加。
onSetのコールバックにisResetを追加、getLoadable()/getPromise()/getInfo_UNSTABLE()の追加など

React Router v6 | Remix

remix.run/blog/react-router-v6

React library ReleaseNote

React Router v6リリース。
React Hooksベースで再実装、<Route>のネストの改善、<Link to>の値に相対パスの解釈を<Route path>を基準にするように変更など

Announcing TypeScript 4.5 RC - TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/

TypeScript ReleaseNote

TypeScript 4.5 RCリリース。
4.5 betaで導入されていたESM対応のmodule: node12はリリースが延期となった。

Nightwatch v2 is Now in Beta | Nightwatch.js Blog

nightwatchjs.org/blog/nightwatch-v2-beta-is-available.html

E2E testing library ReleaseNote

Nightwatch v2リリース。
Chrome DevTools ProtocolとWebDriver BiDIのサポート、CucumberJSのサポートなど

V8 release v9.7 · V8

v8.dev/blog/v8-release-97

V8 ReleaseNote

V8 v9.7リリース。
ArrayとTypedArrayにfindLastとfindLastIndexの実装。

Angular v13 is now Available. We’re back with the brand new release… | by Mark Thompson (@marktechson) | Nov, 2021 | Angular Blog

blog.angular.io/angular-v13-is-now-available-cce66f7bc296

Angular ReleaseNote

Angular 13リリース。
IvyがデフォルトとなったためView Engineを削除、Angular Package Format(APF)がexportsフィールドのサポート、IE 11のサポート終了。
Angular CLIが永続ビルドキャッシュをサポート、テスト時にDOMのクリーンアップがデフォルト化など

Release v4.0.0 · markedjs/marked

github.com/markedjs/marked/releases/tag/v4.0.0

Markdown JavaScript library ReleaseNote

markded 4.0.0リリース。
ESMの対応、default exportを削除したためimport { markded } from "marked"のnamed importを利用するに変更など

アーティクル

What's new in PageSpeed Insights

web.dev/whats-new-pagespeed-insights/

google performance article

新しいPageSpeed Insightsの画面解説。
計測データとCrUXデータ(Lab)が混在していたが、CrUXのデータはOrigin Summaryというタブに分離された。
Core Web Vitalsのスコア表示などが含まれる予定

Malware found in coa and rc, two npm packages with 23M weekly downloads - The Record by Recorded Future

therecord.media/malware-found-in-coa-and-rc-two-npm-packages-with-23m-weekly-downloads/

npm security article

coaとrcパッケージにマルウェアが含まれていたバージョンがpublishされていた問題について。
現在は無効化されているが、それぞれ次のバージョンが問題となっている。

coa: 2.0.3, 2.0.4, 2.1.1, 2.1.3, 3.0.1, 3.1.3
rc: 1.2.9, 1.3.9, 2.3.9
Embedded malware in coa · GHSA-73qr-pfmq-6rp8 · GitHub Advisory Database
Embedded malware in rc · GHSA-g2q5-5433-rhrf · GitHub Advisory Database

Record, replay and measure user flows - Chrome Developers

developer.chrome.com/docs/devtools/recorder/

Chrome article debug

Chrome 97の開発者ツールにプレビュー実装されたRecorder panelについて。
ユーザー操作を記録し再生できる。またユーザーフローとPerformance計測を組み合わせられる。
記録した内容は編集したり、Puppeteerスクリプトとして出力できる。

TypeScriptのJSDocサポートでできること、できないこと

zenn.dev/qnighy/articles/56917d9bf9077b

TypeScript JavaScript article

TypeScriptのJSDocによる型アノテーションについての解説。
TypeScriptとJSDocの型アノテーションでの表現力の違い、JSDocでの型アノテーションの書き方について

A Comprehensive Guide To Error Handling In Node.js - Honeybadger Developer Blog

www.honeybadger.io/blog/errors-nodejs/

JavaScript node.js article

Node.jsのエラーハンドリングについての記事。
例外、コールバック、Promise、EventEmitterそれぞれにおけるエラーのハンドリング。
カスタムエラーでの分類、Operational ErrorとProgrammer Errorの違い。
またOperation Errorが発生したときの対処方法とProgrammer Errorの防止策について

インクリメンタルに新しい技術を取り入れる方法。TypeScriptへの移行を例にしたプロセス

tech.plaid.co.jp/karte-blocks-incremental-development/

JavaScript TypeScript node.js React Vue article

JavaScriptをTypeScriptを段階的に移行する方法について。
最初からしっかりとした型をつける方法とゆるい型に変換してから型をつける方法の比較、マイグレーションの順番、型を使ったAPIバリデーション、VueからReactへの段階的な移行など。
インクリメンタルな移行するときのポイントについて。