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

Node.js 10のサポート終了、.pnp.cjsにリネーム、@yarnpkg/pnpifyを3つのパッケージに分解などの変更を含んでいます。

@yarnpkg/sdks: Editor SDKs
@yarnpkg/pnpify: PnPと互換性のないツールを実行するツール
@yarnpkg/nm: node_modules linker

また、 exportsフィールドのサポート、pnpmライクなハードリンクのサポート、シェル構文のサポート改善、 ESBuildでのbundleをサポートする@yarnpkg/esbuild-plugin-pnpの追加なども含まれています。

Chrome 93 betaがリリースされました。

Chromium Blog: Chrome 93: Multi-Screen Window Placement, PWAs as URL Handlers, and More

Origin TrialとしてCOEPの導入をより手軽にするためのCross-Origin-Embedder-Policy：credentialless、URL Handlersの追加などが含まれています。
また、 AbortSignal.abort()メソッドのサポート、Stage 3のError causeとObject.hasOwnのサポートも含まれています。

ダークモード対応などではCSSのprefers-color-scheme media queryを使い、ユーザーエージェントがどのcolor schemeを優先するかを判定していました。しかし、CSSではページロード後となるため、ページロード時にその判定ができるようにClient Hint HeaderのSec-CH-Prefers-Color-Schemeが追加されています。
また、navigator.userAgentやUser-Agentヘッダの後継となる、User-Agent Client Hintsに関するAPIやヘッダの変更も含まれています。

Migrate to User-Agent Client Hints

Chrome 92では、cross originのiframe内からwindow.{alert, prompt, confirm}が利用できなくなりました。

1065085 - Implement window.{alert, prompt, confirm} removal from cross-origin iframes - chromium

この問題への対処方法として、次のような方法があげられています。

~~Chrome 96(12月)まで有効な~~Reverse Origin Trialを有効化する
ダイアログUIを自作する方法
postMessageを使って親ドキュメントでダイアログを出す方法

この影響で、CodePenなどのiframeを使ってコードを実行する環境、Google Apps Scriptをウェブサイトとして公開しているケース、Salesforceの一部機能などが動かなくなるなどの影響が出ています。
いくつかのウェブサイトで影響があったため、Chromeでは~~2021年8月15日まで無効化されています。(Reverse Origin Trialのための猶予期間)~~2022年1月まで延期されています。

他のブラウザもこの仕様に追従する予定となっています。

詳しくは次のページも参照してください。

Cross Origin iframe からの alert/confirm/prompt 呼び出しの無効化 | blog.jxck.io

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

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

JSer.info Sponsors

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

ヘッドライン

Headless UI v1.4: The One With Tabs – Tailwind CSS

blog.tailwindcss.com/headless-ui-v1-4

React Vue JavaScript library ReleaseNote

Headless UI 1.4リリース。
Tagコンポーネントの追加、DisclosuresとPopoverのPanel内にButtonを置くとPanelを閉じれるように

Yarn 3.0 🚀🤖 Performances, ESBuild, Better Patches, ... - DEV Community 👩‍💻👨‍💻

dev.to/arcanis/yarn-3-0-performances-esbuild-better-patches-e07

yarn ReleaseNote

Yarn 3.0リリース。
Node.js 10のサポート終了、.pnp.cjsにリネーム、@yarnpkg/pnpifyを3つのパッケージに分解など。
exportsフィールドのサポート、pnpmライクなハードリンクのサポート、シェル構文のサポート改善、 ESBuildのサポートなど

berry/CHANGELOG.md at master · yarnpkg/berry

Release 3.16.0 - 2021.07.30 · zloirock/core-js

github.com/zloirock/core-js/releases/tag/v3.16.0

JavaScript polyfill library ReleaseNote

core.js 3.16.0リリース。
Stage 3のArray#findLast、Stage 1のArray#filterOutとArray#groupByのサポート。
Denoのサポートなど

Node v16.6.0 (Current) | Node.js

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

node.js ReleaseNote

Node.js 16.6.0リリース。
V8 9.2へアップデート、http2のセキュリティ修正など

V8 release v9.2 · V8

Recoil 0.4 | Recoil

recoiljs.org/blog/2021/07/30/0.4.0-release/

React JavaScript library ReleaseNote

Recoil 0.4リリース。
キャッシュポリシーをcachePolicy_UNSTABLEで設定できるように、トランザクションをするuseRecoilTransaction_UNSTABLEで利用できるように。
TypeScriptの型改善など

Chromium Blog: Chrome 93: Multi-Screen Window Placement, PWAs as URL Handlers, and More

blog.chromium.org/2021/07/chrome-93-multi-screen-window-placement.html

Chrome ReleaseNote

Chrome 93 betaリリース。
Origin TrialとしてCross-Origin-Embedder-Policy：credentialless、URL Handlersの追加など。
AbortSignal.abort()メソッドのサポート、Stage 3のError causeとObject.hasOwnのサポート。
Client Hint HeaderのSec-CH-Prefers-Color-Schemeの追加やUA Client Hintの更新など

1065085 - Implement window.{alert, prompt, confirm} removal from cross-origin iframes - chromium

bugs.chromium.org/p/chromium/issues/detail?id=1065085

Chrome security DOM news

Chrome 92でcross origin iframeからのalert/dialog/promptが無効化された。
回避方法として、Chrome 96まで有効なReverse Origin Trial、ダイアログUIを自作する方法、postMessageを使って親ドキュメントでダイアログを出す方法など。