2022-03-01のJS: Redux Toolkit 1.8.0、Node.js 17.6.0、CSS Cascade Layers

[azu]

Redux Toolkit 1.8.0がリリースされました。

• Release v1.8.0 · reduxjs/redux-toolkit

1.8.0では、新しい非同期MiddlewareとしてcreateListenerMiddlewareが追加されています。

• createListenerMiddleware | Redux Toolkit

createListenerMiddlewareはredux-sagaやredux-observableなど同じく非同期処理を扱うためのMiddlewareです。
シンプルなdispatchやgetStateなどのAPIや、redux-sagaをインスパイアしたtakeやTemporalをインスパイアしたconditionなど複雑なタスクを扱うAPIも持っています。

次の動画で、この新しいcreateListenerMiddlewareがどのように作られたのかを紹介しています。

• Redux Insights: the Redux Toolkit "action listener" middleware - YouTube
• New experimental "action listener middleware" package available · Discussion #1648 · reduxjs/redux-toolkit

---

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

• Node v17.6.0 (Current) | Node.js

Node v17.5.0でStreaｍに対して現在Stage 2のECMAScript ProposalであるIterator Helpersが実装されていました。
しかし、仕様に準拠した実装をした場合にmongooseなどのモジュールが動かなくなるリグレッションが発生したため、仕様への準拠を一部revertしています。

• Regression in Node 17.5, Assigning a function to prototype of an Object results in a TypeError: Cannot assign to read only property 'x' of object 'y' at Object. · Issue #41926 · nodejs/node

具体的にはIterator Helperの仕様では、mapなどのメソッドは{ [[Writable]]: false, [[Enumerable]]: false, [[Configurable]]: false }で実装されることなっています。

この場合、次のようにStreamのprototype.mapを上書きしようとする、Writableがfalseであるため、例外が発生してできません。

// [Writable]]: falseでは書き込めない
ReadableStream.prototype.map = function(fn) { // 例外が発生する
  // ..
};

mongooseなどで、このような代入が存在したため、[[Writable]]: falseを[[Writable]]: trueにする変更(revert)がNode.js 17.6.0に含まれています。(BREAKING CHANGEとなってしまったため)

• fix Node.js 17.5 compatibility by benjamingr · Pull Request #11381 · Automattic/mongoose
  • mongoose側での修正

---

A Complete Guide to CSS Cascade Layers | CSS-Tricks - CSS-Tricksという記事では、Chrome/Edge 99+、Firefox 97+、Safari Technology Preview 133で実装されている CSS Cascade Layers について紹介されています。

CSSでは、UA、!important、詳細度などによってどのスタイルが当たるかのCascadingの仕様があります。
この仕様にCascade Layersというものが追加され、各ブラウザでの実装が進んでいます。

この記事では、Cascade Layersの基本的な使い方、Important layers、Layerの優先度、sub layerについてなど書かれています。