JSer.info #563 - Yarn 3.1がリリースされました。

yarn init -2でNode v16.9.0からサポートされたCorepackのpackageManagerフィールドに対応しています。

また、PnPでのEMSサポート、新しいインストールモードとしてnodeLinker: pnpmのサポートしています。
また、optionalDependenciesで指定したアーキテクチャだけをダウンロードするsupportedArchitecturesの設定を追加しています。いままでのYarnはoptionalDependenciesで指定された依存をすべてダウンロードしていたため、esbuildなどのアーキテクチャごとのバイナリをoptionalDependenciesでしているパッケージではダウンロードに時間がかかっていました。

Different strategy for installing platform-specific binaries · Issue #789 · evanw/esbuild

Node.js 16.13.0がリリースされました。このバージョンからNode.js 16.xのLTSが開始されます。

Node v16.13.0 (LTS) | Node.js

Node.js 16.xのLTSは2024-04-30までメンテナンスがサポートされる予定です。

Releases | Node.js

Next.js 12がリリースされました。

Blog - Next.js 12 | Next.js

SWCベースのビルドに対応、pages/_middleware.jsを使ったMiddlwareの対応、React 18(Server-Side StreamingとReact Server Components)に対応しています。
また、webpackのbuildHttpを使ったURL Importsに対応し、URLを直接ES Modulesとしてインポートしnext.lockのロックファイルで管理できるようになります。
また、クローラーbotに対するISRの最適化、AVIFの対応なども含まれています。

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

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

JSer.info Sponsors

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

ヘッドライン

Chromium Blog: Chrome 96 Beta: Conditional Focus, Priority Hints, and More

blog.chromium.org/2021/10/chrome-96-beta-conditional-focus.html

Chrome ReleaseNote

Chrome 96 betaリリース。
Chromeバージョン 100をテストできるフラグの追加。
Origin TrialとしてConditional Focus、Priority Hintsの追加。
BFCacheがDeskopでも有効化、CSS :autofill擬似クラスとMedia Queryのprefers-contrastをサポート。
HTTPS DNS Recordsのサポート、WebAssemblyのCSP対応でwasm-unsafe-evalをサポートなど

[Early Preview] New React Documentation by rachelnabors · Pull Request #3965 · reactjs/reactjs.org

github.com/reactjs/reactjs.org/pull/3965

React issue document

Reactの新しいドキュメントのベータ版がリリース

Security issue: compromised npm packages of ua-parser-js (0.7.29, 0.8.0, 1.0.0) - Questions about deprecated npm package ua-parser-js · Issue #536 · faisalman/ua-parser-js

github.com/faisalman/ua-parser-js/issues/536

npm security issue news

マルウェアを含むua-parser-js 0.7.29/0.8.0/1.0.0が公開されていたため、
それぞれpatch versionとして0.7.30/0.8.1/1.0.1がリリースされた。

Newly Found npm Malware Mines Cryptocurrency on Windows, Linux, macOS Devices

Yarn 3.1 🎃👻 Corepack, ESM, pnpm, Optional Packages ... - DEV Community 👩‍💻👨‍💻

dev.to/arcanis/yarn-31-corepack-esm-pnpm-optional-packages--3hak

yarn ReleaseNote

Yarn 3.1リリース。
yarn init -2でCorepackの対応、PnPでのEMSサポート、nodeLinker: pnpmのサポート。
optionalDependenciesで指定したアーキテクチャだけをダウンロードするsupportedArchitecturesの設定を追加、wrokspacesコマンドに--sinceフラグの追加

Release v1.2.0 - Masters of the Universe · solidjs/solid

github.com/solidjs/solid/releases/tag/v1.2.0

jsx ReleaseNote library

Solid v1.2.0リリース。
Custom Rendererのサポート、htmlテンプレートリテラルでSpread構文のサポートなど

Node v16.13.0 (LTS) | Node.js

nodejs.org/en/blog/release/v16.13.0/

node.js ReleaseNote

Node.js 16のLong Term Support (LTS)となる16.13.0がリリースされた。
2024-04-30までメンテナンスされる。

Blog - Next.js 12 | Next.js

nextjs.org/blog/next-12

Next.js ReleaseNote

Next.js 12リリース。
SWCベースのビルドに対応、Middlwareの対応、React 18(Server-Side StreamingとReact Server Components)に対応。
webpackのbuildHttpを使ったURL Importsに対応、クローラーbotに対するISRの最適化、AVIFの対応など

アーティクル

Optimizing resource loading with Priority Hints

web.dev/priority-hints/

Chrome browser article performance

Chrome 96 betaでのOrigin Trialで実装されたPriority Hintsについて。
importance属性を使ってリソースロードの優先度のHintを定義できる。

TypeScript 4.5 以降で ESM 対応はどうなるのか？

zenn.dev/teppeis/articles/2021-10-typescript-45-esm

TypeScript article

TypeScriptのESM対応について。

Monitor your web application with the Reporting API

web.dev/reporting-api/

Chrome browser article

Chrome 96から利用できるReporting-Endpointsについて。
Report-ToはDeprecatedとなりReporting-Endpointsを使うようになる。
CSPエラー、ネットワークエラー、ポリシーエラーのレポート先を指定できる

New WebKit Features in Safari 15 | WebKit

webkit.org/blog/11989/new-webkit-features-in-safari-15/

safari article

Safari 15の変更点について。
WebExtensionsの対応、theme-colorの対応、CSSのaspect-ratio、list-style-typeに新しい属性値の追加など。
JavaScriptのTop-Level await、Error Cause、Private class methodsの対応。
また、WebGL 2、Web Share API、1秒以内の制限付きでrequestAnimationFrameを間に入れたユーザージェスチャが伝搬するようになるなど。
その他には、iPadでのVP9/WebMのハードウェアアクセラレーション対応、Private Click Measurementの更新、autocomplete=one-time-codeの対応など