JSer.info #544 - React 18のα版のリリースとReact 18での変更予定についての記事が公開されています。

The Plan for React 18 – React Blog

React 18のα版はライブラリのメンテナー向けで、これにあわせてReactのワーキンググループが作られています。
React 18の詳細な変更予定については、次のDiscussionsにまとめられて議論されています。

Discussions · reactwg/react-18

React 18の変更は基本的に ReactDOM.createRootという新しいAPIを使った場合のopt-in方式となっています。

全体的な概要は次のスレッドにまとめられています。

Introducing React 18 · Discussion #4 · reactwg/react-18

それぞれの変更のサマリは次のようになっています。

Replacing render with createRoot · Discussion #5 · reactwg/react-18
- ReactDOM.renderの代わりとなるReact.createRoot というRoot(Container)を作るためのAPIが追加された
- Legacy renderのAPIは互換性のために維持される
- React 18の機能変更や機能追加は、基本的にこの新しいReact.createRoot 以下のTreeに適応される
Automatic batching for fewer renders in React 18 · Discussion #21 · reactwg/react-18
- stateの変更が自動的にbatch処理(グループ化)して、レンダリングがまとめられる
- 以前あったunstable_batchedUpdatesに相当する処理
- 意図的にそれぞれの変更でレンダリングする方法としてReactDOM.flushSyncAPIが追加されている
Upgrading to React 18 on the server · Discussion #22 · reactwg/react-18
- Suspenseに対応したSSRをサポートするpipeToNodeWritableが追加される
- 詳細な仕組みはNew Suspense SSR Architecture in React 18 #37で解説されている
New feature: startTransition · Discussion #41 · reactwg/react-18
- 遷移中を表現するstartTransitionについて。遷移中に不要なレンダリングをストップさせて、応答性を維持する目的
Adding Strict Effects to StrictMode · Discussion #19 · reactwg/react-18
- バグを見つけるためにDevelopmentモードのStrictModeではコンポーネントを2重にレンダリングする
- mount → unmount → mountとすることで意図しないeffectを見つける
- How to support strict effects · Discussion #18 · reactwg/react-18

Deno 1.11がリリースされました。

公式のDocker Imageを追加、Web Crypto APIsの改善とcrypto.randomUUIDのサポート、Fetch APIがAbortSignalをサポートしています。
またdeno lintがStableとなり、deno compileでDynamic Importのサポート、Text{Encoder,Decodeer}Streamのサポートなども含まれています。

その他には、deno lspの改善やDeno APIがfile://なURLオブジェクトをサポートするようになっています。

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

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

JSer.info Sponsors

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

ヘッドライン

Release v7.0.0 · d3/d3

github.com/d3/d3/releases/tag/v7.0.0

JavaScript SVG d3.js library ReleaseNote

D3.js v7.0.0リリース。
ESMの対応、nullの対応を変更、d3.selectAllなどでArray-likeをArrayに変換して扱うように。
機能追加としてd3.mode、d3.flatGroup、d3.flatRollup、transition.selectChildの追加など

Release v0.7.0 · nextapps-de/flexsearch

github.com/nextapps-de/flexsearch/releases/tag/0.7.0

JavaScript search library ReleaseNote

JavaScriptで書かれた全文検索エンジンのflexsearch 0.7.0リリース。
一から書き直されている。
メモリ消費量やパフォーマンスの改善、Bidirectional Contextのサポート、Node.jsのworker_threadの対応など。

flexsearch/0.7.0.md at 0.7.0 · nextapps-de/flexsearch

Deno 1.11 Release Notes | Deno Blog

deno.com/blog/v1.11

deno ReleaseNote

Deno 1.11リリース。
Docker Imageの追加、Web Crypto APIsの改善とcrypto.randomUUIDのサポート、Fetch APIがAbortSignalをサポート。
またdeno lintがStableとなり、deno compileでDynamic Importのサポート、Text{Encoder,Decodeer}Streamのサポートなど。

Deno 1.11.0 がリリースされたので新機能や変更点の紹介

Release 2.16.0 · qunitjs/qunit

github.com/qunitjs/qunit/releases/tag/2.16.0

JavaScript testing library ReleaseNote

QUnit 2.16.0リリース。
QUnit.test.eachメソッド、failOnZeroTestsオプション、TAPレポーターの対応。
QUnit.moduleでPromiseを返した場合に警告がでるようになるなど

🎉 Announcing Plotly.js 2.0! - Graphing Library / Plotly.js - Plotly Community Forum

community.plotly.com/t/announcing-plotly-js-2-0/53675

JavaScript chart library ReleaseNote

Plotly.js 2.0リリース。
IE 9/10のサポート終了、非推奨のAPI、Plotly.plot()やplotly.d3などの削除。
CSPのusafe-evalへの対応、Custom Bundleの作成方法の追加など

Release v2.0.0 · plotly/plotly.js

CSS Layout Generator

layout.bradwoods.io/

CSS Tools

CSS Grid Layoutのジェネレーターツール。
CSS Gridのプロパティを変更しながら、どのような表示になるかを確認できる

Release 5.0.0 · Unitech/pm2

github.com/Unitech/pm2/releases/tag/5.0.0

node.js Tools ReleaseNote

Nodeのプロセス管理ツールのpm2 5.0.0リリース。
ローカルのシステムモニタリングが新しくなり、サーバメトリクスの表示が追加された。
pm2.io へ送信するデータをJSON Patchベースの差分にすることで転送量の削減など

Introducing Astro: Ship Less JavaScript

astro.build/blog/introducing-astro

JavaScript Tools ReleaseNote performance

JavaScriptを含まない静的サイトを生成できるSSGツール。
Island Architectureのようにインタラクティブな部分だけJavaScriptを含んだコンポーネントを利用できるようになっている。

snowpackjs/astro: 🚀🧑‍🚀 Keep your eyes to the skies, astronauts!

The Plan for React 18 – React Blog

reactjs.org/blog/2021/06/08/the-plan-for-react-18.html

React ReleaseNote

React 18のαリリースと変更予定について。
Automatic batchingとflushSyncの追加、SuspenseのSSRサポートとpipeToNodeWritableの追加、Concurrentモードのopt-inサポート。
新しいrender APIであるcreateDOMの追加、バグを見つけるためにStrictModeではコンポーネントを2重にレンダリングするようなるなど。
また、ReactのWorking Groupのリポジトリが作成されている。

Release v0.153.0 · facebook/flow

github.com/facebook/flow/releases/tag/v0.153.0

flowtype ReleaseNote

Flow 0.153.0リリース。
thisを使うクラスのメソッドを変数に入れてthisのbindの解除をエラーとするように、flow fixコマンドで自動修正を適用できるように

Sound Typing for “this” in Flow. In our most recent post, we alluded to… | by Daniel Sainati | Flow | Jun, 2021 | Medium

アーティクル

Introducing libSquoosh

web.dev/introducing-libsquoosh/

node.js Image library article

リサイズや圧縮などの画像処理を行うSquooshをライブラリとして利用できるlibSquooshの紹介記事。

squoosh/libsquoosh at dev · GoogleChromeLabs/squoosh

Introducing the Memory Inspector - Chrome Developers

developer.chrome.com/blog/memory-inspector/

Chrome article

Chrome 91でDevToolsに追加されたMemory Inspectorについての記事。
ArrayBuffersのバイトをエンディアンを選択して見れる。またDWARFを使うことでC++やWasmのメモリも見れることについて

Strykerを使ってTypeScriptでMutation Testingする

zenn.dev/daikik/articles/8cd20776991a9c

JavaScript testing article

Stryker-jsを使ったMutation Testingについて。

Securing Your Website With Subresource Integrity | CSS-Tricks

css-tricks.com/securing-your-website-with-subresource-integrity/

security JavaScript article

JavaScriptを配布するCDNやS3 bucketなどが書き換えられた場合にウェブサイトへの軽減するためのSubresource Integrity (SRI)の使い方についての記事。

What's coming in ESLint v8.0.0 - ESLint - Pluggable JavaScript linter

eslint.org/blog/2021/06/whats-coming-in-eslint-8.0.0

ESLint article

ESLint v8.0.0の変更予定について。
破壊的な変更として、Node 10のサポート終了、meta.hasSuggestionsとmeta.fixableがそれぞれ必須に、CLIEngineの削除など。
またES2022のサポート、利用してないeslint-disableディレクトリの--fixに対応などを予定している。