Fork me on GitHub

2022-03-15のJS: React 18 RC、playwright v1.20.0、Safari 15.4の変更点

Edit on GitHub 編集履歴を見る

JSer.info #583 - React 18 RCがリリースされました。

React 18 RCではIEのサポートが終了しています。

ReactDOMのrender APIをDeprecatedとし、createRoot APIの利用が推奨となっています。
SSR APIのrenderToNodeStreamを非推奨化し、SuspenseをサポートしたrenderToPipeableStreamrenderToReadableStreamが追加されています。

setStateなどのステート更新を自動的にバッジ処理するようにし、React 17の挙動を再現するためのflushSyncAPIが追加されています。
また、ReduxなどのReact外でステート管理するライブラリ向けにuseId/useSyncExternalStore/useInsertionEffect APIを追加。

その他には、開発時の<StrictMode>ではunmountとmountでの再マウントをテストするように挙動を変更されています。global.IS_REACT_ACT_ENVIRONMENTでテスト環境かどうかを判定するように変更されています。


playwright 1.20.0がリリースされました。

playwright 1.20.0では、スクリーンショットAPIにアニメーションの無効化、特定の箇所を隠すmaskオプションの追加されています。
expect().toMatchSnapshot()がanomymouse snapshotsのサポート、maxDiffPixelsmaxDiffPixelRatioオプションの追加されています。
また、テストファイルのテストケースごとに並列化をするfullyParallelモードのオプションが追加されています。


New WebKit Features in Safari 15.4 | WebKitでは、Safari 15.4の変更点についてまとめられています。

かなり色々な機能追加がありますが、主に次のような変更が含まれています。

  • <dialog>要素のサポート
  • CSSの:has()擬似クラス
  • Cascade Layers
  • CSS Containmentのサポート。
  • Viewport Unitsとしてlvhsvhなどのサポート
  • :focus-visible擬似クラスのサポート
  • calc()でのmath functionのサポート
  • 非標準な-webkit- prefixをいくつかのCSSプロパティから削除
  • BroadcastChannelのサポート
  • window.scrollscroll-behaviorプロパティのサポート
  • structuredClone APIのサポート
  • File System Access APIのサポート
  • ES2022のat()メソッドとObject.hasOwn()メソッドのサポート
  • Stage 3のECMAScript ProposalであるfindLast()メソッドのサポート
  • Intlの実装を仕様に準拠するように更新
  • Web App Manifestの対応改善
  • navigationPreloadのサポートなど
  • requestVideoFrameCallback()のサポート
  • CSP Lv3のサポート改善
  • XSS Auditorの削除

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

JSer.info Sponsors

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


ヘッドライン


How to Upgrade to the React 18 Release Candidate – React Blog

reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

React ReleaseNote

React 18 RCリリース。
IEのサポートを終了。
ReactDOMのrender APIをDeprecatedとし、createRoot APIの利用を推奨するように。
SSR APIのrenderToNodeStreamを非推奨化し、SuspenseをサポートしたrenderToPipeableStreamrenderToReadableStreamを追加。
setStateのステート更新を自動的にバッジ処理するようにし、オプトアウト用のflushSyncAPIを追加。
また、ReduxなどのReact外でステート管理するライブラリ向けにuserId/useSyncExternalStore/useInsertionEffect APIを追加。
開発時は<StrictMode>でunmountとmountでの再マウントをテストするように挙動を変更。
global.IS_REACT_ACT_ENVIRONMENTでテスト環境かどうかを設定できるように。


Node v17.7.0 (Current) | Node.js

nodejs.org/en/blog/release/v17.7.0/

node.js ReleaseNote

Node.js v17.7.0リリース。
net.Socketnet.ServernoDelay/keepAlive/keepAliveInitialDelayオプションの追加など


Release v8.0.0 · vueuse/vueuse

github.com/vueuse/vueuse/releases/tag/v8.0.0

Vue library ReleaseNote

vueuse v8.0.0リリース。
@vueuse/core/nuxtを削除し、代わりに@vueuse/nuxtを公開。
useTimeoutPoll/useDateFormat/useGamepad/useFileSystemAccess/useChangeCaseの追加など


Release v8.0.0 · breejs/bree

github.com/breejs/bree/releases/tag/v8.0.0

node.js library ReleaseNote

JobスケジューラーのBree 8.0.0リリース。


Release v1.20.0 · microsoft/playwright

github.com/microsoft/playwright/releases/tag/v1.20.0

browser library ReleaseNote

playwright v1.20.0リリース。
スクリーンショットAPIにアニメーションの無効化、特定の箇所を隠すmaskオプションの追加。
expect().toMatchSnapshot()がanomymouse snapshotsのサポート、maxDiffPixelsmaxDiffPixelRatioオプションの追加。
テストの設定にテストケースごとの並列化もするfullyParallelモードを追加など


New WebKit Features in Safari 15.4 | WebKit

webkit.org/blog/12445/new-webkit-features-in-safari-15-4/

webkit safari ReleaseNote

Safari 15.4の変更点について。
<dialog>要素のサポート、CSSの:has()擬似クラス、Cascade Layers、CSS Containmentのサポート。
Viewport Unitsとしてlvhsvhなどのサポート、:focus-visible擬似クラスのサポート、calc()でのmath functionのサポート。
非標準な-webkit- prefixをいくつかのCSSプロパティから削除。
BroadcastChannel、window.scrollscroll-behaviorプロパティ、structuredClone、File System Access APIのサポート。
ES2022のat()メソッドとObject.hasOwn()メソッド、Stage 3のProposalであるfindLast()メソッドのサポートなど。
Intlの実装を仕様に準拠するように更新、Web App Manifestの対応改善、navigationPreloadのサポートなど。
requestVideoFrameCallback()のサポート、CSP Lv3のサポート改善、XSS Auditorの削除など


アーティクル


Learn PWA

web.dev/learn/pwa/

PWA tutorial

PWAについて学べるチュートリアル。


Typed Ember is now the Ember TypeScript Core Team!

blog.emberjs.com/typed-ember-is-now-the-ember-type-script-core-team/

Ember TypeScript article

EmberのTypeScriptサポートをコアのサブチームとして進めるという話。
Ember CLIへの統合、Glintでのテンレプーと型チェック、Ember自体の型定義の改善、RFCのTypeScriptへの影響調査などを行うチーム


A Proposal For Type Syntax in JavaScript - TypeScript

devblogs.microsoft.com/typescript/a-proposal-for-type-syntax-in-javascript/

TypeScript ECMAScript article

TypeScriptチームが、実行時には消去可能なコメントとしての型構文をECMAScriptのProposalとして提案するという話


JavaScript naming conflicts: How existing code can force proposed features to be renamed

2ality.com/2022/03/naming-conflicts.html

JavaScript ECMAScript issue

ECMAScriptの新しいProposalが既存のWebを壊すbreak the webがどのように起きるかについての解説記事。
ビルトインのprototoypeの変更、プロパティ名の競合、グローバル名の衝突、withによる衝突など


WebGPU — All of the cores, none of the canvas — surma.dev

surma.dev/things/webgpu/

WebGPU article

WebGPUについて解説記事。
WebGLはOpenGLのラッパーであるが、WebGPUは独自の抽象化レイヤーを持っている、またWGSLというWebGPUのシェーディング言語について


ソフトウェア、ツール、ライブラリ関係


daisyUI — Tailwind CSS Components

daisyui.com/

CSS library

UIコンポーネントの見た目を提供するTailwindプラグイン。
クラス名にコンポーネントの指定することでUIを定義し、カスタムはクラス名にTailwindのUtilityを指定することで行う


書籍関係


Micro State Management with React Hooks | Packt

www.packtpub.com/product/micro-state-management-with-react-hooks/9781801812375

React library book

Reactでのステート管理について書籍


この記事へ修正リクエストをする
JSer.info Slackに参加する