JSer.info #511 - React 17が正式にリリースされました。

React v17.0 – React Blog

React 17では新しい機能はありませんが、今後のアップデートを段階的に行いやすくするための仕組みが追加されています。
今後React 18がリリースされた際に、React 17とReact 18が一つのアプリ内で同時に実行できるようにするための仕組みを追加しています。
これは、アプリ内で段階的にReactをアップデートできるようにするのが主な目的です。

この変更に関連して、React内でのEvent Delegationの仕組みが変更されています。
今まではDocument nodeに対してイベントを移譲していましたが、React 17からはrenderしたRoot nodeに対してイベントを移譲します。

その他の破壊的な変更としては、event poolingの仕組みの削除とevent.persist()の無効化、onScrollがバブリングしなくなることやuseEffectのcleanup処理が必ず非同期となるなどの変更も含まれています。
詳しくは17 RCの記事で書かれています。

また、関連してCreate React App 4.0もリリースされています。

Release v4.0.0 · facebook/create-react-app

React 17/新しいJSXの変換の対応、TypeScript 4、ESLint 7、Jest 26へアップデートされています。
また、Fast Refresh、workboxの対応改善、Web Vitalsレポート対応の追加など含まれています。

Node.js 15.0.0がリリースされました。

Note: 奇数バージョンであるためLTSにはなりません。

破壊的な変更としてN-API 7へアップデート、npm 7へアップデート、V8 8.6へアップデート、
unhandledRejection=throwをデフォルトに変更、URLオブジェクトの仕様追従などが行われています。

また、ウェブ標準APIとの互換性向上のためAbortControllerとEventTargetのサポート、cryptoモジュールがWeb Crypto APIをサポートしています。
その他には、timers/promiseとstream/promisesの追加、実験的な機能としてQUICのサポートされています。

Sass: LibSass is Deprecatedという記事では、C++で書かれたLibSass(node-sass)が非推奨となったことについて書かれています。

現在はDartで書かれたDartSass(sass)がメインで開発されており、LibSassは機能追加や新しい構文のサポートはしないメンテナンスモードとなっています。

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

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

JSer.info Sponsors

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

ヘッドライン

React v17.0 – React Blog

reactjs.org/blog/2020/10/20/react-v17.html

React JavaScript ReleaseNote library

React 17.0リリース。
複数のバージョンを同時に動かして段階的なアップグレードを目的としたリリース。
関連してイベントのdelegateの仕組みの変更、新しいJSXの変換に対応している。
新しいJSXの変換については0.14.x, 15.x, 16.xへバックポートされている

Firefox 82.0, See All New Features, Updates and Fixes

www.mozilla.org/en-US/firefox/82.0/releasenotes/

Firefox ReleaseNote

Firefox 82リリース。
server-sent eventsのinspectのサポート、Media Session APIのデフォルト有効化、起動時のパフォーマンスの改善など。
また、クロスオリジンでのwindow.nameは常に空文字列を返すように変更された

Introducing Microsoft Edge preview builds for Linux - Microsoft Edge Blog

blogs.windows.com/msedgedev/2020/10/20/microsoft-edge-dev-linux/

MSEdge linux news

MSEdge Dev ChannelのLinuxビルドが公開された

Release v4.0.0 · facebook/create-react-app

github.com/facebook/create-react-app/releases/tag/v4.0.0

React Tools ReleaseNote

create-react-app 4.0.0リリース。
React 17/新しいJSXの変換の対応、TypeScript 4、ESLint 6、Jest 26へアップデート。
Fast Refresh、workboxの対応改善、Web Vitalsレポート対応の追加など

Release Notes for Safari Technology Preview 115 | WebKit

webkit.org/blog/11333/release-notes-for-safari-technology-preview-115/

safari ReleaseNote

Safari Technology Preview 115リリース。
Web Audio APIをprefixなしに変更、HTMLMediaElement.setSinkIdのサポート、CSS math-styleのサポートなど

Node v15.0.0 (Current) | Node.js

nodejs.org/en/blog/release/v15.0.0/

node.js ReleaseNote

Node.js 15.0リリース。
破壊的な変更としてN-API 7へアップデート、npm 7へアップデート、V8 8.6へアップデート、
unhandledRejection=throwをデフォルトに変更、URLの仕様追従。
AbortControllerとEventTargetのサポート、cryptoモジュールがWeb Crypto APIをサポート。
また、timers/promiseとstream/promisesの追加、実験的な機能としてQUICのサポート。

Sass: LibSass is Deprecated

sass-lang.com/blog/libsass-is-deprecated

Sass news

C++で書かれたLibSass(node-sass)が非推奨となった。
Dartで書かれたDartSass(sass)がメインで開発され、LibSassは機能追加や新しい構文のサポートはしないメンテナンスモードとなっている。

アーティクル

ブラウザとNode.jsで動く1kBのキーバリューストレージライブラリを書いた | Web Scratch

efcl.info/2020/10/23/kvs/

JavaScript TypeScript library article

ファイルサイズが小さなKey-Valueストレージライブラリ。
ブラウザ(IndexedDB、LocalStorage)、Node.js(ファイル)で動作し、マイグレーションAPI、TypeScriptでのスキーマをサポートしている

azu/kvs: Lightweight key-value storage library for Browser, Node.js, and In-Memory.

Cumulative Layout Shift in Practice | NicJ.net

nicj.net/cumulative-layout-shift-in-practice/

browser performance article

Cumulative Layout Shift (CLS)について。
CLSとはどのようなメトリクスなのか、適正なスコアとその計算式、CLSが悪いとどのような問題が起きやすいのかについて。
RUMとSyntheticでの計測ツールやライブラリ、Chrome Dev Toolsでのデバッグ方法について